Der /design-Befehl in Claude Code: Oberflächen skizzieren, bevor man baut

Menschen planen, Claude führt aus

Anthropic hat rund 400.000 Claude-Code-Sitzungen von etwa 235.000 Nutzern ausgewertet, und die Verteilung der Entscheidungen war schief. Menschen trafen rund 70 % der Planungsentscheidungen, also was gebaut wird. Claude traf rund 80 % der Ausführungsentscheidungen: welche Datei, welche Syntax, welcher Befehl. Über die sieben untersuchten Monate fiel der Anteil der Sitzungen zur Reparatur von kaputtem Code von 33 % auf 19 %, während Softwarebedienung und Analyse zunahmen.

Diese Aufteilung erklärt das Feature, das Anthropic diese Woche ausgeliefert hat. Sobald ein Agent die Ausführung übernimmt, wandert der Engpass nach oben in den Teil, der noch bei den Menschen liegt, und bei allem mit einem Bildschirm ist Planung visuell. „Bau die Einstellungsseite“ kann nichts Präzises bedeuten, wenn noch niemand die Einstellungsseite gesehen hat. Es ist, als würde man Möbel für einen Raum beschreiben, den niemand betreten hat.

Also bauen die meisten von uns das Ding, um es herauszufinden. Idee, Code, Rendern, missfällt, neu schreiben. Jede verworfene Idee wird in der teuersten Währung bezahlt, die es gibt.

Was sich geändert hat

Claude Code und Claude Design konnten schon vorher miteinander sprechen. Man registriert den Design-MCP-Server und meldet sich an:

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

Nach der Verbindung lässt sich ein Design in die Codebasis ziehen, Code kann zu einem lebendigen Prototyp werden, und Arbeit kann in beide Richtungen wandern. All das gab es schon vor dieser Woche.

Neu ist der Befehl /design selbst. Anthropic hat am 17. August 2026 eine frühe Vorschau davon in Claude Code gebracht. Nate Parrott, der Produktdesigner, der Claude Design geschaffen hat, kündigte ihn an, und das Claude-Code-Team bestätigte es am selben Tag. In der CLI oder der Desktop-App erzeugt Claude nun eine Handvoll bearbeitbarer UI-Mockups, sogenannte Artboards, die als Artifact angezeigt werden. Sie wählen eines aus, passen es an und sagen Claude, dass es gebaut werden soll. Die Pläne Pro, Max, Team und Enterprise haben es, und claude update holt es.

„Die beiden Produkte können synchronisieren“ gegenüber „die Artboards leben in Ihrem Terminal“ klingt nach Klempnerei, verändert aber, was eine verworfene Idee kostet: früher vierhundert Zeilen JSX, jetzt etwa neun Sekunden Hinsehen. Die Schleife wird zu: eine Idee, sechs visuelle Möglichkeiten, fünf verworfen, eine programmiert.

Wohin das Erkunden früher ging

Vor dem Befehl gab es zwei Optionen, und keine war günstig.

Die erste: die Oberfläche in Prosa beschreiben und die Daumen drücken. Drei Absätze über Kartenabstände und Hierarchie gehen hinein, Claude liefert eine Komponente, localhost öffnet sich, und irgendetwas stimmt nicht, auf eine Weise, die der Prompt unmöglich vorhersehen konnte. Am Ende bearbeiten Sie Code, um eine Layout-Entscheidung zu korrigieren, die dreißig Sekunden Hinsehen geklärt hätten.

Die zweite: claude.ai/design öffnen, dort prototypen und das Ergebnis dann im Repo mit den echten Komponenten abgleichen. Das ist ein guter Weg und oft immer noch der richtige. Das Problem ist der Wechsel zwischen Tools, und genau dieser Wechsel tötet das Erkunden: Sie nehmen eine Richtung und lassen sechs aus, weil sich ein weiterer Tab wie eine Festlegung anfühlte.

Parrotts eigene Geschichte zeigt, warum. Ende 2025 war er der einzige Designer für Claude Code for VS Code, neben zwei Ingenieuren. Im November kam Opus 4.5, die Ingenieure wurden deutlich schneller, und er musste mithalten. Sein erster Versuch war, Terminalausgaben und Screenshots in Claude einzufügen und um ein Design zu bitten, und nach eigener Aussage ging das schief. Die Lösung war, Claude eine HTML-Leinwand statt eines Textfelds zu geben, denn HTML ist ein reiches visuelles Medium, und Claude schreibt es bemerkenswert gut. Daraus wurde Claude Design, und /design bringt denselben Artboard-Workflow ins Terminal, direkt neben den Code.

