Der Kern des Updates: Claude Design arbeitet jetzt mit einem festen Designsystem, statt bei jedem Prompt neu zu raten. Die schnellste Quelle für so ein System ist ein fertiges Website-Template.
Warum ein Designsystem die Grundlage für alles ist
Ohne System sieht jeder Output anders aus. Heute Inter, morgen Space Grotesk. Der Button mal rund, mal eckig. Nach drei Chats hast du fünf Versionen deiner Marke.
Mit Designsystem dreht sich das um:
Konsistenz ohne Prompt-Marathon. Farben, Schriften und Formen sind gesetzt. Du beschreibst nur noch den Inhalt.
Ein System, alle Formate. Dasselbe Regelwerk funktioniert für Webseiten, Slides, Carousels und Animationen.
Schnellere Iteration. Kein Rätselraten mehr über Farben und Formen. Das ist gesetzt, du diskutierst nur noch Inhalt und Layout.
Falls du dein Regelwerk lieber von Hand schreibst: In Claude Design System steht der DESIGN.md-Weg mit allen 9 Sektionen. Der Template-Weg hier ist der schnellere Einstieg, wenn du noch kein eigenes Brand-System hast.
Schritt 1: Website-Template finden
Du brauchst eine visuelle Quelle, aus der Claude das System liest. Website-Templates sind dafür ideal, weil ein gutes Template bereits ein durchdachtes Designsystem ist, gebaut von Profis: Typo-Hierarchie, Farbpalette, Abstände und Bildsprache sind konsistent.
Das Template fühlt sich an wie deine Marke (Vibe zählt, nicht Branche)
Klare Typo-Hierarchie: große Headlines, lesbarer Body
Eine Palette mit maximal 2 bis 3 Kernfarben
Bildsprache, die du reproduzieren kannst (Fotos? 3D? Illustration?)
Kopiere die URL der Live-Preview. Die brauchst du gleich.
Schritt 2: Designsystem in Claude Design extrahieren
Öffne Claude Design (claude.ai/design oder über die Desktop-App)
Starte ein neues Projekt
Gib die Template-URL in den Chat. Falls Claude die Seite nicht laden kann: Mach 3 bis 4 Screenshots (Hero, Content-Sektion, Footer, Mobile) und zieh sie rein
Nutze den Extraktions-Prompt:
Analysiere diese Website und extrahiere daraus ein Designsystem:
1. Typografie: Fonts, Größen-Hierarchie, Weights, Line-Heights
2. Farben: jede Farbe mit Hex-Wert und Rolle (Background, Text, Akzent, CTA)
3. Formen: Border-Radius, Spacing-Logik, Schatten
4. Bildsprache: Foto-Stil, Illustration, 3D, Behandlung (Duotone? Grain?)
5. Tonalität: Wie spricht diese Seite? (nüchtern, verspielt, technisch, laut)
Speichere das als Designsystem für dieses Projekt und wende es ab jetzt
auf alles an, was wir hier bauen.
Prüfe das Ergebnis. Claude zeigt dir das extrahierte System: Stimmen die Hex-Werte? Sind die Fonts korrekt erkannt?
Schritt 3: Auf deine Marke schärfen
Das extrahierte System ist erst mal das Template. Damit es dein System wird, tauschst du drei Dinge:
Farben: Ersetze die Template-Akzentfarbe durch deine Markenfarbe, mit expliziter Regel („Cyan nur für primary CTAs, immer mit schwarzem Text")
Fonts: Behalte die Hierarchie-Logik, tausche die Fonts gegen deine eigenen oder lizenzfreie Alternativen
Tonalität: Beschreibe in 2 bis 3 Sätzen, wie deine Marke spricht. Claude nutzt das später für Headlines und Microcopy
Passe das Designsystem an meine Marke an:
- Primärfarbe: [HEX] ersetzt [Template-Farbe]. Regel: [wofür sie genutzt wird]
- Logo-Farbe: [HEX], darf NUR im Logo vorkommen
- Display-Font: [NAME], Body-Font: [NAME]
- Tonalität: [3 Adjektive + 1 Beispielsatz in deiner Sprache]
Behalte Hierarchie, Spacing und Formen-Logik des Templates bei.
Schritt 4: Ein System, vier Formate
Ab hier zahlt sich das Setup aus. Dasselbe Designsystem, vier Anwendungen:
Website mit Claude Code
Leg die DESIGN.md in dein Projekt-Root und verweise in der CLAUDE.md darauf. Ab dann baut Claude Code jede Komponente im Brand-Look. Die Techniken für den High-End-Feinschliff stehen in High-End Websites mit KI.
Baue die Landing Page für [PROJEKT] nach dem Designsystem in DESIGN.md.
Sections: Hero, Features, Pricing, FAQ, Footer.
Keine Farben oder Fonts außerhalb des Systems.
PowerPoint im gleichen Look
Claude erstellt PPTX-Dateien direkt im Chat. Mit Designsystem im Kontext kommen die Slides im Brand-Look raus statt im Office-Standard. Der komplette Workflow steht in PowerPoint mit Claude.
Erstelle eine PowerPoint (10 Slides) zu [THEMA] nach meinem Designsystem:
Titel-Slide, Agenda, 6 Content-Slides, Zusammenfassung, CTA.
Farben, Fonts und Spacing strikt aus dem Designsystem.
Carousels für Instagram und TikTok
Erstelle ein Carousel (5 Slides, 1080x1350) zu [THEMA] nach meinem Designsystem.
Slide 1: Hook in der Display-Font, maximal 8 Wörter.
Slides 2 bis 4: je ein Punkt, große Typo, viel Whitespace.
Slide 5: CTA.
Export als einzelne PNGs.
Grafische Animationen
Claude Design animiert auch: Logo-Reveals, animierte Statistiken, kurze Loops für Social. Auch hier gilt das System, gleiche Farben, gleiche Typo, gleiche Formen.
Erstelle eine kurze Loop-Animation (5 Sekunden) nach meinem Designsystem:
[BESCHREIBUNG, z.B. "Zahlen-Counter von 0 auf 88, Akzentfarbe als Highlight"].
Nur Farben und Fonts aus dem System.
Typische Fehler
Template 1:1 nachbauen. Dann hast du eine Kopie fremder Arbeit statt eines eigenen Systems. Extrahiere Prinzipien, ersetze Marken-Elemente.
Drei Templates mischen. Ein Template als Basis reicht. Wer mischt, verliert genau die Konsistenz, für die das System da ist.
Nur Farben und Fonts extrahieren. Tonalität und Bildsprache machen den Unterschied zwischen „sieht ähnlich aus" und „ist die Marke".
System nicht speichern. Ohne gespeichertes Designsystem (oder DESIGN.md) fängst du im nächsten Chat wieder bei null an.
Fonts ohne Lizenz übernehmen. Kommerzielle Template-Fonts brauchen eine Lizenz. Google Fonts und Fontshare sind die sichere Alternative.
Next Steps
Template aussuchen. Framer oder Webflow, 15 Minuten Limit, nicht 2 Stunden
System extrahieren mit dem Prompt aus Schritt 2
Auf deine Marke schärfen: Farben, Fonts, Tonalität
Mit einem Carousel testen. Kleinstes Format, schnellstes Feedback
Als DESIGN.md sichern und in Git committen. Ab dann: Website, Slides und Animationen aus demselben System
