brand-guidelines.md: El único archivo que toda herramienta de IA necesita para conocer tu marca

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, ese que tu agencia de diseño 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 primario de nuevo? ¿Es Inter o Plus Jakarta Sans? ¿Usamos esquinas redondeadas o afiladas?"

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

El formato design-md de Stitch de Google elimina ese bucle. Y Branding5 genera tu brand-guidelines.md completo automáticamente — descárgalo con un clic, colócalo 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 texto plano, basada en Markdown, para directrices de marca y diseño. En lugar de un PDF que solo los humanos pueden (teóricamente) leer, es un archivo .md estructurado que tanto las personas como los sistemas de IA pueden analizar, comprender y construir a partir de él.

Google creó el formato como parte de Stitch —su plataforma de generación de UI impulsada por IA— con una premisa sencilla: si le das a una IA una descripción bien estructurada de tu sistema de marca, puede generar UI, escribir texto y tomar decisiones de diseño que ya estén alineadas con la marca. Se acabó el repetirse en cada sesión.

Dos nombres, una idea

Los archivos escritos en este formato tienen dos nombres:

• DESIGN.md — la abreviatura 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 de marca completo, no solo colores y fuentes.

Cualquiera de los nombres funciona. El formato y el poder son los mismos.

Qué contiene un brand-guidelines.md

Un archivo completo cubre 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:** The only analytics platform built for non-technical marketing teams
  who need enterprise-grade insights without the learning curve.
- **Archetype:** The Sage — wise, trustworthy, data-driven
- **Mission:** Make data literacy accessible to every marketer.
- **Values:** Clarity over complexity. Accuracy over speed. Empowerment over dependency.

## Ideal Customer Profiles

### ICP 1: Growth Marketing Manager

- 28–38, mid-market SaaS (50–500 employees)
- Frustrated by complex BI tools; needs dashboards they can build alone
- Language patterns: "actionable insights", "self-serve", "time-to-value"
- Key objection: "Will this replace our existing BI stack?"

### ICP 2: VP of Marketing

- 35–50, reports to CMO or CEO
- Cares about cross-channel attribution and board-ready reporting
- Buys on ROI proof and integration breadth

## Visual Identity

### Colors

| Role        | Hex       | Usage                                |
| ----------- | --------- | ------------------------------------ |
| Primary     | `#2563eb` | CTAs, active states, key UI elements |
| Secondary   | `#f8fafc` | Backgrounds, cards, containers       |
| Accent      | `#16a34a` | Success states, positive metrics     |
| Neutral 900 | `#0f172a` | Body text, headings                  |
| Neutral 400 | `#94a3b8` | Placeholder text, disabled states    |
| Error       | `#dc2626` | Error states, destructive actions    |
| Warning     | `#f59e0b` | Warning states, attention alerts     |

### 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

- Base unit: 8px
- Component padding: 16px (compact), 24px (default), 32px (spacious)
- Section spacing: 64px (desktop), 48px (mobile)
- Max content width: 1200px
- Border radius: 8px (cards), 12px (modals), 9999px (pills/buttons)

### Shadows & Elevation

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

## Brand Voice & Tone

- **Voice:** Direct, confident, jargon-free. We explain, we don't lecture.
- **Tone shifts:** Warmer in onboarding, more assertive in sales copy,
  precise and neutral in documentation.
- **Sentence style:** Short sentences. Active voice. Lead with the benefit.
- **Avoid:** Passive constructions, "leverage", "synergy", filler phrases,
  exclamation marks in product UI.

### Examples

- ✅ "See which campaigns drive revenue — in one click."
- ❌ "Our innovative platform leverages cutting-edge technology to empower
  your marketing team with best-in-class analytics solutions."

## Component Guidelines

### Buttons

- Primary: filled, `#2563eb`, white text, rounded-full, min-height 44px
- Secondary: outlined, 1px border `#2563eb`, transparent background
- Ghost: no border, text-only, used in nav and tertiary actions
- All buttons: 16px horizontal padding, font-weight 600, no uppercase

### Cards

- Background: white, border-radius 8px, subtle shadow
- Padding: 24px
- Header: H3 weight, 8px margin-bottom
- Always include a clear CTA or next action

### Forms

- Label above input, font-weight 500
- Input height: 44px, border-radius 8px, 1px border neutral-300
- Error message below input in red, 13px
- Required fields marked with \* (not colour alone)

## Do's and Don'ts

- ✅ Always include a single, clear CTA per section
- ✅ Use real data in examples and screenshots, never "Lorem ipsum"
- ✅ Test contrast ratios — minimum WCAG AA (4.5:1 for text)
- ❌ Never use more than 3 colours in a single component
- ❌ Don't use stock photos of people pointing at screens
- ❌ Avoid centre-aligning body text longer than 2 lines

