brand-guidelines.md: Die eine Datei, die jedes AI-Tool über deine Marke wissen muss

Du hast gutes Geld für Markenrichtlinien ausgegeben. Sie liegen als 47-seitiges PDF irgendwo in Google Drive — das, das deine Design-Agentur vor 18 Monaten geliefert hat. Deine Entwickler haben es nie geöffnet. Deine AI-Tools können es nicht öffnen. Und jedes Mal, wenn jemand in Cursor eine Landing Page erstellt, mit Claude eine Marketing-E-Mail entwirft oder in v0 eine Komponente baut, fängt er bei Null an: „Was war nochmal unsere Primärfarbe? Ist es Inter oder Plus Jakarta Sans? Runde oder scharfe Ecken?"

Diese Schleife — Marke erklären, hoffen, dass es hängen bleibt, korrigieren, was nicht passt — kostet jede Woche Stunden. Im Team kostet sie allein durch Nacharbeit Tausende pro Monat.

Googles Stitch design-md-Format eliminiert diese Schleife. Und Branding5 generiert deine komplette brand-guidelines.md automatisch — mit einem Klick downloaden, ins Repo werfen, und jedes AI-Tool, das dein Team berührt, kennt deine Marke sofort.

Was ist design-md? (Und warum nennen es manche DESIGN.md?)

Design-md ist ein Markdown-basiertes, reines Textformat für Marken- und Designrichtlinien. Statt eines PDFs, das nur Menschen (theoretisch) lesen können, ist es eine strukturierte .md-Datei, die sowohl Menschen als auch AI-Systeme parsen, verstehen und daraus bauen können.

Google hat das Format als Teil von Stitch — ihrer AI-gestützten UI-Generierungsplattform — entwickelt, mit einer einfachen Prämisse: Wenn du einer AI eine gut strukturierte Beschreibung deines Markensystems gibst, kann sie UI generieren, Texte schreiben und Designentscheidungen treffen, die bereits on-brand sind. Kein Wiederholen mehr in jeder Sitzung.

Zwei Namen, eine Idee

Dateien in diesem Format tragen zwei Namen:

• DESIGN.md — die Kurzform in Entwickler-Communities. Sie liegt neben README.md und CONTRIBUTING.md im Projekt-Root, und Cursor, Windsurf und andere AI-Coding-Tools suchen sie automatisch.
• brand-guidelines.md — der Name, den Branding5 verwendet, weil die Datei weit mehr als visuelle Spezifikationen enthält. Sie erfasst Positioning, Archetypen, ICPs, Voice und Strategie — das komplette Markensystem, nicht nur Farben und Fonts.

Beide Namen funktionieren. Das Format und die Kraft sind dieselben.

Was gehört in eine brand-guidelines.md

Eine vollständige Datei deckt jede Ebene deiner Marke ab — von der Strategie bis zu Pixel-Spezifikationen. So sieht eine Branding5-generierte brand-guidelines.md in der Praxis aus:

# Acme Analytics

## Marken-Fundament

- **Positioning:** Die einzige Analytics-Plattform für nicht-technische Marketing-Teams,
  die Enterprise-Insights ohne Lernkurve brauchen.
- **Archetyp:** Der Weise — weise, vertrauenswürdig, datengetrieben
- **Mission:** Datenkompetenz für jeden Marketer zugänglich machen.
- **Werte:** Klarheit vor Komplexität. Genauigkeit vor Geschwindigkeit.
  Empowerment vor Abhängigkeit.

## Ideale Kundenprofile

### ICP 1: Growth Marketing Manager

- 28–38, Mid-Market SaaS (50–500 Mitarbeiter)
- Frustriert von komplexen BI-Tools; braucht Dashboards, die er allein baut
- Sprachmuster: „actionable insights", „self-serve", „time-to-value"
- Haupteinwand: „Wird das unseren bestehenden BI-Stack ersetzen?"

### ICP 2: VP of Marketing

- 35–50, berichtet an CMO oder CEO
- Interessiert sich für Cross-Channel-Attribution und Board-reifes Reporting
- Kauft auf ROI-Nachweis und Integrationsbreite

