Claude Code für Design.

Was Claude Code wirklich ist

Claude Code ist das agentische Coding-Tool von Anthropic. Es liest deine Codebasis, bearbeitet Dateien, führt Befehle aus und integriert sich in deine Dev-Tools — es plant, schreibt und verifiziert Arbeit aus Aufgaben in natürlicher Sprache, statt nur Zeilen zu vervollständigen.

Es ist über mehrere Oberflächen verfügbar, die alle dieselbe Engine teilen: eine Terminal-CLI, IDE-Erweiterungen für VS Code, Cursor und JetBrains, eine Desktop-App mit visueller Diff-Prüfung und eine Web-Oberfläche für lang laufende Aufgaben. Deine CLAUDE.md-Dateien, Einstellungen und MCP-Server gelten über alle hinweg.

• Anweisungsdatei: Claude Code liest zu Beginn jeder Session eine CLAUDE.md-Datei im Projektstamm — der natürliche Ort, um deine Design-Konventionen, tokens und Review-Checklisten zu hinterlegen.
• Skills: Agent Skills bündeln wiederverwendbare Anweisungen, Skripte und Ressourcen, die Claude bei Bedarf lädt — darunter Anthropics offizielle Frontend-Design-skill für Geschmack.
• Plan und Subagenten: Es kann vor dem Handeln planen und Subagenten starten, die parallel an verschiedenen Teilen einer Aufgabe arbeiten, was umfangreiche UI-Refactorings kohärent hält.

• Anbieter: Anthropic
• Zugangsdaten: Anthropic-API-Key (BYOK, über die Console) oder ein Claude-Abo (Pro / Max)
• Oberflächen: Terminal-CLI, VS Code / Cursor / JetBrains-Erweiterungen, Desktop-App, Web

Warum Claude Code gut im Design ist

Unter den Coding-Agenten hat Claude Code den Ruf, Geschmack für Frontend-Arbeit zu haben. Dafür gibt es einige Gründe.

• Konkrete statt vage Entscheidungen: Claude Code legt sich tendenziell auf konkrete Entscheidungen fest — exakte hex-Werte, Abstandsskalen, Schriftverläufe und Komponentenhierarchie — statt sich vage durchzulavieren, und genau das unterscheidet ein echtes Interface von einem Platzhalter.
• Codebasis-bewusstes Denken: Mit großem Arbeitskontext refaktoriert es UI über viele Dateien gleichzeitig und nutzt deine bestehenden Komponenten und tokens wieder, statt Einzelstile neu zu erfinden.
• Eine offizielle Frontend-skill: Anthropic liefert eine Frontend-Design-skill aus, die Claude zuerst eine Designrichtung formulieren lässt und bewusst von generischen System-Schriften und vorhersehbaren lila Verläufen wegsteuert.

Die Lektion ist dieselbe, die Anthropic über seine eigenen Modelle formuliert: Claude hat standardmäßig keinen Geschmack — sich selbst überlassen konvergiert es zum statistischen Mittelpunkt des Webdesigns (Inter, lila Verläufe, weiche Schatten). Es liefert gutes Design, wenn du ihm Vorgaben machst. Open Design bündelt genau diese Eingaben — deshalb passen die beiden zusammen (mehr dazu weiter unten).

Claude Code für Designarbeit einrichten, von null

Hier ist der komplette Weg von einer frischen Maschine zu einem Claude Code, das UI bauen und verifizieren kann.

# 1. Install Claude Code (native install, recommended)
curl -fsSL https://claude.ai/install.sh | bash
# or: brew install --cask claude-code
# Windows PowerShell: irm https://claude.ai/install.ps1 | iex

# 2. Start it in your project and sign in on first run
cd your-project
claude            # sign in with your Claude subscription or API key

# 3. Generate project context
/init             # creates a CLAUDE.md for this project

# 4. Add the official Frontend Design skill
claude plugin install frontend-design@claude-plugins-official

# 5. Wire the Figma MCP server (optional, for design handoff)
claude plugin install figma@claude-plugins-official

• Hinterlege deine Designregeln: Schreibe deine tokens, Primitive und Konventionen in CLAUDE.md und verweise Claude darauf, damit der Output zu einer Marke passt, statt zu einem generischen Look zurückzufallen.
• Browser-Verifizierung hinzufügen: Binde einen Playwright- oder Chrome-MCP ein, damit Claude in einem echten Browser rendert und seinen Output über Breakpoints hinweg prüft, statt nur zu bestätigen, dass der Build durchläuft.

Der CLAUDE.md- und Skills-Workflow

Die wirkungsvollste Design-Schleife mit Claude Code besteht darin, ihm echte Referenzen plus deinen Design-Kontext zu geben und dann zu iterieren, bis die UI passt — wobei CLAUDE.md und Skills die Vorgaben tragen, sodass du sie nicht bei jedem Prompt neu erklären musst.