Gewohnheiten, die es funktionieren lassen

Parrott hat im Juli seine eigenen Best Practices veröffentlicht. Sie lassen sich fast vollständig auf die CLI übertragen und sind nützlicher als jede Feature-Liste.

Denken, bevor man promptet. Er verbringt echte Zeit damit, Prompts vor dem Designen zu formulieren, manchmal diktiert, manchmal vom Sofa aus in die Notizen-App auf dem Handy getippt. Herauszufinden, was man will, ist eine andere Tätigkeit, als darum zu bitten, und ein vager Prompt verbrennt Nutzung für etwas, das Sie verwerfen werden.

Den Look beschreiben. Sich selbst überlassen, driftet Claude zu ein paar Lieblingsästhetiken, und Sie würden sie sofort erkennen. Geben Sie ihm Schriften und Farben, ein Moodboard, oder lassen Sie es Schrift- und Farbkombinationen vorschlagen und diskutieren Sie, bis eine passt. Allein diese Gewohnheit sorgt dafür, dass das Ergebnis nach Ihrem Produkt aussieht und nicht nach jeder KI-generierten Landingpage der letzten anderthalb Jahre.

Mit Wireframes beginnen, wenn Detailtreue warten kann. Sie sind schneller und halten Claude bei der Struktur statt bei visuellen Details. Solange Sie noch zwischen Seitenleiste und oberer Leiste für Filter schwanken, machen Verläufe nur Lärm. Probieren Sie acht strukturelle Ideen, bevor Sie eine polieren.

Um zehn bitten, dann remixen. Die meisten werden nicht gut sein, und das ist erwartbar. Parrotts Nachfrage klingt etwa so: Option B gefällt mir plus ein bisschen von Option D, gib mir fünf Varianten, die beides verbinden.

Die letzte Meile von Hand. Direkte Änderungen auf der Leinwand wie Umordnen, Löschen, Größe ändern sowie Text oder Farben anpassen kosten keine Tokens. Dieselben Änderungen per Prompt kosten einiges, und Ausrichtung lässt sich leichter mit dem Auge beurteilen als beschreiben. Hören Sie auf, Sätze über Padding zu schreiben.

Skizzieren und zeigen. Wenn ein Layout ohne Worte in Ihrem Kopf existiert, zeichnen Sie es auf Papier und fotografieren Sie es. Statt einen Absatz darüber zu schreiben, welches Element Sie meinen, klicken Sie es an und sprechen Sie.

Anatomie eines funktionierenden Prompts

Diese Gewohnheiten laufen auf eine wiederverwendbare Form mit fünf Slots hinaus. Lassen Sie einen weg, und Sie bekommen ein vorhersehbares Scheitern.

Anzahl. Wie viele Richtungen Sie wollen. Nennen Sie eine Zahl, sonst bekommen Sie eine. Sechs passen für Wireframes, drei für hohe Detailtreue.

Detailtreue. Wireframe oder poliert. Sagen Sie, was, denn das Modell greift gern zum Polieren, und beim Polieren verschwinden Zeit und Nutzung.

Das Ding. Eine abgegrenzte, benannte Oberfläche, etwa ein Panel für Benachrichtigungseinstellungen, ein leerer Zustand beim ersten Start oder eine Rechnungsdetailansicht. „Das Dashboard“ ist zu groß.

Vorgaben aus Ihrem Code. Welche vorhandenen Komponenten vorkommen müssen. Hier verdient sich die CLI ihren Platz, weil Claude sie lesen kann. Nennen Sie sie trotzdem, denn Zeigen schlägt Hoffen.

Ästhetische Richtung oder ein erklärter Aufschub. Nennen Sie Schriften und Farben oder schreiben Sie „structure only, ignore visual styling for now“ (nur Struktur, visuelles Styling vorerst ignorieren). Schweigen ist die einzige Wahl, die zuverlässig nach hinten losgeht, denn Schweigen beschert Ihnen den Hausstil.

/design 6 wireframe options for the invoice detail view.
Reuse DataTable and StatusPill from src/components.
Structure only, no styling yet.