## Visuelle Identität

### Farben

| Rolle       | Hex       | Verwendung                                  |
| ----------- | --------- | ------------------------------------------- |
| Primär      | `#2563eb` | CTAs, aktive Zustände, wichtige UI-Elemente |
| Sekundär    | `#f8fafc` | Hintergründe, Cards, Container              |
| Akzent      | `#16a34a` | Erfolgszustände, positive Kennzahlen        |
| Neutral 900 | `#0f172a` | Fließtext, Überschriften                    |
| Neutral 400 | `#94a3b8` | Platzhaltertext, deaktivierte Zustände      |
| Fehler      | `#dc2626` | Fehlerzustände, destruktive Aktionen        |
| Warnung     | `#f59e0b` | Warnzustände, Aufmerksamkeits-Alerts        |

### Typografie

| Rolle     | Familie           | Gewicht | Größe | Zeilenhöhe | 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        |
| Fließtext | Inter             | 400     | 16px  | 1.6        | 0        |
| Caption   | Inter             | 500     | 13px  | 1.4        | 0.01em   |
| Code      | JetBrains Mono    | 400     | 14px  | 1.5        | 0        |

### Abstände & Layout

- Basis-Einheit: 8px
- Component-Padding: 16px (kompakt), 24px (Standard), 32px (geräumig)
- Section-Abstand: 64px (Desktop), 48px (Mobile)
- Max. Content-Breite: 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)`

## Markenstimme & Tonfall

- **Stimme:** Direkt, selbstbewusst, jargorfrei. Wir erklären, wir belehren nicht.
- **Tonfalten:** Wärmer im Onboarding, selbstbewusster in Sales-Copy,
  präzise und neutral in der Dokumentation.
- **Satzstil:** Kurze Sätze. Aktive Stimme. Benefit zuerst.
- **Vermeiden:** Passivkonstruktionen, „leveragen", „Synergie", Füllwörter,
  Ausrufezeichen in der Produkt-UI.

### Beispiele

- ✅ „Sehen Sie auf einen Klick, welche Kampagnen Umsatz bringen."
- ❌ „Unsere innovative Plattform nutzt bahnbrechende Technologie, um
  Ihr Marketing-Team mit best-in-class Analytics-Lösungen zu empowern."

## Komponenten-Richtlinien

### Buttons

- Primär: filled, `#2563eb`, weißer Text, rounded-full, Min-Höhe 44px
- Sekundär: outlined, 1px Border `#2563eb`, transparenter Hintergrund
- Ghost: keine Border, nur Text, verwendet in Nav und tertiären Aktionen
- Alle Buttons: 16px horizontal Padding, font-weight 600, kein Uppercase

### Cards

- Hintergrund: weiß, border-radius 8px, subtiler Schatten
- Padding: 24px
- Header: H3-Gewicht, 8px Margin-Bottom
- Immer eine klare CTA oder nächste Aktion enthalten

### Formulare

- Label über dem Input, font-weight 500
- Input-Höhe: 44px, border-radius 8px, 1px Border neutral-300
- Fehlermeldung unter dem Input in rot, 13px
- Pflichtfelder mit \* markiert (nicht nur über Farbe)

## Do's und Don'ts

- ✅ Pro Section immer eine einzelne, klare CTA
- ✅ Echte Daten in Beispielen und Screenshots, nie „Lorem ipsum"
- ✅ Kontrastverhältnisse testen — Minimum WCAG AA (4.5:1 für Text)
- ❌ Nie mehr als 3 Farben in einer einzelnen Komponente
- ❌ Keine Stock-Fotos von Menschen, die auf Bildschirme zeigen
- ❌ Fließtext länger als 2 Zeilen nicht zentrieren

Das ist die Anatomie. Hier ist, wie eine echte Ausgabe aussieht — generiert von Branding5 für Oscar Stories, eine AI-gestützte Gutenachtgeschichten-Plattform mit einem Narren-Archetyp.

YAML-Front-Matter — die maschinenlesbare Schicht

