Eigenes Design-System in Claude Design erstellen: Vom Moodboard zum animierten Markenmaskottchen

Bei der KI-gestützten Erstellung von Benutzeroberflächen tritt häufig das Problem des „visuellen Drifts“ auf: Jedes Mal, wenn man ein neuronales Modell um einen neuen Bildschirm oder Werbematerialien bittet, entstehen willkürliche Farbtöne, unpassende Abstände und unharmonische Schriftarten. Das Produkt verliert seine Markenidentität und wirkt wie ein unzusammenhängendes Flickwerk.

Claude Design von Anthropic löst dieses Problem grundlegend. Es handelt sich um eine spezialisierte Designumgebung, mit der vollständige Design-Systeme aufgebaut und verbindlich festgehalten werden: von globalen Design-Tokens (Farbpaletten, Rastersysteme, Typografie) bis hin zu interaktiven UI-Komponenten und animierten Markenmaskottchen.

In diesem technischen Leitfaden durchlaufen wir den gesamten Entwicklungsprozess: von der Recherche internationaler Referenzen und der Generierung von vier kontrastierenden Stilkonzepten auf einer interaktiven 2×2-Leinwand bis hin zur Token-Definition, Codebase-Synchronisierung via Claude Code und der Kreation eines animierten SVG-Maskottchens.

1. Was ist Claude Design und warum feste Designregeln unverzichtbar sind

Ein Design-System fungiert als zentrale Referenz (Single Source of Truth) für das visuelle Erscheinungsbild Ihrer Marke. Es definiert:

• Farb-Tokens: Primär-, Sekundär-, Hintergrund-, Oberflächen- und barrierefreie semantische Kontrastfarben.
• Typografie-Hierarchie: Schriftfamilien, Skalierungsfaktoren, Zeilenhöhen und Schriftschnitte.
• Geometrie & Abstände: Basisraster (z. B. 4px/8px), Eckenradien (Border-Radius) und Schattenebenen (Elevation).
• Wiederverwendbare UI-Komponenten: Buttons, Formularfelder, Karten, Modalfenster und Navigationsleisten.
• Bewegungs- & Interaktionsprinzipien: Übergangskurven bei Hover-Effekten und Animationszustände des Markenmaskottchens.

Ohne verankertes Regelsystem erfindet generative KI das Interface bei jedem Prompt neu. Mit einem aktiven Design-System generiert Claude von Beginn an visuell konsistente Ergebnisse, was stundenlange manuelle Nachbearbeitung in Vektoreditoren überflüssig macht.

2. Visuelle Referenzen kuratieren: Die Marken-DNA extrahieren

Bevor Sie den Generator öffnen oder den ersten Prompt eingeben, sollten Sie eine strukturierte Referenzbasis aufbauen. Suchen Sie nicht nur nach „schönen Websites“, sondern analysieren Sie Markenidentität, Typografie, Rastersysteme und Animationen als eigenständige Ebenen.

2.1. Branding, Markenidentität und visuelle Richtungen

Diese Plattformen helfen dabei, die grundlegende Tonalität, Farbtemperatur und typografische Ausstrahlung der Marke festzulegen.

2.2. Webdesign, Marketing-Websites und Landingpages

Für Makro-Komposition, Lesefluss, typografische Gliederung und Konversionsmodule.

2.3. Spezifische Sektionen und Konversionselemente

Gezielte Inspiration, wenn der Gesamtstil feststeht, aber einzelne Seitenbereiche verfeinert werden müssen.

2.4. Modulare Raster und Bento Grid

Strukturierung von Inhalten durch asymmetrische Kartenlayouts und kontrollierte Abstände.

2.5. UI-Komponenten, Design-Tokens & offene Design-Systeme

Wiederverwendbare Elemente: Buttons, Eingabefelder, Badges, Karten und Token-Definitionen.

2.6. Mikrointeraktionen, UI-Animationen und 3D

2.7. Typografie und Farbpaletten

2.8. Die optimale Referenzformel

Vermeiden Sie es, Claude mit Dutzenden ungefilterten Links zu überfrachten. Ein effektives Referenzpaket umfasst:

• 2–3 Identitätsbeispiele: Farbtemperatur, Markentonfall und Schriftcharakter.
• 2–3 vollständige Websites: Raumaufteilung, Weißraum-Philosophie und Informationsdichte.
• 2–3 Komponentenbeispiele: Button-Geometrie, Formularfelder und Kartenstruktur.
• 1–2 Bewegungsreferenzen: Eckenradien, Schattenwurf oder Übergangstempo.
• 3 prägnante Markenbegriffe: z. B. „technisch, puristisch, monochrom-exklusiv“.

3. Initialisierung des Design-Systems in Claude Design

In Claude stehen zwei Wege zur Verfügung, um ein neues System anzulegen:

1. Über die Workspace-Einstellungen: Navigieren Sie zu Settings → Design systems → klicken Sie auf New design system.
2. Direkt aus dem Chatfenster: Klicken Sie auf das +-Symbol neben dem Eingabefeld → wählen Sie Design system → New design system.

Modus-Auswahl: Using Claude vs. Using Claude Code

