Claude Codes /design-Befehl: UI-Prototypen erstellen, bevor man Code schreibt

Einleitung

Anthropic bringt einen klareren Design-first-Workflow in Claude Code.

Am 18. August kündigte Nate Parrott, Produktdesigner bei Anthropic, eine frühe Vorschau auf den /design-Befehl von Claude Code an. Die Idee ist einfach: Entwickler müssen nicht direkt von funktionalen Anforderungen zur Implementierung springen, sondern können Claude zunächst mehrere visuelle Richtungen generieren lassen, diese vergleichen, die bevorzugte Variante bearbeiten und erst dann in die Codierungsphase übergehen.

Der Workflow ist über Claude Code Desktop oder die CLI verfügbar. Der Prompt kann so direkt sein:

/design Entwirf mehrere Optionen für {Funktion}

Claude kann den bestehenden Codebestand als Kontext nutzen, dem aktuellen UI-Stil des Projekts folgen und vor Beginn der Implementierung prüfbare visuelle Modelle generieren.

Dies ist ein scheinbar kleiner Befehl mit einer bedeutenden Workflow-Änderung. Claude Code ist nicht mehr darauf beschränkt, Schnittstellen nur über Quelldateien zu erschließen; es kann nun an Designentscheidungen teilnehmen, bevor Code geändert wird.

Mehrere UI-Richtungen erstellen, bevor gebaut wird

Der direkteste Nutzen von /design liegt darin, mehrere Oberflächenoptionen zu erkunden, bevor Produktionscode berührt wird.

Zum Beispiel:

/design Entwirf mehrere Optionen für das neue Analyse-Dashboard

Claude bearbeitet nicht sofort Komponenten, sondern kann mehrere visuelle Richtungen als Zeichenflächen erstellen. Entwickler oder Produktteams können vergleichen, die stärkste Richtung auswählen, visuelle Anpassungen vornehmen und dann in die Implementierungsphase übergehen.

Der tatsächliche Workflow sieht wie folgt aus:

1. Öffne das Projekt in Claude Code Desktop oder starte Claude Code aus dem Projektverzeichnis.
2. Verwende /design mit einer Beschreibung der Funktion oder Oberfläche, die du erkunden möchtest.
3. Fordere mehrere Optionen an, solange die Designrichtung noch nicht festgelegt ist.
4. Überprüfe die generierten Zeichenflächen.
5. Wähle die bevorzugte Version aus und verfeinere sie.
6. Übergib das ausgewählte Design zurück an Claude, um es im bestehenden Codebestand zu implementieren.

Dies ist besonders nützlich, wenn ein Team weiß, was die Funktion tun muss, aber noch nicht entschieden hat, wie sie aussehen soll.

Anstatt eine Implementierung zu generieren und dann durch wiederholte Codeänderungen neu zu gestalten, können visuelle Entscheidungen früher getroffen werden.

Claude liest den bestehenden Codebestand und den UI-Stil

Der /design-Workflow läuft nicht als eigenständiger Bildgenerator.

Claude Code versteht bereits Projektdateien und kann über den bestehenden Codebestand hinweg schlussfolgern. Im Design-Workflow hilft der Codebestand-Kontext Claude dabei, Modelle zu erstellen, die besser zu dem Produkt passen, das erweitert wird.

Dies kann vorhandene Informationen umfassen, wie zum Beispiel:

• Komponentenstrukturen
• Layoutmuster
• Schriftauswahl
• Farbverwendung
• Abstandsdefinitionen
• Bestehende Navigation
• Wiederverwendbare UI-Komponenten
• Produktspezifische Interaktionsmuster

Die Claude-Design-Dokumentation von Anthropic unterstützt außerdem den Import von Designsystemen aus Code-Repositories, Design-Dateien, Uploads oder lokalen Codebeständen. Der /design-sync-Workflow kann diese Komponenten und Stile in Claude Design einbringen und so generierte Arbeiten näher an das tatsächliche Produktsystem anlehnen.

Das ist wichtig, denn ein allgemeines

