01 Qué es un DESIGN.md y por qué ayuda
Cuando pides a una IA «hazme una landing bonita», sin más referencias, tiende a repetir los mismos degradados, tarjetas y tipografías. Un DESIGN.md soluciona eso: es un archivo Markdown, propuesto originalmente por Google Stitch, que describe cómo debe verse un producto. Igual que AGENTS.md o CLAUDE.md le dicen al agente cómo construir, el DESIGN.md le dice qué aspecto debe tener.
El repositorio awesome-design-md reúne DESIGN.md extraídos de webs públicas de empresas tecnológicas, fintech, herramientas de productividad y marcas de consumo, organizados en la carpeta design-md/ con una subcarpeta por web.
| Sección del archivo | Qué recoge |
|---|---|
| Tema visual y atmósfera | Sensación general, densidad y filosofía del diseño. |
| Paleta y roles de color | Cada color con nombre, valor hexadecimal y para qué se usa. |
| Tipografía | Familias, tamaños, pesos, interlineado y jerarquía completa. |
| Componentes | Botones, tarjetas, campos y navegación con sus estados. |
| Maquetación y profundidad | Escala de espaciado, rejilla, sombras y niveles de superficie. |
| Qué hacer y qué no | Reglas para no romper el estilo y patrones a evitar. |
| Comportamiento adaptable | Puntos de corte, tamaño de zonas táctiles y cómo se reorganiza en móvil. |
02 Descargar la colección
git clone https://github.com/VoltAgent/awesome-design-md.gitSi no usas Git, descarga el ZIP desde el botón Code de GitHub. Cada carpeta de design-md/ lleva el nombre de la web (por ejemplo apple, stripe, notion o linear.app) y contiene su DESIGN.md. Las vistas previas visuales con muestras de color, botones y modo oscuro se han trasladado a la web del proyecto, enlazada desde el README.
03 Aplicarlo en tu proyecto
-
1
Elige un estilo que encaje con tu público
Un despacho profesional no necesita la estética oscura de una herramienta para programadores. Mira las vistas previas antes de decidir.
-
2
Copia el archivo a la raíz
Pon el DESIGN.md junto al package.json o el archivo principal de tu proyecto.
-
3
Haz que Claude lo lea siempre
Claude Code no carga DESIGN.md por su cuenta. Menciónalo en cada petición o añade la línea @DESIGN.md a tu CLAUDE.md para que se importe al iniciar.
-
4
Pide la página y revisa
Genera, compara con la vista previa y corrige con instrucciones concretas.
cp awesome-design-md/design-md/stripe/DESIGN.md ./DESIGN.md
echo '@DESIGN.md' >> CLAUDE.mdUsa como única referencia visual el DESIGN.md de la raíz del proyecto. Crea la página de servicios de una gestoría para autónomos con: cabecera con propuesta de valor, tres bloques de servicios con precio orientativo, una sección de preguntas frecuentes y un formulario de contacto. Respeta exactamente la paleta, la escala tipográfica, los radios y los estados de los botones definidos. Si necesitas un componente que no aparece en el DESIGN.md, constrúyelo a partir de los tokens existentes y dime cuál has añadido.Lee el DESIGN.md de la raíz y el componente src/components/PricingTable.tsx. Rediséñalo para que siga ese sistema de diseño: colores, tipografía, espaciado, bordes y sombras. No cambies la lógica ni las props. Al final enumera qué tokens del DESIGN.md has usado.04 Lo más útil para un negocio: tu propio DESIGN.md
Los archivos de la colección son una gran referencia, pero tu web no debería parecer la de otra empresa. El mejor uso es estudiar su estructura y escribir el DESIGN.md de tu marca: así cualquier página, correo o presentación que genere Claude sale con tu identidad, y cualquier persona del equipo o proveedor trabaja con las mismas reglas.
Toma como plantilla de estructura el archivo awesome-design-md/design-md/notion/DESIGN.md, pero no copies ninguno de sus valores. Con el manual de marca que te adjunto (logotipo, colores corporativos, tipografías) y la hoja de estilos de mi web actual en assets/css/, escribe un DESIGN.md para mi empresa con las mismas secciones: atmósfera, paleta con roles, tipografía, componentes con estados, espaciado, profundidad, qué hacer y qué no, y comportamiento en móvil. Si falta un dato, propón un valor coherente y márcalo como pendiente de validar.05 Límites y precauciones
- ✓Los archivos describen valores de CSS públicos, pero logotipos, ilustraciones y fotografías siguen siendo de sus dueños: no los reutilices.
- ✓Algunas fuentes citadas son propietarias; pide a Claude una alternativa libre de Google Fonts con métricas parecidas.
- ✓Las webs cambian: un DESIGN.md puede no reflejar el diseño actual de la empresa que imita.
- ✓Un DESIGN.md muy largo consume contexto en cada sesión; si lo importas en CLAUDE.md, mantenlo concreto.
- ✓Revisa el contraste del resultado: copiar colores no garantiza accesibilidad en tu combinación de fondo y texto.
Preguntas frecuentes
No. Claude Code carga de forma automática CLAUDE.md, no DESIGN.md. Menciónalo en tu petición o añade @DESIGN.md dentro de tu CLAUDE.md para importarlo al inicio de cada sesión.
Sí. Es un archivo Markdown plano, así que lo entiende cualquier agente de programación o herramienta de diseño con IA, incluido Google Stitch, que propuso el formato.
Como inspiración para estructura y jerarquía, sí. Publicar algo que imite claramente la identidad de otra empresa puede causar problemas legales y de confusión de marca. Usa siempre los colores, el logotipo y los textos de tu cliente.
Sí. El repositorio es de código abierto con licencia MIT.
Sobre el autor
Equipo editorial de appyweb
Marketing, SEO y desarrollo con IA
Especialistas de appyweb en SEO, publicidad, desarrollo web y automatización con IA.