brand-guidelines.md: Die eine Datei, die jedes KI-Tool kennen muss, um Ihre Marke zu verstehen

Sie haben gutes Geld für Brand Guidelines bezahlt. Sie liegen als 47-seitiges PDF irgendwo in Google Drive – das, was Ihre Designagentur vor 18 Monaten geliefert hat. Ihre Entwickler haben es nie geöffnet. Ihre KI-Tools können es nicht öffnen. Und jedes Mal, wenn jemand eine Landing Page in Cursor erstellt, eine Marketing-E-Mail mit Claude entwirft oder eine Komponente in v0 scaffolded, fangen sie bei Null an: „Was ist noch mal unsere Primärfarbe? Ist es Inter oder Plus Jakarta Sans? Verwenden wir abgerundete oder scharfe Ecken?"

Dieser Kreislauf – die Marke erklären, hoffen, dass es hängen bleibt, beheben, was nicht funktioniert – kostet jede Woche Stunden. Über ein Team hinweg kostet es allein an Nacharbeit Tausende pro Monat.

Googles Stitch design-md Format eliminiert diesen Kreislauf. Und Branding5 generiert Ihre vollständige brand-guidelines.md automatisch – laden Sie sie mit einem Klick herunter, legen Sie sie in Ihr Repo, und jedes KI-Tool, das Ihr Team verwendet, kennt sofort Ihre Marke.

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

Design-md ist eine Reintext-Spezifikation auf Markdown-Basis für Marken- und Designrichtlinien. Anstelle eines PDFs, das nur Menschen (theoretisch) lesen können, ist es eine strukturierte .md-Datei, die sowohl Menschen als auch KI-Systeme parsen, verstehen und daraus aufbauen können.

Google hat das Format als Teil von Stitch – ihrer KI-gesteuerten UI-Generierungsplattform – mit einer einfachen Prämisse geschaffen: Wenn man einer KI eine gut strukturierte Beschreibung des eigenen Markensystems gibt, kann sie UI generieren, Texte schreiben und Designentscheidungen treffen, die bereits markenkonform sind. Kein Wiederholen mehr in jeder Sitzung.

Zwei Namen, eine Idee

Dateien, die in diesem Format geschrieben sind, tragen zwei Namen:

• DESIGN.md – die Kurzform in Entwickler-Communities. Sie befindet sich neben README.md und CONTRIBUTING.md im Projekt-Root, und Cursor, Windsurf sowie andere KI-Code-Tools suchen automatisch danach.
• brand-guidelines.md – der Name, den Branding5 verwendet, weil die Datei weit mehr als nur visuelle Spezifikationen enthält. Sie erfasst Ihre Positionierung, Archetypen, ICPs, Stimme und Strategie – das vollständige Markensystem, nicht nur Farben und Schriftarten.

Beide Namen funktionieren. Das Format und die Leistungsfähigkeit sind die gleichen.

Was gehört in eine brand-guidelines.md

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

# Acme Analytics

## Brand Foundation

- **Positionierung:** Die einzige Analyseplattform, die für nicht-technische Marketingteams entwickelt wurde,
  die Einblicke auf Unternehmensniveau ohne Lernkurve benötigen.
- **Archetyp:** Der Weise – klug, vertrauenswürdig, datengesteuert
- **Mission:** Datenkompetenz für jeden Marketer zugänglich machen.
- **Werte:** Klarheit über Komplexität. Genauigkeit über Geschwindigkeit. Befähigung über Abhängigkeit.

## Ideal Customer Profiles

### ICP 1: Growth Marketing Manager

- 28–38 Jahre, Mid-Market SaaS (50–500 Mitarbeiter)
- Frustriert von komplexen BI-Tools; benötigt Dashboards, die er selbst erstellen kann
- Sprachmuster: „umsetzbare Einblicke“, „Self-Service“, „Time-to-Value“
- Haupteinwand: „Wird dies unseren bestehenden BI-Stack ersetzen?“

### ICP 2: VP of Marketing

- 35–50 Jahre, berichtet an CMO oder CEO
- Kümmert sich um kanalübergreifende Attribution und Vorstands-reife Berichterstattung
- Kauft aufgrund von ROI-Nachweisen und Integrationsbreite

