Claude Design: Eigenes Brand-Design-System aufsetzen

In Übung 1 und 2 wurde mit dem Skill "Frontend design" gearbeitet, also Aesthetic-Direction, wenn kein System vorhanden ist. Das funktioniert für Test-Projekte. Für echte Kundenprojekte, dein eigenes Branding oder wiederkehrende Workflows wird es generisch. Diese Übung ändert das: du legst einmalig ein System an, das jedes spätere Projekt automatisch on-brand macht.

Teil 3 von 5. Lies zuerst Übung 1 und Übung 2 wenn du neu bei Claude Design bist.

---

Warum jetzt der richtige Zeitpunkt ist

Der einmalige Aufwand zahlt sich aus:

• 45–75 Minuten Setup (inklusive Asset-Vorbereitung)
• Jedes zukünftige Projekt verwendet automatisch deine Farben, Typografie und Komponenten
• Konsistenz über alle Outputs: Landing Page, Pitch Deck und Mobile-Mockup wirken wie aus einer Hand

Das Design System ist der einzige wirkliche Qualitätshebel im gesamten Tool. Ohne System: solide, aber generisch. Mit System: sofort wiedererkennbar.

---

Was du vorab brauchst

Sammel diese Assets bevor du den Setup-Dialog öffnest:

Minimum (Pflicht)

• Markenname + 1-Satz-Beschreibung mit Touchpoints (Website? App? Verpackung?)
• Mindestens 2 Logo-Varianten als PNG oder SVG (hell- und dunkelhintergrundtauglich)
• Farbpalette: 3–5 Farben mit Hex-Codes (Primary, Accent, Neutrals)
• Schriftarten: mindestens eine, idealerweise Display + Body, als .woff2 oder .otf

Empfohlen

• Voice & Tone Statement: 2–3 Sätze über die Markenstimme
• Anti-Patterns: was die Marke nicht macht (mindestens 3 konkrete Beispiele)
• Eine bestehende Live-Site oder ein Figma-File als Referenz für Komponenten-Stil

Optional (Power-User)

• GitHub-Repo der bestehenden Produkte (oder frontend-fokussierter Subfolder)
• Lokaler Code-Ordner mit Komponenten-Beispielen
• .fig-Datei mit Design-Tokens und Komponenten
• Foto- oder Illustrations-Library als Bildsprache-Referenz

Wenn du viele unstrukturierte Brand-Files hast: Lade sie erst in einen normalen Claude.ai-Chat und lass Claude ein konsolidiertes DESIGN.md generieren. Das nutzt du dann im Setup-Dialog im "Any other notes"-Feld. Assets (Logos, Fonts) hängst du trotzdem direkt an.

---

Schritt-für-Schritt Workflow

Schritt 1: Design-Systems-Bereich öffnen

1. Geh auf claude.ai/design
2. Oben rechts: Tab "Design systems"
3. Du siehst deine bestehenden Systeme (anfangs leer) und "Create new design system"

Hinweis im UI: "Only you can view these settings": Design Systems sind privat per User (bei Team/Enterprise per Organisation).

---

Schritt 2: "Create new design system" anklicken

Es öffnet sich der Setup-Dialog mit der Überschrift "Set up your design system" und sechs Eingabe-Feldern.

---

Schritt 3: Feld 1, Company name and blurb (Pflichtfeld)

Format: [Name]: [Beschreibung mit allen Touchpoints]

Der Platzhalter zeigt, wie es gemeint ist:

e.g. Mission Impastabowl: fast-casual pasta restaurant with in-store
touchscreen kiosk, mobile app and website

Beispiel für Bergwerk Coffee:

Bergwerk Coffee: Salzburg-based specialty coffee roastery with weekly
bean subscription for Austrian cafés, restaurants and hotels.
Touchpoints: marketing website, B2B customer portal,
packaging labels, email newsletters, occasional pitch decks.

Touchpoints konkret benennen: "Website" ist zu vage. "Marketing website + B2B customer portal + packaging labels" hilft Claude, den richtigen Scope zu verstehen: welche Layouts und Komponenten gebraucht werden.

---

Schritt 4: Felder 2–5, die Quellen (alle optional, aber empfohlen)

Slot A: Link code on GitHub

Für öffentliche Repos oder Component-Libraries. Aus dem UI:

"This doesn't upload the whole codebase; Claude will copy selected files. For large codebases, we recommend attaching a frontend-focused subfolder."

Bei großen Repos: Subfolder anhängen (z.B. apps/marketing oder packages/ui), nicht das gesamte Monorepo.

Slot B: Link code from your computer

Für lokalen Code, der nicht im öffentlichen Repo liegt. Erstell dir einen extra Ordner mit nur den relevanten Frontend-Komponenten und Style-Files.

Slot C: Upload a .fig file

Das Figma-File wird ausschließlich lokal in deinem Browser geparst, nicht an Anthropic-Server hochgeladen. Privacy-Vorteil gegenüber vielen anderen Design-Tools.

Wenn dein Figma-File viele Pages hat (30+ Mockups): Erstell vorher eine vereinfachte Version mit nur Tokens und Core-Components.

Slot D: Add fonts, logos and assets

