brand-guidelines.md: The One File Every AI Tool Needs to Know Your Brand

Has pagado mucho dinero por las directrices de marca. Están guardadas en un PDF de 47 páginas en algún lugar de Google Drive, el que tu agencia de diseño te entregó hace 18 meses. Tus desarrolladores nunca lo han abierto. Tus herramientas de IA no pueden abrirlo. Y cada vez que alguien crea una landing page en Cursor, redacta un correo electrónico de marketing con Claude, o estructura un componente en v0, empiezan de cero: "¿Cuál es nuestro color principal de nuevo? ¿Es Inter o Plus Jakarta Sans? ¿Usamos esquinas redondeadas o afiladas?"

Ese ciclo —explicar la marca, esperar que se entienda, corregir lo que no— cuesta horas cada semana. En un equipo, solo en reelaboración, cuesta miles al mes.

El formato Stitch design-md de Google elimina ese ciclo. Y Branding5 genera tu brand-guidelines.md completo automáticamente: descárgalo con un clic, suéltalo en tu repositorio, y cada herramienta de IA que tu equipo toque conocerá instantáneamente tu marca.

¿Qué es design-md? (¿Y por qué la gente lo llama DESIGN.md?)

Design-md es una especificación de directrices de marca y diseño basada en Markdown, en texto plano. En lugar de un PDF que solo los humanos pueden (teóricamente) leer, es un archivo .md estructurado que tanto personas como sistemas de IA pueden analizar, comprender y construir a partir de él.

Google creó el formato como parte de Stich —su plataforma de generación de UI impulsada por IA— con una premisa simple: si le das a una IA una descripción bien estructurada de tu sistema de marca, puede generar UI, escribir textos y tomar decisiones de diseño que ya están en línea con la marca. No más repeticiones en cada sesión.

Dos nombres, una idea

Los archivos escritos en este formato tienen dos nombres:

DESIGN.md — el apodo en las comunidades de desarrolladores. Se encuentra junto a README.md y CONTRIBUTING.md en la raíz del proyecto, y Cursor, Windsurf y otras herramientas de codificación de IA lo buscan automáticamente.
brand-guidelines.md — el nombre que usa Branding5, porque el archivo contiene mucho más que especificaciones visuales. Captura tu posicionamiento, arquetipos, ICPs, voz y estrategia —el sistema completo de la marca, no solo colores y fuentes.

Cualquier nombre funciona. El formato y el poder son los mismos.

Qué contiene un brand-guidelines.md

Un archivo completo abarca cada capa de tu marca, desde la estrategia hasta las especificaciones a nivel de píxel. Así es como se ve un brand-guidelines.md generado por Branding5 en la práctica:

# Acme Analytics

## Brand Foundation

- **Positioning:** La única plataforma de análisis creada para equipos de marketing no técnicos
  que necesitan información de nivel empresarial sin la curva de aprendizaje.
- **Archetype:** El Sabio — sabio, confiable, basado en datos
- **Mission:** Hacer que la alfabetización de datos sea accesible para cada especialista en marketing.
- **Values:** Claridad sobre la complejidad. Precisión sobre la velocidad. Empoderamiento sobre la dependencia.

## Ideal Customer Profiles

### ICP 1: Growth Marketing Manager

- 28–38 años, SaaS de mercado medio (50–500 empleados)
- Frustrado por herramientas de BI complejas; necesita paneles que pueda construir por sí mismo
- Patrones de lenguaje: "información accionable", "autoservicio", "tiempo de valor"
- Objeción clave: "¿Esto reemplazará nuestra pila de BI existente?"

### ICP 2: VP of Marketing

- 35–50 años, reporta al CMO o CEO
- Le importa la atribución multicanal y los informes listos para la junta directiva
- Compra basándose en pruebas de ROI y amplitud de integración

## Visual Identity

### Colors

