102.7K+Download
Claude Code OpenDesign

Mit Claude Code
in OpenDesign
gestalten.

So gestalten Sie Interfaces mit Claude Code in OpenDesign: CLAUDE.md und der Frontend-Design-Skill als Vorgaben, eine Workspace-Settings-Aufgabe vom Briefing bis zur geprüften Datei, und wo der Figma-Hin-und-Rückweg endet.

OpenDesign herunterladen Zur Einrichtung

DREI EINSTIEGSPUNKTE FÜR CLAUDE CODE

Wählen Sie Ihren Einstiegspunkt für Claude Code

DIESER LEITFADEN · UI-DESIGN

Eine Produktoberfläche mit Claude Code ausliefern

Dieser Walkthrough: ein Brief, Referenzen, Designregeln und ein HTML-Artefakt, das überprüft wird.

Diese Anleitung lesen EINRICHTUNG

Claude Code auf einer sauberen Maschine einrichten

Der komplette Weg von einer frischen Installation bis zu einer Claude-Code-Sitzung, die UI generieren und im Browser prüfen kann.

Zum Setup VERGLEICH

Claude Code mit Codex und Cursor vergleichen

Wo die Designstärken von Claude Code neben Codex und Cursor stehen und wann ein anderer Agent die bessere Wahl ist.

Zum Vergleich
Auf dieser Seite Beispiel
  1. Beispiel
  2. Eignung
  3. Kompatibilität
  4. Setup
  5. Workflow
  6. Ressourcen
  7. Einschränkungen
  8. FAQ

EIN CLAUDE-CODE-DESIGN-WALKTHROUGH

Vom Brief zur Oberfläche: Eine Claude-Code-Designaufgabe

Dieser Walkthrough begleitet einen Auftrag durch die Übergabe: den Brief und die Einschränkungen, die Sie Claude Code geben, das zurückgegebene Artefakt und die Prüfungen, die vor der Freigabe bei Ihnen verbleiben. Die folgende Oberfläche ist eine für diese Seite erstellte Illustration, keine Aufzeichnung einer echten Claude-Code-Sitzung.

1Design-Briefing und Vorgaben

Briefing

Entwerfen Sie den Bereich für Workspace-Einstellungen für ein kleines SaaS-Team: Allgemein, Mitglieder, Benachrichtigungen und Abrechnung. Beziehen Sie Werte aus den Tokens in CLAUDE.md; keine manuell angepassten Ausnahmen. Es muss auf dem Desktop und auf einem Telefon standhalten.

  • Design-SystemTokens und Primitive aus CLAUDE.md; Albert Sans; ein einzelner grüner Akzent
  • Breakpoints1440px Desktop und 390px Mobil, kein horizontales Scrollen
  • InteraktionenBereichswechsel, Schalter, eine Leiste für ungespeicherte Änderungen und eine Tastaturfokusreihenfolge
  • AusgabeEine einzelne, in sich geschlossene HTML-Datei mit stabilen data-od-id-Hooks

2Wer macht was: Sie, Claude Code und OpenDesign

  • Sie

    Sie schreiben den Brief, wählen das Designsystem und legen die Abnahmekriterien fest.

  • Claude Code

    Claude Code plant das Layout, schreibt das HTML, CSS und JavaScript und überarbeitet auf Anfrage.

  • OpenDesign

    OpenDesign stellt das Designsystem und den Skill bereit, rendert die Vorschau und bewahrt jede Version als Projektdatei auf.

  • Prüfung

    Prüfen Sie vor der Übergabe die visuelle Hierarchie, den Abstand auf dem 8px-Raster, beide Breakpoints und jede Interaktion.

3Claude-Code-Ausgabe: Einstellungsbildschirm bei 1440px und 390px

Claude-Code-Ausgabe: Einstellungsbildschirm bei 1440px und 390px — Desktop
Illustratives Beispiel

4Überprüfung vor der Übergabe

Layout

Raster und Abstände

Unternavigation, Formular und Aktionen richten sich am 8px-Raster aus; die Sticky-Speicherleiste verdeckt nie ein Feld.

Hierarchie

Visuelle Hierarchie

Gruppentitel haben mehr Gewicht als Beschriftungen; der Akzent erscheint nur bei aktivierten Schaltern.

Responsive

Mobiles Layout

