Hay una frustración específica que todo dev que usó agentes de código conoce bien: le pedís al agente que construya una feature, funciona perfecto a nivel funcional, y después mirás la UI y parece diseñada por un comité en 2009. Colores incorrectos, espaciado inconsistente, fuentes que no coinciden con nada más en el proyecto.
El agente entendió la lógica. No tenía idea de cómo se ve tu sistema de diseño.
Ese es el problema que resuelve awesome-design-md, y el enfoque es tan simple que parece obvio en retrospectiva: soltá un archivo DESIGN.md en la raíz de tu proyecto y decile a tu agente que lo use.
¿Qué es DESIGN.md?
DESIGN.md es un formato de texto plano introducido por Google Stitch para comunicar sistemas de diseño a agentes de código con IA. Pensalo como el equivalente de diseño de AGENTS.md:
| Archivo | Quién lo lee | Qué define |
|---|---|---|
AGENTS.md |
Agentes de código | Cómo construir el proyecto |
DESIGN.md |
Agentes de diseño | Cómo debe verse y sentirse el proyecto |
La lógica es directa: markdown es el formato que los LLMs leen mejor. Sin parsing, sin tooling, sin exports de Figma, sin configurar esquemas JSON. Describís tu sistema de diseño en lenguaje natural con secciones estructuradas, y el agente realmente lo entiende.
Qué ofrece awesome-design-md
El equipo de VoltAgent tomó este formato e hizo el trabajo tedioso por vos: reverse-engineered los sistemas de diseño de más de 55 productos populares a partir de su CSS público y documentó todo en formato DESIGN.md.
El repositorio se lanzó el 31 de marzo de 2026 y acumuló más de 4.400 estrellas en GitHub en sus primeros días.
La colección cubre una amplia variedad de productos:
- Dev tools: Stripe, Vercel, Linear, Raycast, Sentry, PostHog, Resend, Mintlify
- Plataformas AI: Claude (Anthropic), Cursor, Lovable, VoltAgent, Replicate, RunwayML
- Productividad: Notion, Airtable, Zapier, Superhuman
- Infraestructura: MongoDB, HashiCorp, Sanity, ClickHouse
Cada carpeta contiene tres archivos: un DESIGN.md con la especificación completa del sistema de diseño en markdown, un preview.html con un catálogo visual de componentes en modo claro, y un preview-dark.html para superficies en modo oscuro.
¿Qué hay adentro de un DESIGN.md?
La profundidad de estos archivos es lo que hace que el enfoque funcione. El DESIGN.md de Stripe, por ejemplo, no solo lista colores — documenta por qué existen las decisiones:
Stripe usa weight 300 como el peso signature de sus títulos — una elección extraordinariamente liviana en un mundo donde todos usan 600–700 para captar atención. El sistema de sombras multicapa usa un shadow primario con tinte azul (rgba(50,50,93,0.25)) combinado con una capa más oscura, creando sombras con profundidad atmosférica directamente ligada a la paleta navy-purple de la marca.
Un DESIGN.md típico incluye:
- Tema visual y atmósfera — la filosofía de diseño general en prosa
- Paleta de colores completa con nombres de roles semánticos, no solo valores hex
- Jerarquía tipográfica — cada tamaño, peso, letter-spacing y line-height
- Estilos de componentes con estados hover, active y disabled
- Principios de layout y reglas de espaciado
- Sistema de elevación — cómo las sombras comunican profundidad
El resultado es un documento que le da a un agente de IA el mismo contexto que un diseñador senior le daría a un dev junior en un handoff detallado.
Cómo usarlo
Tres pasos:
1. Descargá el DESIGN.md del sistema que querés usar:
# Sistema de diseño de Stripe
curl -O https://raw.githubusercontent.com/VoltAgent/awesome-design-md/main/design-md/stripe/DESIGN.md
# Sistema de diseño de Vercel
curl -O https://raw.githubusercontent.com/VoltAgent/awesome-design-md/main/design-md/vercel/DESIGN.md
# Sistema de diseño de Linear
curl -O https://raw.githubusercontent.com/VoltAgent/awesome-design-md/main/design-md/linear/DESIGN.md
2. Soltá el archivo en la raíz del proyecto (al mismo nivel que tu CLAUDE.md o AGENTS.md)
3. Referencialo en tu prompt al agente:
Construí un componente de pricing card usando DESIGN.md como guía visual.
Hacelo coincidir exactamente con el sistema de diseño.
Eso es todo. Tu agente ahora tiene el contexto de diseño completo que necesita.
Funciona con cualquier agente
El formato es completamente model-agnostic. Está formateado específicamente para que los agentes de código con IA lo interpreten e implementen — Claude Code, Cursor, GitHub Copilot y Codex CLI entienden el formato de texto plano de forma nativa.
Si estás construyendo un proyecto nuevo y querés que se vea como un producto específico — digamos, querés que tu herramienta interna tenga la precisión black-and-white de Vercel — ahora tenés una especificación de diseño reutilizable lista para soltar.
El ecosistema que está creciendo
El formato design-md ya generó herramientas relacionadas: un conversor de Figma a DESIGN.md que extrae design tokens de archivos Figma, un scraper de sitios web que destila el sistema de diseño de cualquier sitio en un archivo DESIGN.md, y hasta una colección de DESIGN.md específica para aplicaciones de terminal (TUI) que cubre herramientas como Claude Code, Lazygit y btop.
El ecosistema se mueve rápido. Si el producto que necesás todavía no está en la colección de awesome-design-md, podés abrir un issue con la URL del sitio web para pedirlo.
El cambio real
Frameworks como CLAUDE.md y AGENTS.md le enseñaron a los agentes cómo construir tu proyecto. DESIGN.md cierra la otra mitad: enseñarle a los agentes cómo debe verse.
El enfoque reconoce algo que lleva tiempo siendo verdad: los agentes de IA son excelentes ingenieros de software y mediocres diseñadores. No porque no puedan generar código visualmente preciso — pueden — sino porque nunca tuvieron una forma estandarizada de recibir intención de diseño. DESIGN.md es ese estándar.
El repositorio está en github.com/VoltAgent/awesome-design-md. Revisá los archivos preview.html antes de elegir — ver el catálogo visual de componentes te va a ayudar a decidir qué sistema de diseño se adapta mejor a tu proyecto.