Claude Code bekommt mit dem /design-Befehl ein neues Feature: Direkt im Terminal oder in der Desktop-App lässt du dir mehrere UI-Entwürfe generieren, vergleichst sie in claude.ai, passt deinen Favoriten an und lässt Claude Code daraus anschließend ein echtes Frontend bauen.
Claude Code /design: Was steckt hinter dem neuen Befehl?
Anthropic-Produktdesigner Nate Parrott hat den /design-Befehl am 18. August 2026 als Early Preview angekündigt. Der Befehl bringt die Canvas-Technik von Claude Design – Anthropics separatem Design-Tool, das im April 2026 gestartet ist – direkt in Claude Code hinein. Verfügbar ist das Feature aktuell für Claude Code Desktop und CLI.
Der Grundgedanke: Bisher hat Claude Code bei UI-Aufgaben meist direkt Code geschrieben, ohne dass Farben, Layout und Hierarchie vorher abgestimmt waren. Das führte zu Nacharbeit, wenn das Ergebnis nicht passte. Mit /design entsteht zwischen Anforderung und Code ein eigenes Design-Artefakt, das du vergleichst, änderst und erst dann bestätigst, bevor überhaupt eine Zeile Produktivcode entsteht.
Wie das in der Praxis aussieht, zeigt das folgende Beispiel: ein Preisrechner für eine Website und eine zweite Seite für ein fiktives SaaS-Produkt namens „FluxComp V2“ – von der ersten Skizze bis zum fertigen Frontend-Code. Wir werden dieses Frontend erstellen:
Schritt 1: Ersten Entwurf mit /design anstoßen
Der Befehl startet mit einer kurzen, unpräzisen Beschreibung – Pixel-genaue Vorgaben brauchst du nicht:
/design a calculator for a website relaunch
Claude Code stellt daraufhin gezielte Rückfragen, statt sofort loszulegen: Was soll der Rechner berechnen (in diesem Beispiel: ein Preis-/Angebotsrechner)? Soll es ein klickbarer Prototyp oder ein statischer Mockup werden? Und soll Claude mehrere gestalterische Richtungen vorschlagen oder gibt es bereits eine Vorgabe? In diesem Beispiel fiel die Wahl auf einen klickbaren Prototypen mit mehreren Design-Richtungen zur Auswahl.
Der /design-Befehl im Claude Code Terminal: Claude fragt gezielt nach, bevor der erste Entwurf entsteht.
Schritt 2: Mehrere Design-Richtungen in claude.ai vergleichen
Nach den Rückfragen veröffentlicht Claude Code den Entwurf als Artifact und liefert direkt den Link zu claude.ai, wo sich das Ergebnis öffnen und bearbeiten lässt.
Claude Code meldet den fertigen Entwurf inklusive Link zu claude.ai – hier mit vier unterschiedlichen Design-Richtungen.
Im Beispiel sind das vier deutlich unterschiedliche Richtungen für denselben Preisrechner: ein minimalistisches, editorielles Layout, ein datenreiches Dashboard mit dunkler Sidebar, ein dunkles technisches Terminal-Design und eine warme, verspielte Consumer-Variante. Alle vier rechnen live mit denselben Beispieldaten (12 Team-Plätze, jährliche Abrechnung), zeigen aber, wie unterschiedlich dieselbe Funktion wirken kann.
Alle vier Design-Richtungen im direkten Vergleich: minimalistisch, dashboard-artig, technisch und verspielt-warm.Nahaufnahme von zwei der vier Varianten: Der Gesamtpreis reagiert in jeder Version live auf die eingestellten Werte.
Statt sich früh auf eine Richtung festzulegen, siehst du an dieser Stelle alle Optionen nebeneinander und kannst gezielt entscheiden, bevor überhaupt Code für die finale Version geschrieben wird.
Schritt 3: Mit einem weiteren /design-Befehl eine zweite Seite bauen
Der /design-Befehl lässt sich innerhalb derselben Session direkt weiterführen. Im Beispiel folgt ein zweiter Befehl, der die Folgeseite nach dem Absenden des Preisrechners beschreibt – eine Willkommens-Dashboard-Seite für das fiktive Produkt „FluxComp V2“ mit einem Besucher-Chart und fünf Kennzahlen-Kacheln:
/design a followup page after submitting. it shows a welcome page of our software "FluxComp V2". A dashboard shows Visits per Day (chart) + 5 random KPIs. then options where i can setup some stuff of the software.
Auch hier fragt Claude Code gezielt nach: Soll das Dashboard interaktiv oder ein statischer Mockup sein (im Beispiel: statischer Mockup), und gibt es bereits eine Marke oder ein UI, an dem sich Claude orientieren soll? In diesem Fall wurde eine „Clean SaaS“-Optik als Richtung vorgegeben.
Zweiter /design-Befehl in derselben Session: Die Folgeseite nach dem Absenden wird als eigenständiges Artifact angelegt.Auch die zweite Seite wird als Artifact veröffentlicht, inklusive direktem Link zur Vorschau.
Das Ergebnis: eine Willkommens-Seite mit Logo-Leiste, Begrüßungstext, einem „Visits per day“-Chart, fünf Kennzahlen-Kacheln (aktive Nutzer, Umsatz, Conversion-Rate, durchschnittliche Sitzungsdauer, Uptime) und einem Onboarding-Bereich mit vier Setup-Schritten.
Die fertige zweite Seite: Willkommens-Dashboard mit Chart, fünf KPI-Kacheln und Onboarding-Bereich.
Schritt 4: Aus den Entwürfen ein echtes Frontend bauen
Sind beide Design-Artefakte bestätigt, folgt der eigentliche Zweck des Features: die Umsetzung in produktiven Code. Ein einfacher Folgebefehl reicht dafür aus:
build the frontend for both pages (pricing, dashboard)
Claude Code stellt an dieser Stelle noch eine wichtige Rückfrage, bevor Produktivcode entsteht: Welcher Frontend-Stack soll verwendet werden? Zur Auswahl standen im Beispiel React + Vite + TypeScript (empfohlen, moderner Dev-Setup, komponentenbasiert), Next.js (React mit eingebautem Routing), reines HTML/CSS/JS ohne Build-Schritt oder ein frei wählbarer anderer Stack.
Vor der Implementierung fragt Claude Code aktiv nach dem gewünschten Frontend-Stack – hier mit React + Vite + TypeScript als Empfehlung.
Erst nach dieser Entscheidung schreibt Claude Code den eigentlichen Anwendungscode für beide Seiten – auf Basis der zuvor bestätigten Design-Artefakte, nicht auf Basis einer neuen Interpretation der ursprünglichen Anforderung.
Nach rund fünf Minuten liefert Claude Code eine Zusammenfassung, was tatsächlich entstanden ist: eine PricingPage.tsx für die Route / mit funktionierendem Sitzplatz-Regler, Plan-Auswahl, Abrechnungs-Umschalter und Live-Preisberechnung, eine DashboardPage.tsx für die Route /welcome mit dem Besucher-Chart und den fünf KPI-Kacheln, sowie eine App.tsx, die beide Seiten per react-router-dom zu einer echten clientseitigen Navigation verbindet. Claude Code hat den Code dabei nicht nur geschrieben, sondern auch selbst geprüft: npm install ausgeführt, TypeScript-Typen kontrolliert, den Dev-Server gestartet und im Browser durchgeklickt.
Claude Code fasst zusammen, was gebaut wurde, und bestaetigt, dass Installation, Typpruefung und Klicktest erfolgreich liefen.Das Ergebnis ist echter Projektcode: eine src/pages-Struktur mit PricingPage.tsx und DashboardPage.tsx statt nur einer visuellen Vorlage.
Schritt 5: Das fertige Frontend im Browser
Der lokale Dev-Server macht das Ergebnis direkt testbar. Die Preisrechner-Seite läuft unter localhost:5183 exakt nach der zuvor ausgewählten Design-Richtung, inklusive live berechnetem Preis:
Die Preisrechner-Seite als laufende Anwendung im Browser – nicht mehr nur als Artifact-Mockup, sondern als echtes Frontend.
Ein Klick auf „Start free trial“ navigiert clientseitig zur zweiten Seite unter localhost:5183/welcome – dem FluxComp-V2-Dashboard aus Schritt 3, jetzt als funktionierende Route statt als statischer Entwurf:
Die zweite Seite nach der Implementierung: dasselbe Dashboard-Design, jetzt als laufende Route im echten Frontend.
Claude Code /design vs. klassischer UI-Workflow: Die wichtigsten Vorteile
Design-Entscheidung vor dem Code: Layout, Farben und Hierarchie stehen fest, bevor Claude Code produktiven Code schreibt – das reduziert Nacharbeit.
Mehrere Optionen auf einen Blick: Ein einziger Prompt liefert mehrere vergleichbare Design-Richtungen statt eines einzelnen Vorschlags.
Kein Tool-Wechsel: Der komplette Ablauf von Entwurf bis Implementierung bleibt in einer Claude Code Session, ohne Export/Import zwischen separatem Design-Tool und Editor.
Gezielte Rückfragen statt Rätselraten: Claude Code fragt aktiv nach Prototyp-Typ, Design-Richtung und Frontend-Stack, statt Annahmen zu treffen.
Direkter Handoff zu Code: Das bestätigte Artifact wird zum konkreten Ziel für die Implementierung, ganz ohne manuelles Übertragen von Design-Specs.
Bewährte Technik im Hintergrund: Der Editor basiert auf Claude Design und der Artifacts-Runtime – keine experimentelle Neuentwicklung, sondern etablierte Bausteine.
Selbst getesteter Code: Claude Code installiert Abhängigkeiten, prüft Typen und klickt sich im Browser durch das Ergebnis, bevor es als fertig gemeldet wird.
Grenzen des /design-Befehls, die du kennen solltest
/design ist eine Early Preview, entsprechend gibt es noch offene Punkte:
Der Befehl verbraucht spürbar mehr Tokens als eine normale Coding-Anfrage – für kleine UI-Anpassungen lohnt er sich aktuell nicht.
Entwürfe müssen bestätigt beziehungsweise gespeichert werden, um in die Build-Phase überzugehen.
Ein Treffer zu deinem bestehenden Design-System ist nicht automatisch garantiert – referenziere deine Komponenten-Bibliothek explizit im Prompt, wenn Konsistenz wichtig ist.
Genaue Plan-Voraussetzungen und Rollout-Bedingungen für /design im Detail sind zum jetzigen Zeitpunkt noch nicht vollständig dokumentiert.
Claude Code /design: Häufige Fragen (FAQ)
Was kostet der /design-Befehl in Claude Code?
Ein separates Preisschild gibt es nicht: /design läuft über deine bestehende Claude-Code-Nutzung. Das zugrunde liegende Claude Design ist für die Pläne Pro, Max, Team und Enterprise verfügbar, verbrauchte Tokens zählen zum Abo-Limit, optional ist zusätzliche Nutzung möglich. Genaue Konditionen speziell für /design in Claude Code sind während der Early Preview noch nicht vollständig veröffentlicht.
Wie installiere ich das /design-Feature?
Es gibt keine separate Installation. Ein Update auf die aktuelle Claude-Code-Version reicht: claude update im Terminal, automatisches Update bei nativer Installation, oder brew upgrade claude-code bei Homebrew.
Was ist der Unterschied zwischen Claude Design und dem /design-Befehl?
Claude Design ist ein eigenständiges Anthropic-Labs-Produkt für Designs, Prototypen, Slides und One-Pager, aufgebaut auf einem Vision-Modell von Claude. Der /design-Befehl bringt den Artifact-Editor aus Claude Design direkt in eine Claude-Code-Session – für UI-Entwürfe, die anschließend im selben Workflow zu Code werden, wie im Beispiel oben mit Preisrechner und Dashboard.
Kann ich mehrere Seiten nacheinander mit /design entwerfen?
Ja. Im gezeigten Beispiel entsteht zunächst ein Preisrechner, danach in derselben Session mit einem zweiten /design-Befehl die passende Folgeseite. Claude Code greift dabei auf den Kontext der vorherigen Konversation zurück, sodass sich Folgeseiten thematisch anschließen lassen.
Funktioniert /design mit meinem bestehenden Design-System?
Claude Code liest deine Codebase mit, ein automatischer Treffer auf dein Design-System ist in der aktuellen Preview aber nicht garantiert. Nenne deine Komponenten-Bibliothek und Design-Tokens explizit im Prompt, wenn das Ergebnis konsistent zu deinem bestehenden UI ausfallen soll.
Am Beispiel von Preisrechner und Dashboard zeigt sich, was der /design-Befehl in Claude Code konkret ändert: Statt direkt Code zu schreiben, entstehen erst mehrere vergleichbare Entwürfe, dann eine bewusste Design-Entscheidung, erst danach der Frontend-Code – inklusive Rückfrage nach dem passenden Stack. Am Ende steht kein statischer Mockup mehr, sondern eine lauffähige React-Anwendung mit echter Navigation zwischen beiden Seiten, die Claude Code selbst installiert, geprüft und durchgeklickt hat. Für mehrseitige UI-Aufgaben lässt sich der Befehl mehrfach hintereinander in derselben Session nutzen. Als Early Preview ist das Feature noch nicht in jedem Detail ausgereift, insbesondere beim Treffen des eigenen Design-Systems solltest du aktuell nachhelfen. Für neue Screens und Features lohnt sich ein Test schon jetzt.
Ralf Schukay ist Co-Gründe von ai-rockstars und spezialisiert auf AI Engineering und Data Analytics. Er arbeitet als Teamlead Analytics & Conversion in der Berliner Digitalagentur MAI Group. Er hat über 20 Jahre Erfahrung im Bereich Web, Analytics und AI.
Wir verwenden Technologien wie Cookies, um Geräteinformationen zu speichern und/oder darauf zuzugreifen. Wir tun dies, um das Surferlebnis zu verbessern und um personalisierte Werbung anzuzeigen. Wenn Sie diesen Technologien zustimmen, können wir Daten wie das Surfverhalten oder eindeutige IDs auf dieser Website verarbeiten. Wenn Sie Ihre Zustimmung nicht erteilen oder zurückziehen, können bestimmte Funktionen beeinträchtigt werden.
Funktional
Immer aktiv
Die technische Speicherung oder der Zugang ist unbedingt erforderlich für den rechtmäßigen Zweck, die Nutzung eines bestimmten Dienstes zu ermöglichen, der vom Teilnehmer oder Nutzer ausdrücklich gewünscht wird, oder für den alleinigen Zweck, die Übertragung einer Nachricht über ein elektronisches Kommunikationsnetz durchzuführen.
Vorlieben
Die technische Speicherung oder der Zugriff ist für den rechtmäßigen Zweck der Speicherung von Präferenzen erforderlich, die nicht vom Abonnenten oder Benutzer angefordert wurden.
Statistiken
Die technische Speicherung oder der Zugriff, der ausschließlich zu statistischen Zwecken erfolgt.Die technische Speicherung oder der Zugriff, der ausschließlich zu anonymen statistischen Zwecken verwendet wird. Ohne eine Vorladung, die freiwillige Zustimmung deines Internetdienstanbieters oder zusätzliche Aufzeichnungen von Dritten können die zu diesem Zweck gespeicherten oder abgerufenen Informationen allein in der Regel nicht dazu verwendet werden, dich zu identifizieren.
Marketing
Die technische Speicherung oder der Zugriff ist erforderlich, um Nutzerprofile zu erstellen, um Werbung zu versenden oder um den Nutzer auf einer Website oder über mehrere Websites hinweg zu ähnlichen Marketingzwecken zu verfolgen.