Vergleichen Sie das mit dem, was Leute meist zuerst tippen: /design an invoice page. Der Befehl ist derselbe, der Ertrag ein ganz anderer.

Anthropics eigene Prompting-Tipps für Claude Design überschneiden sich damit und gehören daneben: Ziel, Layout, Inhalt und Zielgruppe angeben. Die fünf Slots oben sind auf Divergenz ausgelegt, während Anthropics Version zum Erzeugen eines guten Artefakts passt; nutzen Sie sie, wenn Sie schon wissen, was Sie wollen.

Ein schneller Test, ob der Prompt seinen Zweck erfüllt hat: Überfliegen Sie die Ergebnisse und fragen Sie, ob sich die Optionen in der Hierarchie unterscheiden oder nur in der Farbe. Sechs Varianten derselben Informationsarchitektur deuten auf einen zu engen Prompt oder zu frühes Polieren hin. Ziel sind sechs wirklich verschiedene Antworten auf „Was priorisiert dieser Bildschirm?“. Sie bezahlen für unterschiedliche Entscheidungen, nicht für unterschiedliche Paletten.

Das echte Designsystem anbinden

/design-sync bringt Ihr lokales Designsystem in Claude Design, sodass das Generierte aus Ihren echten Komponenten zusammengesetzt wird und Claude keine Button-Klasse aus dem Nichts erfindet. Es kann aus einem GitHub-Repo, Designdateien, Uploads oder der lokalen Codebasis lesen, und Sie können das System gleich mit benennen: /design-sync Acme DS.

Zwei Punkte sollten Sie einplanen. Laut Anthropics Befehlsreferenz prüft eine erste Synchronisierung jede Komponente und kann bei einem großen Repo einige Stunden laufen, also starten Sie sie vor dem Mittagessen und nicht kurz vor einer Demo. Das Hilfe-Center nennt große Codebasen ebenfalls als Ursache für Verzögerungen und empfiehlt, sie über Claude Code statt über den Browser zu verknüpfen. Und da die Implementierung derzeit auf React ausgerichtet ist, hängen Vue- und Svelte-Projekte davon ab, dass Claude die Komponenten direkt in der Sitzung liest.

Ein Haken für Admins: In Enterprise-Plänen ist Claude Design standardmäßig deaktiviert, und ein Admin muss es einschalten, bevor irgendetwas davon funktioniert.

Was es kostet

Claude Design hat kein eigenes Kontingent mehr, das man im Blick behalten müsste. Die Nutzung geht vom gemeinsamen Pool mit Claude-Chat, Claude Code und Cowork ab, und Anthropic sagt ausdrücklich, dass komplexe Projekte, große Codebasen und viele Iterationen mehr verbrauchen. Früher gab es ein separates Wochenkontingent, das ist weg.

In der CLI spürt man das stärker als im Web. Wenn Sie dort mehrere vollständige Mockups anfordern, trägt die Sitzung bereits eine indizierte Codebasis und ein laufendes Gespräch. Erreichen Sie Ihre Limits, ist Claude Design bis zum Zurücksetzen nicht verfügbar.

Die Kosten senkt man, indem man die Best-Practice-Liste umdreht: abgegrenzte Features statt Abläufe über mehrere Bildschirme, Wireframes vor hoher Detailtreue und manuelle Änderungen auf der Leinwand für die letzten 10 %, die kostenlos sind.

Was /design nicht tut

Parrott zieht die Grenzen klar. Claude Code ist zum Schreiben produktiver Software da, und Claude Design deckt den Rest ab: frühe Ideenfindung, Zusammenarbeit und Zustimmung gewinnen, bevor sich jemand auf einen Build festlegt. Das sagte er, bevor es /design gab, und eine Leinwand im Terminal hebt diese Grenze auf. Was bleibt, ist eine andere Aufteilung: Divergenz auf der einen Seite, Konvergenz auf der anderen, beides in einer Sitzung.

Der Befehl übernimmt nicht die Build-Schleife. Er fügt ihr einen visuellen Planungsschritt vorne an. Sie erkunden Richtungen auf der Leinwand, wählen eine und kehren zum normalen Claude Code zurück, für Implementierung, Tests, Refactoring und alles andere, was Software real macht.