Es texto plano. Sin formato propietario. Sin herramientas especiales. Entrégalo a cualquier herramienta de IA —Cursor, Claude, Stitch, v0, Bolt, Copilot— y tu marca se convertirá en una capa de restricción que moldea cada salida automáticamente.

Por qué esto es importante ahora

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 — desarrolladores y especialistas en marketing están lanzando productos más rápido que nunca con la ayuda de la IA. Pero estas herramientas no tienen conocimiento de tu marca a menos que se lo digas. En cada sesión, en cada prompt, estás volviendo a explicar tu paleta de colores. Eso no es un flujo de trabajo, es un impuesto a la velocidad.

Un único 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 del mañana simplemente funcionarán, sin migración, sin retrabajo.

3. La coherencia de 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 aterrizaje cada sprint, un PDF en Google Drive es inútil. Las reglas de marca deben vivir donde se produce 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

El PDF no está muerto para las presentaciones a los interesados. 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 limitar su generación de UI. En lugar de producir componentes de Material genéricos, genera una UI que coincide con tu sistema de colores, tipografía, espaciado y convenciones de componentes.

El flujo de trabajo consta de tres pasos:

1. 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.
2. Pide de forma natural. Pregunta lo que necesites: "Genera una sección de precios con tres niveles y un plan popular resaltado."
3. Obtén resultados de marca. Stitch aplica tus colores, jerarquía tipográfica, estilos de botones y espaciado automáticamente. No se necesita revisión de diseño para lo básico.

El resultado no solo está más cerca de tu marca, sino que es más rápido de enviar porque te saltas la fase de corrección que normalmente consume una tarde entera.

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

Coloca 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 colores del archivo.

GitHub Copilot (modo de espacio de trabajo):

#file:DESIGN.md Construye 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 (Gerente de Marketing de Crecimiento).

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

La recompensa: los desarrolladores que nunca han leído las directrices de marca producen código de marca desde su primer prompt. La restricción está incrustada en el flujo de trabajo, no se impone 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 colores y fuentes. Un brand-guidelines.md de Branding5 va más allá — y esa profundidad es lo que transforma la salida de 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 de botón correcto, sino que escribe textos claros y seguros en lugar de promocionales y exagerados.

Los Perfiles de Cliente Ideal (ICP) le dan a la IA el contexto de audiencia para generar mensajes relevantes. Un titular para un VP de Marketing se lee muy diferente a uno dirigido a un Gerente de Marketing de Crecimiento. Sin los ICPs en el archivo, la IA adivina. Con ellos, acierta el objetivo.

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 "qué hacer / qué no hacer" le enseña a una IA más que cien palabras de descripción abstracta de voz.

Lo que se debe y no se debe hacer actúan como restricciones estrictas. "Nunca usar más de 3 colores en un componente" y "siempre incluir una CTA en cada sección" son reglas que la IA puede seguir literalmente, cada vez. 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. Esto es lo que sucede entre bastidores:

1. 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 Markdown estructurada.
2. Las especificaciones visuales se derivan de tu posicionamiento. Colores, tipografía y convenciones de componentes se generan para coincidir con la personalidad de tu marca — no se extraen de una plantilla genérica.
3. La salida sigue la especificación design-md. Stitch y herramientas compatibles lo analizan de forma nativa. Sin conversión, sin reformateo.
4. 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, cada herramienta, desde el primer día.

Los 30 minutos que pasas en Branding5 producen:

• Un PDF de estrategia para tus interesados 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 usará

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

Empezar: una lista de verificación de cinco minutos

¿Ya tienes una estrategia de marca? Aquí te explicamos cómo pasar de cero a un sistema de marca listo para IA en cinco minutos:

1. Genera tu archivo. Realiza tu análisis de marca en Branding5 y descarga brand-guidelines.md desde tu panel.
2. 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.
3. 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éncialas en cada prompt de IA."
4. 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.
5. Manténlo 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 paquete de incorporación. Sin cuello de botella en la revisión de diseño. Se acabaron los "¿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 de acuerdo con la marca, o si lo están inventando sobre la marcha.

Un brand-guidelines.md responde a esa pregunta 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 productos más rápido, se mantendrán más coherentes y perderán menos tiempo corrigiendo la salida de IA que no cumplió con las expectativas.

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 la abreviatura popular en las comunidades de desarrolladores —se asemeja a 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 deseas realizar ediciones manuales más tarde, Markdown es simplemente texto plano con formato sencillo (# para encabezados, - para listas, ** para negritas). 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 referencias o adjuntas el archivo. Dado que es Markdown plano, cualquier herramienta impulsada por LLM puede analizarlo y seguirlo — no se requiere ningún plugin o integración.

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

Suficientemente detallado para eliminar 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 "qué hacer y qué no hacer", 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 antiguo. Sin retención de agencia, sin ciclos 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 de anuncios?

Absolutamente. Adjunta el archivo (o pega las secciones de Voz de Marca e ICP) al dar prompts a 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 conjunto de herramientas de IA.

Genera tu brand-guidelines.md →