Web Developer& AI Consultant
markus stoeger
KontaktEN
← Zu allen Tutorials
MasterAI

Claude Design: Eigenes Brand-Design-System aufsetzen

15. Mai 2026·22 min·Claude Design, Anthropic, Design System, Branding, Hands-on
Claude Design: Eigenes Brand-Design-System aufsetzen

In Übung 1 und 2 wurde mit dem Skill "Frontend design" gearbeitet — 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 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, 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 — 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: 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 kein Anhang — das ist deine Handlungsliste vor dem ersten echten Projekt-Einsatz.

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

← Zu allen Tutorials