Was ist Claude Design und /design-sync?

Aktualisiert am 12. Oktober 2026: Mit der offiziellen Ankündigung vom 8. Oktober 2026 hat Claude Design die Beta verlassen und steht jetzt in allen Tarifen zur Verfügung, auch im kostenlosen. Der eigenständige Bereich claude.ai/design wird am 14. Dezember 2026 geschlossen. Die Verfügbarkeit in Abschnitt 4 und die FAQ haben wir entsprechend angepasst.

Aktualisiert am 26. September 2026: Wir haben Abschnitt 3 nach der offiziellen Claude-Code-Dokumentation und der offiziellen Hilfe neu geschrieben. /design-sync ist der Befehl, der das Designsystem deines Repos in Claude Design bringt; den Weg vom Design zum Code übernehmen die Übergabe an Claude Code und /design. Außerdem haben wir die Liste der im Juni hinzugekommenen Exportziele nach der offiziellen Ankündigung korrigiert und ergänzt, was der seit August mitgelieferte Claude-Code-Skill /design macht.

Claude Design ist ein Design-Werkzeug aus den Anthropic Labs, mit dem du UI-Designs, Prototypen, One-Pager und andere visuelle Arbeiten im Gespräch erstellen kannst (am 17. April 2026 als Research Preview veröffentlicht). Am 17. Juni 2026 brachte dann ein großes Generalupdate den Import von Designsystemen und eine bidirektionale Synchronisation mit Claude Code (/design-sync, /design) und verkürzte damit das Hin und Her zwischen Designern und Entwicklern deutlich. Am 16. September 2026 schließlich, mit der Zusammenführung von Claude Cowork und Chat, begann Claude Design, in jedem Gespräch zu funktionieren (der eigenständige Bereich claude.ai/design wird am 14. Dezember 2026 geschlossen).

Dieser Artikel behandelt, was Claude Design ist, das Juni-Update, die Arbeitsteilung von /design-sync und /design, die Verfügbarkeit und warum es wichtig ist — auf Basis offizieller Informationen. Drei Kernpunkte vorab. (1) Claude Design ist ein gesprächsbasiertes Design-Werkzeug, das du per Chat, Kommentaren, direkten Bearbeitungen und Schiebereglern verfeinerst. (2) Die Juni-Highlights sind „importiere dein Designsystem und baue mit seinen echten Komponenten“ und „synchronisiere in beide Richtungen mit Claude Code“. (3) Am 8. Oktober 2026 hat es die Beta verlassen und steht in allen Tarifen zur Verfügung, auch im kostenlosen (bei Enterprise ab 15. Oktober standardmäßig an). Seit dem 16. September genügt es, in einem normalen Gespräch um ein Design zu bitten, während /design-sync in Claude Code zu Hause ist.

1. Was Claude Design ist

Claude Design ist ein Werkzeug, bei dem „du im Gespräch beschreibst, was du willst, Claude das Design baut und du es per Chat, Inline-Kommentaren, direkten Bearbeitungen und Schiebereglern verfeinerst“. Es erstellt visuelle Arbeiten wie Designs, interaktive Prototypen und One-Pager (offizielle Hilfe „Get started with Claude Design“). Die Launch-Ankündigung nannte auch Folien, doch seit dem 16. September 2026 haben Präsentationen ein eigenes Werkzeug, Claude Slides. Es wurde am 17. April 2026 als Research Preview für Pro / Max / Team / Enterprise veröffentlicht, und über eine Million Menschen nutzten es in der ersten Woche.

Zum Modell: beim April-Start lief es auf Claude Opus 4.7 (das Anthropic „unser leistungsfähigstes Vision-Modell“ nannte). Allerdings nennt die Ankündigung des Juni-Updates das Modell nicht erneut, daher behauptet dieser Artikel nicht, dass „die Juni-Version auf Opus 4.7 läuft“ (den aktuellen Stand bitte offiziell prüfen). Für einen breiteren Überblick siehe KI-Design-Tools im Vergleich.

2. Das Generalupdate vom Juni 2026

Das Generalupdate vom 17. Juni 2026 verschob Claude Design von „einem Spielzeug fürs Prototyping“ hin zu „einer Arbeitsumgebung, die markenkonforme Alltagsarbeit erledigt“. Die wichtigsten Änderungen:

3. /design-sync und /design – zwischen Design und Code wechseln