## Visual Identity

### Colors

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

### Typography

| Rolle        | Familie           | Stärke | Größe | Zeilenhöhe | Zeichenabstand |
| ------------ | ----------------- | ------ | ----- | ---------- | -------------- |
| 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              |
| Textkörper   | Inter             | 400    | 16px  | 1.6        | 0              |
| Beschriftung | Inter             | 500    | 13px  | 1.4        | 0.01em         |
| Code         | JetBrains Mono    | 400    | 14px  | 1.5        | 0              |

### Spacing & Layout

- Grundeinheit: 8px
- Komponenten-Padding: 16px (kompakt), 24px (Standard), 32px (geräumig)
- Abschnittsabstand: 64px (Desktop), 48px (Mobil)
- Maximale Inhaltsbreite: 1200px
- Border Radius: 8px (Karten), 12px (Modale), 9999px (Pills/Buttons)

### Shadows & Elevation

- Karte: `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

- **Stimme:** Direkt, selbstbewusst, jargonfrei. Wir erklären, wir belehren nicht.
- **Tonfall-Variationen:** Wärmer im Onboarding, bestimmter in Verkaufstexten,
  präzise und neutral in der Dokumentation.
- **Satzstil:** Kurze Sätze. Aktive Stimme. Mit dem Nutzen beginnen.
- **Vermeiden:** Passive Konstruktionen, „leverage“, „Synergie“, Füllwörter,
  Ausrufezeichen in der Produkt-UI.

### Examples

- ✅ „Sehen Sie, welche Kampagnen Umsatz generieren – mit einem Klick.“
- ❌ „Unsere innovative Plattform nutzt modernste Technologie, um Ihr Marketingteam
  mit erstklassigen Analyselösungen zu befähigen.“

## Component Guidelines

### Buttons

- Primär: gefüllt, `#2563eb`, weißer Text, abgerundet-voll, Mindesthöhe 44px
- Sekundär: umrandet, 1px Rand `#2563eb`, transparenter Hintergrund
- Ghost: kein Rand, nur Text, verwendet in Navigation und tertiären Aktionen
- Alle Buttons: 16px horizontaler Abstand, Schriftstärke 600, keine Großbuchstaben

### Cards

- Hintergrund: weiß, Border-Radius 8px, dezenter Schatten
- Padding: 24px
- Kopfzeile: H3 Stärke, 8px unterer Rand
- Immer einen klaren CTA oder eine nächste Aktion enthalten

### Forms

- Beschriftung über dem Eingabefeld, Schriftstärke 500
- Eingabefeldhöhe: 44px, Border-Radius 8px, 1px Rand neutral-300
- Fehlermeldung unter dem Eingabefeld in Rot, 13px
- Pflichtfelder mit \* kennzeichnen (nicht nur durch Farbe)

## Do's and Don'ts

- ✅ Immer einen einzigen, klaren CTA pro Abschnitt enthalten
- ✅ Echte Daten in Beispielen und Screenshots verwenden, niemals „Lorem ipsum“
- ✅ Kontrastverhältnisse testen – mindestens WCAG AA (4.5:1 für Text)
- ❌ Niemals mehr als 3 Farben in einer einzigen Komponente verwenden
- ❌ Keine Stockfotos von Personen, die auf Bildschirme zeigen, verwenden
- ❌ Mittig ausgerichteten Fließtext, der länger als 2 Zeilen ist, vermeiden

Das ist reiner Text. Kein proprietäres Format. Keine speziellen Tools. Geben Sie es jedem KI-Tool – Cursor, Claude, Stitch, v0, Bolt, Copilot – und Ihre Marke wird zu einer Beschränkungsebene, die jede Ausgabe automatisch formt.

Warum das jetzt wichtig ist

Drei Kräfte sind zusammengekommen, die maschinenlesbare Brand Guidelines dringend, nicht optional, machen:

1. KI-Tools schreiben jetzt den größten Teil des Codes und der Texte

Cursor, GitHub Copilot, Claude, v0, Bolt, Lovable – Entwickler und Marketer liefern mit KI-Unterstützung schneller denn je. Aber diese Tools haben null Wissen über Ihre Marke, es sei denn, Sie sagen es ihnen. Bei jeder Sitzung, bei jeder Eingabeaufforderung erklären Sie Ihre Farbpalette neu. Das ist kein Workflow – es ist eine Steuer auf Geschwindigkeit.