Er ist erst wenige Tage alt, und das merkt man. Designs gehen in den Build-Schritt über, müssen aber noch von Hand gespeichert werden. /design fehlt in der offiziellen Befehlsreferenz von Claude Code, während /design-login und /design-sync aufgeführt sind. Das Verhalten wird sich wahrscheinlich ändern.

Welche Oberfläche man nutzt

Nutzen Sie /design in Claude Code, wenn das Ergebnis bald in ein Repo geht, das Sie ausgecheckt haben. Die Nähe zum Code ist der ganze Sinn.

Greifen Sie zu claude.ai/design, wenn das Publikum ein Mensch ist: ein Deck, ein Onepager, eine Landingpage oder ein klickbarer Prototyp für Nutzertests, im Grunde alles, was ein Stakeholder ohne Terminal im Browser öffnen kann. Es exportiert PDF, PPTX, eigenständiges HTML und .zip und schickt Arbeit unter anderem an Canva, Miro, Replit, Vercel und Figma-nahe Tools.

Beide funktionieren in beide Richtungen, sodass Begonnenes von einem zum anderen wandern kann. Eine Designerin ohne lokale Entwicklungsumgebung sollte die Web-App als Heimatbasis betrachten und die Übergabe als Brücke. Ein Ingenieur, der in Repos denkt, bekommt /design.

Wenn Figma Ihre Quelle der Wahrheit ist

Sie müssen sich nicht entscheiden. Am 17. Februar 2026 haben Figma und Anthropic Code to Canvas veröffentlicht, das die laufende, gerenderte UI aus Claude Code als bearbeitbare Frames an Figma schickt, nicht als statische Screenshots. Installieren Sie das Plugin:

claude plugin install figma@claude-plugins-official

Öffnen Sie dann in einer Sitzung /mcp, verbinden Sie den Remote-Figma-Server und authentifizieren Sie sich. Taucht ein Eintrag figma-desktop auf, deaktivieren Sie ihn, denn das ist der lokale Nur-Lese-Server, der mit dem Remote-Server kollidiert. Danach ruft „send this to Figma“ (schick das an Figma) generate_figma_design auf.

Manche hatten hier Probleme. Threads im Community-Forum von Figma beschreiben Aufnahmen, die in einer endlosen Verarbeitungsschleife hängen blieben und mit leeren Dateien endeten, wobei es bei mindestens einem Entwickler nach dem Vereinfachen der Seite funktionierte. Testen Sie an etwas Wegwerfbarem, bevor Sie einer Designerin etwas versprechen.

Kurz gesagt: /design erkundet, bevor es Code gibt, und Code to Canvas nimmt vorhandenen Code und bringt ihn zurück auf eine Leinwand, damit das Team darüber diskutieren kann.

Ihr erster Durchlauf

Wählen Sie ein Feature, um das Sie herumschleichen, ohne es zu bauen, und halten Sie es abgegrenzt: ein Panel, ein Modal, eine Einstellungsseite. Führen Sie claude update aus, öffnen Sie eine Sitzung im richtigen Repo und beginnen Sie mit:

/design 6 wireframe options for a notification preferences panel.
Use our existing card and toggle components. Structure only,
no color or polish yet.

Sehen Sie sich alle sechs an und prüfen Sie, ob sie sich wirklich in der Hierarchie unterscheiden. Streichen Sie vier. Fordern Sie fünf Remixe der beiden übrigen an. Wählen Sie einen Gewinner, bitten Sie um einen Durchgang in hoher Detailtreue mit ausdrücklich genannten Schriften und Farben und korrigieren Sie Abstände von Hand auf der Leinwand statt per Beschreibung. Erst danach sagen Sie „implement this“ (setz das um).

Stoppen Sie die Zeit. Die gesamte Erkundung sollte weniger kosten, als eine einzige Runde „kannst du die Schalter nach rechts verschieben“ im Code gekostet hätte, und das Layout am Ende ist eines, das Sie gewählt und nicht hingenommen haben.

Das ist der eigentliche Wandel, und er ist kleiner und praktischer als das Gerede von Branchentransformation, das solche Releases meist begleitet. KI-Coding hatte die Implementierung schon billig gemacht. Jetzt ist auch das Wegwerfen schlechter Ideen billig. Der Agent übernimmt den Großteil des Wie, und das Sehen der Optionen schärft Ihren Blick für das Was, das schon immer Ihre Aufgabe war.