---

Der Trick ist eine Datei namens DESIGN.md, die du einfach per Drag & Drop in den Chat ziehst. Claude liest sie, internalisiert Palette, Typo, Komponenten-Regeln und Do's/Dont's — und baut ab da in deinem Brand-System.

Warum eine DESIGN.md statt Prompt-Chaos?

Ohne Design-System prompted man sich die Finger wund: „mach den Button cyan, nein heller, nein keine rounded corners, ja ein bisschen glow…". Nach drei Iterationen ist die Konsistenz weg.

Eine DESIGN.md löst das Problem, weil sie:

• Einmalig gepflegt, dauerhaft wiederverwendet wird — ein File, jeder neue Chat on-brand
• Regeln explizit macht statt sie aus Beispielen zu raten (z.B. „Logo-Purple NUR für Logo, nirgendwo anders")
• Agent-readable ist — Claude parsed Markdown nativ, keine Übersetzung nötig
• Versionierbar ist — check sie in Git ein, iteriere wie Code
• Portable ist — dieselbe Datei funktioniert in Claude Design, Claude Code, Cursor, etc.

Die DESIGN.md Struktur

Eine gute DESIGN.md deckt 9 Sektionen ab. Das ist das Gerüst, das bei 3xLABS funktioniert — copy-paste als Startpunkt:

1. Visual Theme & Atmosphere

Zwei bis drei Absätze Fließtext — was ist der Vibe? Welche Marken sind Nachbarn, welche Anti-Referenz? Key Characteristics als Bulletliste darunter.

2. Color Palette & Roles

Jede Farbe mit Hex, Rolle und Regel. Nicht nur „Cyan #01FFB7", sondern „Cyan — Anchor Color, primary CTAs, pairs with black text". Rollen-basiert, nicht Farb-basiert.

3. Typography Rules

Font-Family + Fallback-Stack. Eine Hierarchy-Tabelle mit Role | Size | Weight | Line-Height | Letter-Spacing. Danach Prinzipien („Size, not weight, for hierarchy").

4. Component Stylings

Button-Varianten, Cards, Inputs, Navigation, Image-Treatment. Pro Komponente: Background, Text, Padding, Border, Hover-State. Sehr konkret — Claude kopiert das später 1:1.

5. Layout Principles

Spacing-System (8px-Base), Grid & Container, Whitespace-Philosophie, Border-Radius-Regel.

6. Depth & Elevation

Shadow-Stufen als Tabelle. Wann flat, wann subtle, wann colored-glow.

7. Do's and Don'ts

Zwei Listen. Kurz, imperativ, eindeutig. „Don't round corners" > „Rundungen sollten vermieden werden".

8. Responsive Behavior

Breakpoints-Tabelle, Touch-Targets, Collapsing-Strategie.

9. Agent Prompt Guide

Das ist der Game-Changer. Eine Quick-Color-Reference + 3–5 Beispiel-Prompts, die zeigen WIE man den Agent in dieser Sprache prompted. Claude nutzt das als Few-Shot-Trainingssignal.

Schritt für Schritt: DESIGN.md erstellen

Option A — Mit Claude zusammen bauen (empfohlen)

1. Sammle Input: 3–5 Referenz-Websites, deine Logo-Datei, eine Palette (auch wenn grob), Fonts die du magst
2. Öffne Claude (Desktop oder Web) und prompte:

Ich will eine DESIGN.md für mein Brand-System erstellen, die ich in Claude Design nutzen kann.

Referenzen:
- [URL 1], [URL 2], [URL 3]
- Anti-Referenzen: [URL], weil zu [grund]

Brand-Name: [X]
Vibe: [3 Adjektive]
Zielgruppe: [wer]

Bau mir eine DESIGN.md mit diesen Sektionen: Visual Theme, Color Palette, Typography, Component Stylings, Layout, Depth, Dos/Donts, Responsive, Agent Prompt Guide. Schreibe sie so, dass ein KI-Agent daraus eine Webseite bauen kann.

3. Iteriere — Claude schlägt was vor, du korrigierst („Logo-Purple darf NUR im Logo sein"), bis es sitzt
4. **Speichere als **DESIGN.md in deinen Projekt-Ordner

Option B — Von Hand nach Vorlage

1. Öffne eine leere .md-Datei
2. Kopiere das 9-Sektionen-Gerüst (siehe 3xLABS DESIGN.md als Referenz)
3. Fülle Sektion für Sektion — Farben zuerst, dann Typo, dann Komponenten
4. Teste den Agent Prompt Guide — gib Claude einen der Beispiel-Prompts und prüf ob das Output passt

Drag & Drop in Claude Design

Sobald deine DESIGN.md steht, ist die Nutzung trivial:

1. Öffne Claude Design (claude.ai/design oder über die Desktop-App)
2. Starte einen neuen Chat oder öffne ein bestehendes Design-Projekt
3. Ziehe die DESIGN.md-Datei direkt aus dem Finder/Explorer in das Chat-Input-Feld — Claude liest sie automatisch ein
4. Bestätige kurz: „Nutze dieses Design-System für alles Folgende in diesem Chat."
5. Prompte wie gewohnt: „Bau mir eine Hero-Section mit einer Headline 'We build signal' und einem primary CTA."

Claude referenziert jetzt bei jedem Output dein DESIGN.md — Farben, Typo, Komponenten-Regeln. Du musst nichts mehr doppelt prompten.

Konkretes Beispiel: 3xLABS DESIGN.md

Die 3xLABS DESIGN.md ist ein funktionierendes Live-Beispiel. Kernregeln, die sie Claude beibringt:

• Canvas Grey (#F5F5F5) als Page-Background — nie pure white
• Logo-Purple (#F100D6) ausschließlich für das Logo, niemals sonstwo
• Cyan (#01FFB7) als Anchor für primary CTAs, mit schwarzem Text
• Border-Radius = 0 überall — sharp corners als Identity
• Mona Sans Bold 80px für Hero, Hierarchie über Size nicht Weight
• Gradient genau einmal pro Page: Violet → Ultra → Cyan → Lime als 4px-Divider über dem Footer
• Diffuse colored glow als Hover-State statt neutraler Drop-Shadow

Der Agent Prompt Guide in Sektion 9 ist der Schlüssel — er zeigt Claude in 5 Beispielen, wie man diese Regeln in konkrete Komponenten übersetzt. Ab da baut das Modell selbstständig on-brand.

Typische Fehler beim Schreiben einer DESIGN.md

• Zu abstrakt. „Modern und clean" sagt Claude nichts. Gib Hex-Werte, px-Werte, konkrete Komponenten-Specs.
• Keine Anti-Regeln. Do's ohne Dont's lassen zu viel offen. „Don't round corners" ist wertvoller als „Use sharp corners".
• Kein Agent Prompt Guide. Ohne Sektion 9 fehlt der Few-Shot-Anker — Claude versteht die Regeln, kann sie aber nicht gut anwenden.
• Mixed Languages. Entweder Deutsch ODER Englisch im File — nicht mischen, das verwirrt den Parser.
• Versionierung vergessen. DESIGN.md iteriert mit. Pack sie in Git, tag Versionen, roll back wenn was nicht funktioniert.

Next Steps

1. Lade die 3xLABS DESIGN.md als Referenz herunter
2. Erstelle deine eigene DESIGN.md mit Claude in 20 Minuten
3. Drag & Drop in Claude Design, teste mit einer einfachen Hero-Section
4. Iteriere — was der Output nicht trifft, wird in der DESIGN.md präziser
5. Commit in Git und nutze dieselbe Datei in Claude Code, Cursor — portables Brand-System