Qué es un DESIGN.md
Un DESIGN.md se ubica junto al código y describe el diseño previsto en términos en los que un agente puede actuar. Los agentes de codificación implementan interfaces bien, pero sin dirección artística tienden a recurrir a un estilo neutro por defecto. Google Labs publica ahora una especificación y un validador alpha para DESIGN.md. El formato es activo y útil, aunque la especificación advierte que aún podría cambiar.
Un DESIGN.md necesita más que una lista de colores. Los agentes también necesitan dirección sobre el diseño, el espaciado, el tratamiento de los componentes y los detalles que distinguen un diseño de otro. Un informe útil dedica la mayor parte de su contenido a esas decisiones.
Qué debe incluir un DESIGN.md
Un informe completo cubre todo el sistema, no solo los tokens. El DESIGN.md que genera Identity Forge se organiza en estas secciones:
- Overview: qué es el diseño, para quién es y la sensación pretendida en una o dos frases.
- Colors: los tokens semánticos como variables CSS listas para pegar en
globals.css, en modo claro y oscuro. Semantic color tokens explained. - Typography: la combinación de tipos, escala, tracking y pesos, además de una configuración de fuentes lista para Next.js.
- Layout: base de espaciado, ancho del contenedor y reglas de composición.
- Elevation & Depth: el sistema de sombras (o la ausencia deliberada de uno).
- Shapes: radios de esquina por elemento (botones, tarjetas, inputs, badges) y tratamiento de bordes.
- Components: cómo deben tratarse los componentes principales, con un ejemplo.
- Page Structure & Layout: cómo componer páginas completas; aquí es donde se evita el resultado genérico de la IA.
- Personality & References: la voz y las referencias detrás del diseño.
- Distinctive Motifs: los elementos distintivos para reproducir; "definen el diseño tanto como lo hacen los tokens".
- Do's & Don'ts: las reglas que mantienen la interfaz generada dentro del mundo del diseño.
- Agent Rules: instrucciones explícitas para el propio agente de codificación.
Los motivos y las restricciones son la clave
Cualquiera puede listar cinco códigos hexadecimales. Lo que separa un sistema de diseño real de una plantilla con colores cambiados es la intención escrita: los motivos para reproducir y los errores a evitar. Esas secciones son la razón por la que un DESIGN.md cambia el resultado de un agente cuando una paleta no lo hace.
Compruébalo con un sistema real
Un DESIGN.md es tan bueno como el sistema que lo respalda. A continuación se muestra el kit gratuito ambient-sage: los tokens, fuentes y tratamientos que describe su DESIGN.md, renderizados en vivo:
Ambient Sage
Live renderRendered from the kit's actual tokens, fonts, and treatments
Dashboard
Welcome back — here's how AmbientSage is performing today.
Active users
15.1k
+5%Trending up this month
vs. previous 30 days
MRR
$49.1k
+3%Strong recurring growth
Net of churn
Retention
89%
+2%Engagement above target
Rolling 28-day window
NPS
69
+3Meets growth projections
Survey · n=1,204
Total revenue
Last 12 months
$49.1k+18.2%
Recent sales
You closed 265 deals this month.
Alex Rivera
alex@ambientsage.com
Mira Okonkwo
mira@ambientsage.com
Jonas Feld
jonas@ambientsage.com
Sana Qureshi
sana@ambientsage.com
Theo Lindgren
theo@ambientsage.com
Recent transactions
View all| Customer | Status | Date | Amount |
|---|---|---|---|
AR Alex Rivera Founder & CEO | Paid | 2m ago | $1,999.00 |
MO Mira Okonkwo Head of Product | Pending | 1h ago | $39.00 |
JF Jonas Feld Design Lead | Processing | 3h ago | $299.00 |
SQ Sana Qureshi Engineering Lead | Paid | Yesterday | $99.00 |
TL Theo Lindgren Brand Director | Refunded | 2d ago | $2,400.00 |
Typography
Plus Jakarta Sans
Color system
28 semantic roles, light + dark
Agent outputs
DESIGN.md, CSS, Tailwind, shadcn
Genera uno (tres formas)
- 1
CLI: escribe DESIGN.md + tokens en tu repo
El camino más rápido. Elige el slug de un kit de la galería y aplícalo; obtendrás un DESIGN.md confirmado más un archivo de tokens correspondiente.
identityforge apply ambient-sage - 2
MCP: deja que el agente lo busque
Con el servidor MCP instalado, el agente llama a
get_design_md(slug)para leer el informe completo y aapply_themepara escribirlo. Instálalo para tu herramienta:npx --yes identityforge@latest install --client claude-code - 3
shadcn: instala los tokens que referencia el DESIGN.md
Si solo quieres los valores, el elemento del registro instala las variables CSS del kit directamente.
npx shadcn add https://identityforge.io/r/ambient-sage.json
Identity Forge genera el DESIGN.md y los tokens a partir del mismo kit, por lo que la prosa describe los valores de la hoja de estilos. Para saber en qué se diferencia esto de adaptar manualmente una entrada del catálogo de DESIGN.md, consulta Identity Forge vs getdesign.md.
Preguntas frecuentes
¿Qué es un DESIGN.md?
Un DESIGN.md es un archivo Markdown en tu repositorio que le dice a un agente de codificación con IA cómo debería verse el producto: su intención, sistemas de color y tipografía, reglas de diseño y espaciado, tratamiento de componentes, motivos distintivos y qué hacer y qué no hacer. El agente lo lee antes de construir la interfaz para que su resultado sea coherente con la marca.
¿Cómo genero un DESIGN.md?
Aplica un kit de Identity Forge: `identityforge apply <slug>` escribe un DESIGN.md completo más los tokens correspondientes en tu proyecto. Con el servidor MCP instalado, el agente también puede buscarlo por sí mismo mediante la herramienta get_design_md.
¿Es un DESIGN.md solo una lista de colores?
No. Los colores son la parte fácil. Un DESIGN.md útil dedica la mayor parte de su contenido al diseño, el espaciado, el tratamiento de componentes, los motivos distintivos y las restricciones: los lugares donde la interfaz construida por IA realmente se vuelve genérica.
¿Existe una especificación oficial de DESIGN.md?
Google Labs publica una especificación y un validador alpha para DESIGN.md. Identity Forge genera su informe y sus tokens a partir del mismo kit de diseño, lo que mantiene las reglas escritas vinculadas a los valores exportados.