| Role        | Hex       | Usage                                                 |
| ----------- | --------- | ----------------------------------------------------- |
| Primary     | `#2563eb` | CTAs, estados activos, elementos clave de la UI       |
| Secondary   | `#f8fafc` | Fondos, tarjetas, contenedores                        |
| Accent      | `#16a34a` | Estados de éxito, métricas positivas                  |
| Neutral 900 | `#0f172a` | Texto del cuerpo, encabezados                         |
| Neutral 400 | `#94a3b8` | Texto de marcador de posición, estados deshabilitados |
| Error       | `#dc2626` | Estados de error, acciones destructivas               |
| Warning     | `#f59e0b` | Estados de advertencia, alertas de atención           |

### Typography

| Role    | Family            | Weight | Size | Line Height | Tracking |
| ------- | ----------------- | ------ | ---- | ----------- | -------- |
| H1      | Plus Jakarta Sans | 800    | 48px | 1.1         | -0.02em  |
| H2      | Plus Jakarta Sans | 700    | 36px | 1.2         | -0.01em  |
| H3      | Plus Jakarta Sans | 700    | 24px | 1.3         | 0        |
| Body    | Inter             | 400    | 16px | 1.6         | 0        |
| Caption | Inter             | 500    | 13px | 1.4         | 0.01em   |
| Code    | JetBrains Mono    | 400    | 14px | 1.5         | 0        |

### Spacing & Layout

- Unidad base: 8px
- Relleno de componentes: 16px (compacto), 24px (predeterminado), 32px (espacioso)
- Espaciado de secciones: 64px (escritorio), 48px (móvil)
- Ancho máximo de contenido: 1200px
- Radio del borde: 8px (tarjetas), 12px (modales), 9999px (píldoras/botones)

### Shadows & Elevation

- Tarjeta: `0 1px 3px rgba(0,0,0,0.08)`
- Desplegable: `0 4px 12px rgba(0,0,0,0.12)`
- Modal: `0 8px 32px rgba(0,0,0,0.16)`

## Brand Voice & Tone

- **Voice:** Directa, segura, sin jerga. Explicamos, no damos sermones.
- **Tone shifts:** Más cálida en la incorporación, más asertiva en el texto de ventas,
  precisa y neutral en la documentación.
- **Sentence style:** Oraciones cortas. Voz activa. Liderar con el beneficio.
- **Avoid:** Construcciones pasivas, "aprovechar", "sinergia", frases de relleno,
  signos de exclamación en la UI del producto.

### Examples

- ✅ "Ve qué campañas generan ingresos — en un clic."
- ❌ "Nuestra innovadora plataforma aprovecha tecnología de vanguardia para empoderar
  a tu equipo de marketing con soluciones de análisis de primera clase."

## Component Guidelines

### Buttons

- Primario: relleno, `#2563eb`, texto blanco, completamente redondeado, altura mínima 44px
- Secundario: delineado, borde de 1px `#2563eb`, fondo transparente
- Fantasma: sin borde, solo texto, usado en navegación y acciones terciarias
- Todos los botones: relleno horizontal de 16px, fuente seminegra 600, sin mayúsculas

### Cards

- Fondo: blanco, radio de borde 8px, sombra sutil
- Relleno: 24px
- Encabezado: Peso H3, margen inferior de 8px
- Siempre incluye una CTA clara o la siguiente acción

### Forms

- Etiqueta encima del campo de entrada, fuente seminegra 500
- Altura del campo de entrada: 44px, radio de borde 8px, borde de 1px neutral-300
- Mensaje de error debajo del campo de entrada en rojo, 13px
- Campos obligatorios marcados con \* (no solo con color)

## Do's and Don'ts

- ✅ Siempre incluye una CTA única y clara por sección
- ✅ Usa datos reales en ejemplos y capturas de pantalla, nunca "Lorem ipsum"
- ✅ Prueba las relaciones de contraste — mínimo WCAG AA (4.5:1 para texto)
- ❌ Nunca uses más de 3 colores en un solo componente
- ❌ No uses fotos de archivo de personas señalando pantallas
- ❌ Evita centrar el texto del cuerpo de más de 2 líneas