Eine einzige brand-guidelines.md in Ihrem Repo eliminiert diese Steuer dauerhaft.

2. Google forciert design-md als Standard

Wenn Google eine Formatspezifikation über ein Produkt wie Stitch veröffentlicht, achtet das Ökosystem darauf. Figma-Plugins, VS Code-Erweiterungen und KI-Komponentengeneratoren beginnen bereits, im Projekt-Root nach einer DESIGN.md zu suchen. Wenn Ihre Datei heute richtig ist, werden die Tools von morgen einfach funktionieren – ohne Migration, ohne Nacharbeit.

3. Markenkonsistenz bei KI-Geschwindigkeit erfordert maschinenlesbare Regeln

Wenn Ihr Team 50 Blogbeiträge pro Monat, 20 Anzeigenvarianten pro Woche und eine neue Landingpage in jedem Sprint generiert, ist ein PDF in Google Drive nutzlos. Die Markenregeln müssen dort leben, wo die Generierung stattfindet – im Repo, im Prompt-Kontext, im Speicher des Tools.

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

Das PDF ist für Stakeholder-Präsentationen nicht tot. Aber für die tägliche Ausführung – wo KI-Tools die Generierung übernehmen – gewinnt Klartext entscheidend.

So verwenden Sie brand-guidelines.md mit Google Stitch

Google Stitch liest Ihre brand-guidelines.md und verwendet sie, um die UI-Generierung zu beschränken. Anstatt generische Material-Komponenten zu produzieren, gibt es eine UI aus, die Ihrem Farbsystem, Ihrer Typografie, Ihren Abständen und Ihren Komponentenkonventionen entspricht.

Der Arbeitsablauf besteht aus drei Schritten:

1. Datei hochladen oder platzieren. Legen Sie brand-guidelines.md in Ihr Projekt-Root oder laden Sie es direkt in die Stitch-Oberfläche hoch.
2. Natürlich prompten. Fragen Sie nach dem, was Sie brauchen: „Generiere einen Preisbereich mit drei Stufen und einem hervorgehobenen beliebten Plan."
3. Markenkonforme Ausgabe erhalten. Stitch wendet Ihre Farben, Typhierarchie, Schaltflächenstile und Abstände automatisch an. Keine Designüberprüfung für die Grundlagen erforderlich.

Das Ergebnis ist nicht nur näher an Ihrer Marke – es ist auch schneller zu veröffentlichen, weil Sie den Korrekturvorgang überspringen, der normalerweise einen ganzen Nachmittag in Anspruch nimmt.

Verwendung mit Cursor, Copilot und KI-Codierungstools

Legen Sie DESIGN.md (oder brand-guidelines.md) in Ihr Repo-Root und verweisen Sie darauf in Ihren Prompts:

Cursor:

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

GitHub Copilot (Workspace-Modus):

#file:DESIGN.md Erstelle eine Testimonial-Karten-Rasterkomponente
unter Verwendung der hier definierten Kartenrichtlinien und des Abstands-Systems.

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

Hier sind meine Brand Guidelines [angehängt: brand-guidelines.md].
Schreibe drei Optionen für Homepage-Überschriften, die zum Brand Voice passen
und ICP 1 (Growth Marketing Manager) ansprechen.

v0 / Bolt / Lovable: Laden Sie brand-guidelines.md als Projektdatei hoch oder fügen Sie die relevanten Abschnitte in Ihren Prompt ein. Diese Tools wenden Ihre Farben, Typografie und Komponentenspezifikationen bei jeder Generierung an.

Der Nutzen: Entwickler, die die Brand Guidelines nie gelesen haben, produzieren markenkonformen Code ab ihrem ersten Prompt. Die Beschränkung ist in den Workflow eingebettet – nicht durch Überprüfungszyklen und Slack-Nachrichten erzwungen.

Jenseits der Visuals: Warum Strategie in der Datei alles verändert