Claude Code hat zwei Befehle, die mit Claude Design verbinden. Laut der offiziellen Befehlsreferenz von Claude Code ist /design-sync ein Skill, der „das React-Designsystem deines Repos umwandelt und in Claude Design hochlädt, sodass die erzeugten Designs deine echten Komponenten verwenden“ (du kannst ihm auch einen Namen geben, etwa /design-sync Acme DS). Der erste Sync prüft jede Komponente und kann bei einem großen Repo einige Stunden dauern. Die Autorisierung mit deinem claude.ai-Konto erfolgt über /design-login.

Diese Aufteilung stammt aus der offiziellen Ankündigung vom Juni und der offiziellen Hilfe. /design-sync passt, wenn dein Designsystem schon als React-Komponenten im Code liegt; ein Marken-Designsystem, das vor allem aus Schriften, Farben und Richtlinien besteht, erstellst du besser im Chat aus Dateien, Figma-Dateien, Präsentationen und Logos (offizielle Hilfe: „Set up your design system in Claude Design“).

/design wurde schon in der Juni-Ankündigung erwähnt und ist seit August 2026 ein mitgelieferter Skill von Claude Code: Gib ihm ein Briefing, und er zeichnet UI-Mockups, Screen-Flows, Landingpages oder Poster als mehrere Artboards auf einem Canvas, veröffentlicht als Design-Artifact (offizielle Doku: „Artifacts“). Die Artboards bearbeitest du, indem du Elemente in einem Desktop-Browser auswählst, und jedes lässt sich als PNG oder PDF exportieren. Beide Befehle funktionieren über die Anthropic API, aber nicht über Clouds wie Amazon Bedrock, Google Cloud oder Microsoft Foundry (sie brauchen Funktionen von claude.ai). Das passt gut zur spezifikationsgetriebenen Entwicklung; siehe spezifikationsgetriebene Entwicklung.

4. Verfügbarkeit

So sieht die Verfügbarkeit am 12. Oktober 2026 aus, abgeglichen mit der offiziellen Hilfe und der offiziellen Ankündigung vom 8. Oktober. Seit Juni hat sich zweierlei geändert: Die Zusammenführung vom 16. September hat den Einstieg von einem eigenen Bereich auf deine normalen Gespräche ausgeweitet, und am 8. Oktober hat das Werkzeug die Beta verlassen und den kostenlosen Tarif erreicht.

Leicht zu verwechseln: der „Canvas (web/desktop)“ und „/design-sync / /design (Claude Code)“ leben an verschiedenen Orten. Du arbeitest am Design im Canvas, der sich neben dem Gespräch öffnet (oder bis zum 14. Dezember 2026 unter claude.ai/design), und synchronisierst per Claude-Code-Befehl mit dem Code — und genau diese Aufteilung ist die Brücke zwischen Designern und Entwicklern.

5. Warum es wichtig ist

Bisher bedeutete der Weg vom Design zum Code oft „aus einem Screenshot neu bauen“. Claude Design + /design-sync schließt diese Lücke, indem es (1) dein Designsystem importiert, um mit „echten Komponenten“ zu bauen, und (2) Design und Code in beide Richtungen hin und her wechseln lässt. Entwickler bauen nicht von Grund auf neu, und Designer können das Code-Ergebnis auf dem Canvas verfeinern.

Mit anderen Worten ist Claude Design ein Produkt, das den „Designer × Entwickler“-Workflow in einer einzigen Linie verbindet. Wenn du einen Build schnell teilen willst, mach mit Claude Code Artifacts eine geteilte Seite daraus; für markenkonforme UI nutzt du Claude Design — die Kombination der neuen Claude-Code-nahen Funktionen zahlt sich aus. Presseberichten zufolge ist der Vorstoß der KI ins Design wirkungsvoll genug, dass die Aktien etablierter Design-Tool-Anbieter reagierten (wir behaupten keine exakten Zahlen, die schwanken).

Als Werkzeuge derselben Erstellungsfamilie wie Claude Design sind auch Claude Dashboards, das Datendashboards erstellt, und Claude Motion, das Erklärungsanimationen erstellt, in der Beta hinzugekommen. Die Unterschiede und die Wahl zwischen beiden erklärt Was Claude Dashboards und Motion sind.

Zusammenfassung

Claude Design (Research Preview im April 2026, großes Update am 17. Juni) ist ein Design-Werkzeug aus den Anthropic Labs, um UI, Prototypen, One-Pager und mehr im Gespräch zu erstellen, und funktioniert seit dem 16. September 2026 in jedem Gespräch. Die Juni-Highlights sind (1) Import von Designsystemen (mit echten Komponenten bauen), (2) Wechsel zwischen Design und Claude Code (/design-sync, Übergabe, /design), (3) direkte Bearbeitung im Canvas, (4) geteilte Nutzungslimits (die „Token-Verbrennen“-Lösung), (5) Enterprise-Markensteuerung und (6) erweiterte Export-Konnektoren.