Esa es la anatomía. Ahora, así es como se ve un resultado real, generado por Branding5 para Oscar Stories, una plataforma de cuentos para dormir para niños impulsada por IA con un arquetipo de Bufón.

YAML front matter — la capa legible por máquina

---
name: 'Oscar Stories'
website: 'https://www.oscarstories.com'
archetype: 'The Jester'
positioning_statement: >
  Para padres que quieren transformar la hora de dormir en una aventura alegre,
  Oscar Stories utiliza IA inteligente para crear cuentos personalizados donde
  tu hijo es el protagonista.
usp: >
  Crea instantáneamente cuentos únicos, impulsados por IA, donde tu hijo es el
  héroe juguetón, haciendo que la hora de dormir sea mágica, más fácil para los
  padres e inspirando imaginación y valores cada noche.
voice:
  tone: 'Amigable, imaginativo y alentador...'
  personality: 'Juguetón, imaginativo, nutritivo, innovador y confiable.'
  promise: 'Hacer de la hora de dormir un momento mágico y de unión...'
values:
  - 'Conexión Alegre'
  - 'Innovación Confiable'
  - 'Educación Nutritiva'
typography:
  primary_font: 'Nunito Sans'
  secondary_font: 'Lora'
colors:
  primary: '#5e219c' # Ciruela de medianoche
  darker: '#332145'
---

Qué contiene el resto del archivo

Debajo del "YAML front matter", el archivo completo —más de 14,000 palabras— continúa con todo lo que una IA necesita para tomar decisiones alineadas con la marca:

Brand Narrative: declaración de posicionamiento, misión, visión, PVU (propuesta de valor única) y la historia de "por qué lo hacemos"
Archetype Deep Dive: las características clave del Bufón, estrategias principales, posibles escollos y ejemplos de marcas (Ben & Jerry's, M&M's, Old Spice)
Visual Identity: sistema de color completo con hex, CMYK, HSL y estados de hover; jerarquía tipográfica con pesos y reglas de uso
Ideal Customer Profile: perfil completo de persona —"El padre moderno consciente"— con demografía, psicografía, puntos débiles, objetivos y canales preferidos
SWOT Analysis: fortalezas, debilidades, oportunidades, amenazas y una evaluación estratégica general
Marketing Copy: 8 titulares escritos con la voz del Bufón, 5 CTA con tácticas de urgencia y el texto completo de la landing page PAS
Content Strategy: plan de contenido Héroe/Hub/Higiene con títulos específicos, canales y objetivos
Marketing Campaigns: campañas de conciencia, interés y deseo mapeadas al marco AIDA

Un desarrollador que nunca ha conocido al equipo de Oscar Stories puede soltar este archivo en Cursor, pedir una landing page y obtener un texto que suene como la marca —juguetón, imaginativo, nunca pedante— con la paleta púrpura correcta y los encabezados en Nunito Sans. Sin briefing. Sin idas y venidas.

Así es como se ven las directrices de marca legibles por máquina en la práctica. No un PDF. Un solo archivo que cada herramienta de IA que tu equipo utiliza puede leer, comprender y construir a partir de él.

Por qué esto es importante ahora mismo

Tres fuerzas han convergido para hacer que las directrices de marca legibles por máquina sean urgentes, no opcionales:

1. Las herramientas de IA ahora escriben la mayor parte del código y el texto

Cursor, GitHub Copilot, Claude, v0, Bolt, Lovable — los desarrolladores y especialistas en marketing están lanzando más rápido que nunca con la ayuda de la IA. Pero estas herramientas no tienen ningún conocimiento de tu marca a menos que se lo digas. En cada sesión, en cada prompt, estás reexplicando tu paleta de colores. Eso no es un flujo de trabajo, es un impuesto a la velocidad.

Un solo brand-guidelines.md en tu repositorio elimina ese impuesto permanentemente.

2. Google está impulsando design-md como un estándar

