Generador DESIGN.md
Crea archivos DESIGN.md listos para IA para Google Stitch, Claude Code, Cursor y Copilot — define colores, tipografía, espaciado y componentes para...
Actualizado mayo de 2026
Revisado por Rafael Duarte
Project Basics
Name your project and describe its overall visual intent.
Describe the intended visual feel. AI agents use this to set the tone.
Cómo funciona
Asistente de 9 pasos, listo para copiar en minutos
1. Define el proyecto y la paleta
Nombre, tagline, tono visual descrito en lenguaje natural y colores por rol semántico (primary, error, success) para modo claro y oscuro.
2. Ajusta tipografía, layout y componentes
Fuentes, escala tipográfica modular, espaciado, radios de borde, sombras y variantes de botón — todo con valores por defecto razonables.
3. Descarga y súbelo al repo
Copia o descarga el DESIGN.md completo y colócalo en la raíz del proyecto para que Claude Code, Cursor o Copilot lo lean como contexto.
Qué incluye el generador
Las 9 secciones del spec oficial, sin memorizar la estructura
Asistente guiado paso a paso
Completa las 9 secciones del spec Apache 2.0 con campos y presets, sin escribir el markdown a mano desde cero.
Colores por rol semántico
Primary, surface, error, success para claro y oscuro — no solo una lista de códigos hex sueltos.
Escala tipográfica modular
Minor third, perfect fourth, golden ratio: tamaños de fuente calculados con proporciones matemáticas consistentes.
Accesibilidad y contraste incluidos
Nivel WCAG objetivo, ratios de contraste mínimos, color de foco y tamaño de área táctil, ya integrados en el archivo.
Vista previa en vivo
Un dashboard con navegación, tarjetas, botones, formulario y alertas se renderiza con tus colores y fuentes reales antes de exportar.
Varios temas y presets de color
Crea, renombra y alterna entre paletas con nombre propio, o carga presets como Ocean y Forest en cualquiera de ellas.
Las 9 secciones del archivo
Cuándo usar esta herramienta
Los escenarios más comunes entre quienes trabajan con agentes de IA
Arrancar un proyecto nuevo con IA
Coloca el DESIGN.md en la raíz antes del primer componente, así toda la UI generada respeta tus reglas desde el primer prompt.
Dejar de repetir el mismo spec en cada prompt
Escribe el color primario, la fuente y el radio de borde una sola vez, no en cada mensaje nuevo que le mandas al agente.
Flujos de trabajo con Google Stitch
Exporta tokens desde Figma al DESIGN.md y cada generación de Stitch queda alineada con tu sistema visual.
Cambiar de herramienta de IA sin perder consistencia
El DESIGN.md viaja con el proyecto al migrar entre Cursor, GitHub Copilot y Claude Code.
Validar contraste antes de entregar el diseño
La pestaña Lint calcula el ratio WCAG de cada par de colores y marca los fallos con un atajo directo al paso que hay que corregir.
Mantener varias marcas o temas a la vez
Gestiona temas con nombre propio por separado (por ejemplo Light y una variante de marca) dentro del mismo archivo, sin duplicar el asistente.
Errores comunes
Pensar que reemplaza a Figma
Son complementarios: el DESIGN.md cubre la especificación y el traspaso de contexto a la IA, no la colaboración visual del equipo.
Saltarse la sección de accesibilidad
Sin un contraste mínimo ni un nivel WCAG definidos, el agente de IA no tiene ninguna restricción para generar interfaces accesibles.
Confundirlo con design tokens
El DESIGN.md va más allá de los tokens: incluye intención visual en lenguaje natural y patrones de componentes, no solo valores nombrados.
Ignorar los avisos de la pestaña Lint
El lint calcula el contraste real según WCAG AA y marca los pares de color que fallan; ignorar un ERR significa entregarle a la IA tokens que va a aplicar mal.
Confundir temas con modo oscuro
Los temas con nombre propio son paletas independientes (por ejemplo Light o una variante de marca); el modo oscuro es un bloque de overrides aparte — no son lo mismo.
Por qué usar este generador
El asistente guía por las 9 secciones del spec oficial con valores por defecto sensatos, en vez de obligarte a escribir el markdown a mano desde cero.
Es compatible de forma nativa con Google Stitch y funciona como archivo de contexto para Claude Code, Cursor y GitHub Copilot — todos leen archivos en la raíz del proyecto de forma automática.
Sin un archivo así, cada prompt de IA elige color, fuente y espaciado de forma arbitraria. Con el DESIGN.md listo, el agente trata tu spec como una restricción y aplica las mismas reglas en cada generación siguiente, no solo en la primera.
DESIGN.md vs. README.md vs. design tokens
Formatos complementarios, propósitos distintos
Preguntas frecuentes
Un archivo markdown que guarda las reglas visuales del proyecto — colores, tipografía, espaciado y componentes — en un formato estructurado que los agentes de IA pueden leer y seguir. Lo creó Google Labs para Stitch y es open source bajo Apache 2.0.
Referencias
Documentación oficial del spec DESIGN.md, mantenida por Google Labs.
La licencia open source bajo la cual se publica el spec DESIGN.md.
Criterio de éxito oficial en el que se basa el lint de contraste de la herramienta.
Artículo relacionado
Como documentar projetos no GitHub: o README que importa
Herramientas relacionadas
- Generador de Paleta de Colores Diseño Genera paletas de colores armoniosas desde cualquier color base. Elige armonía Análoga, Complementaria, Triádica o Tetrádica — exporta como CSS variables o...
- Verificador de Contraste de Colores Diseño Verificador de contraste de colores gratuito — verifica conformidad WCAG 2.2 AA y AAA al instante. Vista previa en vivo, simulación de daltonismo y...
- Conversor de Colores Diseño Convierte colores entre HEX, RGB, HSL y CMYK al instante. Selector de color gratuito online con comprobador de contraste WCAG y generador de paletas.
- Paleta de Colores desde Imagen Diseño Extrae paletas de colores de cualquier imagen — obtén códigos HEX, RGB, HSL y exporta como CSS variables, Tailwind, JSON o PNG. 100% en el navegador, sin...
- Generador CSS Box Shadow — Neumorfismo, Glassmorfismo y Tailwind Diseño Generador CSS box shadow gratuito con vista previa en tiempo real. Crea sombras, efectos neumorfismo y glassmorfismo. Exporta a CSS, Tailwind o variables CSS.