/design-sync ist ein Claude-Code-Befehl, der das React-Designsystem deines Repos in Claude Design bringt. Fertige Designs gehen per Übergabe an Claude Code oder mit /design in die Umsetzung, und /design kann Code auch als Live-Prototyp auf den Canvas bringen. Es steht in allen Tarifen zur Verfügung, auch im kostenlosen (seit dem 8. Oktober 2026 ohne Beta), der eigenständige Bereich claude.ai/design wird am 14. Dezember 2026 geschlossen, und /design-sync lebt in Claude Code. Das Wesentliche ist, das Hin und Her zwischen Designer und Entwickler zu verkürzen. Beachte, dass sich Dinge ändern können — z. B. wird das Modell der Juni-Version offiziell nicht erneut genannt — also prüfe den aktuellen Stand in der Dokumentation. Verwandt: KI-Design-Tools im Vergleich, Claude Code Artifacts, spezifikationsgetriebene Entwicklung.

FAQ

Q. Was ist Claude Design?
A. Ein Design-Werkzeug aus den Anthropic Labs zum Erstellen von Designs im Gespräch. Beschreibe in Worten, was du willst, und Claude generiert UI, Prototypen und One-Pager, die du per Chat, Inline-Kommentaren, direkten Bearbeitungen und Schiebereglern verfeinerst. Es wurde am 17. April 2026 als Research Preview veröffentlicht, mit über einer Million Nutzern in der ersten Woche. Seit dem 16. September 2026 genügt es, in einem normalen Gespräch um ein Design zu bitten (auch über die Design-Vorlage im Artifacts-Tab, Claude Code oder bis zum 14. Dezember 2026 den eigenständigen Bereich claude.ai/design).

Q. Was macht der Befehl /design-sync?
A. Er bringt das Designsystem deines Repos in Claude Design. Wenn dein Designsystem schon als React-Komponenten im Code liegt, liest er Tokens und Komponenten und lädt sie hoch, sodass die Designs von Claude Design deine echten Komponenten verwenden. Der erste Sync prüft jede Komponente und kann bei einem großen Repo einige Stunden dauern. Die andere Richtung (Design zu Code, Code zum Canvas) übernehmen die Übergabe an Claude Code und /design: Übergib ein fertiges Design an Claude Code, und es macht von deiner bestehenden Arbeit aus weiter, statt aus einem Screenshot neu zu bauen.

Q. Was hat sich beim Update im Juni 2026 geändert?
A. Hauptsächlich (1) Import von Designsystemen (mit deinen Komponenten bauen, wobei die Ausgabe geprüft und korrigiert wird), (2) Wechsel zwischen Design und Claude Code (/design-sync, Übergabe, /design), (3) direkte Bearbeitung im Canvas (ziehen/skalieren/ausrichten), (4) eine „Token-Verbrennen“-Lösung durch geteilte Nutzungslimits mit Chat/Cowork/Claude Code, (5) Enterprise-Markensteuerung, bei der ein Admin einen Standard freigibt und sperrt, und (6) erweiterte Export-Konnektoren. Es bewegte sich vom Prototyping hin zu einer „markenkonformen Arbeitsumgebung für echte Arbeit“.

Q. Mit welchem Plan kann man es nutzen?
A. Am 8. Oktober 2026 hat es die Beta verlassen und steht in allen Tarifen zur Verfügung, auch im kostenlosen (Free / Pro / Max / Team / Enterprise), so die offizielle Hilfe mit Stand 12. Oktober 2026. Die Nutzung zählt auf dieselben Limits wie Chat und Claude Code. Es ist standardmäßig an, und bei Enterprise wird es am 15. Oktober 2026 standardmäßig eingeschaltet (ein Owner kann es früher aktivieren). In den Mobil-Apps kann man Designs anfordern, ansehen und bearbeiten, während /design-sync und /design in Claude Code leben. Der eigenständige Bereich claude.ai/design wird am 14. Dezember 2026 geschlossen, also migriere die Designsysteme dort rechtzeitig.

Q. Welches Modell treibt es an?
A. Beim April-Start lief es auf Claude Opus 4.7 (das Anthropic „unser leistungsfähigstes Vision-Modell“ nannte). Allerdings nennt die Ankündigung des Juni-Updates das Modell nicht, daher können wir nicht behaupten, dass „die Juni-Version auf Opus 4.7 läuft“. Modelle und Details können aktualisiert werden, also prüfe die offizielle Seite für aktuelle Informationen.