KI-generiertes Dashboard ist leicht zu erstellen. Aber ein Dashboard, das wirklich so aussieht, als gehöre es zum bestehenden Produkt, ist wesentlich nützlicher.

Von der Zeichenfläche zur Implementierung

Der Schlüssel des neuen Workflows liegt in der Übergabe.

Traditionell folgt KI-gestützte Frontend-Entwicklung typischerweise einem von zwei Wegen:

1. Erst Code generieren und dann wiederholt anpassen, bis die Oberfläche passt.
2. Modelle woanders erstellen und dann die visuellen Referenzen manuell in Code übersetzen.

Claude Design und Claude Code werden miteinander verbunden, sodass beide Phasen Kontext teilen können.

Anthropic gibt an, dass Benutzer zwischen Design und Code wechseln können, während die Arbeit synchron bleibt. Designs können in Claude Design erstellt oder bearbeitet werden und dann an Claude Code zur Implementierung übergeben werden – ohne von einem Screenshot neu beginnen zu müssen.

Der umgekehrte Fluss wird ebenfalls unterstützt: Entwickler, die lieber mit Claude Code arbeiten, können /design verwenden, um Designprojekte zu erstellen, zu bearbeiten und zu synchronisieren, ohne den terminalzentrierten Workflow zu verlassen.

Konzeptionell wird der Kreislauf zu:

Funktionsidee
    ↓
/design
    ↓
Mehrere UI-Zeichenflächen
    ↓
Eine Richtung auswählen und verfeinern
    ↓
Mit Claude Code implementieren
    ↓
Nutzbare UI überprüfen
    ↓
Bei Bedarf weiter verfeinern

Damit wird Design-Erkundung Teil des Engineering-Kreislaufs, nicht eine separate Übergabe vor der Entwicklung.

Claude Design ist jetzt stärker mit Claude Code verbunden

Ursprüngliche Berichte wiesen darauf hin, dass zuvor relativ isoliert arbeitende Design-Bearbeitungs- und Prompt-Funktionen in Claude Design nun enger in Claude Code integriert werden.

Die aktuelle Dokumentation von Anthropic beschreibt Claude Design als eine konversationelle Design-Umgebung mit Chat-Oberfläche und visueller Zeichenfläche. Benutzer können interaktive Prototypen, Präsentationen, Layouts und andere Designarbeiten erstellen und diese dann über Chat, Inline-Kommentare oder direkte Bearbeitung der Zeichenfläche verfeinern.

Für Teams mit bestehenden Designsystemen kann Claude Design außerdem auf Grundlage realer Komponenten arbeiten, anstatt für jeden Prototyp eine neue visuelle Sprache neu zu erfinden.

Anthropic dokumentiert für Teams, die den Claude-Design-MCP-Server verwenden, den folgenden Verbindungsprozess:

claude mcp add --scope user --transport http claude-design https://api.anthropic.com/v1/design/mcp

Danach kann man sich von Claude Code aus anmelden:

/design-login

Für die Designsystem-Synchronisation dokumentiert Anthropic:

/design-sync

Diese Befehle ergänzen den /design-Workflow, indem sie Claude Code mit Designprojekten und wiederverwendbarem Designsystem-Kontext verbinden.

Vor dem Testen der neuesten Vorschau Claude Code aktualisieren

Da sich /design in aktiver Entwicklung befindet, ist es ratsam, vor dem Testen der neuesten Funktionen sicherzustellen, dass Claude Code auf dem neuesten Stand ist.

Die offizielle Setup-Dokumentation von Anthropic enthält den folgenden Aktualisierungsbefehl:

claude update

Die installierte Version kann man mit folgendem Befehl überprüfen:

claude --version

Native Claude-Code-Installationen aktualisieren sich normalerweise automatisch im Hintergrund, während Versionen, die über Paketmanager installiert wurden, eigene Aktualisierungsprozesse haben können.

Nach der Aktualisierung startet man Claude Code aus dem relevanten Projektverzeichnis:

cd your-project
claude