Was hier reingehört:

• Logo-Varianten (mindestens 2: hell/dunkel), SVG bevorzugt
• Schriftarten (Display + Body als .woff2)
• 5–10 repräsentative Fotos oder Illustrations-Beispiele
• Brand-Guidelines-PDF falls vorhanden

---

Schritt 5: Feld 6, "Any other notes?" (der wichtigste Hebel)

Ein großes Textfeld mit Platzhalter:

e.g. We use a warm, earthy color palette with rounded corners.
Our brand voice is playful but professional...

Warum dieses Feld entscheidend ist: Hier gibst du Claude den Charakter der Marke mit. Logos und Fonts sind Mechanik. Wer die Marke ist, steht hier.

Die drei Säulen einer guten Notes-Eingabe

1. Visual Direction, die ästhetische Sprache in Worten:

Visual: Editorial design language — like a high-quality lifestyle
magazine. Warm cream backgrounds (#F5EFE6) with deep navy ink
(#1A2238). Terracotta (#C2542D) as accent, used sparingly.
Serif headlines (Fraunces, italic for emphasis). Clean sans-serif
body (IBM Plex Sans). Generous whitespace. Asymmetric layouts
with intentional empty space.

2. Voice & Tone, wie die Marke spricht:

Voice: Direct, craft-oriented, no marketing speak. Short declarative
statements. German-language native, never translated from English.
Confident without arrogance. Specific over vague — "freshly roasted
on Monday, delivered Thursday" instead of "the freshest beans".

3. Anti-Patterns, was die Marke nicht macht (mindestens 5, konkret):

Anti-patterns:
- No stock photography ever
- No corporate blue or generic gradients
- No glassmorphism or neumorphism
- No exclamation marks in copy
- No buzzwords: "leidenschaftlich", "premium", "innovativ"
- No carousel sliders
- No headlines wrapping to 4+ lines

Warum Anti-Patterns so wichtig sind: Eine "tu das"-Liste schließt nicht aus, dass Claude trotzdem in Klischee-Fallen tappt. Eine "tu das NICHT"-Liste schließt diese Wege explizit aus. Output-Qualität verbessert sich um schätzungsweise 30% wenn du Anti-Patterns sauber definierst.

---

Schritt 6: "Continue to generation →" klicken

Klick oben rechts auf den Button. Jetzt wartest du 5 Minuten, Tab offen lassen.

Claude produziert in dieser Zeit:

• Logo-System: aus deinen Assets rekonstruiert oder inferiert (transparent als "inference, not vendor asset" markiert)
• Type-Stack und Farbpalette: extrahiert aus deinen Eingaben
• Komponenten-Bibliothek: Buttons, Cards, Nav, Formulare etc.
• UI-Kits für jeden deiner Touchpoints

---

Schritt 7: Review draft, strukturiert prüfen

Nach der Generation landest du im "Review draft"-Modus. Du bewertest jedes Element:

• "Looks good": übernehmen
• "Needs work": Freitextfeld öffnet sich, dort spezifisch formulieren, keine Adjektive

Effiziente Review-Reihenfolge: Brand-Assets → Colors → Typography → Components → Spacing

Was im Freitextfeld funktioniert:

✓ "Reduce the primary weight from 700 to 600 — too heavy for body text"
✓ "The cream background is slightly too warm — shift from #F5EFE6 to #F2EDDE"
✗ "Sieht zu dunkel aus" — zu vage
✗ "Schöner machen" — kein verwertbarer Input

---

Schritt 8: Die Caveats-Section lesen

Am Ende des Chat-Protokolls zeigt Claude transparent, was er rekonstruiert hat und was du noch ersetzen musst:

Caveats:
- Logo reconstruction: inferred from uploaded assets —
  replace with master SVG before production use
- Fraunces font: loaded via Google Fonts CDN in system;
  confirm license for commercial use in your brand assets
- Product photography: placeholders inferred from brief —
  no actual Bergwerk photos uploaded

Diese Liste ist deine Handlungsliste vor dem ersten echten Projekt-Einsatz, kein Anhang.

---

Schritt 9: Veröffentlichen

Wenn der Review-Modus abgeschlossen ist: "Publish"-Button.

Das System erscheint ab jetzt als Dropdown-Option beim Anlegen jedes neuen Projekts. Alle zukünftigen Outputs (Landing Pages, Decks, Videos, Mobile Mockups) werden automatisch on-brand.

---

Wann mehrere Design Systems anlegen?

Als Freelancer oder Agentur: Pro Kunde ein eigenes System. Beim Projekt-Anlegen wählst du das passende aus dem Dropdown.

Bei Sub-Brands oder Produktlinien: Wenn eine Marke deutlich unterschiedliche Touchpoints hat (z.B. Konsumgüter vs. Enterprise-SaaS), lohnen sich separate Systeme.

Iteration statt Perfektion: Bau das System einmal sauber auf, nutze es in 2–3 Projekten, verfeinere dann. Die fehlenden Stücke erkennst du erst beim Arbeiten.

---

Quellen

• Anthropic: Set up your design system
• Anthropic: Get Started with Claude Design
• Anthropic: Claude Design Announcement