Cuando Google lanza una especificación de formato a través de un producto como Stitch, el ecosistema presta atención. Los plugins de Figma, las extensiones de VS Code y los generadores de componentes de IA ya están empezando a buscar un DESIGN.md en la raíz del proyecto. Tener tu archivo correcto hoy significa que las herramientas de mañana simplemente funcionarán, sin migración, sin reelaboración.

3. La coherencia de la marca a la velocidad de la IA requiere reglas legibles por máquina

Si tu equipo genera 50 entradas de blog al mes, 20 variaciones de anuncios a la semana y una nueva página de destino en cada sprint, un PDF en Google Drive es inútil. Las reglas de la marca necesitan vivir donde ocurre la generación —en el repositorio, en el contexto del prompt, en la memoria de la herramienta.

PDF vs. brand-guidelines.md: una comparación lado a lado

Dimensión	PDF de marca	`brand-guidelines.md`
Legible por IA	❌ Requiere OCR; pierde estructura	✅ Analizado de forma nativa por cada LLM
Vive en el repositorio	❌ Se encuentra en Drive/Notion/Dropbox	✅ Control de versiones junto al código
Siempre actualizado	❌ Actualizaciones manuales, confusión de versiones	✅ `git diff` muestra exactamente lo que cambió
Velocidad de incorporación	⏱ 30+ min para leer y absorber	⏱ 5 min para escanear; la IA lo usa al instante
Aplicado automáticamente	❌ Depende de la revisión humana	✅ La IA aplica reglas en cada generación
Legible por humanos	✅ Bonito, pero denso	✅ Markdown claro, fácil de hojear
Costo de actualizar	💸 Honorarios de agencia u horas de diseño	✍️ Edita un archivo de texto en cualquier editor

El PDF no ha muerto para las presentaciones a los stakeholders. Pero para la ejecución diaria —donde las herramientas de IA están generando— el texto plano gana de forma decisiva.

Cómo usar brand-guidelines.md con Google Stitch

Google Stitch lee tu brand-guidelines.md y lo usa para restringir su generación de UI. En lugar de producir componentes Material genéricos, genera una UI que coincide con tu sistema de color, tipografía, espaciado y convenciones de componentes.

El flujo de trabajo consta de tres pasos:

Sube o coloca el archivo. Suelta brand-guidelines.md en la raíz de tu proyecto, o súbelo directamente en la interfaz de Stitch.
Genera prompts de forma natural. Pide lo que necesites: "Genera una sección de precios con tres niveles y un plan popular resaltado."
Obtén una salida alineada con la marca. Stitch aplica tus colores, jerarquía de tipos, estilos de botones y espaciado automáticamente. No se necesita una revisión de diseño para los aspectos básicos.

El resultado no solo está más cerca de tu marca, sino que también se envía más rápido porque te saltas la fase de corrección que normalmente consume toda una tarde.

Usándolo con Cursor, Copilot y herramientas de codificación con IA

Suelta DESIGN.md (o brand-guidelines.md) en la raíz de tu repositorio y referéncialo en tus prompts:

Cursor:

@DESIGN.md Genera una sección de héroe para la página de inicio.
Usa el estilo de CTA principal, la tipografía de encabezado y el sistema de color del archivo.

GitHub Copilot (modo de espacio de trabajo):

#file:DESIGN.md Crea un componente de cuadrícula de tarjetas de testimonios
usando las directrices de tarjetas y el sistema de espaciado definidos aquí.

Claude / ChatGPT (pega o adjunta el archivo):

Aquí están mis directrices de marca [adjunto: brand-guidelines.md].
Escribe tres opciones de titulares para la página de inicio que coincidan con la voz de la marca
y se dirijan al ICP 1 (Growth Marketing Manager).

v0 / Bolt / Lovable: Sube brand-guidelines.md como archivo de proyecto, o pega las secciones relevantes en tu prompt. Estas herramientas aplicarán tus colores, tipo y especificaciones de componentes a cada generación.