---
name: 'Oscar Stories'
website: 'https://www.oscarstories.com'
archetype: 'The Jester'
positioning_statement: >
  Für Eltern, die die Schlafenszeit in ein fröhliches Abenteuer verwandeln
  wollen, nutzt Oscar Stories kluge AI, um personalisierte Geschichten
  zu verfassen, in denen ihr Kind der Star ist.
usp: >
  Verfasst sofort einzigartige, AI-gestützte Geschichten, in denen ihr
  Kind der verspielte Held ist, macht die Schlafenszeit magisch,
  erleichtert sie für Eltern und inspiriert jede Nacht Fantasie und Werte.
voice:
  tone: 'Freundlich, fantasievoll und ermutigend...'
  personality: 'Verspielt, fantasievoll, fürsorglich, innovativ und vertrauenswürdig.'
  promise: 'Macht die Schlafenszeit zu einer magischen, bindenden Zeit...'
values:
  - 'Joyful Connection'
  - 'Trustworthy Innovation'
  - 'Nurturing Education'
typography:
  primary_font: 'Nunito Sans'
  secondary_font: 'Lora'
colors:
  primary: '#5e219c' # Midnight Plum
  darker: '#332145'
---

Was der Rest der Datei enthält

Unterhalb der YAML-Front-Matter setzt sich die vollständige Datei — über 14.000 Wörter — mit allem fort, was eine AI braucht, um on-brand-Entscheidungen zu treffen:

• Marken-Erzählung: Positioning-Statement, Mission, Vision, USP und die „Warum wir es tun"-Geschichte
• Archetyp-Tiefgang: Die Schlüsselmerkmale des Narren, Kernstrategien, potenzielle Fallstricke und Beispielmarken (Ben & Jerry's, M&M's, Old Spice)
• Visuelle Identität: Vollständiges Farbsystem mit Hex, CMYK, HSL und Hover-Zuständen; Typografie-Hierarchie mit Gewichten und Verwendungsregeln
• Ideales Kundenprofil: Vollständige Persona — „Der achtsame moderne Elternteil" — mit Demografie, Psychografie, Pain Points, Zielen und bevorzugten Kanälen
• SWOT-Analyse: Stärken, Schwächen, Chancen, Risiken und eine gesamtheitliche strategische Bewertung
• Marketing-Copy: 8 Headlines in der Narren-Stimme, 5 CTAs mit Dringlichkeitstaktiken und vollständige PAS-Landing-Page-Copy
• Content-Strategie: Hero/Hub/Hygiene-Content-Plan mit spezifischen Titeln, Kanälen und Zielen
• Marketing-Kampagnen: Awareness-, Interest- und Desire-Kampagnen, abgebildet auf dem AIDA-Framework

Ein Entwickler, der das Oscar-Stories-Team nie getroffen hat, kann diese Datei in Cursor werfen, nach einer Landing Page fragen und Copy bekommen, die wie die Marke klingt — verspielt, fantasievoll, niemals belehrend — mit der richtigen lila Palette und Nunito Sans-Überschriften. Kein Briefing. Kein Hin und Her.

So sehen maschinenlesbare Markenrichtlinien in der Praxis aus. Kein PDF. Eine einzelne Datei, die jedes AI-Tool deines Teams lesen, verstehen und daraus bauen kann.

Warum das jetzt wichtig ist

Drei Kräfte sind zusammengekommen, um maschinenlesbare Markenrichtlinien dringend und nicht optional zu machen:

1. AI-Tools schreiben jetzt den Großteil des Codes und der Copy

Cursor, GitHub Copilot, Claude, v0, Bolt, Lovable — Entwickler und Marketer shippen schneller denn je mit AI-Unterstützung. Aber diese Tools haben null Wissen über deine Marke, es sei denn, du sagst es ihnen. Jede Sitzung, jeder Prompt, du erklärst deine Farbpalette neu. Das ist kein Workflow — es ist eine Steuer auf Geschwindigkeit.

Eine einzelne brand-guidelines.md in deinem Repo eliminiert diese Steuer dauerhaft.

2. Google pusht design-md als Standard

