Guías de DESIGN.md
Un DESIGN.md convierte el sistema de diseño de un sitio web en un archivo que tu agente de programación puede leer: colores, tipografía, espaciado, radios y componentes, con las reglas para usarlos. Estas guías muestran qué hacer con uno, paso a paso, cada una con un ejemplo práctico creado a partir de un archivo real de la galería de DESIGN.md.
¿Es tu primera vez con el formato? Empieza por qué es un DESIGN.md. ¿Listo para crear uno? Obtén un DESIGN.md de cualquier sitio web.
Guías por caso de uso
- Desarrolladores que trabajan con un agente de programación con IA
Haz que Claude Code y Cursor creen interfaces iguales a una web
Extrae un sitio que te guste, pon su DESIGN.md en tu repositorio y apunta a él a tu agente, con los prompts exactos para Claude Code y Cursor.
- Fundadores en solitario y equipos pequeños
¿Sin diseñador? Toma prestado un sistema de diseño probado para tu app
Cómo elegir un sitio de referencia, qué conservar de su DESIGN.md y qué cambiar para que el resultado sea tuyo y no una copia.
- Equipos que planean rehacer su sitio, cambiar de marca o migrar
¿Vas a rehacer tu sitio? Extrae primero su sistema de diseño
Captura tu sitio actual como DESIGN.md antes de rehacerlo, cambiar de marca o de framework, y sabe qué revisar a mano.
- Diseñadores y agencias que hacen prototipos
Combina dos sitios de referencia en un solo diseño para un prototipo
Compara dos archivos DESIGN.md extraídos token a token y combínalos en una especificación para un prototipo, a mano o con tu agente.
- Desarrolladores que crean agentes y flujos con agentes
Dale a tu agente de programación especificaciones de diseño bajo demanda con MCP
Conecta el servidor MCP para que tu agente pueda extraer el DESIGN.md de un sitio por su cuenta, esperar a que termine y trabajar a partir de él.