Bei mobiler Breite wird die Unternavigation zu einem segmentierten Schalter; Schalter behalten eine 44px-Trefferfläche; die Speichern-Schaltfläche erstreckt sich über die volle Breite.

Interaktion

Interaktionsprüfungen

Navigieren Sie mit der Tabulatortaste durch jedes Feld, schalten Sie ein Steuerelement um, brechen Sie dann ab und bestätigen Sie die Aufforderung zu ungespeicherten Änderungen.

Eignung

Wo Claude Code passt – und wo nicht

Claude Code passt, wenn

  • Designsystem zuerst. Legen Sie eine DESIGN.md / Tokens / Tailwind-Konfiguration im Projekt ab, damit Claude Code zu einer Marke passt und nicht in „KI-Einheitsbrei“ abrutscht.
  • Ästhetik-Skills. Skills wie Anthropics frontend-design bringen Claude Code dazu, eine Typografie-/Farb-/Bewegungsrichtung zu wählen, bevor es Markup schreibt.
  • Figma → Code. Verbinden Sie den Figma-MCP-Server, und Claude Code verwandelt Frames in Produktionskomponenten mit echten Tokens.
  • Screenshot-Schleife. Lassen Sie Claude Code einen Screenshot seiner eigenen UI machen, ihn mit einer Referenz vergleichen und iterieren – die agentische Design-Feedbackschleife.

Wählen Sie einen anderen Workflow, wenn

  • Sie benötigen bearbeitbare Vektordateien. Claude Code liefert HTML, kein bearbeitbares Designdokument. Verwenden Sie für dieses Asset-Format einen separaten Vektor-Workflow.
  • Sie haben keine Referenz und keine Einschränkungen. Ohne Designsystem oder Beispiele neigt Claude Code zu einem generischen Look; entwerfen Sie zuerst den Brief.
  • Sie haben nicht die Anmeldedaten, die dieser Agent benötigt. Erforderlich: Anthropic-API-Schlüssel (Bring Your Own Key) oder Claude-Abonnement. OpenDesign stellt weder Anmeldedaten bereit noch leitet es sie weiter.
  • Ihr Team arbeitet in Codex oder Cursor. Diese Agenten haben ihre eigenen Seiten; OpenDesign bewahrt einen Workspace über Agenten hinweg, aber die Einrichtung unterscheidet sich. Siehe verwandte Agenten.

Kompatibilität

Claude-Code-Anforderungen, bevor Sie beginnen

Diese Seite behandelt Claude Code als über die OpenDesign-Desktop-App verbunden. Veröffentlichte Referenzen wurden am 6. September 2026 geprüft.

Tool-BereichClaude Code, von Anthropic

Claude Code ist Anthropics agentisches Kommandozeilenwerkzeug: Beschreiben Sie eine Aufgabe in natürlicher Sprache, und es liest, schreibt und führt Code in Ihrem Projekt aus, bis diese Aufgabe abgeschlossen ist. Es ist getrennt von Anthropics gehostetem Claude-Design-Produkt; der Claude-Design-Vergleich behandelt diese Wahl. Diese Seite handelt vom Entwerfen von Oberflächen mit Claude Code durch OpenDesign, nicht von Claude Codes eigener Oberfläche. Die Einrichtungshinweise von OpenDesign listen die verfügbaren Agenten auf.

Konten und AuthentifizierungAnthropic-API-Key (BYOK) oder Claude

Anthropic-API-Schlüssel (BYOK) oder Claude-Abonnement. Sie authentifizieren sich mit Ihrem Anthropic-API-Schlüssel (BYOK) oder Claude-Abonnement – nichts wird über uns weitergeleitet. Auf dieser Seite werden weder Kontingent noch Preis zugesagt.

System und VersionenDesktop-App oder Quellcode

Verfügbar als Terminal-CLI, VS Code / Cursor / JetBrains-Erweiterungen, Desktop-App und Web. Für Desktop-Builds siehe die Downloadseite. Node.js- und pnpm-Anforderungen im Source-Quickstart sind relevant, wenn Sie aus dem Quellcode ausführen, nicht bei der Installation eines Desktop-Pakets. Mindestkompatible Claude-Code-Version: hier nicht verifiziert.

VerbindungsprüfungDas Erfolgssignal

