The latest articles on DEV Community by Karen Borrero (@keba2503). https://dev.to/keba2503 https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3850804%2Fb82273ba-c891-41e9-a6be-27c16a737f7a.jpg https://dev.to/keba2503 en Karen Borrero Tue, 05 May 2026 12:57:10 +0000 https://dev.to/keba2503/designmd-el-archivo-que-le-ensena-a-la-ia-a-disenar-como-un-profesional-46d6 https://dev.to/keba2503/designmd-el-archivo-que-le-ensena-a-la-ia-a-disenar-como-un-profesional-46d6 <blockquote> <p>Artículo original en <a href="https://karenborrero.dev/blog/design-md-ia-tokens-diseno-refero" rel="noopener noreferrer">karenborrero.dev</a></p> </blockquote> <p>Hace unos días encontré <a href="https://styles.refero.design" rel="noopener noreferrer">styles.refero.design</a> y tardé exactamente diez minutos en entender que cambia la forma en que trabajo con herramientas de IA.</p> <p>No es una librería de componentes. No es un generador de UI. No es otro Figma.</p> <p>Es algo más simple y más poderoso: una colección de archivos <strong>DESIGN.md</strong> 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.</p> <h2> El problema que nadie nombra en voz alta </h2> <p>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.</p> <p>Le das instrucciones funcionales. No le das el sistema visual.</p> <h2> Qué es un archivo DESIGN.md exactamente </h2> <p>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:</p> <ul> <li>Paleta de colores con nombres semánticos (<code>--color-brand-primary</code>, no <code>#6366f1</code>)</li> <li>Tipografía: familias, tamaños, pesos y cuándo usar cada uno</li> <li>Espaciado y grid</li> <li>Radios de borde, sombras, estados de componentes</li> <li>Tono visual: cuándo usar qué variante</li> </ul> <p>💡 <strong>La diferencia clave entre tokens JSON y DESIGN.md:</strong> el JSON define valores, el DESIGN.md define valores <em>más el contexto semántico</em> de cuándo y cómo usarlos. La IA necesita los dos.</p> <h2> styles.refero.design: la colección que lo cambia todo </h2> <p>Refero tiene los DESIGN.md de sistemas como Supabase, Linear, Vercel, Stripe y más de 2.000 productos más.</p> <p>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.</p> <h2> Ejemplo real: construir con el sistema de Supabase </h2> <div class="highlight js-code-highlight"> <pre class="highlight shell"><code><span class="c"># 1. Descargas el DESIGN.md de Supabase desde Refero</span> <span class="c"># 2. Lo pones en la raíz del proyecto</span> <span class="c"># 3. Le dices a Claude Code:</span> <span class="s2">"Crea un dashboard de métricas siguiendo el sistema de diseño del DESIGN.md"</span> </code></pre> </div> <p>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.</p> <h2> El MCP de Refero </h2> <p>Refero también tiene un MCP server que inyecta el design system directamente en tu editor sin necesidad de copiar el archivo manualmente.</p> <p>🔍 <strong>Tip:</strong> 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.</p> <h2> Por qué esto importa más allá de la comodidad </h2> <p>Un DESIGN.md también sirve como <strong>documentación viva de tu propio sistema de diseño</strong>.</p> <p>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.</p> <p>👉 <strong>Guía completa en <a href="https://karenborrero.dev/blog/design-md-ia-tokens-diseno-refero" rel="noopener noreferrer">karenborrero.dev</a></strong></p>