La recompensa: los desarrolladores que nunca han leído las directrices de la marca producen código alineado con la marca desde su primer prompt. La restricción está incrustada en el flujo de trabajo, no impuesta a través de ciclos de revisión y mensajes de Slack.

Más allá de lo visual: por qué la estrategia en el archivo lo cambia todo

La mayoría de los archivos de sistemas de diseño se detienen en los colores y las fuentes. Un brand-guidelines.md de Branding5 va más profundo, y esa profundidad es lo que transforma la salida de la IA de "se ve bien" a "se siente bien".

La base de la marca le dice a la IA por qué la marca toma las decisiones que toma. Cuando una IA sabe que eres un arquetipo de Sabio dirigido a especialistas en marketing no técnicos, no solo elige el color correcto del botón, sino que escribe un texto claro y seguro en lugar de uno exagerado y sin aliento.

Los Perfiles de Cliente Ideal dan a la IA el contexto de la audiencia para generar mensajes relevantes. Un titular para un VP de Marketing se lee muy diferente de uno dirigido a un Growth Marketing Manager. Sin los ICP en el archivo, la IA adivina. Con ellos, apunta.

Las directrices de voz y tono con ejemplos concretos (buenos y malos) son la sección de mayor impacto para la calidad del texto. Un ejemplo bien escrito de "hacer/no hacer" le enseña a una IA más que cien palabras de descripción abstracta de la voz.

Los pros y los contras actúan como restricciones estrictas. "Nunca uses más de 3 colores en un componente" y "siempre incluye una CTA en cada sección" son reglas que la IA puede seguir literalmente, siempre. Sin ambigüedad, sin desviaciones.

Cómo Branding5 genera el tuyo

Después de completar tu análisis de marca en Branding5, tu brand-guidelines.md está listo para descargar desde el panel de control. Esto es lo que sucede detrás de escena:

Tu estrategia de marca alimenta el archivo. Posicionamiento, arquetipo, ICPs, análisis de la competencia, tono de voz — todo lo que has construido en Branding5 fluye directamente a la salida estructurada de Markdown.
Las especificaciones visuales se derivan de tu posicionamiento. Los colores, la tipografía y las convenciones de componentes se generan para coincidir con la personalidad de tu marca, no se extraen de una plantilla genérica.
El resultado sigue la especificación design-md. Stitch y las herramientas compatibles lo analizan de forma nativa. Sin conversión, sin reformateo.
Está listo para usar inmediatamente. Suéltalo en tu repositorio, adjúntalo a tu herramienta de IA o compártelo con tu equipo. Un archivo, todas las herramientas, desde el primer día.

Los 30 minutos que dedicas en Branding5 producen:

Un PDF de estrategia para tus stakeholders e inversores
Marcos de mensajería para tu equipo de marketing
Un brand-guidelines.md para cada herramienta de IA que tu equipo de ingeniería y diseño utilice

Sin redacción. Sin formato manual. Sin necesidad de experiencia en Markdown.

Para empezar: una lista de verificación de cinco minutos

¿Ya tienes una estrategia de marca? Así es como puedes pasar de cero a un sistema de marca listo para la IA en cinco minutos:

Genera tu archivo. Ejecuta tu análisis de marca en Branding5 y descarga brand-guidelines.md desde tu panel.
Suéltalo en la raíz de tu repositorio. Nómbralo DESIGN.md si tu equipo prefiere la convención de desarrolladores, o mantén brand-guidelines.md para mayor claridad.
Informa a tu equipo. Comparte un mensaje de una línea: "Nuestras directrices de marca ahora están en DESIGN.md en la raíz del proyecto. Referéncialo en cada prompt de IA."
Referéncialo en cada sesión de IA. Usa @DESIGN.md en Cursor, adjúntalo en Claude o ChatGPT, súbelo en v0 o Bolt.
Mantenlo actualizado. Cuando tu marca evolucione, actualiza el archivo y haz commit. Git rastrea el cambio. Cada herramienta lo recoge al instante.