Verwenden Sie die Verbindungsanweisungen, die Ihre installierte Version anzeigt, und versuchen Sie dann eine kleine Aufgabe. Bestätigen Sie, dass Claude Code sie abgeschlossen hat und dass sich das Artefakt öffnet. Das alleinige Herunterladen des Agenten beweist keine funktionierende Verbindung.

Mit der Desktop-App beginnen

Claude Code einrichten in drei Schritten

Beginnen Sie mit dem Download, schließen Sie die Claude-Code-Einrichtung für die von Ihnen installierte Version ab und überprüfen Sie dann ein kleines Ergebnis. Dieser Weg erfordert nicht, OpenDesign aus dem Quellcode zu erstellen.

  1. 1

    Die OpenDesign-Desktop-App herunterladen

    Wählen Sie das Paket für Ihren Rechner, installieren Sie es und öffnen Sie die Desktop-App.

    OpenDesign herunterladen
    MEILENSTEIN
    Die Desktop-App öffnet sich. Wenn sie bereits installiert ist, fahren Sie mit dem nächsten Schritt fort; ein zweiter Download ist nicht nötig.
  2. 2

    Bereiten Sie Ihre Claude Code-Verbindung vor

    Befolgen Sie die Claude-Code-Anweisungen, die mit Ihrer installierten Version geliefert werden. Authentifizieren Sie sich mit Ihrem Anthropic-API-Schlüssel (BYOK) oder Claude-Abonnement – nichts wird über uns weitergeleitet.

    anthropics/skills — frontend-design-Skill 
    # 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

    Entnommen aus den Claude-Code-Einrichtungshinweisen im veröffentlichten Leitfaden; überprüfen Sie den aktuellen Befehl in der Herstellerdokumentation.

    MEILENSTEIN
    Bestätigen Sie den Agenten und das Konto, die Sie verwenden wollten. Wenn Claude Code nicht verfügbar ist, prüfen Sie die Kompatibilität, bevor Sie zu einer größeren Aufgabe übergehen.
  3. 3

    Eine erste kleine Claude-Code-Aufgabe ausführen

    Halten Sie den ersten Brief klein, damit Sie die vollständige Schleife einschließlich einer Überarbeitung beurteilen können.

    Start-Briefing

    Erstellen Sie einen Einstellungsbildschirm mit einem Profilformular und einer Speicherbestätigung. Befolgen Sie meine Designregeln. Prüfen Sie ihn bei Desktop- und Mobilbreiten.

    MEILENSTEIN
    Öffnen Sie das Artefakt, testen Sie den Speicherzustand und bitten Sie um eine bestimmte Änderung. Die Generierung beginnt die Überprüfung; sie beendet sie nicht.

Um OpenDesign aus dem Quellcode auszuführen, verwenden Sie stattdessen den technischen Quickstart.

Der Claude Code Design-Workflow

Claude-Code-Design-Workflow: Fünf Schritte vom Brief zur überprüften Datei

