Zum Hauptinhalt springen

Der /design-Befehl: Artboards vor dem Code

Fortgeschritten

Anthropic hat einen Slash-Befehl in Claude Code eingebaut, der das Programmieren absichtlich überspringt. /design veröffentlicht aus einem Briefing in einfacher Sprache einen Canvas mit editierbaren UI-Artboards; Sie wählen eines aus, passen es an, und erst dann verwandelt Claude es in echten Code. Es ist das erste Claude-Code-Feature, bei dem das Ergebnis kein Code ist — die Designphase ist das Artefakt.

What you'll learn
  • Verstehen, was ein Artboard ist und warum es den Code-first-Ablauf verändert
  • /design beim ersten Versuch richtig ausführen (Version, Plan, Prompt-Form)
  • Die drei Phasen kennen: Entwurf → Auswahl+Bearbeitung → Implementierung
  • Die drei bekannten Fallen vermeiden: Token-Kosten, Stil-Abweichung von Ihrem Repo und die Free-Tier-Schranke
  • /design mit dem Concise-Ausgabestil kombinieren, der in derselben Woche ausgeliefert wurde

Was es tatsächlich ist​

/design ist ein Skill — kein einfacher Slash-Befehl. Wenn Sie ihn aufrufen, übergibt Claude Code an den Artboard-Workflow von Claude Design und gibt einen Link zu einem veröffentlichten Canvas aus. Ein Artboard ist ein funktionierender Bildschirm, auf dem Sie handeln können: Farbe ändern, einen Block verschieben, einen Abstand vergrößern. Es wird auf der Artifacts-Laufzeit gerendert, lebt also in Ihrem Claude-Konto, nicht als Dateien in Ihrem Repo.

Diese Unterscheidung zählt. Die Ausgabe von /design ist eine URL, kein Diff. Nichts landet in git status, bis Sie Claude anweisen zu implementieren.

What you'll learn
  • Verfügbarkeit: Pro, Max, Team, Enterprise. Nicht kostenlos. Erfordert Claude Code v2.1.233 oder neuer. Wird sowohl in der CLI als auch in Claude Code Desktop ausgeliefert.
  • Status: Research Preview — rechnen Sie damit, dass sich Aufrufform, Ausgabeformat und Anzahl der enthaltenen Artboards ändern.

Die drei Phasen​

Guided walkthrough1 of 3
  1. Führen Sie /design mit einem Briefing aus, das sagt, wofür der Bildschirm gedacht ist. Claude veröffentlicht mehrere Artboard-Varianten nebeneinander, jede editierbar. Sie erhalten einen Link; öffnen Sie ihn im Browser.

Die Prompt-Form, die funktioniert​

/design belohnt Briefings, die Zweck und Zielgruppe beschreiben, nicht Pixelvorgaben. Zwei Muster:

/design — Feature-Briefing

/design a few options for the sign-in screen. Users are engineers on mobile.
Optimize for one-hand thumb reach; SSO is the primary path, email/password
secondary. Show a state for a locked-out account.

/design — eine bestehende Oberfläche neu gestalten

/design redesign our composer based on what people actually use it for:
drafting long messages, attaching files, and switching model. The current
version buries the model picker; make it a first-class control.

Zwei Dinge, die in diesen Briefings still viel Arbeit leisten:

  • Das Benennen von Nutzer und Einschränkung („Ingenieure auf Mobilgeräten“, „Daumenreichweite mit einer Hand“) holt Claude vom statistischen Durchschnittslayout weg, auf das es standardmäßig zurückfällt.
  • Das Benennen eines Fehlerzustands („gesperrtes Konto“) zwingt das Artboard, Leer-/Fehler-/Randfälle abzudecken, nicht nur den Happy Path.

Die drei Fallen​

1. Es ist token-hungrig. Mehrere Artboards in voller Detailtreue pro Aufruf verbrauchen das Budget schneller als ein normaler Chat-Turn. Research-Preview-Nutzer berichten das durchgehend. Heben Sie sich /design für echte Entscheidungen auf, nicht für Wegwerf-Skizzen.

