Tus agentes IA generan interfaces genéricas que parecen de 2015. No es culpa del modelo: es que no le estás pasando referencias de diseño reales.
Qué vas a aprender
- Qué es styles.refero.design y cómo sacarle partido con Claude Code, Cursor o Windsurf
- Cómo pasar un DESIGN.md real (colores, tipografía, espaciado exactos) a tu agente para que deje de alucinar diseños
- A adaptar tokens de ElevenLabs, Linear o Mercury sin copiar el sistema entero
- El flujo: encontrar estilo → copiar DESIGN.md → pegarlo al agente → UI que no parece hecha por IA
01 · Styles.refero.design no es otro Pinterest de diseño
Refero Styles tiene más de 2.000 DESIGN.md de productos reales. Apple, ElevenLabs, Linear, Mercury, Ramp, Claude.ai, varios cientos más. La gracia no es que sean lindos (lo son), sino que tu agente de código los entiende.
Cada estilo trae:
- Paleta completa con valores hex y para qué se usa cada color
- Sistema de tipografía con fuentes, pesos, tamaños, interlineado
- Escala de espaciado y radios de borde por componente
- Componentes documentados: botones, inputs, cards, navegación, con CSS listo
- Salida en 3 formatos: CSS custom properties, Tailwind v4, design tokens
- Agent Prompt Guide: instrucciones para que tu agente reproduzca cada pieza
Le pasás un DESIGN.md a Claude Code y el agente ya no adivina cómo debería verse. Lo sabe. Tiene el hex exacto del fondo, el nombre de la fuente, el radio del botón.
Un ejemplo concreto: el estilo de ElevenLabs describe un sistema con fondo #fdfcfc, cards en #f5f3f1, titulares en Waldenburg weight 300, cuerpo en Inter. Copiás ese DESIGN.md, se lo pasás a tu agente, y la UI que te genera va a tener el mismo tratamiento visual — no el template por defecto que viene en la cabeza del modelo.
02 · Cómo encontrar el estilo que realmente necesitas
La página tiene tres secciones.
DESIGN.md examples (/ai-agents/design-md-examples) es el catálogo principal. Filtrás por Trending, Popular o Newest. Cada card te muestra un screenshot, el nombre de la marca y una línea de qué va el estilo.
AI design resources (/ai-agents/design-resources) tiene paletas sueltas y guías más específicas.
Design prompts (/ai-agents/design-prompts) son prompts que podés pegarle directamente a tu agente. Útil si no querés leer el DESIGN.md completo.
La pregunta correcta no es "cuál es el más bonito". Es:
| Qué construye tu agente | Estilos que calzan |
|---|---|
| SaaS B2B serio | Mercury, Ramp, LaunchDarkly |
| App de voz / audio | ElevenLabs, Aqua Voice |
| Herramienta para devs | Warp, Linear, Vercel |
| E-commerce | Apple, Awesomic |
Si tu agente solo arma landing pages, no necesitás el sistema de 45 componentes de Mercury. Buscá algo más chico.
03 · El flujo: del estilo a tu UI en 3 pasos
Paso 1: Encontrar y copiar
Entrás a styles.refero.design/style/[slug]. En la vista de detalle, pestaña DESIGN.md. Ahí está el archivo completo. Lo copiás.
También podés exportar directo a CSS, Tailwind v4 o design tokens, según cómo esté armado tu proyecto.
Paso 2: Pasárselo al agente
La forma más directa:
Sistema de diseño: [pegá el DESIGN.md completo]
Ahora, usando EXACTAMENTE estos tokens, construí [lo que necesites].
Si tenés el Refero MCP configurado (lo explico más abajo), el agente puede buscar el estilo solo.
Paso 3: Corregir sobre el resultado, no sobre el prompt
El primer intento rara vez queda perfecto. En vez de decirle "arreglá el botón", decile:
"El botón principal debería tener bg #000000 y border-radius 9999px, como dice el DESIGN.md en la sección Black Filled Pill Button."
Apuntá al token exacto que está en el archivo. Así el agente entiende qué corregir sin adivinar.
04 · El Refero MCP acelera todo esto
Refero tiene un MCP (Model Context Protocol) que conecta directo a tu agente de código. Con esto, el agente puede buscar estilos por nombre o categoría sin que copies nada.
Para instalarlo, agregás esto a tu claude_settings.json (o el equivalente en Cursor/Windsurf):
{
"mcpServers": {
"refero": {
"command": "npx",
"args": ["-y", "@refero/design-mcp"]
}
}
}
Después de eso, le decís a tu agente "buscá el diseño de Mercury y aplicá sus tokens a esta landing", y el MCP se encarga de todo. El agente consulta, recibe el DESIGN.md, extrae los tokens y los aplica.
05 · Cómo no volverte loco adaptando estilos
No todos los estilos calzan justo a tu proyecto. Tres movidas que funcionan:
Agarrar solo los colores. Si ya tenés una base, no necesitás todo el sistema:
:root {
--color-canvas: #fdfcfc;
--color-card: #f5f3f1;
--color-border: #e5e5e5;
--color-primary: #000000;
--color-accent: #5e6ad2; /* este es tuyo, no del sistema */
}
Combinar dos estilos. Colores de ElevenLabs con tipografía de LaunchDarkly. No hay regla que lo prohíba.
Sacar solo lo que usás. Si tu agente construye formularios, extraé solo inputs, botones y labels del DESIGN.md. Ignorá el resto.
06 · Tu banco personal de estilos
Con el tiempo, vas a tener favoritos. Guardalos así:
En archivos locales:
_proyecto-x/
design-system.md
tokens.css
O creá un archivo design-tokens.md en el repo de cada proyecto que combine extractos de varios estilos de Refero:
# Design tokens del proyecto X
Basado en ElevenLabs (colores y espaciado) + Linear (tipografía).
Siempre que construyas UI para este proyecto, usá los tokens de abajo.
Con el MCP, ni siquiera necesitás guardarlos. Pero tener un archivo en el repo te da un fuente de verdad que compartís con el equipo (y con el agente).
07 · Reglas que aprendí usándolo
Elegí un estilo por proyecto y mantenelo. Cambiar a mitad de camino confunde al agente y te regresa a diseño inconsistente.
Si el DESIGN.md no tiene valores exactos, no sirve. Si solo dice "fondo claro, tipografía moderna", buscá otro. Necesitás hex y píxeles.
El MCP no reemplaza tu criterio. Que el agente tenga 2.000 estilos no significa que sepa cuál elegir. Decile "buscá un estilo oscuro con acento violeta, tipo dashboard".
Actualizá cada 3-6 meses. El diseño de Apple hoy no es el de 2024. Volvé a Refero a refreshar.
Probá con alguien real. Que se vea como ElevenLabs no significa que tu audiencia entienda la interfaz. El diseño comunica, no solo decora.
Nunca le pidas al agente que "invente" un sistema de diseño. Sin una referencia, va a alucinar colores y radios que no existen en tu proyecto. Siempre parte de algo real.
Guías relacionadas
- Cómo escribir prompts que funcionan
- Superpowers: el framework que hace que Claude Code programe solo
- Marketing Skills para Claude Code