Anthropic hat für Claude Code einen Design-Skill veröffentlicht, der die Funktionen von Claude Design direkt in dein Projekt bringt. Du entwirfst Interfaces für Websites, Web- und Mobile-Apps auf einem Canvas, lässt dir mehrere Varianten nebeneinander anzeigen und änderst Farben, Texte und Layouts per Klick in einem Editor. In diesem Artikel zeige ich dir, wie du mit /design arbeitest und wie du einen Entwurf danach in eine echte Website verwandelst.
Wenn du Claude Design als eigenständiges Tool kennenlernen willst, lies zuerst meine Claude Design Anleitung.
Was ist der /design-Skill?
Ein Skill ist ein Paket aus Anweisungen, das Claude Code eine bestimmte Fähigkeit gibt. Der /design-Skill erstellt einen Design-Canvas: eine Arbeitsfläche mit mehreren Artboards, wie du sie aus Figma oder Claude Design kennst. Jedes Artboard ist ein Entwurf, zum Beispiel eine Variante deiner Startseite.
Ich nutze das zum Beispiel für:
- Landing Pages: drei grundverschiedene Entwürfe nebeneinander.
- Unterseiten einer bestehenden App: Für einen Analyse-Report aus einem meiner SaaS-Produkte habe ich mir die aktuelle Standardansicht, eine kompaktere Alternative und eine Version zeigen lassen, die Datenpunkte auf zwei Achsen visualisiert.
Wichtig: Der Skill fasst deinen bestehenden Code zunächst nicht an. Das Design entsteht getrennt davon als reines HTML und CSS. Umgesetzt wird erst, wenn du es ausdrücklich sagst.
/design vs. Claude Design: Was ist der Unterschied?
Varianten konnte ich mir vorher auch schon in Claude Design erstellen, etwa für meine Bio-Page mit meinem hinterlegten Designsystem. Zwei Dinge haben mich dabei aber immer gestört.
1. Claude Design kennt dein Projekt nicht. Es läuft komplett losgelöst. Du gibst ein Designsystem und deinen Prompt mit, aber es hat keinen Zugriff auf deine Codebase und kann sich dort nichts abschauen. Claude Code dagegen kennt deinen Code, dein bestehendes Design, deine Marke und deine Inhalte. Das ist für mich der eigentliche Vorteil: nicht ein schlaueres Tool, sondern mehr Kontext.
2. Die Übergabe war umständlich. Aus Claude Design kam ein Design nur über den Share-Button heraus, als Download oder per „Send to Claude Code“. Gerade bei der Übergabe an Claude Code wurden bei mir oft Details nicht umgesetzt. Deshalb habe ich mir meist ein Standalone-HTML heruntergeladen und als Vorlage benutzt. Dieser Zwischenschritt entfällt jetzt.
| Claude Design | /design in Claude Code | |
|---|---|---|
| Kontext | Designsystem und Prompt | Dein ganzes Projekt |
| Übergabe an die Entwicklung | Export oder „Send to Claude Code“ | Direkt in derselben Session |
| Varianten vergleichen | Ja | Ja, als Artboards auf einem Canvas |
| Pitchdecks, Animationen | Ja | Fokus auf Websites und App-Screens |
Voraussetzungen
Als ich den Skill im August getestet habe, funktionierte er nur in der Claude Desktop App, nicht im Terminal und nicht in der IDE-Erweiterung. Laut aktueller Claude-Code-Dokumentation steht /design inzwischen auch in der CLI zur Verfügung. Voraussetzungen laut Doku:
- ein Pro-, Max-, Team- oder Enterprise-Plan,
- eine aktuelle Version von Claude Code,
- eine Umgebung, in der Artifacts verfügbar sind (über Amazon Bedrock oder Google Cloud zum Beispiel nicht).
Der Canvas wird als Artifact veröffentlicht, also als Seite, die du im Browser oder in der Desktop App öffnest.
Schritt 1: /design aufrufen und Varianten erstellen
In der Desktop App startest du eine neue Session und wählst das Projekt aus, an dem du arbeiten willst. Ich habe meine persönliche Website genommen. Dann tippst du /design, gefolgt von deinem Auftrag:
/design Bitte erstelle mir vier unterschiedliche Varianten meiner Startseite. Denke das Design dabei bewusst neu und orientiere dich nicht zwingend an meinem bestehenden Designsystem.
Den Zusatz „orientiere dich nicht zwingend am Designsystem“ habe ich bewusst gewählt, weil ich wirklich neue Richtungen sehen wollte und nicht nur Abwandlungen meiner bestehenden Seite.
Bei mir kamen vier sehr unterschiedliche Entwürfe heraus:
- ein redaktionelles Design,
- ein Entwurf im Terminal-Look,
- ein auffälliger Plakatstil,
- ein Bento-Design, also ein Raster aus unterschiedlich großen Kacheln, das sich am ehesten am Bestand orientierte.
Jedes Artboard kannst du direkt herunterladen. In meinem Test ging das als PNG oder HTML, die Dokumentation nennt aktuell PNG und PDF.
Schritt 2: Entwürfe im Editor bearbeiten
Klickst du in ein Artboard, öffnet sich ein Properties-Fenster mit allen Eigenschaften des gewählten Elements. Dort änderst du:
- Hintergrundfarben und Farben einzelner Elemente,
- Texte,
- Layout-Eigenschaften.
Das ist deutlich einfacher, als hin und her zu prompten und zu hoffen, dass Claude die richtige Stelle erwischt.
Ein Hinweis aus meinem Test: Damals gab es kein automatisches Speichern. Änderungen wurden erst übernommen, nachdem ich auf Save geklickt hatte. Die aktuelle Dokumentation sagt, dass Änderungen automatisch gespeichert werden. Prüf am besten in deiner Version, ob ein Save-Button angezeigt wird, bevor du viel Arbeit in Anpassungen steckst.
Kommentare und weitere Seiten
Wie in Claude Design kannst du Kommentare an einzelne Elemente hängen. So sagst du Claude Code genau, welche Stelle es ändern soll.
Außerdem legst du weitere Seiten im Canvas an. Ich hatte am Ende eine Seite mit den vier ersten Entwürfen und eine zweite mit Varianten eines Favoriten. Weitere Seiten kannst du für andere Unterseiten oder einzelne Komponenten nutzen.
Schritt 3: Varianten eines Favoriten erstellen
Gefällt dir ein Entwurf am besten, lässt du ihn weiter variieren:
Mir gefällt Variante C am besten. Bitte erstelle mir noch drei Varianten davon.
Die Farbgebung der neuen Varianten passte überhaupt nicht. Also eine Korrektur hinterher:
Bitte ersetze das Grün durch Weiß und nimm statt Blau unsere Brand Color als Akzent.
Danach standen drei Entwürfe in meinen Markenfarben. Ganz überzeugt hat mich noch keiner, aber für den weiteren Ablauf reicht das als Beispiel.
Schritt 4: Den Entwurf als echte Website umsetzen
Jetzt kommt der Teil, der in Claude Design gefehlt hat. Du sagst Claude in derselben Session, welchen Entwurf es umsetzen soll:
Ich würde gerne C2 live nehmen. Richte mir das bitte lokal ein und starte einen Development Server, damit ich mir das Ergebnis anschauen kann.
Claude hat den Entwurf in das echte Projekt übertragen und zur neuen Startseite gemacht. Ein Development Server ist eine lokale Vorschau auf deinem Rechner. Dort war die Seite interaktiv, alles ließ sich anklicken. Zusätzlich hat Claude von sich aus geprüft, ob andere Ansichten funktionieren, etwa die Mobilansicht.
Einordnung: Kontext schlägt Tool
Der /design-Skill macht Claude Code zu einem vollwertigen Design-Werkzeug innerhalb deines Projekts. Am besten funktioniert er für Webseiten, Landing Pages und Screens von Web- und Mobile-Apps. Für Pitchdecks oder Animationen ist aus meiner Sicht weiterhin Claude Design das passendere Tool. Wie du dort Webseiten mit eigenem Look baust, zeige ich in Webseiten mit Claude Design erstellen.
Der eigentliche Gewinn ist der Kontext. Claude kennt beim Designen dein Projekt, und der Weg vom Entwurf zur laufenden Seite ist ein einziger Prompt. Für eine Website reicht das. Sobald du aber eine richtige Anwendung baust, mit Login, Datenbank und zahlenden Nutzer:innen, brauchst du nach dem Design einen strukturierten Entwicklungsprozess, damit aus dem schönen Entwurf auch sichere, verkaufbare Software wird.