2. Es passt nicht zu Ihrer Codebasis. Claude Design generiert aus einer generischen Ästhetik, nicht aus Ihren bestehenden Komponenten. Wenn sich das Artboard wie der Rest Ihrer App anfühlen soll, legen Sie vorab eine DESIGN.md im Repo-Root an (Schriften, Abstandsskala, Farb-Tokens, bestehende Komponenten) und verweisen Sie im Briefing darauf — derselbe Trick, der die Implementierungsphase von /design davon abhält, Ihre Button-Primitive neu zu erfinden.

DESIGN.md vor /design referenzieren

Before you draft anything, read DESIGN.md and list the type scale, spacing
scale, and named color tokens you'll use. Then /design a settings screen
that respects those tokens.

3. Free-Tier-Schranke. /design ist hinter bezahlten Plänen (Pro und höher) gesperrt. Wenn Ihr Team für Claude-Code-Plätze zahlt, ein Auftragnehmer aber im Free-Tarif ist, fehlt /design für ihn stillschweigend.

Mit dem Concise-Ausgabestil kombinieren​

Anthropic hat in derselben Woche den eingebauten Concise-Ausgabestil ausgeliefert (v2.1.237). Er lässt Claude mit Ergebnissen beginnen und Vorreden weglassen — eine gute Ergänzung zu /design, denn der Übergabe-Turn („implementiere Option 2“) braucht keine Erzählung:

~/.claude/settings.json
{
  "outputStyle": "Concise"
}

Concise behält weiterhin alle Details bei Fehlerberichten, Sicherheitswarnungen und Bestätigungen destruktiver Aktionen — Sie verlieren Erzählung, nicht Sicherheitsschranken.

Wann /design gewinnt vs. direkt Code schreiben​

/design nutzen, wennÜberspringen, wenn
Die visuelle Entscheidung der schwierige Teil ist (neue Oberfläche, unklares Layout)Sie das Layout schon kennen; Sie brauchen nur den Code
Sie 3+ Richtungen günstig vergleichen wollen, bevor Sie sich festlegenSie an der Logik eines bestehenden Bildschirms iterieren, nicht an der Form
Der Stakeholder ein halbwegs klickbares Artefakt zum Freigeben brauchtDer Bildschirm 1:1 zu einem bestehenden Designsystem passen muss
Die Fehler-/Leer-/Ladezustände wichtig sindSie internes Wegwerf-Tooling prototypisieren

Nicht offensichtliche Mechaniken​

  • Die Canvas-URL ist teilbar. Weil Artboards auf Artifacts leben, funktioniert der Link für jeden mit Zugriff auf Ihre Claude-Konto-Ansicht — Sie können ihn an einen Designer oder PM schicken, ohne etwas zu exportieren.
  • Iteration läuft über zwei Kanäle. Sie können auf dem Canvas bearbeiten und im Claude-Code-Thread weiter prompten. Beides speist denselben Kontext.
  • Die Implementierung respektiert weiterhin Ihr Repo. Sobald Sie „implementieren“ sagen, kehrt Claude Code zu seinem normalen repo-bewussten Verhalten zurück — es nutzt Ihre Tailwind-Konfiguration, Ihre Komponenten, Ihre Dateistruktur. Das Artboard ist das Ziel; Ihre Codebasis ist das Gelände.
Drücke Enter oder die Leertaste, um die Karte umzudrehen. Nutze die Pfeiltasten links und rechts, um zwischen den Karten zu wechseln.Begriff angezeigt.
1 / 7

Prüfen Sie sich selbst

0/4
  1. Wo leben die Artboards aus /design?
  2. Sie sind auf Claude Code v2.1.230 und haben ein kostenloses Claude-Konto. Was passiert mit /design?
  3. Welche Briefing-Form gibt /design die besten Chancen auf ein brauchbares Artboard?
  4. Warum ist der Concise-Ausgabestil eine gute Ergänzung zu /design?

Quellen & weiterführende Lektüre​

Weiter​