Die meisten Designsystem-Dateien enden bei Farben und Schriftarten. Eine brand-guidelines.md von Branding5 geht tiefer – und diese Tiefe verwandelt KI-Ausgaben von „sieht richtig aus" in „fühlt sich richtig an".

Brand Foundation sagt der KI, warum die Marke die Entscheidungen trifft, die sie trifft. Wenn eine KI weiß, dass Sie ein Weiser-Archetyp sind, der auf nicht-technische Marketer abzielt, wählt sie nicht nur die richtige Schaltflächenfarbe aus – sie schreibt Texte, die klar und selbstbewusst sind, anstatt übertrieben und atemlos.

Ideal Customer Profiles geben der KI den Zielgruppenkontext, um relevante Botschaften zu generieren. Eine Überschrift für einen VP of Marketing liest sich ganz anders als eine, die auf einen Growth Marketing Manager abzielt. Ohne ICPs in der Datei rät die KI. Mit ihnen zielt sie.

Voice and tone guidelines mit konkreten Beispielen (gut und schlecht) sind der Abschnitt mit dem größten Hebel für die Textqualität. Ein gut geschriebenes „Do / Don't"-Beispiel lehrt eine KI mehr als hundert Worte abstrakter Stimmenbeschreibung.

Do's and Don'ts wirken als harte Einschränkungen. „Verwende niemals mehr als 3 Farben in einer Komponente" und „schließe immer einen CTA in jeden Abschnitt ein" sind Regeln, denen die KI buchstäblich jedes Mal folgen kann. Keine Mehrdeutigkeit, kein Abweichen.

Wie Branding5 Ihre generiert

Nach Abschluss Ihrer Markenanalyse in Branding5 steht Ihre brand-guidelines.md zum Download im Dashboard bereit. Das passiert hinter den Kulissen:

1. Ihre Markenstrategie speist die Datei. Positionierung, Archetyp, ICPs, Wettbewerbsanalyse, Tonfall – alles, was Sie in Branding5 erstellt haben, fließt direkt in die strukturierte Markdown-Ausgabe ein.
2. Visuelle Spezifikationen werden aus Ihrer Positionierung abgeleitet. Farben, Typografie und Komponentenkonventionen werden generiert, um Ihre Markenpersönlichkeit widerzuspiegeln – nicht aus einer generischen Vorlage gezogen.
3. Die Ausgabe folgt der design-md-Spezifikation. Stitch und kompatible Tools parsen sie nativ. Keine Konvertierung, keine Neuformatierung.
4. Sie ist sofort einsatzbereit. Legen Sie sie in Ihr Repo, hängen Sie sie an Ihr KI-Tool an oder teilen Sie sie mit Ihrem Team. Eine Datei, jedes Tool, vom ersten Tag an.

Die 30 Minuten, die Sie in Branding5 verbringen, produzieren:

• Ein Strategie-PDF für Ihre Stakeholder und Investoren
• Messaging-Frameworks für Ihr Marketingteam
• Eine brand-guidelines.md für jedes KI-Tool, das Ihr Engineering- und Designteam jemals verwenden wird

Kein Copywriting. Keine manuelle Formatierung. Keine Markdown-Kenntnisse erforderlich.

Erste Schritte: eine Fünf-Minuten-Checkliste

Haben Sie bereits eine Markenstrategie? So gelangen Sie in fünf Minuten von Null zu einem KI-bereiten Markensystem:

1. Generieren Sie Ihre Datei. Führen Sie Ihre Markenanalyse in Branding5 durch und laden Sie brand-guidelines.md von Ihrem Dashboard herunter.
2. Legen Sie sie in Ihr Repo-Root. Nennen Sie sie DESIGN.md, wenn Ihr Team die Entwicklerkonvention bevorzugt, oder behalten Sie brand-guidelines.md der Klarheit halber bei.
3. Informieren Sie Ihr Team. Teilen Sie eine einzeilige Nachricht: „Unsere Brand Guidelines sind jetzt in DESIGN.md im Projekt-Root. Verweisen Sie in jedem KI-Prompt darauf."
4. Verweisen Sie in jeder KI-Sitzung darauf. Verwenden Sie @DESIGN.md in Cursor, hängen Sie es in Claude oder ChatGPT an, laden Sie es in v0 oder Bolt hoch.
5. Halten Sie es aktuell. Wenn sich Ihre Marke weiterentwickelt, aktualisieren Sie die Datei und committen Sie. Git verfolgt die Änderung. Jedes Tool übernimmt sie sofort.