Dann kann man einen

Design-Auftrag wie diesen versuchen:

/design Entwirf mehrere Optionen für die Kontoeinstellungsseite

Da Anthropic diese Funktion weiterhin iteriert, können sich die konkreten Vorschau-Verhaltensweisen noch ändern.

Wann /design am besten geeignet ist

Der Befehl ist am nützlichsten, wenn die Implementierung nicht mehr das vordringliche Problem ist.

Entwickler wissen zum Beispiel möglicherweise bereits, dass das Produkt ein neues Einstellungsfeld, einen Onboarding-Flow, eine Analyseansicht, eine Preisseite oder eine Editor-Sidebar benötigt. Das Unklare liegt im Layout- und Interaktionsdesign.

In diesem Fall kann das sofortige Generieren von Code unnötige Nacharbeit verursachen.

Die Verwendung von /design zuerst ermöglicht es Teams, mehrere Optionen zu vergleichen, bevor Komponentenstruktur und Stilfestlegung getroffen werden.

Der Workflow eignet sich besonders für folgende Szenarien:

• Erforschung neuer Funktionen
• Frontend-Redesigns
• Dashboard-Layouts
• Onboarding-Flows
• Einstellungsseiten
• Landing Pages
• Interne Tools
• Prototypen auf Basis von Designsystemen
• Schnelle Produktexperimente

Er hilft auch Entwicklern, die Schnittstellen gut implementieren können, aber nicht mehrere visuelle Optionen manuell zeichnen möchten, bevor eine Richtung gewählt wird.

Wichtige Einschränkungen

Claude Design befindet sich noch in der Betaphase, und Anthropic hat mehrere Einschränkungen dokumentiert.

Sehr große Codebestände eignen sich möglicherweise besser für die Verbindung über Claude Code, um Browser-Performance-Probleme zu vermeiden. Die Kollaborationsbearbeitung durch mehrere Personen ist noch grundlegend, und die Qualität des Designsystems hängt weitgehend von der Qualität des importierten Ausgangsmaterials ab.

Die generierten Prototypen müssen weiterhin manuell geprüft werden. Eine visuell überzeugende Oberfläche kann Barrierefreiheitsprobleme, unklare Hierarchien, schwaches responsives Verhalten oder Interaktionsannahmen enthalten, die nicht der tatsächlichen Produktrealität entsprechen.

Daher liegt die stärkste Verwendung von /design nicht darin, dass „die KI die Oberfläche bestimmt", sondern darin, dass „die KI mehrere sinnvolle Designrichtungen so günstig macht, dass sie verglichen werden können, bevor das Engineering-Team die endgültige Lösung festlegt".

Häufige Fragen

Was ist der /design-Befehl in Claude Code?

/design ist ein Workflow in Claude Code, um visuelle Designrichtungen vor der Implementierung zu erstellen und zu bearbeiten. Anthropics aktuelle Materialien beschreiben es als eine Möglichkeit, direkt aus Claude Code Designarbeit zu starten und im gemeinsamen Kontext zwischen Designentwürfen und Produktionscode zu wechseln.

Kann /design mehrere UI-Varianten generieren?

Ja. Nate Parrotts Vorschau-Demo forderte Claude genau dazu auf, mehrere Optionen für ein Feature zu liefern, dann ein bevorzugtes Artboard auszuwählen, zu bearbeiten und zu implementieren.

Nutzt Claude Code beim Designen die bestehende Codebasis?

Das ist Teil des erwarteten Workflows. Claude Code kann das Projekt-Repository lesen, und Claude Design kann ebenfalls Designsysteme und Codebasis-Kontext importieren, sodass Prototypen besser zu vorhandenen Komponenten und visuellen Mustern passen.

Kann ich /design im Terminal verwenden?

Ja. Anthropic beschreibt die Integration von Claude Design in Claude Code; die Vorschau-Ankündigung erwähnt ausdrücklich die Claude Code-Desktopversion und das Kommandozeilentool (CLI).

Wofür wird /design-sync verwendet?