Eso es todo. Sin presentación de incorporación. Sin cuello de botella en la revisión de diseño. Se acabó el "¿cuál es el color de nuestra marca?" en Slack.

En resumen

Las herramientas de IA están escribiendo tu código, generando tu texto y estructurando tus componentes. La única pregunta es si lo están haciendo alineado con la marca, o si lo están inventando sobre la marcha.

Un brand-guidelines.md responde a esa pregunta de una vez. Luego la responde de nuevo, automáticamente, en cada generación, en cada herramienta, para cada persona de tu equipo.

El formato Stitch de Google está convirtiendo las directrices de marca legibles por máquina en un estándar. DESIGN.md se está convirtiendo en el archivo que los desarrolladores esperan encontrar en la raíz del proyecto. Las marcas que lo adopten ahora enviarán más rápido, mantendrán una mayor coherencia y perderán menos tiempo corrigiendo resultados de IA que no dieron en el blanco.

Tu estrategia de marca ya está en Branding5. Tu brand-guidelines.md está a un clic de distancia.

Preguntas frecuentes

¿Cuál es la diferencia entre DESIGN.md y brand-guidelines.md?

Son el mismo formato. DESIGN.md es el apodo popular en las comunidades de desarrolladores —refleja las convenciones de nombres de README.md. brand-guidelines.md es más descriptivo, señalando que el archivo contiene la estrategia de marca (posicionamiento, voz, ICPs), no solo especificaciones visuales. Usa el nombre que tu equipo prefiera; las herramientas de IA los analizan de forma idéntica.

¿Necesito saber Markdown para crear o editar el archivo?

No. Branding5 genera el archivo automáticamente a partir de tu análisis de marca. Si quieres hacer ediciones manuales más tarde, Markdown es simplemente texto plano con formato simple (# para encabezados, - para listas, ** para negrita). Cualquiera puede aprender lo básico en dos minutos.

¿Qué herramientas de IA soportan design-md / DESIGN.md?

Google Stitch lo lee de forma nativa. Cursor, GitHub Copilot, Windsurf, Claude, ChatGPT, v0, Bolt y Lovable funcionan con él cuando lo referencias o adjuntas. Dado que es Markdown plano, cualquier herramienta impulsada por LLM puede analizarlo y seguirlo, sin necesidad de plugins o integraciones.

¿Qué tan detallado debe ser mi brand-guidelines.md?

Lo suficientemente detallado como para eliminar la ambigüedad. Como mínimo, incluye tu paleta de colores con reglas de uso, especificaciones tipográficas, convenciones de botones/tarjetas/formularios y directrices de voz con ejemplos. Cuanto más específicos sean tus "haceres y no haceres", más consistente será la salida de la IA. Branding5 genera un archivo completo por defecto; siempre puedes recortar las secciones que no necesites.

¿Cómo mantengo el archivo sincronizado a medida que mi marca evoluciona?

Trátalo como cualquier otro archivo fuente: edita, haz commit, haz push. Como reside en Git, tu equipo ve exactamente qué cambió y cuándo. Si vuelves a ejecutar tu análisis de marca en Branding5, puedes descargar una versión actualizada y reemplazar el archivo anterior. Sin honorarios de agencia, sin un ciclo de revisión de un mes.

¿Puedo usar brand-guidelines.md para tareas que no son de código, como escribir entradas de blog o textos publicitarios?

Absolutamente. Adjunta el archivo (o pega las secciones de Voz de Marca e ICP) cuando uses prompts en Claude, ChatGPT o cualquier asistente de escritura. Las directrices de voz, los ejemplos de tono y los detalles de la audiencia están específicamente diseñados para mejorar el texto generado por IA, no solo el código.

Obtén tu brand-guidelines.md

Realiza tu análisis de marca en Branding5 y descarga un brand-guidelines.md (DESIGN.md) compatible con design-md, listo para Google Stitch, Cursor, Copilot y todo tu stack de herramientas de IA.

Genera tu brand-guidelines.md →