Wenn Google ein Format-Spezifikation durch ein Produkt wie Stitch liefert, achtet das Ökosystem darauf. Figma-Plugins, VS-Code-Erweiterungen und AI-Komponenten-Generatoren fangen bereits an, nach einer DESIGN.md im Projekt-Root zu suchen. Wenn du deine Datei heute richtig aufsetzt, werden die Tools von morgen einfach funktionieren — ohne Migration, ohne Nacharbeit.

3. Markenkonsistenz in AI-Geschwindigkeit erfordert maschinenlesbare Regeln

Wenn dein Team 50 Blogposts pro Monat, 20 Ad-Variationen pro Woche und jede Sprint eine neue Landing Page generiert, ist ein PDF in Google Drive nutzlos. Die Markenregeln müssen dort leben, wo die Generierung passiert — im Repo, im Prompt-Kontext, im Tool-Speicher.

PDF vs. brand-guidelines.md: ein direkter Vergleich

Das PDF ist nicht tot für Stakeholder-Präsentationen. Aber für die tägliche Ausführung — wo AI-Tools die Generierung übernehmen — gewinnt Plain Text eindeutig.

Wie man brand-guidelines.md mit Google Stitch nutzt

Google Stitch liest deine brand-guidelines.md und nutzt sie, um seine UI-Generierung einzuschränken. Statt generischer Material-Komponenten liefert es UI, das zu deinem Farbsystem, deiner Typografie, deinen Abständen und Komponenten-Konventionen passt.

Der Workflow ist drei Schritte:

1. Datei hochladen oder platzieren. Lege brand-guidelines.md in deinem Projekt-Root ab oder lade sie direkt in der Stitch-Oberfläche hoch.
2. Natürlich prompten. Frag nach dem, was du brauchst: „Generiere einen Pricing-Bereich mit drei Stufen und einem hervorgehobenen beliebten Plan."
3. On-brand-Output erhalten. Stitch wendet deine Farben, Typ-Hierarchie, Button-Stile und Abstände automatisch an. Kein Design-Review für die Basics nötig.

Das Ergebnis ist nicht nur näher an deiner Marke — es ist schneller zu shippen, weil du den Korrektur-Durchgang überspringst, der normalerweise einen ganzen Nachmittag frisst.

Nutzung mit Cursor, Copilot und anderen AI-Coding-Tools

Lege DESIGN.md (oder brand-guidelines.md) in deinem Repo-Root ab und referenziere sie in deinen Prompts:

Cursor:

@DESIGN.md Generiere einen Hero-Bereich für die Homepage.
Nutze den primären CTA-Stil, die Heading-Typografie und das Farbsystem aus der Datei.

GitHub Copilot (Workspace-Modus):

#file:DESIGN.md Baue ein Testimonial-Card-Grid-Komponente
mit den Card-Richtlinien und dem Spacing-System, das hier definiert ist.

Claude / ChatGPT (einfügen oder Datei anhängen):

Hier sind meine Markenrichtlinien [angehängt: brand-guidelines.md].
Schreibe drei Homepage-Headline-Optionen, die zur Markenstimme passen
und ICP 1 (Growth Marketing Manager) ansprechen.

v0 / Bolt / Lovable: Lade brand-guidelines.md als Projektdatei hoch oder füge die relevanten Abschnitte in deinen Prompt ein. Diese Tools wenden deine Farben, Typografie und Komponenten-Spezifikationen auf jede Generierung an.

Der Vorteil: Entwickler, die die Markenrichtlinien nie gelesen haben, produzieren on-brand Code ab dem ersten Prompt. Die Einschränkung ist in den Workflow eingebettet — nicht durch Review-Zyklen und Slack-Nachrichten erzwungen.

Jenseits von Visuellem: Warum Strategie in der Datei alles verändert

Die meisten Design-System-Dateien stoppen bei Farben und Fonts. Eine brand-guidelines.md von Branding5 geht tiefer — und diese Tiefe ist es, die AI-Output von „sieht richtig aus" zu „fühlt sich richtig an" transformiert.

