¿Qué es Design.md? La marca que un agente de IA puede ver
Le diste a tu marca una voz que la IA puede hablar. Ahora tiene que tener una cara que la IA pueda ejecutar. Se llama DESIGN.md y Google la ha convertido en estándar abierto
Hace unas semanas escribí aquí sobre la marca que un agente de IA puede leer: por qué el manual de identidad en PDF está muerto y por qué tu marca tiene que existir en una capa que una máquina pueda ejecutar, no solo leer. Ahí hablé de la voz: tono, carácter, lenguaje. De lo que en +MAIN.MIND llamamos Identidad Conversacional y codificamos con ETHOS.
Pero una marca no es solo cómo suena. Es también cómo se ve. Y esa mitad, la visual, tenía el mismo problema y no tenía nombre.
Ahora lo tiene. Se llama DESIGN.md, lo incubó Google dentro de su herramienta Stitch, y lo liberó como especificación abierta bajo licencia Apache 2.0. En pocas semanas el repositorio acumula 15.800 estrellas y 1.500 forks en GitHub. Cuando un estándar de formato arranca con esas cifras, no es una moda: es una infraestructura naciente. La apuesta de Google es que se convierta en estándar de industria, como OpenAPI lo fue para las APIs. Y va a pasar.
Hoy te cuento qué es exactamente, cómo funciona por dentro (con el detalle técnico que casi nadie está contando en español), y por qué es la otra mitad de la conversación que llevamos un año teniendo.
El problema que ningún brand book resuelve
Imagina que le pides a un agente de IA, Claude Code, Cursor, v0, el que sea, que te genere una landing, veinte variaciones de un anuncio o una plantilla de email. El agente necesita saber tu azul exacto, tu tipografía, tu escala de espaciado, el radio de tus botones, cuándo usar el color de acento y cuándo no.
¿Dónde está esa información hoy? En un PDF de 80 páginas en una carpeta de Drive. En la cabeza de tu diseñadora. En un archivo de Figma que el agente no puede abrir. En ningún sitio que una máquina pueda consultar en el momento de generar.
Resultado: el agente improvisa. Inventa un azul que casi es el tuyo. Pone una tipografía genérica. Usa el acento en un fondo de 1.200 píxeles donde jamás deberías usarlo. Y acabas con cuarenta piezas que parecen de tu marca pero no lo son. Es la deriva visual (visual drift), y a escala de IA no ocurre una vez: ocurre en cada generación, cada día.
Como lo resume el propio equipo de Google Labs: “en lugar de adivinar la intención, los agentes pueden saber exactamente para qué sirve un color.”
Qué es DESIGN.md, por dentro
Es un archivo de texto plano, en Markdown, que vive en la raíz de tu proyecto (al lado del código, versionado en Git) y le da a cualquier IA una comprensión persistente de tu sistema visual. Dos capas, y ahí está toda la inteligencia:
1. Frontmatter YAML, los tokens. La parte legible por máquina, con los valores exactos. La spec define un esquema concreto: colors, typography, rounded, spacing y components. Los colores admiten cualquier formato CSS, hex, rgb() y también oklch(), el espacio de color moderno. Y hay una pieza clave: las referencias entre tokens, con la sintaxis {colors.primary}. Eso te permite que un botón apunte a {colors.tertiary} en lugar de repetir el hex, la base del theming (claro/oscuro) sin duplicar nada.
2. Cuerpo Markdown, el razonamiento. La parte legible por humanos y por máquina. La spec fija ocho secciones canónicas, en orden: Overview, Colors, Typography, Layout, Elevation & Depth, Shapes, Components y Do’s and Don’ts. Aquí explicas qué hace cada token y cuándo no usarlo. “Los tokens dan a los agentes los valores exactos; la prosa les dice por qué existen esos valores y cómo aplicarlos.”
La clave conceptual, subráyala: un token no es una variable, es una decisión. blue le dice a la IA qué es. primary le dice qué hace. Y una IA actúa sobre roles, no sobre apariencias.
El truco que casi nadie ha visto: tu marca ahora tiene un linter
Esto es lo que más me gustó. DESIGN.md no es solo un formato: viene con una herramienta de línea de comandos (@google/design.md) que valida tu identidad como si fuera código:
npx @google/design.md lint DESIGN.md
Ese comando revisa nueve reglas y, entre otras cosas, calcula los contrastes WCAG automáticamente. Te dice, literalmente, cosas como “texto #FFFFFF sobre fondo #1A1C1E: ratio 15.42:1 — cumple WCAG AA.” Las reglas que más importan:
missing-primary — tienes colores pero ningún primary: el agente se inventará uno.
contrast-ratio — un par fondo/texto por debajo de 4.5:1 (falla accesibilidad).
orphaned-tokens — colores definidos que ningún componente usa (sobran).
broken-ref — una referencia {colors.x} que no existe.
section-order — secciones fuera del orden canónico.
Y hay dos comandos más que cambian tu operación:
npx @google/design.md export --format dtcg DESIGN.md # → tokens.json (estándar W3C)
npx @google/design.md export --format css-tailwind DESIGN.md # → @theme de Tailwind v4
npx @google/design.md spec # imprime la spec para inyectarla en el prompt de tu agente
Es decir: tu marca pasa a ser portable (exporta al estándar W3C de tokens y a Tailwind) y autovalidable. Tu identidad visual, por primera vez, tiene un test de regresión. Eso antes no existía.
Cómo se construye uno (con nuestros tokens de ejemplo)
Te lo enseño con los tokens reales de +MAIN.MIND, porque predicar con el ejemplo es la única forma honesta de venderlo.
---
name: +MAIN.MIND Design System v3
colors:
paper: ‘#FAFAF5’ # superficie base (no blanco puro: papel)
ink: ‘#23262E’ # texto principal
primary: ‘#0045EA’ # azul de marca y de acción
primary-hover: ‘#0037C4’
typography:
display: { fontFamily: Poppins, fontSize: 3rem, fontWeight: 900 }
body: { fontFamily: Inter, fontSize: 1rem }
rounded: { md: 14px }
spacing: { md: 16px }
components:
button-primary:
backgroundColor: ‘{colors.primary}’ # ← referencia, no repite el hex
textColor: ‘{colors.paper}’
rounded: ‘{rounded.md}’
button-primary-hover:
backgroundColor: ‘{colors.primary-hover}’
---
## Colors
La paleta se ancla en Azul +MAIN (`primary`, #0045EA), marca y acción.
Úsalo en botones primarios, la palabra clave de un titular y enlaces.
NO lo uses en grandes áreas de fondo ni en texto largo: satura el papel.
Fíjate en button-primary-hover como entrada separada: así es como la spec modela los estados (hover, active, pressed). Un componente sin estados es un componente que la IA va a improvisar, y los estados son justo donde la marca se rompe o se mantiene.
Y no estás solo: ya hay ecosistema
En cuestión de semanas han aparecido herramientas para no escribirlo a mano:
DESIGN.md Generator (plugin de Figma): escanea tu página y tus variables y genera el DESIGN.md.
Token Bridge: exporta tus tokens y componentes de Figma en bloques para que Claude redacte el DESIGN.md, y reimporta el JSON de vuelta a Figma.
design-md-figma (open source): saca estilos y variables del archivo activo y genera DESIGN.md + SKILL.md para agentes.
Y la interoperabilidad con Tokens Studio, Tailwind y el estándar W3C DTCG.
Por qué esto es la otra mitad de ETHOS
Aquí es donde quiero ser preciso, porque es nuestra tesis y no la de Google.
ETHOS codifica la voz de una marca para que un agente la encarne: esencia, temperamento, habla, operación, sintonía. DESIGN.md codifica la cara: tokens, razonamiento visual, componentes.
Son las dos mitades del mismo cuerpo. Sin la primera, el agente escribe genérico. Sin la segunda, el agente diseña genérico. Con las dos, el agente es tu marca — desde dentro, no por encima.
Y no es teoría. Nuestro propio Design System v3 funciona así desde hace meses: una fuente única de tokens, un cuerpo de reglas, y un motor donde la IA decide qué se dice y las plantillas deciden cómo se ve. Cada post que publicamos sale de ese sistema. Eso es un DESIGN.md en producción antes de que Google le pusiera nombre.
Y aquí está el matiz que nos separa de un código de marca genérico: la voz no es un conjunto de reglas de tono, es el carácter de la marca, su forma de mirar, lo que calla, cómo se ríe. Eso es lo que codifica nuestra Identidad Conversacional: no las normas, sino la personalidad medible que hay debajo de ellas. Un DESIGN.md le dice al agente cómo se ve tu marca; la Identidad Conversacional le dice quién es. La cara sin carácter es un maniquí; el carácter sin cara, una voz en off. Juntas, el agente deja de imitar tu marca y empieza a encarnarla.
Tu siguiente movimiento
Si en 2026 le vas a pedir a una IA que genere una sola pieza visual de tu marca, y se la vas a pedir, necesitas un DESIGN.md. No es opcional: es la condición mínima para que esas piezas sean tuyas y no de un genérico que se le parece.
Hemos preparado un informe completo (“El manual de marca ha muerto en 2D”) donde está todo: la anatomía de la spec, el linter de nueve reglas, el método de las cinco decisiones, el ecosistema de herramientas y una plantilla DESIGN.md lista para usar. Y si quieres que miremos tu marca en concreto, te decimos en una semana qué está listo para codificarse y qué no.
→ Quiero descargar gratis el informe
La pregunta no es si tu marca va a tener que volverse legible para máquinas en lo visual. Es si vas a llegar a tiempo.