awesome-design-md
Para dar a un agente de código un DESIGN.md con el estilo de una marca y que genere una UI visualmente coherente.
Colección de archivos DESIGN.md inspirados en sistemas de diseño de marcas conocidas para que los agentes de código generen interfaces coherentes.
Notas y contexto
Qué es
awesome-design-md es un repositorio mantenido por VoltAgent que recopila archivos DESIGN.md inspirados en los sistemas de diseño de marcas conocidas (Claude, OpenAI, Stripe, Apple, Figma, Nike, Mistral, entre muchas otras). Cada archivo es un documento Markdown que describe el lenguaje visual de una marca: paleta de colores con roles semánticos, jerarquía tipográfica, espaciado, sombras, reglas de componentes y comportamiento responsive. El proyecto se publica bajo licencia MIT.
Para qué sirve
- Aportar a un agente de código (vibe-coding) un documento de diseño legible que oriente la generación de la interfaz.
- Reutilizar el estilo visual de una marca de referencia para mantener coherencia en un proyecto.
- Aprender cómo se documenta un sistema de diseño en texto plano, sin Figma ni JSON.
- Comparar decisiones de diseño (color, tipografía, profundidad) entre distintas marcas.
Cuándo usarlo
Es útil cuando trabajas con asistentes de IA que generan UI y quieres que el resultado siga un lenguaje visual concreto en lugar de un estilo genérico. Basta con copiar el DESIGN.md adecuado a tu proyecto y referenciarlo en el prompt o en el contexto del agente. No sustituye a un sistema de diseño propio ni a tokens de diseño formales; es un punto de partida y una referencia.
Ejemplo
El flujo de uso típico es:
- Entra en el repositorio y elige la carpeta de la marca cuyo estilo te interesa (por ejemplo
design-md/mistral.ai). - Abre
preview.htmlopreview-dark.htmlpara ver el catálogo visual de ese sistema. - Copia el archivo
DESIGN.mda la raíz o a una carpeta de tu proyecto. - Indícale al agente de código que lo use como guía, por ejemplo:
Genera la landing siguiendo las reglas de DESIGN.md (paleta, tipografía y espaciado).Puntos clave
- Más de 70 sistemas de diseño documentados como archivos
DESIGN.mden Markdown. - Cada entrada incluye previsualizaciones en HTML (claro y oscuro) además del documento.
- El formato Markdown es directamente legible por los LLM, sin necesidad de exportar desde Figma.
- Licencia MIT y proyecto activo con comunidad amplia.
Ten en cuenta
Los archivos reflejan valores de diseño visibles públicamente y se ofrecen “tal cual”, sin garantías; no son documentación oficial de las marcas ni reproducen su sistema completo. Conviene revisar y adaptar cada DESIGN.md a tu caso, y tener presente las implicaciones de marca antes de imitar el estilo de un tercero en un producto real.