Marken-Fundament sagt der AI warum die Marke die Entscheidungen trifft, die sie trifft. Wenn eine AI weiß, dass du ein Weiser-Archetyp bist, der nicht-technische Marketer anspricht, wählt sie nicht nur die richtige Button-Farbe — sie schreibt Copy, die klar und selbstbewusst ist, statt hype-getrieben und atemlos.

Ideale Kundenprofile geben der AI den Audience-Kontext, um relevante Messaging zu generieren. Eine Headline für einen VP of Marketing liest sich sehr anders als eine für einen Growth Marketing Manager. Ohne ICPs in der Datei rät die AI. Mit ihnen zielt sie gezielt.

Stimmen- und Tonfall-Richtlinien mit konkreten Beispielen (gut und schlecht) sind der einzelne Bereich mit dem höchsten Hebel für Copy-Qualität. Ein gut geschriebenes „Do / Don't"-Beispiel lehrt eine AI mehr als hundert Worte abstrakter Stimmenbeschreibung.

Do's und Don'ts wirken als harte Einschränkungen. „Nie mehr als 3 Farben in einer Komponente" und „immer eine CTA in jeder Section" sind Regeln, die die AI wortwörtlich befolgen kann, jedes Mal. Keine Mehrdeutigkeit, kein Drift.

Wie Branding5 deine generiert

Nach Abschluss deiner Markenanalyse in Branding5 ist deine brand-guidelines.md im Dashboard zum Download bereit. So funktioniert es im Hintergrund:

1. Deine Markenstrategie speist die Datei. Positioning, Archetyp, ICPs, Wettbewerbsanalyse, Tonfall — alles, was du in Branding5 aufgebaut hast, fließt direkt in die strukturierte Markdown-Ausgabe.
2. Visuelle Spezifikationen werden aus deinem Positioning abgeleitet. Farben, Typografie und Komponenten-Konventionen werden generiert, um zu deiner Markenpersönlichkeit zu passen — nicht aus einer generischen Vorlage gezogen.
3. Die Ausgabe folgt der design-md-Spezifikation. Stitch und kompatible Tools parsen sie nativ. Keine Konvertierung, kein Neuformatieren.
4. Sie ist sofort einsatzbereit. Lege sie in dein Repo, hänge sie an dein AI-Tool an oder teile sie mit deinem Team. Eine Datei, jedes Tool, ab Tag eins.

Die 30 Minuten, die du in Branding5 investierst, produzieren:

• Ein Strategie-PDF für deine Stakeholder und Investoren
• Messaging-Frameworks für dein Marketing-Team
• Eine brand-guidelines.md für jedes AI-Tool, das dein Engineering- und Design-Team jemals nutzen wird

Kein Copywriting. Kein manuelles Formatieren. Keine Markdown-Expertise nötig.

Erste Schritte: Eine Fünf-Minuten-Checkliste

Hast du bereits eine Markenstrategie? So kommst du in fünf Minuten von null zu einem AI-fähigen Markensystem:

1. Datei generieren. Führe deine Markenanalyse in Branding5 durch und lade brand-guidelines.md aus deinem Dashboard herunter.
2. Ins Repo-Root legen. Nenne sie DESIGN.md, wenn dein Team die Entwickler-Konvention bevorzugt, oder behalte brand-guidelines.md für mehr Klarheit.
3. Deinem Team mitteilen. Teile eine einzeilige Nachricht: „Unsere Markenrichtlinien sind jetzt in DESIGN.md im Projekt-Root. Referenziere sie in jedem AI-Prompt."
4. In jeder AI-Sitzung referenzieren. Nutze @DESIGN.md in Cursor, hänge sie in Claude oder ChatGPT an, lade sie in v0 oder Bolt hoch.
5. Aktuell halten. Wenn sich deine Marke weiterentwickelt, aktualisiere die Datei und committe. Git trackt die Änderung. Jedes Tool nimmt sie sofort auf.

Das war's. Kein Onboarding-Deck. Kein Design-Review-Flaschenhals. Keine „Was ist nochmal unsere Markenfarbe?"-Nachrichten mehr in Slack.

Das Fazit