• Using Claude: Ideal für neue Marken oder Interfaces auf der grünen Wiese. Sie laden Screenshots, Moodboards oder Briefings hoch und Claude baut das System visuell auf.
• Using Claude Code: Entwickelt für Teams mit bestehendem Repository. Der Terminal-Agent analysiert Tailwind-Konfigurationen, CSS-Variablen und React-Komponenten und extrahiert die Tokens direkt.

4. Ästhetische Erkundung: 4 kontrastierende Stilrichtungen generieren

Der häufigste Fehler besteht darin, Design-Tokens zu früh final festzulegen. Ein professioneller Workflow setzt zunächst auf divergierende Exploration.

Bitten Sie Claude, vier grundlegend unterschiedliche Konzepte auf einer gemeinsamen 2×2-Leinwand mit identischen Testinhalten zu erzeugen.

Master-Prompt #1: Stilfindung und Konzeptexploration

Durch die Gegenüberstellung im 2×2-Raster können Sie Farbwelten und typografische Rhythmen objektiv vergleichen. Sie können einen Entwurf direkt auswählen oder Claude anweisen, die Typografie von Variante 1 mit den Farbwerten von Variante 3 zu kombinieren.

5. Tokenisierung und Ausarbeitung des Design-Systems

Sobald die visuelle Richtung feststeht, wird sie in ein verbindliches Set aus Tokens und wiederverwendbaren Komponenten überführt.

Master-Prompt #2: Token-Spezifikation und Komponentenaufbau

Wichtiges Feature: Usage Notes

Dokumentieren Sie in Claude Design stets das Feld Usage Notes. Dieser Bereich dient als Systemanweisung für Claude, wann und wo bestimmte Stile eingesetzt werden dürfen. Beispiel:

• „Der Akzentgelbton (#FFC700) ist ausschließlich dem primären CTA-Button vorbehalten und darf niemals als Kartenhintergrund verwendet werden.“
• „Abschnittsüberschriften müssen stets in Großbuchstaben (UPPERCASE) mit 0.05em Zeichenabstand formatiert werden.“

Diese Regeln verhindern stilistische Halluzinationen in zukünftigen Chats.

Das DESIGN.md-Ökosystem: Token-Bibliotheken & KI-Extraktoren

Um Spezifikationen nicht manuell von Grund auf schreiben zu müssen oder ein bestehendes Marken-Design in Claude Design zu überführen, bieten sich spezialisierte Tools des DESIGN.md-Ökosystems an:

6. Stresstests auf realen Medienformaten

Bevor Sie das Design-System teamweit ausrollen oder in den Code überführen, sollten Sie die visuelle Konsistenz auf drei unterschiedlichen Trägern überprüfen.

Master-Prompt #3: Konsistenzprüfung über Formate hinweg

Sollte auf der Folie die Schrift zu klein wirken oder der Akzentton den Social-Media-Beitrag überlagern, korrigieren Sie nicht die Einzelgrafik. Passen Sie das Root-Token im Design-System an – alle abgeleiteten Elemente aktualisieren sich daraufhin automatisch.

7. Nutzung in neuen Projekten und Code-Sync mit Claude Code

Nach dem Speichern steht das Design-System in Ihrem gesamten Claude-Workspace zur Verfügung.

Aktivierung in Standard-Chats

Klicken Sie in einem neuen Chat auf das +-Symbol neben dem Eingabefeld → wählen Sie Design system → haken Sie das gewünschte System an. Jede nachfolgende Anfrage nach React-Code, HTML-Newslettern oder Dashboards orientiert sich automatisch an Ihren Tokens.

Code-Synchronisierung über /design-sync

Für Entwickler, die den Terminal-Agenten Claude Code einsetzen, genügt ein einziger Befehl:

Dieser Workflow:

• Liest die aktiven Tokens aus Claude Design aus und synchronisiert tailwind.config.ts oder CSS-Variablen in globals.css;
• Erstellt oder aktualisiert die Datei DESIGN.md im Projektstamm;
• Meldet Abweichungen zwischen Design-Tokens und bestehenden React-Komponenten.

Master-Prompt #4: Gezielte Token-Aktualisierung

8. Eigenes animiertes Markenmaskottchen erstellen (SVG & Claude Motion)

Ein unverwechselbares Maskottchen stärkt die Markenwiedererkennung, belebt leere Zustände (Empty States), mildert 404-Fehlerseiten ab und bereichert Marketingkampagnen.

Claude Design kann Vektor-Charaktere auf Basis Ihrer System-Tokens erstellen und eine vollständige Animationsbibliothek generieren.

Master-Prompt #5: Maskottchen-Konzept und 15 Animationszustände

Master-Prompt #6: Animationsverfeinerung und interaktive Galerie

9. Zusammenfassende Roadmap und weiterführende Quellen

Der Aufbau eines skalierbaren Design-Systems gliedert sich in acht Schritte:

Offizielle Dokumentation und Vertiefung

• Anthropic Academy: Offizielles Tutorial zum Erstellen von Design-Systemen
• Claude Design Dokumentation: Einführung in Claude Design
• Claude Motion Dokumentation: Motion-Beta und Video-Export
• Verwandter GotBurnout-Leitfaden: 50 visuelle Designstile für UI/UX und Art Direction