Das war's. Kein Onboarding-Deck. Kein Engpass bei der Design-Überprüfung. Kein „Was ist unsere Markenfarbe?" mehr in Slack.

Fazit

KI-Tools schreiben Ihren Code, generieren Ihre Texte und erstellen Ihre Komponenten. Die einzige Frage ist, ob sie dies markenkonform tun – oder es einfach erfinden.

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

Googles Stitch-Format macht maschinenlesbare Brand Guidelines zum Standard. DESIGN.md wird zur Datei, die Entwickler im Projekt-Root erwarten. Marken, die sie jetzt einführen, werden schneller liefern, konsistenter bleiben und weniger Zeit damit verschwenden, KI-Ergebnisse zu korrigieren, die das Ziel verfehlt haben.

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

Häufig gestellte Fragen

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

Sie sind dasselbe Format. DESIGN.md ist die Kurzform, die in Entwickler-Communities populär ist – sie spiegelt die Benennungskonventionen von README.md wider. brand-guidelines.md ist beschreibender und signalisiert, dass die Datei Markenstrategie (Positionierung, Stimme, ICPs) enthält, nicht nur visuelle Spezifikationen. Verwenden Sie den Namen, den Ihr Team bevorzugt; KI-Tools parsen beide identisch.

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

Nein. Branding5 generiert die Datei automatisch aus Ihrer Markenanalyse. Wenn Sie später manuelle Änderungen vornehmen möchten, ist Markdown einfach nur Klartext mit einfacher Formatierung (# für Überschriften, - für Listen, ** für Fettgedrucktes). Jeder kann die Grundlagen in zwei Minuten lernen.

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

Google Stitch liest es nativ. Cursor, GitHub Copilot, Windsurf, Claude, ChatGPT, v0, Bolt und Lovable funktionieren alle damit, wenn Sie die Datei referenzieren oder anhängen. Da es sich um reines Markdown handelt, kann jedes LLM-gestützte Tool es parsen und befolgen – kein Plugin oder keine Integration erforderlich.

Wie detailliert sollte meine brand-guidelines.md sein?

Detailliert genug, um Mehrdeutigkeiten zu beseitigen. Mindestens sollten Ihre Farbpalette mit Verwendungsregeln, Typografie-Spezifikationen, Button-/Karten-/Formkonventionen und Stimmrichtlinien mit Beispielen enthalten sein. Je spezifischer Ihre Do's und Don'ts sind, desto konsistenter ist die KI-Ausgabe. Branding5 generiert standardmäßig eine umfassende Datei – Sie können Abschnitte, die Sie nicht benötigen, jederzeit kürzen.

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

Behandeln Sie sie wie jede andere Quelldatei: bearbeiten, committen, pushen. Da sie in Git lebt, sieht Ihr Team genau, was sich wann geändert hat. Wenn Sie Ihre Markenanalyse in Branding5 erneut durchführen, können Sie eine aktualisierte Version herunterladen und die alte Datei ersetzen. Kein Agenturhonorar, kein monatelanger Revisionszyklus.

Kann ich brand-guidelines.md auch für nicht-Code-Aufgaben wie das Schreiben von Blogbeiträgen oder Anzeigentexten verwenden?

Absolut. Hängen Sie die Datei an (oder fügen Sie die Abschnitte Brand Voice und ICP ein), wenn Sie Claude, ChatGPT oder einen anderen Schreibassistenten ansprechen. Die Stimmrichtlinien, Tonbeispiele und Zielgruppendetails sind speziell darauf ausgelegt, KI-generierte Texte zu verbessern – nicht nur Code.

Holen Sie sich Ihre brand-guidelines.md

Führen Sie Ihre Markenanalyse in Branding5 durch und laden Sie eine design-md-kompatible brand-guidelines.md (DESIGN.md) herunter – bereit für Google Stitch, Cursor, Copilot und Ihren gesamten KI-Tool-Stack.

Generieren Sie Ihre brand-guidelines.md →