1. Beginne mit den klarsten visuellen Referenzen, die du hast — und nimm mehrere Zustände auf (Desktop und Mobile, Hover, leer, ladend), nicht nur einen Hero-Shot.
2. Sei im Prompt konkret; vage Prompts erzeugen generische UI, selbst mit einem starken Agenten.
3. Halte dein Designsystem und deine Konventionen in CLAUDE.md fest und sag Claude, wo die tokens und kanonischen Primitive liegen.
4. Füge die Frontend-Design-skill hinzu, damit Claude sich auf eine echte ästhetische Richtung festlegt, bevor er Code schreibt.
5. Binde Browser-Verifizierung ein, damit Claude rendert, auf Breakpoints umstellt und mit den Referenzen abgleicht — nicht bloß bestätigt, dass es baut.

Wirf ein Referenzbild in die Session und prompte mit konkreten Vorgaben:

claude "Implement reference-desktop.png and reference-mobile.png in
  React + Vite + Tailwind + TypeScript.
  Reuse the design-system components and tokens described in CLAUDE.md.
  Match spacing, layout, and hierarchy; make it responsive.
  Render it in the browser, verify it matches the references across
  breakpoints, and iterate until it does."

Lass parallel einen Dev-Server laufen, halte Prompts klein und fokussiert und committe gute Iterationen / verwirf schlechte (und teile Claude mit, wenn du zurücksetzt), damit jeder Durchlauf auf einer sauberen Basis aufbaut. Nutze den Plan-Modus für größere Refactorings, damit du den Ansatz prüfen kannst, bevor Dateien geändert werden.

Claude Code + Figma: Design-↔-Code-Roundtrip

Im Februar 2026 brachten Anthropic und Figma eine erstklassige, bidirektionale Integration über den Figma-MCP-Server. Sie funktioniert in beide Richtungen.

• Design → Code: Wähle einen Frame in Figma aus oder füge einen Link in Claude Code ein, ziehe den Design-Kontext heran und bitte es, das Design mit deiner bestehenden Komponentenbibliothek umzusetzen. Code Connect hält den Output an deinen echten Komponenten ausgerichtet.
• Code → Design: Baue ein Feature und sieh es im Browser an, sag dann „Send this to Figma“, um die laufende UI als bearbeitbare Figma-Ebenen festzuhalten — den ganzen Screen oder ein ausgewähltes Element.

Installiere es einmalig mit claude plugin install figma@claude-plugins-official (Dev Mode MCP erfordert einen kostenpflichtigen Figma-Plan). Derselbe Figma-MCP steht Claude Code, Codex, Cursor und VS Code zur Verfügung — genau die Art portabler, agentenübergreifender Fähigkeit, die Open Design orchestrieren soll.

Claude Code vs. Codex vs. Cursor für Design

Es gibt keinen einzelnen Gewinner für Designarbeit — jeder Agent hat eine andere Stärke, und erfahrene Teams kombinieren sie. Eine faire Zusammenfassung:

Das wiederkehrende Urteil der Community lautet, dass Geschmack von Menschen kommt: Alle drei tendieren ohne skills, Referenzen und Vorgaben zu einer generischen Ästhetik. Das ist das eigentliche Problem, das es zu lösen gilt — und es hat die Form eines Design-Tools, nicht die eines Modells.

Fallstricke und wie du den „AI-Slop“-Look vermeidest

Selbst trotz Claude Codes Ruf für Geschmack lautet die häufigste Klage über KI-generiertes Design, dass es generisch aussieht — Inter-Schriften, lila Verläufe auf Weiß, weiche Schatten, übergroße runde Ecken, eine Ästhetik, die „schreit, dass eine KI das gemacht hat“. Anthropic selbst führt das auf distributionelle Konvergenz zurück: Sichere Entscheidungen dominieren die Web-Trainingsdaten. Weitere gemeldete Probleme sind kaputte Mobile-Layouts und Anweisungen, die in die UI-Texte durchsickern.

• Installiere die Frontend-Design-skill: Sie zwingt Claude, sich auf eine echte Richtung festzulegen, und vermeidet ausdrücklich von KI überstrapazierte Schriften und Verläufe.
• Aktiviere Browser-Verifizierung: Lass Claude über Breakpoints hinweg rendern und sich selbst prüfen, damit Layouts nicht stillschweigend auf Mobilgeräten brechen.
• Liefere tokens und Referenzen: Echte Design-tokens und Referenz-Screenshots sind der größte Einzelhebel für die Output-Qualität.
• Hinterlege Regeln in CLAUDE.md: Schreibe Regeln im Stil „keine Hero-Cards, höchstens zwei Schriftarten, markenorientierte Hierarchie“ dorthin, wo der Agent sie bei jedem Durchlauf liest.

Beachte: Jede dieser Maßnahmen dreht sich darum, dem Agenten einen kuratierten Design-Kontext zu geben. Diesen Kontext von Hand und pro Projekt zu pflegen, ist genau die Mühsal, die Open Design beseitigt.