Eine Workspace-Einstellungsaufgabe vom Brief bis zur verifizierten Datei nachverfolgt. Jeder Schritt zeigt, was Sie übergeben, was Claude Code tut, was OpenDesign beiträgt und was Sie prüfen.

  1. 1

    Design-Briefing

    Klare Sprache, drei bis sechs Zeilen. Nennen Sie die Zielgruppe, die Aufgabe des Bildschirms und die Plattformen.

    • SieSchreiben Sie den Brief; fügen Sie einen Referenz-Screenshot bei, wenn Sie einen haben.
    • Claude CodeLiest den Brief und CLAUDE.md; fragt nach, wenn etwas unklar ist.
    • OpenDesignStellt das Projekt, die Prompt-Oberfläche und den passenden Skill für den Artefakttyp bereit.
    • PrüfenBestätigen Sie, dass der Brief Abnahmekriterien enthält. Sie jetzt hinzuzufügen kostet weniger als nach der Generierung.
  2. 2

    Design-Vorgaben

    Ein Designsystem und ein paar harte Regeln. Diese Kombination unterscheidet markenkonforme Ausgabe von einem generischen Look.

    • SieWählen Sie ein Design-System; legen Sie Breakpoints und verbindlich zu verwendende Komponenten fest.
    • Claude CodeLädt die DESIGN.md-Tokens und Haltungsregeln in den Kontext, bevor Markup geschrieben wird.
    • OpenDesignLiefert die Design-System-Bibliothek und bindet das ausgewählte System in die Skill-Vorlage ein.
    • PrüfenDie Token entsprechen Ihrer Marke. Ein Akzent, die richtigen Schriften, der richtige Radius.
  3. 3

    Die Oberfläche generieren

    Claude Code erzeugt eine in sich geschlossene HTML-Datei: Layout, Stile, Interaktionen und stabile Hooks.

    • SieWarten Sie, oder beantworten Sie eine Rückfrage. Nichts zu konfigurieren.
    • Claude CodePlant die Abschnitte, schreibt HTML, CSS und JavaScript, führt die Datei aus und behebt Fehler.
    • OpenDesignSpeichert das Artefakt im Projektordner und indexiert es für die Vorschau.
    • PrüfenNoch nichts. Beurteilen Sie die Datei nach dem Rendern, nicht anhand des Quellcodes.
  4. 4

    Vorschau

    Die Datei wird in OpenDesign mit den von Ihnen angegebenen Breiten gerendert. Hier wird das Design beurteilt.

    • SieWechseln Sie zwischen Breiten, klicken Sie sich durch die Interaktionen, hinterlassen Sie Kommentare zu Elementen.
    • Claude CodeLiest Ihre Kommentare zur Vorschau und bereitet die nächste Überarbeitung vor.
    • OpenDesignRendert die Vorschau und stellt data-od-id-Ziele für Kommentare und Bearbeitungen bereit.
    • PrüfenHierarchie, Kontrast, Überlauf bei 390px, Fokuszustände und ob der Akzent sparsam eingesetzt wird.
  5. 5

    Überarbeiten und Verifizieren

    Fordern Sie Änderungen an, indem Sie auf Elemente in der Vorschau zeigen. Jede Überarbeitung wird zu einer neuen Datei; nichts wird stillschweigend überschrieben.

    • SieVerwandeln Kommentare in Anfragen; entscheiden, wann die Aufgabe abgeschlossen ist.
    • Claude CodeWendet die Änderungen direkt an und führt die Datei erneut aus.
    • OpenDesignBehält Versionen nebeneinander; exportiert ein Bild oder das HTML, wenn Sie fertig sind.
    • PrüfenNur den geänderten Bereich erneut prüfen, dann die gesamte Seite einmal bei jedem Breakpoint.

Ressourcen

Claude Code Design-Ressourcen

Skills

Design Skills

Die Artefakttypen, die Claude Code in OpenDesign erzeugen kann, ein Skill pro Typ.

Skills durchsuchen Design-Systeme

Design Systems

Markentokens und Komponenten, die vor der Generierung durch Claude Code gebunden werden müssen.

Systeme durchsuchen Vorlagen

Vorlagen

Ausgangspunkte für Decks, Landingpages und Produktbildschirme.

Vorlagen durchsuchen

Einschränkungen

Einschränkungen von Claude Code, manuelle Prüfungen und Fallbacks

  • UmfangEs ist ein Coding-Agent, kein Design-Tool – doch Design ist eine seiner stärksten emergenten Einsatzmöglichkeiten. Mit den richtigen Skills und einem Designsystem im Kontext generiert es produktionsreifes HTML/CSS/React, iteriert anhand von Screenshots und pflegt Design-Tokens. Diese Seite behandelt Claude Code als einen mit OpenDesign verbundenen Agenten, nicht jede Funktion von Claude Code.
  • NutzungsgrenzenNutzungslimits und Kosten richten sich nach den von Ihnen verwendeten Anmeldedaten (Anthropic-API-Schlüssel oder Claude-Abonnement). Es wird hier keine Aussage über kostenlose Kontingente getroffen.
  • NetzwerkLokale Projektdateien bedeuten nicht, dass die Inferenz offline erfolgt. Prüfen Sie die Anbietereinstellungen und Datenrichtlinien Ihres Agents, bevor Sie sensible Eingaben teilen.
  • Ausgabe ist HTMLArtefakte sind HTML-Dateien, keine Vektor-Designdateien. Figma-Roundtrips laufen über die eigene Figma-Integration von Claude Code.
  • Manuelle ÜberprüfungSie prüfen Barrierefreiheit, echte Inhalte, Markenpassung und Interaktionskorrektheit in der Vorschau. Behandeln Sie jede Selbstprüfung durch den Agenten als ersten Durchgang.
  • FallbackWenn der Agent nicht verfügbar ist oder eine Aufgabe fehlschlägt, prüfen Sie die Verbindungsanleitung und Authentifizierung der installierten Version. Bewahren Sie den Fehler und das letzte funktionierende Artefakt auf, bevor Sie die Konfiguration ändern.