AI-Tools schreiben deinen Code, generieren deine Copy und bauen deine Komponenten. Die einzige Frage ist, ob sie es on-brand tun — oder einfach drauflosarbeiten.

Eine brand-guidelines.md beantwortet diese Frage einmal. Dann beantwortet sie sie automatisch, bei jeder Generierung, über jedes Tool, für jede Person in deinem Team.

Googles Stitch-Format macht maschinenlesbare Markenrichtlinien zum Standard. DESIGN.md wird zur Datei, die Entwickler im Projekt-Root erwarten. Die Marken, die das jetzt adoptieren, werden schneller shippen, konsistenter bleiben und weniger Zeit damit verschwenden, AI-Output zu korrigieren, der danebengegriffen hat.

Deine Markenstrategie ist bereits in Branding5. Deine brand-guidelines.md ist einen Klick entfernt.

Häufig gestellte Fragen

Was ist der Unterschied zwischen DESIGN.md und brand-guidelines.md?

Es ist dasselbe Format. DESIGN.md ist die Kurzform in Entwickler-Communities — sie spiegelt README.md-Namenskonventionen wider. brand-guidelines.md ist aussagekräftiger und signalisiert, dass die Datei Markenstrategie (Positioning, Voice, ICPs) enthält, nicht nur visuelle Spezifikationen. Nutze den Namen, den dein Team bevorzugt; AI-Tools parsen beide identisch.

Muss ich Markdown kennen, um die Datei zu erstellen oder zu bearbeiten?

Nein. Branding5 generiert die Datei automatisch aus deiner Markenanalyse. Wenn du später manuelle Änderungen vornehmen möchtest, ist Markdown einfacher Text mit einfacher Formatierung (# für Überschriften, - für Listen, ** für Fett). Jeder kann die Grundlagen in zwei Minuten lernen.

Welche AI-Tools unterstützen design-md / DESIGN.md?

Google Stitch liest sie nativ. Cursor, GitHub Copilot, Windsurf, Claude, ChatGPT, v0, Bolt und Lovable arbeiten alle damit, wenn du die Datei referenzierst oder anhängst. Weil es Plain Markdown ist, kann jedes LLM-basierte Tool sie parsen und befolgen — kein Plugin oder Integration nötig.

Wie detailliert sollte meine brand-guidelines.md sein?

Detailliert genug, um Mehrdeutigkeit zu entfernen. Mindestens: Farbpalette mit Verwendungsregeln, Typografie-Spezifikationen, Button/Card/Form-Konventionen und Voice-Richtlinien mit Beispielen. Je spezifischer deine Do's und Don'ts, desto konsistenter der AI-Output. Branding5 generiert standardmäßig eine umfassende Datei — du kannst immer Abschnitte entfernen, die du nicht brauchst.

Wie halte ich die Datei synchron, wenn sich meine Marke weiterentwickelt?

Behandle sie wie jede andere Source-Datei: bearbeiten, commiten, pushen. Weil sie in Git lebt, sieht dein Team exakt, was sich wann geändert hat. Wenn du deine Markenanalyse in Branding5 neu ausführst, kannst du eine aktualisierte Version herunterladen und die alte Datei ersetzen. Kein Agentur-Retainer, kein monatelanger Revisionszyklus.

Kann ich brand-guidelines.md auch für Nicht-Code-Aufgaben wie Blogposts oder Ad-Copy nutzen?

Absolut. Hänge die Datei an (oder füge die Brand-Voice- und ICP-Abschnitte ein), wenn du Claude, ChatGPT oder einen anderen Schreibassistenten promptest. Die Voice-Richtlinien, Ton-Beispiele und Audience-Details sind speziell dafür konzipiert, AI-generierte Copy zu verbessern — nicht nur Code.

Hol dir deine brand-guidelines.md

Führe deine Markenanalyse in Branding5 durch und lade eine design-md-konforme brand-guidelines.md (DESIGN.md) herunter — bereit für Google Stitch, Cursor, Copilot und deinen gesamten AI-Tool-Stack.

Generiere deine brand-guidelines.md →