Artículo original en karenborrero.dev

Hace unos días encontré styles.refero.design y tardé exactamente diez minutos en entender que cambia la forma en que trabajo con herramientas de IA.

No es una librería de componentes. No es un generador de UI. No es otro Figma.

Es algo más simple y más poderoso: una colección de archivos DESIGN.md con los tokens de diseño reales de más de 2.000 productos y empresas, listos para que tu agente de IA los lea y los aplique desde el primer prompt.

El problema que nadie nombra en voz alta

Cuando usas Claude Code, Cursor o cualquier agente para generar UI, el resultado por defecto siempre se parece al mismo diseño genérico. No porque el modelo sea malo — sino porque no tiene contexto de diseño.

Le das instrucciones funcionales. No le das el sistema visual.

Qué es un archivo DESIGN.md exactamente

Un DESIGN.md es un archivo de texto que vive en la raíz de tu proyecto y contiene los tokens de diseño en formato que un LLM puede leer y aplicar:

• Paleta de colores con nombres semánticos (--color-brand-primary, no #6366f1)
• Tipografía: familias, tamaños, pesos y cuándo usar cada uno
• Espaciado y grid
• Radios de borde, sombras, estados de componentes
• Tono visual: cuándo usar qué variante

💡 La diferencia clave entre tokens JSON y DESIGN.md: el JSON define valores, el DESIGN.md define valores más el contexto semántico de cuándo y cómo usarlos. La IA necesita los dos.

styles.refero.design: la colección que lo cambia todo

Refero tiene los DESIGN.md de sistemas como Supabase, Linear, Vercel, Stripe y más de 2.000 productos más.

En lugar de construir el tuyo desde cero, descargas el del producto cuyo visual se acerca a lo que quieres, lo pones en la raíz del proyecto, y tu agente lo lee automáticamente.

Ejemplo real: construir con el sistema de Supabase

# 1. Descargas el DESIGN.md de Supabase desde Refero
# 2. Lo pones en la raíz del proyecto
# 3. Le dices a Claude Code:

"Crea un dashboard de métricas siguiendo el sistema de diseño del DESIGN.md"

El resultado: componentes que respetan la paleta real, la tipografía real y los estados de hover/focus del sistema — sin que tengas que especificar un solo color en el prompt.

El MCP de Refero

Refero también tiene un MCP server que inyecta el design system directamente en tu editor sin necesidad de copiar el archivo manualmente.

🔍 Tip: Si tu cliente ya usa un producto cuyo sistema está en Refero, muéstrale el DESIGN.md en la primera reunión. Es la forma más rápida de alinear expectativas visuales antes de escribir una línea de código.

Por qué esto importa más allá de la comodidad

Un DESIGN.md también sirve como documentación viva de tu propio sistema de diseño.

Documentas tus tokens una vez → todos los agentes que participen en el proyecto los respetan automáticamente. Sin briefings visuales repetidos, sin "hazlo más parecido al diseño original" en cada iteración.

👉 Guía completa en karenborrero.dev