Google ha liberado DESIGN.md como estándar abierto, un fichero Markdown que codifica un sistema de diseño completo para que agentes de IA generen interfaces de usuario consistentes con la identidad visual de cualquier proyecto.
¿Qué es DESIGN.md?
DESIGN.md es un fichero Markdown que cualquier agente de IA — Stitch, Claude Code, Cursor, Grok, Gemini… — puede leer para entender cómo debe verse y sentirse una aplicación sin necesidad de exportar tokens de Figma, JSON de diseño o configuraciones complejas.
La filosofía es sencilla: si el markdown funciona para los prompts de LLM, también puede funcionar para transmitir sistemas de diseño. Nada que parsear, nada que configurar. Basta con colocar el fichero en la raíz del proyecto.
AGENTS.md ≠ DESIGN.md: dos estándares complementarios
Google ha dejado claro que son documentos distintos con propósitos distintos:
- AGENTS.md — Describe cómo construir el proyecto: stack tecnológico, convenciones de código, estructura de carpetas, reglas de estilo de programación. Lo leen los agentes de codificación.
- DESIGN.md — Describe cómo debe verse el proyecto: paleta de colores, tipografía, espaciado, componentes UI, comportamientos interactivos. Lo leen los agentes de diseño.
Juntos forman un par que cubre todo el ciclo de handoff entre agentes de diseño y agentes de desarrollo.
Formato de DESIGN.md (Stitch)
El formato definido por Stitch se estructura en 9 secciones:
- Tema visual y atmósfera — Densidad, filosofía de diseño, mood general
- Paleta de colores y roles — Nombres semánticos, hex, rol funcional de cada color
- Reglas tipográficas — Familias de fuente, tabla completa de jerarquía
- Estilo de componentes — Botones, tarjetas, inputs, navegación con sus estados
- Principios de layout — Escala de espaciado, grid, filosofía de whitespace
- Profundidad y elevación — Sistema de sombras, jerarquía de superficies
- Qué hacer y qué no hacer — Guardrails de diseño y anti-patterns
- Comportamiento responsive — Breakpoints, targets táctiles, estrategia de colapso
- Guía de prompts para agentes — Referencia rápida de colores, prompts reutilizables
Colección pública: 69 ejemplos reales
El repositorio VoltAgent/awesome-design-md ya reúne 69 ficheros DESIGN.md extraídos de sitios web reales, incluyendo marcas como Apple, Stripe, Figma, Spotify, NVIDIA, Tesla, Linear, Vercel, Claude (Anthropic), xAI (Musk), Cohere, ElevenLabs, Minimax y muchas más.
Cada entrada incluye:
DESIGN.md— El documento de sistema de diseñopreview.html— Catálogo visual con swatches de color, escala tipográfica, botones, tarjetaspreview-dark.html— Mismo catálogo en modo oscuro
Stitch: la plataforma que impulsó el estándar
DESIGN.md nace dentro de Google Stitch, la herramienta de diseño asistido por IA de Google Labs que permite crear interfaces de alta fidelidad a partir de lenguaje natural. Con la evolución a «AI-native canvas» anunciada en marzo de 2026, Stitch incorpora un agente de diseño que lee el DESIGN.md del proyecto para mantener la consistencia incluso cuando genera UIs de forma autónoma.
Stitch también se integra con herramientas de desarrollo: las exportaciones van directamente a Code Assist y a agentes externos como Claude Code, con lo que el workflow completo diseño → código se ejecuta sin fricciones.
Por qué importa este estándar
El problema fundamental del diseño asistido por IA siempre ha sido la consistencia: los modelos generan interfaces bellas la primera vez, pero al iterar se desvían del sistema de diseño original. DESIGN.md soluciona esto haciendo que la marca sea parte del contexto permanente del agente, no un prompt puntual.
Al ser un formato abierto y estar basado en Markdown — el formato que todo LLM lee mejor —, cualquier herramienta puede adoptarlo sin depender de Google. Eso lo diferencia de otros intentos de sistemas de diseño propietarios.
El estándar está disponible en la documentación oficial de Stitch.