Inhaltsverzeichnis
Claude Design ist ein Design-Werkzeug aus den Anthropic Labs, mit dem du UI-Designs, Prototypen, Folien und One-Pager 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) und verkürzte damit das Hin und Her zwischen Designern und Entwicklern deutlich.
Dieser Artikel behandelt, was Claude Design ist, das Juni-Update, die beiden Richtungen von /design-sync, 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) Es ist eine Beta für Pro / Max / Team / Enterprise (bei Enterprise standardmäßig aus); der Canvas läuft auf web/desktop, während /design-sync in Claude Code (dem CLI) zu Hause ist.
Design und Code, in beide Richtungen
— wechsle zwischen dem Canvas und dem Repo
/design-sync ↔
Code→ hol das Designsystem ins Repo und baue mit echten Komponenten,
→Design schiebe deinen Code zurück auf den Canvas und arbeite weiter.
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 Designs, Prototypen, Folien und One-Pager (das Help Center nennt außerdem interaktive Prototypen und Präsentationen). 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:
Was das Juni-Update brachte
/design-sync holt das Designsystem in den Code und schiebt Code zurück auf den Canvas (§3).Kurz gesagt entwickelt es sich in Richtung „auf deiner Marke aufbauen, mit Code hin und her wechseln und in die Enterprise-Governance passen".
3. /design-sync — Code und Design, in beide Richtungen
/design-sync ist ein Befehl auf der Claude-Code-Seite, der dein Repo und den Claude-Design-Canvas in beide Richtungen verbindet. Die offizielle Beschreibung (@ClaudeDevs): „Claude Code und Claude Design synchronisieren jetzt in beide Richtungen. Führe /design-sync aus, um dein Designsystem in dein Repo zu holen und gegen deine echten Komponenten zu bauen, oder schiebe das, was du gebaut hast, zurück in Claude Design und bearbeite es weiter auf dem Canvas."
| Richtung | Was passiert |
|---|---|
| Code → (ins Repo holen) | Hol das Designsystem ins Repo, sodass Claude Code gegen deine echten Komponenten baut |
| → Design (auf den Canvas schieben) | Schiebe das, was du im Code gebaut hast, zurück in Claude Design und bearbeite es weiter auf dem Canvas |
| Design → Code (Übergabe) | Übergib ein fertiges Design an Claude Code, das von deiner bestehenden Arbeit aus weitermacht, statt aus einem Screenshot neu zu bauen |
Du kannst außerdem Designprojekte mit /design erstellen, bearbeiten und synchronisieren, ohne das Terminal zu verlassen. Beachte, dass feinere Details — etwa dass Farben nach dem Import zu Designtoken-Namen werden und Schriftgrößen der Skala folgen — teils aus Berichten früher Nutzer und der Presse stammen und nicht aus dem exakten Wortlaut von Anthropic; dieser Artikel behandelt sie daher als „berichtetes Verhalten" (den aktuellen Stand bitte offiziell prüfen). Es passt gut zu spezifikationsgetriebener Entwicklung; siehe spezifikationsgetriebene Entwicklung.
4. Verfügbarkeit
Die Verfügbarkeit im Juni 2026 (der Umfang kann sich als Beta ändern):
| Punkt | Details |
|---|---|
| Pläne | Beta für Pro / Max / Team / Enterprise (kein Aufpreis). Bei Enterprise standardmäßig aus; ein Admin aktiviert es |
| Zugang | claude.ai/design oder die Seitenleiste in der Desktop-App |
| Wo es läuft | Der Canvas läuft nur auf web / desktop. /design-sync und /design leben in Claude Code (dem CLI) |
| Status | Beta (Research Preview am 17. April → großes Update am 17. Juni) |
Leicht zu verwechseln: der „Canvas (web/desktop)" und „/design-sync / /design (das Claude-Code-CLI)" leben an verschiedenen Orten. Du arbeitest am Design unter claude.ai/design und synchronisierst per Terminal-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).
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, Folien und mehr im Gespräch zu erstellen. Die Juni-Highlights sind (1) Import von Designsystemen (mit echten Komponenten bauen), (2) bidirektionale Sync mit Claude Code via /design-sync, (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 „hol das Designsystem in den Code" und „schiebe deinen Code zurück auf den Canvas" in beide Richtungen verbindet. Es ist eine Beta für Pro / Max / Team / Enterprise (bei Enterprise standardmäßig aus); der Canvas läuft auf web/desktop, während /design-sync im CLI lebt. Das Wesentliche ist, das Hin und Her zwischen Designer und Entwickler zu verkürzen. Beachte, dass sich als Beta 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, Folien 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. Zugang über claude.ai/design oder die Seitenleiste der Desktop-App.
Q. Was macht der Befehl /design-sync?
A. Er synchronisiert Claude Code und dein Design in beide Richtungen. Führe ihn aus, um das Designsystem in dein Repo zu holen und mit „echten Komponenten" zu bauen, oder um den von dir gebauten Code zurück in den Claude-Design-Canvas zu schieben und weiterzubearbeiten. Übergib ein fertiges Design an Claude Code, und es macht von deiner bestehenden Arbeit aus weiter, statt aus einem Screenshot neu zu bauen. Mit /design kannst du Designs auch vom Terminal aus erstellen, bearbeiten und synchronisieren.
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) bidirektionale Sync mit Claude Code via /design-sync, (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. Stand Juni 2026 ist es eine Beta für Pro / Max / Team / Enterprise ohne Aufpreis. Aber es ist bei Enterprise standardmäßig aus, also muss ein Admin es aktivieren. Der Canvas läuft nur auf web und desktop, während /design-sync und /design in Claude Code (dem CLI) leben. Als Beta können sich Umfang und Details ändern, also prüfe den aktuellen Stand offiziell.
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.
