Un nuevo patron esta emergiendo en la forma en que los desarrolladores construyen UIs con agentes de IA. En lugar de prompts vagos como “haz una landing page que se vea moderna”, se coloca un unico archivo markdown — DESIGN.md — en la raiz del proyecto. Luego se le indica al agente: “construye una pagina que se vea como esto.”
Funciona. A continuacion se explica como.
¿Que es DESIGN.md?
DESIGN.md es un concepto introducido por Google Stitch. Es un documento de sistema de diseno en texto plano que los agentes de IA leen para generar UI consistente. Sin exports de Figma, sin schemas JSON, sin herramientas especiales — solo un archivo markdown.
La relacion es analoga a AGENTS.md pero para diseno:
| Archivo | Quien lo lee | Que define |
|---|---|---|
AGENTS.md | Agentes de codigo | Como construir el proyecto |
DESIGN.md | Agentes de diseño | Como debe verse y sentirse el proyecto |
Un DESIGN.md contiene:
- YAML frontmatter — tokens estructurados para colores, tipografia, espaciado, border radius y definiciones de componentes
- Secciones en prosa — Tema Visual, Paleta de Colores, Reglas Tipograficas, Estilos de Componentes, Principios de Layout, Elevacion, Que Hacer y Que No Hacer
- Guia de Prompts — prompts listos para usar con cualquier agente de IA
El YAML frontmatter es machine-readable para que un agente lo procese con precision, pero human-readable para edicion directa.
Explore la Coleccion: getdesign.md
getdesign.md es la primera — y mas grande — coleccion de archivos DESIGN.md del ecosistema. Mantenida por el equipo de VoltAgent, actualmente alberga 71+ archivos DESIGN.md que cubren marcas desde Vercel hasta Ferrari.
Obtener un DESIGN.md
Vercel tiene uno de los archivos DESIGN.md mas completos de la coleccion. Para agregarlo a un proyecto:
npx getdesign@latest add vercelEsto crea DESIGN.md en la raiz del proyecto — un documento de 41KB que contiene todo lo que un agente de IA necesita para renderizar el lenguaje visual de Vercel.
Estructura del YAML frontmatter (truncado):
colors:
primary: "#171717"
canvas: "#ffffff"
canvas-soft: "#fafafa"
ink: "#171717"
body: "#4d4d4d"
link: "#0070f3"
typography:
display-xl:
fontFamily: "Geist, Inter, system-ui, sans-serif"
fontSize: 48px
fontWeight: 600
lineHeight: 48px
letterSpacing: -2.4px
components:
button-primary:
backgroundColor: "{colors.primary}"
textColor: "{colors.on-primary}"
rounded: "{rounded.pill}"
typography: "{typography.button-lg}"La sintaxis de referencia ({colors.primary}, {rounded.pill}) permite la composicion de tokens — cambiar un token una vez se propaga a todos los componentes que lo referencian.
¿Como aplicar el DESIGN.md a Claude Design?
Con el DESIGN.md en mano, el siguiente paso es usarlo dentro de Claude Design. Este flujo permite construir un sistema de diseno que potencia y estandariza el diseño de una pagina por medio de prototipado rapido con IA.
Flujo de trabajo
-
Elegir un DESIGN.md de referencia
-
Ingresar en getdesign.md y escoger un referente visual.
-
Dar click en “DESIGN.md” y copiar todo el contenido del archivo.
-
-
Abrir Claude Design
-
Dar click en ”+ Create” para generar un nuevo prototipo.
-
Ingresar el prompt indicando cual va a ser la interfaz a construir. Por ejemplo:
Clona esta pagina web: https://www.apple.com/. Tiene que tener la maxima fidelidad posible y contar con todos los elementos graficos de la pagina. -
Adjuntar el DESIGN.md copiado anteriormente como contexto de diseno.
-
-
Revisar el resultado
Claude Design genera un prototipo que sigue los tokens del DESIGN.md. Si el resultado no es el esperado, se puede iterar modificando el archivo y volviendo a generar.
Ventajas de este flujo
- Consistencia visual — todos los componentes generados respetan la misma paleta, tipografia y espaciado.
- Iteracion rapida — se modifica el DESIGN.md y se regenera sin tener que re-explicar el estilo.
- Sin herramientas externas — no se necesita Figma, Sketch ni ningun otro tool de diseno.
Diseno como codigo. Tokens como fuente de verdad.