/design-sync dient dazu, Designsystem-Kontext zwischen Claude Design und Claude Code zu synchronisieren. Es hilft Claude, mit echten Komponenten, Stilen, Schriftarten und Mustern aus bestehenden Systemen zu bauen.

Benötige ich den Claude Design MCP-Server?

Anthropics Hilfe-

Dokumentation bietet einen MCP-Setup-Prozess zum Erstellen und Bearbeiten von Claude-Design-Projekten aus Claude Code. Verfügbarkeit und Einrichtung können von Ihrer aktuellen Claude-Design- und Claude-Code-Umgebung abhängen. Daher sollten Sie vor der Einführung im Team die offizielle Dokumentation konsultieren.

Wie aktualisiere ich Claude Code?

Bei nativen Installationen dokumentiert Anthropic claude update als manuellen Aktualisierungsbefehl. Versionen, die über Paketmanager wie Homebrew oder WinGet installiert wurden, müssen möglicherweise über den entsprechenden Paketmanager aktualisiert werden.

Ist Claude Design bereits produktionsreif?

Claude Design wird derzeit als Beta-Produkt dokumentiert. Es eignet sich für Prototyping und Design-to-Code-Workflows, aber generierte Designs sollten weiterhin auf Barrierefreiheit, responsives Verhalten, Produktanforderungen und Umsetzungsqualität geprüft werden.

Verwandte Tools

• Claude Code: Die agentische Codierungsumgebung von Anthropic, die Codebasen über Terminal, Desktop, IDE und Web verarbeitet.
• Claude Design: Die konversationelle Designumgebung von Anthropic für Prototypen, Layouts, Präsentationen und designsystembewusste visuelle Arbeit.
• Claude Artifacts: Teilbare, bearbeitbare Ausgaben von Claude für Apps, Visualisierungen, Tools und andere eigenständige Inhalte.
• Model Context Protocol: Die Integrationsschicht von Claude Code zur Verbindung mit externen Tools und Diensten, einschließlich Claude-Design-Workflows.
• Claude Code Skills: Wiederverwendbare Anweisungen und Workflows, die in Claude Code als Slash-Befehle aufgerufen werden können.

Verwandte Links

• Nate Parrotts /design-Vorschau: Die frühe Vorschau-Ankündigung des Anthropic-Produktdesigners zu /design in Claude Code.
• Claude Design und Claude Code-Integration: Anthropics offizieller Überblick zum Wechsel zwischen Design und Code über /design und /design-sync.
• Erste Schritte mit Claude Design: Offizieller Leitfaden zu Designprojekten, Designsystemen, Claude-Code-Integration und dem Claude-Design-MCP-Server.
• Claude Code-Überblick: Offizielle Installations- und Workflow-Dokumentation für Claude Code.
• Claude Code-Einrichtung und -Updates: Offizielle Anmerkungen zu Release-Kanälen, Updates, Installation und Versionsverwaltung.
• Claude Code-Befehle: Offizielle Referenz der in Claude-Code-Sitzungen verfügbaren Befehle.

Zusammenfassung

Der /design-Workflow von Anthropic bringt visuelle Erkundung in die Umgebung, in der Entwickler tatsächlich Funktionen bauen. Claude Code setzt nicht sofort die erste Idee um, sondern kann helfen, mehrere UI-Richtungen zu generieren, sodass der

Nutzer eine auswählen und verfeinern kann, bevor in die Implementierungsphase übergegangen wird – während der Projektkontext weiterhin verfügbar bleibt.

Der tiefere Wert liegt in der Verbindung zwischen Claude Design und Claude Code. Vorhandene Codebasen und Designsysteme können Kontext liefern, während /design, /design-sync und die Claude-Design-Integration die traditionelle Lücke zwischen Prototyp und Umsetzung verkürzen.

Der praktische Unterschied ist einfach: Bevor Sie Claude Code bitten, eine Oberfläche zu bauen, können Sie es nun bitten, zunächst zu zeigen, wie die Oberfläche aussehen soll.