FAQ

Häufige Fragen zu Claude Code und OpenDesign

Ist Claude Code gut für Design-Arbeit?
Ja — er gilt weithin als der Coding-Agent mit dem besten Gespür für Frontend-Design und trifft spezifische, codebase-bewusste Entscheidungen zu Hex-Werten, Abständen und Typ-Skalen. Mit dem Frontend Design Skill, einem Design-System und echten Referenzbildern im Kontext erzeugt er produktionsreife, responsive UI und kann diese im Browser überprüfen. Ohne diesen Kontext tendiert er zu einem generischen Look — genau diese Lücke schließt OpenDesign.
Benötige ich ein Claude-Abonnement, um mit Claude Code zu designen?
Sie können entweder einen Anthropic-API-Key (BYOK, über die Console) oder ein Claude-Abonnement (Pro/Max) verwenden. In beiden Fällen leitet OpenDesign Ihre Zugangsdaten nie über einen Proxy — sie werden direkt von Ihrem Agenten auf Ihrem Rechner verwendet.
Claude Code oder Codex für Frontend-Design?
Beide sind stark. Claude Code ist bekannt für spezifische, codebase-bewusste Design-Entscheidungen und Frontend-Reasoning; Codex überzeugt durch visuellen Feinschliff und delegierte, sandboxed Builds. Viele Teams nutzen beide — mit OpenDesign können Sie den Agenten wechseln, ohne Ihren Design-Workflow zu ändern.
Wie verbinde ich Claude Code mit Figma?
Installieren Sie das offizielle Figma-Plugin mit claude plugin install figma@claude-plugins-official. Anschließend können Sie Figma-Frames anhand des Design-Kontexts in Code umsetzen und eine laufende UI mit „Send this to Figma“ zurück in editierbare Figma-Frames senden. Dev Mode MCP erfordert einen kostenpflichtigen Figma-Plan.
Was sind Skills und CLAUDE.md?
CLAUDE.md ist eine Markdown-Datei im Projektstamm, die Claude Code am Anfang jeder Sitzung liest — der Ort, um Ihre Design-Konventionen festzuhalten. Skills bündeln wiederholbare Anweisungen und Ressourcen, die Claude bei Bedarf lädt, darunter Anthropics offizieller Frontend Design Skill. OpenDesign liefert eine kuratierte Bibliothek beider, damit Sie das projektweise Einrichten überspringen können.
Was Claude Code eigentlich ist
Claude Code ist Anthropics agentisches Coding-Tool. Es liest deine Codebasis, bearbeitet Dateien, führt Befehle aus und integriert sich in deine Entwicklungswerkzeuge — es plant, schreibt und verifiziert Arbeit auf Basis von Aufgaben in natürlicher Sprache, statt nur Zeilen zu vervollständigen.

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

Anweisungsdatei: Claude Code liest zu Beginn jeder Sitzung eine CLAUDE.md-Datei im Projektstamm — der natürliche Ort, um deine Design-Konventionen, Tokens und Review-Checklisten festzuhalten.

Skills: Agent Skills bündeln wiederholbare Anweisungen, Skripte und Ressourcen, die Claude bei Bedarf lädt, einschließlich Anthropics offiziellem Frontend-Design-Skill für Geschmack.

Plan und Subagenten: Es kann planen, bevor es handelt, und Subagenten starten, die parallel an verschiedenen Teilen einer Aufgabe arbeiten, was große UI-Refactorings kohärent hält.

Zugangsdaten: Anthropic-API-Schlüssel (BYOK, über die Console) oder ein Claude-Abonnement (Pro / Max)

Anbieter: Anthropic
Warum Claude Code gut in Design ist
Unter den Coding-Agenten hat Claude Code den Ruf, bei Frontend-Arbeit Geschmack zu haben. Einige Dinge erklären das.

Konkrete statt vage Entscheidungen: Claude Code legt sich tendenziell auf konkrete Entscheidungen fest — exakte Hex-Werte, Abstandsskalen, Typografie-Stufen und Komponentenhierarchie — statt auszuweichen, und genau das unterscheidet ein echtes Interface von einem Platzhalter.