Mit Claude Code in Open Design gestalten

Open Design ist die quelloffene Design-Schicht, nach der der obige Workflow immer wieder verlangt. Es behandelt Claude Code als First-Party-Adapter und umgibt ihn mit einer kuratierten skill- und Designsystem-Bibliothek, einer strukturierten Render-Pipeline und einer lokalen Desktop-UI — sodass der Design-Kontext, der Claude Code gut macht, vom ersten Durchlauf an da ist, statt jedes Mal von Hand zusammengebaut zu werden.

1. Installiere Open Design und wähle Claude Code als deinen Agenten.
2. Authentifiziere dich mit deinem Anthropic-API-Key (BYOK) oder Claude-Abo — die Zugangsdaten bleiben auf deiner Maschine und werden niemals über uns geleitet.
3. Wähle ein Designsystem und eine skill und erzeuge dann Decks, Prototypen und Landingpages mit konsistentem Geschmack.
4. Jedes Artefakt und jede DESIGN.md-Datei liegt in deinem eigenen Repo, nicht in einer gehosteten Cloud.

Derselbe Claude-Code-Agent, derselbe Key — plus ein echter, portabler, quelloffener Design-Workflow drumherum. Es ist local-first und Apache-2.0, sodass nichts an deiner Arbeit oder deinen Zugangsdaten deine Maschine verlässt.

Häufig gestellte Fragen

1. 01 Eignet sich Claude Code für Designarbeit? +

   Ja — er gilt weithin als der Coding-Agent mit dem besten Frontend-Geschmack und trifft konkrete, codebasis-bewusste Entscheidungen über hex-Werte, Abstände und Schriftskalen. Mit der Frontend-Design-skill, einem Designsystem und echten Referenzbildern im Kontext liefert er produktionsreife, responsive UI und kann sie in einem Browser verifizieren. Ohne diesen Kontext fällt er tendenziell auf einen generischen Look zurück — und genau diese Lücke schließt Open Design.

2. 02 Brauche ich ein Claude-Abo, um mit Claude Code zu gestalten? +

   Du kannst entweder einen Anthropic-API-Key (BYOK, über die Console) oder ein Claude-Abo (Pro / Max) verwenden. So oder so leitet Open Design deine Zugangsdaten niemals weiter — sie werden direkt von deinem Agenten auf deiner Maschine genutzt.

3. 03 Claude Code oder Codex für Frontend-Design? +

   Beide sind stark. Claude Code ist bekannt für konkrete, codebasis-bewusste Designentscheidungen und Frontend-Argumentation; Codex hat starken visuellen Feinschliff und glänzt bei delegierten, sandboxed Builds. Viele Teams nutzen beide — Open Design lässt dich die Agenten wechseln, ohne deinen Design-Workflow zu ändern.

4. 04 Wie verbinde ich Claude Code mit Figma? +

   Installiere das offizielle Figma-Plugin mit claude plugin install figma@claude-plugins-official. Du kannst dann Figma-Frames mithilfe des Design-Kontexts in Code umsetzen und eine laufende UI mit „Send this to Figma“ zurück in bearbeitbare Figma-Frames schieben. Dev Mode MCP erfordert einen kostenpflichtigen Figma-Plan.

5. 05 Was sind Skills und CLAUDE.md? +

   CLAUDE.md ist eine Markdown-Datei im Projektstamm, die Claude Code zu Beginn jeder Session liest — der Ort, um deine Design-Konventionen zu hinterlegen. Skills bündeln wiederverwendbare Anweisungen und Ressourcen, die Claude bei Bedarf lädt, darunter Anthropics offizielle Frontend-Design-skill. Open Design liefert eine kuratierte Bibliothek von beidem, sodass du das Setup pro Projekt überspringst.

6. 06 Wie vermeide ich die generische „AI-Slop“-Ästhetik? +

   Installiere die Frontend-Design-skill, liefere echte Design-tokens und Referenz-Screenshots, hinterlege Markenregeln in CLAUDE.md und aktiviere Browser-Verifizierung. Open Design liefert diese als kuratierte Bibliothek aus, sodass du das Setup pro Projekt überspringst.

7. 07 Ist Open Design mit Anthropic verbunden? +

   Nein. Claude Code ist ein Produkt von Anthropic; Open Design ist ein unabhängiges quelloffenes Projekt, das ihn als First-Party-Adapter unterstützt. Claude und Claude Code sind Marken von Anthropic.

8. 08 Sind meine Dateien und Zugangsdaten sicher? +

   Ja — Open Design ist local-first und Apache-2.0. Deine Dateien, Artefakte und DESIGN.md bleiben in deinem eigenen Repo, und deine Anthropic-Zugangsdaten werden direkt von deinem Agenten genutzt, niemals über Open-Design-Server geleitet.