Guía de Aplicación — DESIGN.md

Cómo crear y usar archivos DESIGN.md para que agentes AI generen interfaces consistentes con la identidad visual de tu marca.

¿Qué es DESIGN.md?

Es un archivo Markdown plano que define cómo debe verse una interfaz. Funciona como un sistema de diseño codificado en texto que cualquier agente AI puede leer y aplicar.

No es una herramienta — es un estándar. No necesitas instalar nada, solo escribir el archivo.

Creado por: Google Stitch (herramienta de diseño con IA) y adoptado por VoltAgent como estándar open source.

Las 9 Secciones Universales

Cada DESIGN.md se estructura en exactamente 9 secciones, identificadas tras analizar 69 sistemas de diseño de marcas como Stripe, Apple, Nike, Spotify, Vercel, Linear, Figma, Airbnb, Notion y más:

# Sección Qué define
1 Visual Theme & Atmosphere Personalidad, mood, filosofía visual general
2 Color Palette & Roles Colores con roles semánticos (primary, surface, text, semantic)
3 Typography Rules Fuentes, escala tipográfica, pesos, spacing
4 Component Stylings Botones, cards, inputs, nav, modales — todo definido
5 Layout Principles Spacing system, grid, whitespace, border radius
6 Depth & Elevation Sombras, niveles de profundidad, focus rings
7 Do's and Don'ts Reglas y anti-reglas de diseño
8 Responsive Behavior Breakpoints, touch targets, collapsing strategy
9 Agent Prompt Guide Referencia rápida para que agentes AI apliquen el sistema

Cómo Crear un DESIGN.md para Tu Marca

Paso 1: Definir la personalidad

Antes de tocar colores o fuentes, responde:

  • ¿Qué emoción debe transmitir la interfaz?
  • ¿Qué marca existente se parece a lo que quieres?
  • ¿Minimalista, vibrante, corporativo, orgánico, tech?

Paso 2: Colores

Define máximo 8-10 colores con roles claros:

  • 2 primarios (brand)
  • 3 superficies (backgrounds)
  • 4 texto (jerarquía)
  • 3 semánticos (success, error, warning)

Regla de oro: Cada color debe tener un trabajo específico. Si dos colores hacen lo mismo, elimina uno.

Paso 3: Tipografía

Define una fuente para headings y una para body. No más.

Crea una escala con 6-8 niveles: 

Display → H1 → H2 → H3 → Body → Small → Caption

Para cada nivel: tamaño, peso, line-height, letter-spacing.

Paso 4: Componentes

Define los 5 componentes esenciales:
1. Botones (primary, secondary, ghost)
2. Cards/Containers
3. Inputs/Forms
4. Navegación
5. Tags/Badges

Para cada uno: colors, borders, radius, padding, hover, focus, shadows.

Paso 5: Layout

Establece un sistema de spacing con base unitaria (ej: 4px o 8px) y define:

  • Container max-width
  • Grid columns y gap
  • Border radius scale
  • Breakpoints responsive

Paso 6: Validar con Do's and Don'ts

Escribe 5 reglas y 5 anti-reglas. Esto es lo que más ayuda a los agentes AI a no "alucinar" diseños fuera de marca.

Cómo Usarlo con Agentes AI

En tu proyecto

Coloca DESIGN.md en la raíz de tu proyecto (como AGENTS.md). Los agentes lo leen automáticamente.

Prompts efectivos

Cuando pidas una interfaz a un agente:

❌ Malo: "Diseña una landing page para mi marca"

✅ Bueno: "Lee DESIGN.md. Diseña una hero section usando el color primary (#00FF88), la fuente display Space Grotesk a 64px/bold, con el gradient primary de fondo. Botón CTA con border-radius 12px según el sistema."

Clave: Referencia valores específicos del DESIGN.md en tu prompt.

Iteración

  1. Agente genera con DESIGN.md como guía
  2. Revisas contra las reglas del sistema
  3. Ajustas con prompts específicos: "El botón usa radius 8px pero DESIGN.md dice 12px"
  4. Actualizas DESIGN.md si necesitas evolucionar el sistema

Cómo Lo Usamos en CREA STUDIO

Estructura por Marca

cerebro/brands/
├── nutz/
│   ├── brand.json          ← Datos de marca (audiencia, productos, voz)
│   ├── brand.html          ← Visualizador web
│   └── DESIGN.md           ← Sistema visual (este archivo)
├── clumps/
│   ├── brand.json
│   ├── brand.html
│   └── DESIGN.md
└── crea-studio/
    ├── brand.json
    ├── brand.html
    └── DESIGN.md

Diferencia: brand.json vs DESIGN.md

Archivo Qué contiene Quién lo usa
brand.json Datos: audiencia, productos, voz, canales, pilares de contenido Kont (estrategia de contenido)
brand.html Visualización humana de la biblia de marca Daniel/Effy (revisión visual)
DESIGN.md Sistema de diseño: colores, tipografía, componentes, layout Agentes que generan UI

Agentes que lo consumen

  • Kont: Lo usa para que el contenido visual sea coherente con la marca
  • Mony: Lo referencia al crear landings y sitios web
  • Lula: Lo consulta cuando genera brand.html o cualquier interfaz
  • Agentes futuros: Cualquier agente nuevo lo lee para respetar la identidad visual

Workflow

  1. Daniel define la dirección visual (referencias, mood)
  2. Lula crea el DESIGN.md basándose en la plantilla
  3. Daniel aprueba viendo el brand.html
  4. Todos los agentes lo respetan al generar cualquier UI

Herramientas Complementarias

getdesign CLI

Descarga DESIGN.md de marcas reales para inspiración: 

npx getdesign add stripe    # Descarga el sistema de Stripe
npx getdesign add apple     # Descarga el de Apple
npx getdesign list          # Lista todas las marcas disponibles

Repositorio de Referencia

69 sistemas de diseño de marcas líderes: 

https://github.com/VoltAgent/awesome-design-md

Página Oficial

https://getdesign.md

Consejos Prácticos

  1. Sé específico con valores — "azul claro" no sirve. #3B82F6 sí.
  2. Menos es más — 8 colores bien definidos > 30 colores vagos
  3. Actualízalo — El DESIGN.md es un documento vivo, no una reliquia
  4. Prueba con un agente — Si el agente no puede seguir el sistema, está mal definido
  5. Incluye el Agent Prompt Guide — Es la sección que más valor da a la IA

Guía v1.0 — CREA STUDIO S.A.S. · Abril 2026

Backlinks

Left-click: follow link, Right-click: select node, Scroll: zoom
x