Codebasis-bewusstes Denken: Mit einem großen Arbeitskontext refaktoriert es UI über viele Dateien gleichzeitig und verwendet deine bestehenden Komponenten und Tokens wieder, statt einmalige Stile neu zu erfinden.

Ein offizieller Frontend-Skill: Anthropic liefert einen Frontend-Design-Skill, der Claude zuerst eine Designrichtung schreiben lässt und gezielt von generischen Systemschriften und vorhersehbaren lila Verläufen weglenkt.

Geschmack entsteht aus drei Eingaben, die du lieferst: einem Designsystem, einem Skill und echten Referenzbildern.

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). Gutes Design produziert es, wenn du ihm Einschränkungen gibst. OpenDesign bündelt genau diese Eingaben, weshalb die beiden zusammenpassen (mehr dazu unten).
Claude Code für Designarbeit einrichten, von null an
Die Einrichtungsreihenfolge: installieren → authentifizieren → CLAUDE.md konfigurieren → den Frontend-Design-Skill hinzufügen → Browser-Verifizierung aktivieren.

Kodiere deine Designregeln: Lege deine Tokens, Primitives und Konventionen in CLAUDE.md ab und verweise Claude darauf, damit die Ausgabe zu einer Marke passt, statt in ein generisches Aussehen zurückzufallen.

Füge Browser-Verifizierung hinzu: Binde ein Playwright- oder Chrome-MCP ein, damit Claude in einem echten Browser rendert und seine Ausgabe über Breakpoints hinweg prüft, statt nur zu bestätigen, dass der Build durchläuft.

Nutze den aktuellen Einrichtungsabschnitt für Befehle und versionsspezifische Details, die sich ändern können.

# 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
Historisches Befehlsbeispiel aus dem vorherigen Leitfaden; prüfe die aktuelle Syntax in der verlinkten Anbieterdokumentation.
Der Workflow mit CLAUDE.md und Skills
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 Einschränkungen tragen, damit du sie nicht bei jedem Prompt neu erklären musst.

Beginne mit den klarsten visuellen Referenzen, die du hast — und schließe mehrere Zustände ein (Desktop und Mobil, Hover, leer, ladend), nicht nur eine Hero-Aufnahme.

Sei im Prompt konkret; vage Prompts erzeugen auch mit einem starken Agenten generische UI.

Halte dein Designsystem und deine Konventionen in CLAUDE.md fest und sage Claude, wo die Tokens und kanonischen Primitives liegen.

Füge den Frontend-Design-Skill hinzu, damit Claude sich auf eine echte ästhetische Richtung festlegt, bevor es Code schreibt.

Binde Browser-Verifizierung ein, damit Claude rendert, auf Breakpoints skaliert und mit den Referenzen vergleicht — und nicht nur bestätigt, dass es baut.

Lege ein Referenzbild in die Sitzung und prompte mit konkreten Einschränkungen:

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

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."
Historisches Befehlsbeispiel aus dem vorherigen Leitfaden; prüfe die aktuelle Syntax in der verlinkten Anbieterdokumentation.
Claude Code + Figma: Roundtrip zwischen Design ↔ Code
Im Februar 2026 haben Anthropic und Figma eine vollwertige, bidirektionale Integration über den Figma MCP-Server veröffentlicht. Sie funktioniert in beide Richtungen.

Design → Code: Wähle einen Frame in Figma aus oder füge einen Link in Claude Code ein, hole den Design-Kontext und bitte darum, das Design mit deiner bestehenden Komponentenbibliothek umzusetzen. Code Connect hält die Ausgabe an deinen echten Komponenten ausgerichtet.

Code → Design: Baue eine Funktion, sieh sie dir im Browser als Vorschau an und sage dann „Send this to Figma“, um die laufende UI als bearbeitbare Figma-Ebenen zu erfassen — den gesamten Bildschirm oder ein ausgewähltes Element.

Installiere es einmal mit claude plugin install figma@claude-plugins-official (Dev Mode MCP erfordert einen bezahlten Figma-Plan). Derselbe Figma MCP steht Claude Code, Codex, Cursor und VS Code zur Verfügung — genau die Art portabler, agentenübergreifender Fähigkeit, für deren Orchestrierung OpenDesign gebaut ist.
Claude Code vs. Codex vs. Cursor für Design
Für Designarbeit gibt es keinen eindeutigen Gewinner — jeder Agent hat eine andere Stärke, und erfahrene Teams kombinieren sie. Eine faire Zusammenfassung:

Claude Code — Konkrete Designentscheidungen (Hex, Abstände, Typografie) und codebasisbewusstes UX-Reasoning — Frontend-Reasoning und Refactorings mit großem Kontext

Codex — Starke visuelle Politur und Bildverständnis; asynchrone Builds in Sandbox — Delegierte asynchrone Builds und portable AGENTS.md-Regeln

Cursor — Visuelle Build-and-See-Schleife mit Live-Vorschau und Inline-Bearbeitungen — Enge Iterieren-und-Beobachten-UI-Arbeit innerhalb einer IDE

Das wiederkehrende Urteil der Community lautet, dass Geschmack von Menschen kommt: Alle drei liefern ohne Skills, Referenzen und Vorgaben standardmäßig eine generische Ästhetik. Das ist das eigentliche Problem, das zu lösen ist — und es hat die Form eines Design-Tools, nicht eines Modells.

Agent — Designstärke — Am besten für
Fallstricke und wie man den „AI-Slop“-Look vermeidet
Trotz des Rufs von Claude Code für guten Geschmack lautet die häufigste Beschwerde über KI-generiertes Design, dass es generisch aussieht — Inter-Schriften, violette Verläufe auf Weiß, weiche Schatten, übergroße abgerundete Ecken, eine Ästhetik, die „schreit, dass eine KI das gemacht hat“. Anthropic selbst führt dies auf distributionelle Konvergenz zurück: Sichere Entscheidungen dominieren die Web-Trainingsdaten. Weitere gemeldete Probleme sind fehlerhafte mobile Layouts und Anweisungen, die in UI-Texte durchsickern.

Installiere den Frontend-Design-Skill: Er zwingt Claude, sich auf eine echte Richtung festzulegen, und vermeidet ausdrücklich von KI überstrapazierte Schriften und Verläufe.

Aktiviere die Browser-Verifizierung: Lass Claude über Breakpoints hinweg rendern und sich selbst prüfen, damit Layouts auf Mobilgeräten nicht unbemerkt brechen.

Liefere Tokens und Referenzen: Echte Design-Tokens und Referenz-Screenshots sind der größte einzelne Hebel für die Ausgabequalität.

Verankere Regeln in CLAUDE.md: Lege Regeln im Stil von „keine Hero-Cards, maximal zwei Schriftarten, markenorientierte Hierarchie“ dort ab, wo der Agent sie bei jedem Lauf liest.

Beachte, dass jede Gegenmaßnahme darauf hinausläuft, dem Agenten einen kuratierten Design-Kontext zu geben. Diesen Kontext von Hand, pro Projekt, zu pflegen, ist die Mühsal, die OpenDesign beseitigt.
Mit Claude Code in OpenDesign gestalten
OpenDesign ist die Open-Source-Design-Schicht, nach der der obige Workflow ständig verlangt. Es behandelt Claude Code als First-Party-Adapter und umgibt es 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 Lauf an vorhanden ist und nicht jedes Mal von Hand zusammengestellt wird.

Installiere OpenDesign und wähle Claude Code als deinen Agenten.

Authentifiziere dich mit deinem Anthropic-API-Schlüssel (BYOK) oder Claude-Abonnement — Anmeldedaten bleiben auf deinem Rechner und werden niemals über uns weitergeleitet.

Wähle ein Designsystem und einen Skill und erzeuge dann Präsentationen, Prototypen und Landingpages mit konsistentem Geschmack.

Jedes Artefakt und jede DESIGN.md-Datei liegt in deinem eigenen Repo, nicht in einer gehosteten Cloud.

Derselbe Claude Code-Agent, derselbe Schlüssel — plus ein echter, portabler Open-Source-Design-Workflow darum herum. Es ist Local-First und Apache-2.0, sodass nichts von deiner Arbeit oder deinen Anmeldedaten deinen Rechner verlässt.
Ist das ein offizielles Anthropic-Produkt?
Nein. OpenDesign ist ein unabhängiges Open-Source-Projekt. Claude Code ist eine Marke von Anthropic; wir integrieren es als First-Party-Adapter.