Erst Entwürfe sehen,dann bauen.

/design legt die Entwürfe als Artifact ab, also als private Seite auf claude.ai. Fehlt dafür eine Voraussetzung, bekommst du nur eine lokale Datei ohne Link, oder Claude meldet, dass es nicht veröffentlichen kann.

1. Gib im Terminal den Befehl aus dem Kasten ein. Die Zahl muss 2.1.234 oder höher sein.
2. Starte claude in deinem Projektordner. Nutzt du einen API-Schlüssel, meld dich stattdessen mit /login an deinem claude.ai-Konto an.
3. Tipp einen Schrägstrich und design. Die Liste zeigt deine Befehle und Skills.

claude --version

• Kontrolle: /design taucht in der Liste auf. Das zeigt, dass der Skill da ist. Ob deine Sitzung die Seite hochladen darf, zeigt erst der Link in Schritt 3.
• Fehlt /design: So aktualisierst du.

Wer Geschmack nur mit Wörtern beschreibt, landet bei „mach es moderner“. Mehr sagen Claude Bilder von Seiten, die dir gefallen, und ein Designsystem, also deine festen Farben, Schriften und Abstände.

1. Mach zwei oder drei Screenshots von Seiten, deren Wirkung du willst. Private Daten schneidest du weg.
2. Öffne die Datei CLAUDE.md in deinem Projektordner oder leg sie an. Was diese Datei ist, erklärt Guide 008.
3. Kopier den Block aus dem Kasten hinein und ersetz die drei Stellen in eckigen Klammern, zum Beispiel mit #1a4d8f oder Inter.

## Design system

- Colors: [DEINE FARBEN ALS HEX-WERTE]
- Typography: [DEINE SCHRIFTEN]
- Spacing: [DEIN ABSTANDSRASTER UND ECKENRADIUS]

• Kontrolle: Screenshots liegen bereit, der Block steht mit deinen Werten in der CLAUDE.md. Laut Doku hat dein Designsystem bei Artifacts Vorrang vor dem, was Claude selbst wählen würde. Für /design steht das dort nicht ausdrücklich, deshalb nennt ihn der Brief noch einmal.

Der Brief sagt, was gezeichnet wird. Eine echte Auswahl entsteht erst, wenn er die Zahl der Entwürfe und ihren Unterschied nennt. So ist auch das Beispiel in der Doku gebaut.

Bevor du abschickst: Die Leinwand liegt auf Servern von Anthropic, privat, bis du sie teilst. Vertrauliches gehört nicht in Brief und Screenshots.

1. Füg den Brief in Claude Code ein. Er beginnt schon mit /design.
2. Ersetz die drei Stellen, etwa „eine Landingpage für mein Yoga-Studio“ und „die Reihenfolge der Abschnitte“.
3. Kopier einen Screenshot und füg ihn ans Ende ein: unter Windows mit Alt + V, sonst mit Ctrl + V, in iTerm2 mit Cmd + V. Es erscheint [Image #1]. Wiederhol das für jedes Bild. Ob /design die Bilder auswertet, sagt die Doku nicht, dein Brief bleibt deshalb die Hauptvorgabe.
4. Schick ab. Fragt Claude Code, ob es die Seite auf claude.ai hochladen darf, wähl Yes.

/design [WAS GEZEICHNET WIRD UND FÜR WEN]

Zeichne vier deutlich verschiedene Entwürfe auf eine Leinwand. Variiere dabei nur eines: [WORIN SICH DIE ENTWÜRFE UNTERSCHEIDEN SOLLEN].
Schreib unter jeden Entwurf einen Satz, was er besser kann und was er dafür aufgibt.

Nutze diese echten Inhalte: [DEINE TEXTE, ÜBERSCHRIFTEN UND ZAHLEN]
Erfinde nichts dazu. Fehlt etwas, lass die Stelle sichtbar leer.

Halte dich an das Designsystem in der CLAUDE.md, falls es eins gibt. Die angehängten Bilder zeigen die Wirkung, die ich mag. Übernimm ihre Stimmung, nicht ihre Inhalte.

Programmier noch nichts. Nach dem Vergleich sage ich dir, welcher Entwurf gebaut wird.

• Kontrolle: Claude gibt einen Link aus, und dein Browser öffnet die Leinwand mit den Entwürfen. Das zeigt, dass deine Sitzung veröffentlichen darf.
• Nur eine lokale Datei oder die Meldung, dass Claude nicht veröffentlichen kann: Deine Sitzung darf es nicht. Die Gründe.

Erst jetzt entsteht Code. Du sagst Claude, welcher Entwurf umgesetzt wird. Benenn ihn eindeutig, dann muss Claude nicht raten.

1. Kopier den Auftrag, ersetz die drei Stellen und schick ihn in derselben Sitzung ab.
2. Leg dein PNG neben das Ergebnis und geh Claudes Liste der Abweichungen durch.
3. Setz zum Schluss deinen längsten echten Text ein.

Setz von der Leinwand diesen Entwurf um: [DER ENTWURF, EINDEUTIG BENANNT]
Das soll daran noch anders werden: [DEINE ÄNDERUNGEN ODER „NICHTS“]
Bau es hier: [DATEI ODER ORDNER IM PROJEKT]

Sieh dir zuerst an, was dort schon vorhanden ist, und nutze vorhandene Bausteine, Farben und Abstände weiter.
Nenn mir zum Schluss den Pfad des Ergebnisses und jede Stelle, an der du vom Entwurf abgewichen bist, mit Grund.

• Kontrolle: Das Ergebnis sieht aus wie dein PNG, und jede Abweichung steht mit Grund in Claudes Liste.
• Das zeigt es nicht: ob die Seite alle echten Inhalte aushält. Das zeigt dein längster Text.