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

> Praxisleitfaden für Claude Design: Visuelle Referenzen kuratieren, 4 kontrastierende Designkonzepte generieren, Design-Tokens definieren, Stresstests durchführen und SVG-Maskottchen animieren.

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.

> [!NOTE]
> Ein Design-System in Claude Design ist kein statisches Figma-Mockup, sondern ein aktives, verbindliches Regel- und Token-Set. Nach dem Speichern wendet Claude die freigegebenen Farben, Radien und Schriftarten automatisch auf jede Folgeanfrage, jeden Codeblock und jedes Marketing-Asset an.

---

## 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.

> [!TIP]
> Für einen fundierten Überblick über ästhetische Stilrichtungen empfehlen wir unseren Leitfaden [50 visuelle Designstile für Design-Systeme und UI/UX](/de/guides/prompts/50-design-styles-for-better-prompting), in dem historische und moderne Gestaltungsansätze (vom Bauhaus bis zum Neobrutalismus) in konkrete UI-Tokens übersetzt werden.

### 2.1. Branding, Markenidentität und visuelle Richtungen

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

| Ressource | Praxisschwerpunkt | Link |
| :--- | :--- | :--- |
| **50 Design Styles** | Analyse von 50 Stilen: Art Déco, Japandi, Brutalismus, Bauhaus etc. | [50 Stile entdecken →](https://uxplanet.org/50-design-styles-every-designer-should-know-for-better-prompting-56c09d55db62) |
| **Pinterest** | Moodboards, Materialtexturen, Farbverläufe und Beleuchtungskonzepte | [Pinterest öffnen →](https://www.pinterest.com/) |
| **Behance** | Ganzheitliche Corporate-Identity-Fallstudien und Design-Guidelines | [Behance öffnen →](https://www.behance.net/) |
| **Brand New** | Kritische Analysen internationaler Rebrandings von UnderConsideration | [Brand New lesen →](https://www.underconsideration.com/brandnew/) |
| **Rebrand Gallery** | Archiv überarbeiteter Logos, Farbwelten und Schriftkombinationen | [Rebrand Gallery ansehen →](https://www.rebrand.gallery/) |
| **Recent Design** | Aktuelle Strömungen in Grafikdesign, UI-Mustern und Motion-Design | [Recent Design erkunden →](https://recent.design/) |

### 2.2. Webdesign, Marketing-Websites und Landingpages

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

| Plattform | Spezialisierung | Link |
| :--- | :--- | :--- |
| **Awwwards** | Avantgardistisches Webdesign, experimentelle Interfaces und WebGL | [Awwwards öffnen →](https://www.awwwards.com/) |
| **Land-book** | Konversionsstarke Marketingseiten und Produktpräsentationen | [Land-book öffnen →](https://land-book.com/) |
| **One Page Love** | Vorbildliche One-Page-Konzepte und fokussierte Microsites | [One Page Love ansehen →](https://onepagelove.com/inspiration) |
| **Curated Design** | Strikt nach Branchen und Designstilen kategorisierte Webseiten | [Curated Design öffnen →](https://curated.design/) |
| **Landing Love** | Scroll-Aufzeichnungen, Seitenübergänge und komplexe Animationen | [Landing Love ansehen →](https://www.landing.love/) |
| **Saaspo** | UI-Muster für SaaS-Websites, Preistabellen und Nutzer-Onboarding | [Saaspo öffnen →](https://saaspo.com/) |
| **SaaSFrame** | Marketing-Funnels und B2B-Interface-Strukturen | [SaaSFrame erkunden →](https://saasframe.io/) |
| **WebInspoo** | SaaS-Verzeichnis mit Filtern nach Farbwelten und Technologien | [WebInspoo besuchen →](https://webinspoo.com/) |

### 2.3. Spezifische Sektionen und Konversionselemente

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

| Sektion / Katalog | Einsatzzweck | Link |
| :--- | :--- | :--- |
| **Navbar Gallery** | Header-Architektur: Floating-Navbars, Mega-Menüs und mobile Leisten | [Navbars ansehen →](https://www.navbar.gallery/) |
| **Supahero** | Hero-Bereiche mit prägnanten Nutzenversprechen und Call-to-Actions | [Hero-Sektionen erkunden →](https://supahero.io/) |
| **Unsection** | Spezialmodule: Social-Proof-Bänder, Vergleichstabellen und Reviews | [Unsection öffnen →](https://www.unsection.com/) |
| **Footer Design** | Fußzeilen: Mehrstufige Links, rechtliche Hinweise und Trust-Badges | [Footer ansehen →](https://www.footer.design/) |
| **CTA Gallery** | Hochkonvertierende Lead-Erfassungsblöcke und Aktionsaufrufe | [CTAs durchstöbern →](https://www.cta.gallery/) |
| **404s Design** | Kreative 404-Fehlerseiten zur Nutzerbindung | [404-Sammlung ansehen →](https://www.404s.design/) |
| **One Page Love (OG)** | Open-Graph-Vorschaubilder für optimale Social-Media-Freigaben | [OG-Banner ansehen →](https://onepagelove.com/og) |

### 2.4. Modulare Raster und Bento Grid

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

| Tool | Beschreibung | Link |
| :--- | :--- | :--- |
| **Bento Grids** | Modulare Kachel-Layouts nach Bento-Box-Vorbild für Features | [Bento Grids erkunden →](https://bentogrids.com/) |
| **Griddy** | Interaktives Trainingstool zum Erlernen komplexer CSS-Grid-Systeme | [Griddy starten →](https://griddy.io/) |
| **One Page Love Sections** | Modulare Sektionsstrukturen aus echten Digitalprodukten | [Sektionen ansehen →](https://onepagelove.com/sections) |

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

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

| Bibliothek | Nutzen | Link |
| :--- | :--- | :--- |
| **Astryx by Meta** | Offizielles Open-Source-Design-System von Meta, optimiert für KI-Coding-Agenten | [Astryx-Dokumentation →](https://astryx.atmeta.com/) |
| **21st.dev** | Das „npm für Design-Engineers“: UI-Komponenten mit sofort nutzbaren KI-Prompts | [21st.dev öffnen →](https://21st.dev/) |
| **Refero** | Umfassender Katalog mit über 30.000 realen Screens aus iOS- und Web-Apps | [Refero erkunden →](https://refero.design/) |
| **Refero Styles** | Hochwertige Design-Systeme mit fertigen Tokens und `DESIGN.md`-Struktur | [Refero Styles öffnen →](https://styles.refero.design/) |
| **VantaUI** | UI-Komponentensets, Statusanzeigen und Figma-Vorlagen | [VantaUI erkunden →](https://www.vantaui.com/) |
| **Component Gallery** | Umfassender Komponenten-Index geordnet nach realen Design-Systemen | [Component Gallery erkunden →](https://component.gallery/) |
| **ButtonCraft** | CSS-Button-Kollektion mit Hover- und Aktivierungsstilen | [ButtonCraft öffnen →](https://www.buttoncraft.co/) |
| **OpenBridge** | Open-Source-Design-System für maritime und industrielle Leitstände | [OpenBridge-Dokumentation →](https://www.openbridge.no/) |

> [!TIP]
> Die Sammlung von **Refero Styles** sowie Metas **Astryx** eignen sich hervorragend als Vorlage für Claude: Ihre strukturierte Regellogik lässt sich nahtlos in ein `DESIGN.md` übertragen, das von Claude 3.5 und 3.7 präzise interpretiert wird.

### 2.6. Mikrointeraktionen, UI-Animationen und 3D

| Ressource | Schwerpunkt | Link |
| :--- | :--- | :--- |
| **React Bits** | Über 60 animierte Open-Source-Komponenten für React: Shader, Typo-Effekte, Loader | [React Bits öffnen →](https://reactbits.dev/) |
| **21st.dev** | Interaktive Mikroanimationen und produktionsreife UI-Blöcke (Framer Motion & Tailwind) | [21st.dev durchsuchen →](https://21st.dev/) |
| **Amicro** | Schlanke, modulare Mikrointeraktionen und Übergänge für React | [Amicro öffnen →](https://amicro.dev/) |
| **ThreeUI** | Produktionsreife 3D-Interface-Komponenten und interaktive WebGL-Szenen | [ThreeUI ansehen →](https://threeui.com/browse) |
| **Paper Shaders** | WebGL-Shader-Hintergründe und dynamische visuelle Effekte im Browser | [Paper Shaders ansehen →](https://shaders.paper.design/) |
| **60fps Design** | Flüssige Bewegungsmuster, Statuswechsel und Klick-Feedbacks | [60fps öffnen →](https://60fps.design/) |
| **Design Spells** | Subtile Mikrointeraktionen, native Gesten und Hover-Raffinessen | [Design Spells öffnen →](https://designspells.com/) |
| **Mesh3D Gallery** | Interaktive 3D-Webszenen, WebGL-Shader und Three.js-Architekturen | [3D-Galerie erkunden →](https://www.mesh3d.gallery/) |

### 2.7. Typografie und Farbpaletten

| Dienst | Anwendungsbereich | Link |
| :--- | :--- | :--- |
| **Google Fonts** | Lizenzfreie Schriftarten mit vollständiger internationaler Zeichenabdeckung | [Google Fonts Katalog →](https://fonts.google.com/) |
| **Fontpair** | Bewährte Schriftkombinationen (Überschrift Display + Fließtext Sans) | [Schriftpaare ansehen →](https://www.fontpair.co/) |
| **Coolors** | Farbpaletten-Generator und WCAG-Kontrastrechner | [Coolors starten →](https://coolors.co/) |

### 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`.

```mermaid
graph LR
    A[Start] --> B{Erstellungsmodus}
    B -->|Von Grund auf / No-Code| C[Using Claude]
    B -->|Vorhandene Codebase| D[Using Claude Code]
    C --> E[Referenzen & Briefing hochladen]
    D --> F[CSS / Tailwind Tokens scannen]
    E --> G[Interaktive 2x2 Leinwand]
    F --> G
```

### 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.

> [!IMPORTANT]
> Achten Sie bei internationalen Projekten stets auf eine vollständige Unicode-Abdeckung der gewählten Schriften, um Renderfehler (FOUT/FOIT) im Produktivbetrieb zu vermeiden.

---

## 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

```markdown
Handle als leitender Art Director für die Entwicklung eines Marken-Design-Systems in Claude Design.

Erstelle noch kein finales Design-System. Deine erste Aufgabe ist es, vier grundlegend verschiedene Stilrichtungen zur Auswahl vorzuschlagen.

Markenkontext:
- Name & Branche: [Name und Geschäftsmodell angeben]
- Zielgruppe: [Kernzielgruppe und Nutzererwartung beschreiben]
- 3 Markenattribute: [z. B. technisch, minimalistisch, monochrom-exklusiv]
- Pflichtelemente: [Logo, Primärfarbe oder Legacy-Anforderungen]
- Stilistische No-Gos: [z. B. kindliche Pastelltöne, grelles Neon, generische Farbverläufe]

Referenzanalyse:
Prüfe die angehängten Materialien und Links. Fasse in drei Zeilen die gemeinsamen Gestaltungsmerkmale zusammen (Palette, Typografie, Rasterdichte). Nutze sie ausschließlich als Inspiration, ohne bestehende Arbeiten zu kopieren.

Vier kontrastierende Richtungen:
Erstelle vier eigenständige Konzepte: hell vs. dunkel, warm vs. kühl, Serif vs. geometrisches Sans-Serif.

Liefere für jedes Konzept:
1. Konzeptname (2–3 Worte) und kurze gestalterische Begründung.
2. Google-Fonts-Schriftpaar mit voller Zeichenunterstützung (Titel + Fließtext).
3. Farbpalette mit 5–6 Tönen im exakten HEX-Format.
4. Zwei identische Test-Mockups: [z. B. Desktop-Hero-Sektion + Produktkarte].

Anforderungen an die Bereitstellung:
Platziere alle 4 Konzepte auf einer einzigen Leinwand im 2x2-Raster, jeweils auf einem eigenen Artboard. Halte alle Vektorelemente, Texte und Container vollständig editierbar.

Stoppe hier und warte auf meine Rückmeldung oder Richtungsentscheidung, bevor wir zur Token-Definition übergehen.
```

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

```markdown
Ich wähle Konzept Nr. [Nummer angeben] mit folgenden Anpassungen: [z. B. Hintergrundgrau durch ein wärmeres Anthrazit ersetzen].

Erstelle auf dieser Basis das vollständige Design-System in Claude Design.

Die Spezifikation muss folgende Abschnitte enthalten:
1. Colors (Farb-Tokens):
   - Primary, Secondary, Background, Surface, Muted, Accent, Error und Success.
   - Exakte HEX-Werte mit semantischen Rollen und WCAG-AA-Kontrastbewertung.
2. Typography:
   - Google-Fonts-Schriftfamilien.
   - Typografische Skala (H1, H2, H3, H4, Body Large, Body, Caption) mit Größen in px/rem, Zeilenhöhen und Zeichenabständen.
3. Spacing & Layout:
   - Abstands-Tokens im 4px/8px-Raster (space-1 = 4px, space-2 = 8px ... space-16 = 64px).
   - Maximale Containerbreiten und responsive Rastersysteme (12 Spalten Desktop, 4 Spalten Mobile).
4. Geometry & Elevation:
   - Eckenradien (radius-sm, radius-md, radius-lg, radius-full).
   - Rahmenstärken und Schatten-Tokens für verschiedene Höhenebenen.
5. Core UI Components:
   - Button (Primary, Secondary, Ghost, Destructive) in den Zuständen Default, Hover, Active und Disabled.
   - Eingabefeld, Karte, Badge und modaler Dialog.
6. Asset-Richtlinien:
   - Schutzräume für Logos und Bildbehandlungsregeln.

Strukturiere das Ergebnis als DESIGN.md-Dokument und Token-Baum. Halte den gewählten Stil strikt ein, ohne auf verworfene Entwürfe zurückzugreifen.
```

### 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:

| Tool | Funktionsumfang & Mehrwert | Link |
| :--- | :--- | :--- |
| **getdesign.md** | Durchsuchbare Sammlung realer `DESIGN.md`-Spezifikationen für KI-Coding-Agenten | [getdesign.md öffnen →](https://getdesign.md/) |
| **designmd.me** | KI-Token-Extraktor: Beliebige Website-URL eingeben und vollständiges `DESIGN.md` erhalten | [designmd.me starten →](https://designmd.me/) |
| **designmd.ai** | Open-Source-Katalog mit hunderten kostenlosen Design-Systemen für Cursor und Claude Code | [designmd.ai erkunden →](https://designmd.ai/) |

---

## 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

```markdown
Erstelle unter Verwendung des neu definierten Design-Systems drei unterschiedliche Formate für unsere Marke:

1. Desktop-Hero-Sektion (Navigationsleiste, Nutzenversprechen und primärer CTA-Button).
2. Präsentationsfolie (Kennzahlen-Chart, visuelle Datenaufbereitung und Kernaussage).
3. Social-Media-Ankündigung (Quadratische Grafik 1080x1080 zur Vorstellung eines neuen Features).

Anforderungen:
- Alle drei Formate müssen eine unverkennbare, einheitliche visuelle Sprache sprechen.
- Halte die freigegebenen Tokens strikt ein: Farben, Schriftskalen, Radien und Abstände.
- Stelle optimale Lesbarkeit und WCAG-AA-Kontrastwerte für alle Textelemente sicher.
```

> [!TIP]
> **Referenzen für den Formatvergleich:**
> - Zur Begutachtung der Präsentationsfolie empfiehlt sich [Deck Gallery](https://deck.gallery/) — eine kuratierte Galerie herausragender Pitch Decks führender Tech-Startups.
> - Zur Prüfung des Social-Media-Banners bietet [Posts Design](https://posts.design/) — eine Mustersammlung konversionsstarker Karussells, Quotes und Feature-Ankündigungen.

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:

```bash
/design-sync
```

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

```markdown
Öffne unser aktives Design-System. Ich möchte die Tokens für [angeben: Buttons / Formularfelder / Typografie] aktualisieren.

Schlage drei alternative Gestaltungsvarianten für dieses Modul vor, ohne die Markenidentität (Farbpalette, Abstände, Gesamtstimmung) zu verändern.

Stelle für jede Variante einen klaren Vorher-Nachher-Vergleich dar.
Wende Änderungen erst nach meiner ausdrücklichen Freigabe global an.
```

---

## 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.

```mermaid
flowchart TD
    DS[Design-System] --> Concept[3 Maskottchen-Konzepte generieren]
    Concept --> Approval{Auswahl treffen}
    Approval --> Vector[Sauberes Vektor-SVG exportieren]
    Vector --> States[15 Animationszustände aufbauen]
    States --> WebDev[CSS / Lottie / JS für Web]
    States --> Video[Claude Motion MP4 / WebM]
```

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

```markdown
Handle als erfahrener Character Designer und Motion Engineer.

Gestalte auf Basis unseres freigegebenen Design-Systems ein originelles Markenmaskottchen.

Die Figur muss die visuelle Identität der Marke widerspiegeln: unsere Farb-Tokens, Eckenradien und Tonalität aufgreifen.

Phase 1: Charakterkonzept (Vektor-SVG)
- Entwickle 3 Maskottchen-Konzepte mit unterschiedlichen Persönlichkeiten (z. B. technischer Helfer-Bot, abstrakte geometrische Figur, freundlicher Cyber-Begleiter).
- Erstelle sauberen, semantisch gegliederten SVG-Code für jeden Entwurf.
- Definiere Gesichtsausdrücke, Augenpartien und wiedererkennbare Silhouetten.
- Zeige alle 3 Varianten im direkten Vergleich nebeneinander.

Phase 2: Animationsbibliothek mit 15 Bewegungszuständen (nach Konzeptfreigabe):
1. Idle — Ruhezustand mit sanftem Atmen.
2. Blink — Natürlicher Lidschlag.
3. Wave — Freundliche Begrüßungsgeste.
4. Walk — Flüssiger Gehzyklus.
5. Jump — Dynamischer Freudensprung.
6. Think — Nachdenklicher Status (für KI-Generierungsphasen).
7. Talk — Sprech- oder Kommunikationszustand.
8. Happy — Erfolgsgeste bei abgeschlossener Aufgabe.
9. Sad — Empathischer Ausdruck bei Fehlern oder Verbindungsabbruch.
10. Surprise — Erstaunte Entdecker-Reaktion.
11. Celebrate — Konfetti- oder Jubelgeste.
12. Point — Hinweisende Geste auf ein wichtiges Element oder einen CTA.
13. Loading — Zyklische Interaktion mit einem Ladeindikator.
14. Sleep — Ruhemodus bei inaktivem Tab.
15. Goodbye — Höflicher Abschiedsgruß.

Präsentiere zunächst ausschließlich die 3 initialen SVG-Konzepte und pausiere für meine Auswahl.
```

### Master-Prompt #6: Animationsverfeinerung und interaktive Galerie

```markdown
Ich wähle Maskottchen Nr. [Nummer angeben].

Erstelle nun eine interaktive Galerie zur Demonstration aller 15 Animationszustände:
1. Halte Maßstab, Proportionen und Farb-Tokens in allen Szenen identisch.
2. Implementiere flüssige CSS-Keyframe-Animationen direkt im SVG-Code.
3. Ergänze prefers-reduced-motion für Barrierefreiheit (a11y).
4. Integriere ein Kontrollpanel mit Play-/Pause-Buttons und Geschwindigkeitsregler.
```

> [!TIP]
> **Vokabular für visuelle Effekte & Motion:** Für präzise Stilbegriffe beim Prompten von Charakterbewegungen (z. B. *morphing*, *kinetic typography*, *rotoscoping*, *claymation*, *glitch*) empfiehlt sich die visuelle Enzyklopädie [Eyecannndy](https://eyecannndy.com/).
>
> **Claude Motion (Video-Export):** Für die Videoproduktion (Premiere Pro, DaVinci Resolve) bietet Anthropic das Beta-Modul **Claude Motion** (in Team- und Enterprise-Plänen), mit dem Charakter-Animationen direkt als hochauflösende MP4-Videos oder transparente WebM-Dateien gerendert werden können.

---

## 9. Zusammenfassende Roadmap und weiterführende Quellen

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

| Phase | Kernaufgabe | Wichtigstes Ergebnis |
| :--- | :--- | :--- |
| **1. Referenzen** | Moodboards in 7 Kategorien zusammenstellen | 10 gezielte Links und 3 Markenattribute |
| **2. Initialisierung** | Claude Design starten | Neuer aktiver Systembereich |
| **3. Exploration** | Master-Prompt #1 auf 2×2-Canvas ausführen | 4 kontrastierende Designkonzepte |
| **4. Tokenisierung** | Master-Prompt #2 & Usage Notes definieren | `DESIGN.md`-Datei und Farb-/Typo-Tokens |
| **5. Stresstest** | Master-Prompt #3 auf 3 Formaten testen | Verifizierte Desktop-, Folien- und Social-Assets |
| **6. Code-Sync** | `/design-sync` in Claude Code ausführen | Synchronisierte Tailwind-/CSS-Tokens im Repository |
| **7. Weiterentwicklung**| Master-Prompt #4 für Feinanpassungen | Kontrollierte Komponenten-Updates |
| **8. Maskottchen & Motion** | Prompts #5 & #6 + Claude Motion | Vektor-SVG-Maskottchen mit 15 Animationen und MP4 |

### Offizielle Dokumentation und Vertiefung

- **Anthropic Academy:** [Offizielles Tutorial zum Erstellen von Design-Systemen](https://academy.claude.com/tutorials/create-a-design-system-with-claude)
- **Claude Design Dokumentation:** [Einführung in Claude Design](https://support.claude.com/en/articles/14604416-get-started-with-claude-design)
- **Claude Motion Dokumentation:** [Motion-Beta und Video-Export](https://support.claude.com/en/articles/17454997-get-started-with-claude-motion)
- **Verwandter GotBurnout-Leitfaden:** [50 visuelle Designstile für UI/UX und Art Direction](/de/guides/prompts/50-design-styles-for-better-prompting)