Si le pedís a una IA que te diseñe algo sin darle más que una frase, te va a devolver la misma estética genérica que le devuelve a cualquier otra marca. El archivo que resuelve esto se llama DESIGN.md, y funciona para el diseño igual que un CLAUDE.md funciona para el contenido.
Sin archivo, la IA diseña genérico
01 · ¿Qué es un archivo DESIGN.md?
Un DESIGN.md es una especificación abierta para describir la identidad visual de un proyecto en un único archivo que cualquier agente de IA puede leer. Combina tokens de diseño en YAML (colores, tipografía, espaciado, componentes) con una descripción en prosa markdown que explica el porqué de esas decisiones.
No es una herramienta cerrada ni un producto que haya que pagar: es un formato de texto plano, documentado, con una CLI oficial para validarlo. Google Labs lo resume con una analogía simple.
| Archivo | Lo lee | Define |
|---|---|---|
| README.md | Humanos | Qué es el proyecto |
| CLAUDE.md / AGENTS.md | Agentes de código o contenido | Cómo construir o redactar |
| DESIGN.md | Agentes de diseño | Cómo debe verse y sentirse |
Todos los proyectos y todas las marcas tienen identidad visual: paleta, tipografías, componentes, tono. El problema es que esa identidad suele vivir en Figma, en un PDF de marca o en la cabeza de un diseñador que ya no trabaja con vos. Nada de eso lo puede leer un agente. Un DESIGN.md sí.
¿Querés que tus agentes de IA diseñen siempre con la cara de tu marca?
Armamos el archivo de contexto de marca (visual y de voz) que usan tus agentes de IA para dejar de generar diseños y textos genéricos.
Ver cómo aplicarlo a mi marca02 · ¿En qué se diferencia de tu CLAUDE.md?
Si ya armaste el CLAUDE.md de tu marca para que un agente escriba con tu voz, el DESIGN.md es la pieza que te falta del otro lado: la visual.
El agente escribe con tu tono, pero si le pedís una imagen, una landing o un componente, inventa su propia estética sin ninguna referencia real de tu marca.
El mismo agente escribe con tu voz y, cuando genera algo visual, usa tus colores exactos, tu tipografía y tus reglas de espaciado en vez de las suyas por defecto.
Un CLAUDE.md le dice al agente cómo comportarse y escribir: tono, qué evitar, cómo tratar al lector. Un DESIGN.md le dice cómo se ve y se siente la marca: paleta exacta, tipografías, radios de esquina, espaciado, qué componentes existen. Mezclar las dos cosas en un solo documento gigante termina sin cumplir bien ninguna de las dos.
03 · ¿Cómo consigo mi primer DESIGN.md sin escribirlo de cero?
Antes de escribirlo hay que tener claro tu sistema de diseño real: tu paleta, tu tipografía, cómo se ven tus botones y tarjetas. Si todavía no lo tenés armado, hay tres caminos de menos a más esfuerzo.
Opción A · copiar uno existente. Hay colecciones públicas de DESIGN.md de marcas conocidas (Stripe, Notion, Vercel, Linear, entre otras, más de sesenta en total) que podés usar como punto de partida y editar con tus propios colores y textos.
Opción B · generarlo desde tu sitio actual. Existen herramientas que leen una URL y devuelven un primer DESIGN.md con los tokens de color y tipografía detectados, listo para ajustar a mano.
Opción C · generarlo desde un sistema de diseño ya armado. Si tu identidad visual ya vive en Figma, podés pedirle a un agente como Figma Make que lo exporte cumpliendo la especificación.
Cualquiera de los tres caminos te deja con un archivo editable, no con una hoja en blanco. Conseguir así tu primer borrador, sin escribirlo línea por línea, es lo que te permite tenerlo listo en una tarde en vez de una semana. Juan Pol repasa estos atajos con más detalle en su guía de DESIGN.md.
04 · ¿Qué tiene que tener adentro para que un agente lo lea bien?
Tokens exactos, no nombres lindos
Un DESIGN.md útil combina dos capas:
- Tokens YAML legibles por máquina: colores en hexadecimal exacto (no "nuestro naranja", sino el código real), familia tipográfica y sus pesos, escala de espaciado, radios de borde, y el inventario de componentes que existen (botón, tarjeta, badge).
- Prosa markdown legible por humanos: el porqué de esas decisiones. Por qué la marca usa esquinas redondeadas y no rectas, qué tono de color evita y por qué, cómo se comporta la marca en modo oscuro si aplica.
La capa YAML es la que el agente usa para generar con precisión; la capa de prosa es la que evita que, ante una decisión ambigua, el agente rellene con su criterio genérico en vez del tuyo.
05 · ¿Con qué herramientas de IA funciona hoy?
Con los agentes que empujaron la capa de diseño asistido por IA en 2026: Stitch de Google, Claude Code con su skill de diseño, Cursor y Figma Make. Le subís el archivo completo al agente, le describís qué querés construir y el agente genera el resultado usando tus tokens y tu prosa en vez de su estética por defecto.
Ningún proveedor es dueño del formato. Al ser un archivo de texto plano con YAML y markdown, cualquier agente nuevo que sepa interpretar ambos formatos puede sumarse sin que tengas que reescribir nada.
06 · ¿Cómo lo uso para que la IA no te diseñe genérico?
Subí el archivo completo, no un resumen
Dale al agente el archivo entero antes de pedirle la pieza, no un resumen suelto de tu paleta escrito en el prompt. El agente necesita los valores exactos, no adjetivos.
Después de generar la primera pieza, compará el resultado contra tus tokens reales. Si el agente se desvía de tu marca, casi siempre es porque una sección del archivo quedó vaga (algo como "colores cálidos" en vez del código hexadecimal real). Corregí esa sección y volvé a pedir la pieza.
El reel de @ai._kid muestra justo ese contraste: un diseño genérico generado sin este archivo, y el mismo pedido resuelto con un DESIGN.md completo del otro lado.
07 · ¿Qué conviene recordar?
- Un DESIGN.md es a lo visual lo que un CLAUDE.md es a la voz: un archivo de contexto que un agente de IA lee antes de generar algo.
- No hace falta escribirlo de cero: copiar uno existente, generarlo desde tu sitio o exportarlo desde Figma son caminos válidos para arrancar.
- El archivo necesita tokens exactos (hexadecimales, no nombres) y prosa que explique el porqué de cada decisión.
- Funciona con los agentes que ya empujan diseño asistido por IA (Stitch, Claude Code, Cursor, Figma Make), y con cualquier agente nuevo que sepa leer YAML y markdown.
- La prueba de que funciona no es tenerlo escrito, es compararlo contra el resultado que te devuelve el agente y corregir lo que quedó vago.
Si ya tenés el CLAUDE.md de tu marca armado para el contenido, el DESIGN.md es el paso que completa el mismo sistema de contexto del lado visual. Y si tu marca ya usa Claude Design para prototipos, ese mismo archivo es lo que evita que cada prototipo nuevo salga con otra cara.
Los dos archivos son parte de un mismo criterio: cargarle contexto real a un agente antes de pedirle algo, en vez de corregir a mano lo genérico que devuelve sin ese contexto. Es la misma lógica que explico en cómo automatizar todo el marketing de tu marca con IA, aplicada esta vez a lo visual en lugar de al contenido.
Aplícalo a tu caso
Pídeselo a tu agente
Copia este prompt y pégalo en Claude o ChatGPT. Te pregunta lo que necesita saber de tu caso y arma el plan con los pasos de esta guía.
Quiero aplicar a mi caso la guía "Cómo crear un archivo DESIGN.md para tu marca" de Claura.
Guía: https://claura-ai.com/resources/como-crear-un-archivo-design-md-para-tu-marca
Mi caso: a qué me dedico, qué herramientas uso y qué quiero lograr
La guía cubre:
- ¿Qué es un archivo DESIGN.md?
- ¿En qué se diferencia de tu CLAUDE.md?
- ¿Cómo consigo mi primer DESIGN.md sin escribirlo de cero?
- ¿Qué tiene que tener adentro para que un agente lo lea bien?
- ¿Con qué herramientas de IA funciona hoy?
- ¿Cómo lo uso para que la IA no te diseñe genérico?
Lee la guía (si no puedes abrir el link, trabaja con los temas de arriba). Si te falta información sobre mi caso, hazme hasta 3 preguntas antes de empezar. Después arma un plan para aplicar la guía paso a paso a mi caso y dime qué puedo hacer hoy en menos de una hora.¿Prefieres que lo armemos nosotros? Agenda una llamada
¿Querés que tus agentes de IA diseñen siempre con la cara de tu marca?
Armamos el archivo de contexto de marca (visual y de voz) que usan tus agentes de IA para dejar de generar diseños y textos genéricos.
Ver cómo aplicarlo a mi marcaPreguntas frecuentes sobre DESIGN.md
Es una especificación abierta para describir la identidad visual de un proyecto en un único archivo que cualquier agente de IA puede leer. Combina tokens de diseño en YAML (colores, tipografía, espaciado, componentes) con una descripción en prosa markdown que explica el porqué de esas decisiones, no solo el qué. No es una herramienta cerrada ni un producto que haya que pagar: es un formato de texto plano, documentado, con una CLI oficial para validarlo. La idea sigue la misma lógica que un CLAUDE.md o un AGENTS.md: en vez de que la identidad de tu marca viva en Figma, en un PDF o en la cabeza de un diseñador que ya no trabaja con vos, queda en un archivo que el agente lee antes de generar cualquier cosa. Web Reactiva lo explica con la analogía de Google Labs: si ya tenés un CLAUDE.md para que un agente entienda cómo construir, te faltaba uno para que entienda cómo debe verse.
Cubren partes distintas del mismo problema. Un CLAUDE.md le dice al agente cómo escribir y comportarse con tu marca: tono de voz, qué evitar, cómo tratar al lector. Un DESIGN.md le dice cómo se ve y se siente tu marca: paleta exacta, tipografías, radios de esquina, espaciado, qué componentes existen. Uno es un archivo de voz, el otro es un archivo de identidad visual, y los agentes de diseño (Stitch, Claude Code con la skill de diseño, Cursor, Figma Make) leen específicamente el segundo. Tenerlos separados evita mezclar reglas de redacción con reglas de diseño en un mismo documento gigante que termina sin cumplirse ninguna de las dos cosas bien. Una marca que ya armó su CLAUDE.md para el contenido debería tratar el DESIGN.md como el paso que le falta, no como un reemplazo.
No desde cero, pero sí tenés que tener claro tu sistema de diseño antes de volcarlo al archivo: tu paleta real, tu tipografía, cómo se ven tus botones y tarjetas. Juan Pol marca justo ese requisito previo. Si no tenés ese sistema armado todavía, hay caminos de menos esfuerzo: copiar el DESIGN.md de una marca con una estética parecida a la que buscás desde una colección pública como "awesome design.md" y editarlo con tus propios colores y textos, o generar un primer borrador a partir de tu sitio actual con una herramienta que lee tu web y devuelve los tokens. UXABLES muestra el camino inverso, generarlo desde un sistema de diseño ya armado en Figma. Cualquiera de los tres te deja con un primer archivo editable, no en blanco.
Con los agentes que ya empujaron la capa de diseño asistido por IA: Stitch de Google, Claude Code con su skill de diseño, Cursor y Figma Make. Le subís el archivo al agente, le describís qué querés construir (una landing, una pantalla, un componente) y el agente genera el resultado respetando los tokens y la prosa del archivo en vez de inventar su propia estética por defecto. Web Reactiva documenta ese flujo completo con capturas reales usando Stitch, de principio a fin en menos de cinco minutos. Ningún proveedor es dueño del formato: al ser un archivo de texto plano, cualquier agente nuevo que sepa interpretar YAML y markdown puede sumarse sin que tengas que reescribir nada.
Dándole el archivo completo antes de pedirle la pieza, no solo un resumen suelto de tu paleta en el prompt. El agente necesita los tokens exactos (valores de color, no nombres como "nuestro naranja"), la tipografía con su jerarquía y la prosa que explica por qué tu marca usa esquinas redondeadas o por qué evita cierto tono. Después de generar la primera pieza, revisá que el resultado respete esos valores antes de iterar: si el agente se desvía, el problema casi siempre es que una sección del archivo quedó vaga ("colores cálidos" en vez del hexadecimal real). El reel de @ai._kid muestra justo el antes y el después de un diseño genérico corregido con este archivo completo, y la guía de agentes de IA de Claura aplica la misma lógica al resto de tu operación de marketing. Más abajo, en cómo lo uso para que la IA no te diseñe genérico, te dejo el checklist completo paso a paso.
Fuentes e inspiración
Mira los posts originales donde desarrollamos estas ideas en redes.
