Was ist Claude Design? Anthropics KI-Designtool erklärt

Wie funktioniert Claude Design?

Zwei Bereiche: links der Chat, rechts die Live-Canvas. Du schreibst einen Prompt, Claude generiert das Design auf der Arbeitsfläche, und du verfeinerst es weiter. Anthropic beschreibt die Schleife in fünf Schritten: 

1. Projekt mit relevantem Kontext anlegen
2. Beschreiben, was du brauchst
3. Ergebnis prüfen
4. Per Chat und Kommentaren iterieren
5. Exportieren oder teilen

Auffällig ist das Verhalten mit klärenden Rückfragen. Wenn ein Prompt vage ist, hält Claude möglicherweise inne und fragt nach, was noch fehlt, statt einfach das Erstbeste zu zeichnen.

Chat links, generierte Canvas rechts. Bild: Autor.

Schauen wir uns nun an, wie sich jeder Teil dieser Schleife in der Praxis anfühlt.

Projekt einrichten und Kontext hinzufügen

Neue Projekte erben das veröffentlichte Organisations-Designsystem, sodass Marken-Assets nach dem Setup nicht erneut hochgeladen werden müssen. 

Die Einrichtungsanleitung empfiehlt, Claude von Anfang an mit echtem Kontext zu füttern: Screenshots, Mockups, Foliensätze mit einem Stil, der dir gefällt, und ein Code-Repository, falls vorhanden. Benötigt Claude mehr Informationen, kann es vor dem Zeichnen klärende Fragen stellen – so förderst du Details zutage, die du sonst vergessen hättest.

Gute Prompts decken vier Dinge ab: Ziel, Layout, Inhalt und Zielgruppe. Beispielprompts sind etwa: "Erstelle ein Dashboard, das den monatlichen Umsatz zeigt, mit Filtern für Region und Produktlinie" sowie "Designe einen Onboarding-Flow für eine Mobile App mit 4 Screens."

Auf der Canvas iterieren

Nach dem ersten Entwurf gibt es mehrere Wege, das Design voranzubringen. 

• Chat steuert große Änderungen (dunkleres Theme, zwei oder drei Layout-Alternativen)
• Inline-Kommentare zielen auf ein bestimmtes Element, ohne dessen Position zu erklären
• Direkte Textbearbeitung korrigiert Copy ohne Prompt
• Eigene Regler für Abstands-, Farb- und Layoutanpassungen wirken live

Ein Day-one-Quirk: Kommentare verschwinden gelegentlich, bevor Claude sie liest. Das Einfügen des Textes in den Chat ist der dokumentierte Workaround. Nervig, aber gut zu wissen, bevor du Reviews auf Kommentaren aufbaust.

Versionen, Teilen und Export

Um den aktuellen Entwurf zu behalten und etwas anderes auszuprobieren, empfiehlt Anthropic Anweisungen wie "Speichere, was wir haben, und probiere einen ganz anderen Ansatz." 

Teilen erfolgt organisationsweit, mit privat, Nur-Ansicht, Kommentar- und Bearbeitungszugriff; Bearbeitungszugriff erlaubt es Teammitgliedern, das Design zu ändern und im selben Verlauf mit Claude zu chatten. 

Das Export-Menü sitzt oben rechts und umfasst gängige Dateiformate, ein Canva-Handoff und ein gebündeltes Handoff an Claude Code.

Was kannst du mit Claude Design bauen?

Die Launch-Ankündigung nennt sechs Output-Typen aus der Nutzung mit Vorab-Kunden. Hier ist jeder mit einer kurzen Erläuterung:

• Realistische Prototypen: statische Mockups in interaktive Prototypen verwandeln, die du ohne Code-Review oder Pull Requests teilen und in Tests einsetzen kannst.
• Produkt-Wireframes und Mockups: Feature-Flows, die du entweder an Claude Code übergibst oder für den Feinschliff an eine Designerin bzw. einen Designer.
• Design-Explorationen: mehrere Richtungen schnell ausprobieren, für Designer, die Exploration sonst knapp bemessen müssen.
• Pitch-Decks und Präsentationen: vom groben Gerüst zum markenkonformen Deck, mit PPTX-Export oder Senden-an-Canva-Option.
• Marketingmaterial: Landingpages, Social Assets und Kampagnenvisuals.
• Frontier Design: codegestützte Prototypen mit Voice, Video, Shaders, 3D oder eingebauter KI. Das ist der experimentellste der sechs Punkte; auf offene Fragen dazu komme ich im Abschnitt zu den Grenzen zurück.

Generierter Mobile-Onboarding-Prototyp auf der Canvas. Bild: Autor.

Der Admin-Guide führt Microsites und Landingpages als eigene Kategorie auf. Anthropics Launch-Testimonials betonen Tempo und den Sprung von der Idee zum Prototypen innerhalb eines einzigen Meetings; nimm das als anschaulich statt als allgemeingültig, denn dieselben Docs verweisen auf Ecken und Kanten bei experimentelleren Outputs.

Wie Claude Design Marken- und Designsysteme nutzt

Dieser Teil ist wichtig, weil er den Standard-Output verändert. Anthropic warnt: Ohne Designsystem erhalten Teams "funktionale, aber generische" Ergebnisse. Mit veröffentlichtem System übernehmen neue Projekte eure Farben, Typografie und Komponenten. Haken: Das extrahierte System ist nur so gut wie die hochgeladenen Quell-Assets – unaufgeräumte Inputs führen zu einem unaufgeräumten Startsystem.

So wird das System aufgebaut.

Wie das System erstellt wird

Das Setup erfolgt einmal pro Organisation. Der Artikel zum Designsystem führt vier Schritte durch: Organisation anlegen, Marken- und Produkt-Assets hochladen, das von Claude erzeugte System prüfen und für das Team veröffentlichen. Quellen können ein Code-Repository, bestehende Design-Dateien, Foliensätze im Corporate Design oder einzelne Assets wie Logos und Palettendateien sein. Eine Quelle reicht für den Start.

Laut Anthropic umfasst das generierte System typischerweise eine Farbpalette, eine Typografie-Skala, Komponenten (Buttons, Karten, Navigation) und Layoutmuster. Teste es mit Prompts wie "Erstelle eine Landingpage für [dein Produkt]", um zu sehen, wie die Marke in der Praxis wirkt.

Designsystem-Review mit extrahierten Tokens. Video: Autor.

Veröffentlichen, mehrere Systeme und Updates

Wenn du zufrieden bist, aktiviere den "Published"-Schalter, damit neue Projekte in der Organisation es standardmäßig übernehmen. Teams können mehrere Systeme für Subbrands oder getrennte Produktlinien halten. Für Updates verweist der Artikel zum Designsystem auf den "Remix"-Button, der einen Chat öffnet, in dem Claude Teile ändern kann.

Die Admin-Doku ist klar zur Reihenfolge: Claude Design ohne veröffentlichtes System führt zu "funktional, aber generisch" – darum steht beim empfohlenen Rollout das Designsystem zuerst.

Welche Eingaben akzeptiert Claude Design?

Du bist nicht auf eine Ein-Zeilen-Aufforderung beschränkt. Claude Design akzeptiert mehrere Eingabetypen, die sich gut kombinieren lassen – je echter der Kontext, desto besser der erste Entwurf.

Heute dokumentierte Inputs sind:

• Freitext-Prompts im Chat-Bereich.
• Screenshots, Bilder oder bestehende Assets, inklusive Foliensätze und Dokumente mit einem Stil, den du übernehmen willst.
• Dokumente in den Formaten DOCX, PPTX und XLSX, wie im Launch-Post genannt.
• Codebasen, entweder per Link zu einem Code-Repository oder durch Anhängen eines lokalen Ordners über den Import-Flow.
• Web-Captures: Du kannst Elemente von einer bestehenden Website aufnehmen, damit Claude reale Interface-Muster näher abbildet.

Zwei Punkte werden oft falsch wiedergegeben: Anthropic erwähnt "bestehende Design-Dateien", listet aber keine nativen Formate von Design-Tools, und es gibt aktuell keinen Anspruch auf nativen Figma-Import oder -Export; das Exportmenü enthält keine .fig Datei. Wenn dein Workflow vom Hin-und-Her mit Figma abhängt, prüfe das am Live-Produkt, bevor du dich festlegst.

Wenn der erste Entwurf danebenliegt, komm zu der Vier-Punkte-Checkliste von vorhin zurück: Ziel, Layout, Inhalt und Zielgruppe.

Claude Design vs. Claude Code

Beide teilen sich den Namen Claude, das zugrunde liegende Modell und eine Handoff-Brücke, sind aber nicht dasselbe Tool. Die Verwechslung der beiden ist seit dem Launch einer der häufigeren Irrtümer. Die Namen klingen ähnlich; die Produkte erledigen unterschiedliche Aufgaben.

Schauen wir uns den Unterschied an.

Wofür ist welches Tool gedacht?

Claude Design ist ein Webprodukt für die Erstellung und Verfeinerung visueller Outputs auf einer Arbeitsfläche: Prototypen, Decks, Microsites und Marketingseiten. Es kann ein Code-Repository lesen, um deine Marke zu verstehen, bearbeitet aber nicht deine Codebasis und führt keine Befehle aus.

Claude Code ist ein agentisches Coding-Tool. Die offizielle Übersicht beschreibt es als Tool, das deine Codebasis liest, Dateien bearbeitet und Befehle in deinem bestehenden Dev-Workflow ausführt. Es läuft im Terminal, in der IDE, als Desktop-App oder im Browser – und seine Aufgabe ist Code. Unterschiedliche Aufgaben, gleicher Prozess.

Wie verbinden sich Claude Design und Claude Code?

Wenn ein Projekt baureif ist, bietet das Exportmenü ein Handoff an Claude Code – entweder an einen lokalen Coding-Agenten oder an Claude Code Web. Laut Anthropic packt Claude die Designintention in ein Bundle, das der empfangende Agent mit einer einzigen Anweisung aufgreift. Der genaue Klickpfad erscheint im Walkthrough unten.

Das richtige mentale Modell ist eine Abfolge: Idee, Prototyp, Code. Die beiden Produkte haben zudem separate Nutzungslimits, die ich später unter Zugriff abdecke.

Für wen ist Claude Design gedacht?

Anthropic teilt die Zielgruppe in zwei: erfahrene Designerinnen und Designer, die Explorationszeit meist knapp bemessen müssen, und "alle anderen", die ohne Designhintergrund visuelle Ergebnisse liefern müssen. In den Rollout-Hinweisen werden auch UX-Researcher, Produktmanager, Marketer und angrenzende Funktionen genannt.

Aus den Quellen und Kundenstimmen wirkt das Produkt gemacht für: Designer, die früh Richtungen testen; Produktmanager, die Feature-Flows skizzieren; sowie Founder oder Account Executives, die ein Deck brauchen, ohne ein Wochenende in Folien zu verbringen. 

Es passt auch für Marketer, die an Landingpages, Social Assets und Kampagnenvisuals als Ausgangspunkte arbeiten, plus Nicht-Designer, die eine Idee visuell vermitteln müssen, ohne Figma zu nutzen.

Breit, aber nicht "alle gleichermaßen". Designer, die gegen strenge Komponentenbibliotheken und exakte Spezifikationen arbeiten, werden für spätere Phasen weiter ein echtes Designtool brauchen. Am klarsten passt es für Teams mit vorhandenem Brandsystem, die Wert auf starke erste Entwürfe legen.

Wo passt Claude Design hinein?

Das Produkt sitzt früh bis mittig im Design-Workflow, wo erste Entwürfe wichtiger sind als der letzte Feinschliff. Die folgenden Use Cases stammen aus der Positionierung von Anthropic, den offiziellen Tutorials und den Launch-Testimonials.

Am häufigsten tauchen frühe Prototyp-Exploration, interne Demos, die echt wirken sollen, aber nicht zu Code werden müssen, sowie Decks für Founder, Sales-Teams oder Account Executives auf. 

Gleiches gilt für Kampagnenkonzepte, erste Landingpage-Entwürfe, markenbewusste Mockups und Handoff-Vorbereitung, wobei laut Anthropic ein fertiger Prototyp als Bundle an Claude Code oder Claude Code Web übergeben werden kann.

Der rote Faden ist meist der Weg von der Idee zu einem vorzeigbaren ersten Entwurf. Das Produkt will nicht den gesamten Designprozess lösen. Nicht jeder Fall auf der Liste sitzt beim ersten Versuch; die meisten frühen Erfolge sehen eher nach zwei bis drei Iterationen aus als nach einer.

Claude Design in der Praxis testen

Lesen über den Workflow bringt nur bedingt etwas. Hier ein kurzer Durchlauf der gesamten Schleife, mit einem Prompt, den du reproduzieren kannst, sofern dein Account Zugriff hat. Wenn du den Flow schon kennst, spring direkt zum Export-Schritt; dort verwechseln viele Claude Design mit Claude Code.

Rufe claude.ai/design auf, klicke auf New project, nenne es Workspace tour und wähle High fidelity. Füge diesen Prompt in das Chatfeld ein:

Create a dashboard for a small fintech app. 
It should show monthly revenue at the top, a chart of revenue over the last six months in the middle, and a list of recent transactions below. 
Keep it clean and readable. Single page, no sidebar.

Claude könnte zuerst ein paar klärende Fragen stellen: Zielgruppe, Ästhetik, Währung und Navigationsmuster. Einfache Antworten genügen (internes Team, clean & minimal, USD, nur Topbar). Nach kurzer Wartezeit sollte sich die Canvas füllen.

Als Nächstes iterieren. Wechsle die Canvas in den Comment-Modus, klicke den primären Call-to-Action-Button an und tippe eine kurze Anweisung wie "Erhöhe das horizontale Padding dieses Buttons." Das ist das zuvor beschriebene Inline-Kommentarverhalten.

Inline-Kommentar am Canvas-Element. Bild: Autor.

Wenn das Design passt, klicke auf Export und wähle Hand off to Claude Code. Das ist der zuvor erwähnte Handoff-Pfad.

Geöffnetes Exportmenü mit Handoff-Optionen. Video: Autor.

Wenn du das Beispiel schmal hältst, geht es nicht um die Uhrzeit. Es geht darum zu sehen, wo Prompt, Kommentare, Exportmenü und Handoff in einem Flow sitzen. Der erste Lauf hat Macken; zwei, drei Iterationen reichen meist, um zu sehen, ob das Tool zu deiner Arbeitsweise passt.

Einschränkungen von Claude Design und offene Fragen

Wie erwähnt, ist Claude Design eine Research-Preview – erwarte also Bewegung. Anthropic dokumentiert verlorene Kommentare, Speicherfehler in der kompakten Ansicht, Verzögerungen bei großen Codebasen und Chat-Upstream-Fehler. Die Workarounds sind simpel: verlorene Kommentare in den Chat einfügen, auf Vollansicht wechseln, statt eines ganzen Monorepos ein Unterverzeichnis verlinken oder einen neuen Chat-Tab starten.

Für Organisationen geht es eher um Governance. Stand heute gibt es in Claude Design keine Audit-Logs oder Admin-Nutzungsberichte, es läuft nur im Web und hat wöchentliche Kontingente, die sich nach der Beta ändern können. Anthropic sagt außerdem, dass hochgeladene Assets persistent gespeichert werden und dass Claude Design derzeit keine Anforderungen an Datenresidenz erfüllt.

Der vorhin genannte Designsystem-Punkt gehört ebenfalls hierhin: Ohne dieses Setup bleibt der Output generisch. Auch die Frontier-Design-Kategorie sitzt ähnlich: Voice, Video, Shaders und 3D sind real, aber Anthropic führt sie als experimentell, nicht als abgeschlossen.

Die offenen Fragen bleiben: Wie weit geht Frontier Design, wie viel direkte Designer-Kontrolle kommt hinzu und ob das Produkt sich je tiefer mit etablierten Designtools verbindet.

Zugriff auf Claude Design

Der Zugriff ist unkompliziert – bis es um Teamsteuerung und Nutzung geht.

Claude Design lebt unter claude.ai/design. Es ist nur im Web verfügbar und für Pro-, Max-, Team- und Enterprise-Pläne freigeschaltet – nicht für Free. In Enterprise ist es standardmäßig deaktiviert; ein Admin schaltet es unter Organization Settings, dann Capabilities im Bereich Anthropic Labs frei. Wie oben erwähnt, ist die Rollout-Reihenfolge wichtig: zuerst das Designsystem, dann breiter freigeben.

Im Launch-Post heißt es, Claude Design sei mit Abolimits "inklusive" – aktueller sind jedoch die Pricing-Infos.

Der Pricing-Artikel erklärt, dass die Nutzung separat von Chat und Claude Code gemessen wird. Kontingente setzen sich wöchentlich zurück und liegen pro Nutzer, nicht als gemeinsamer Teampool. Für nutzungsbasierte Enterprise-Kunden beschreibt Anthropic eine Standardabrechnung nach API-Rate, nach einem einmaligen Onboarding-Guthaben von ca. 20 typischen Prompts, das am 17. Juli abläuft. 

Fazit

Das Prompt-zu-Design-Narrativ hält, aber nur, wenn du das erste Ergebnis als Entwurf behandelst. Ohne Markenkontext bleibt der Output laut Anthropic generisch. Mit veröffentlichtem Designsystem hat Claude Design eine klarere Aufgabe: eine Idee so sichtbar machen, dass sie sich beurteilen, teilen oder übergeben lässt.

Das Handoff zu Claude Code ist der zentrale Workflow-Punkt. Das Design ist nicht der Endzustand; es kann zu einem Bundle werden, das die Designintention in ein Coding-Tool trägt. Das unterscheidet sich davon, Claude Design als weitere Arbeitsfläche für statische Mockups zu betrachten.

Eine für Teams wichtige Erkenntnis ist weniger glanzvoll, aber praktisch: Die Admin-Story ist noch früh. Keine Audit-Logs, noch keine Admin-Nutzungsberichte, keine Datenresidenz-Unterstützung und persistent gespeicherte Uploads sind keine Nebensächlichkeiten, wenn dein Team mit Marken- oder Produktmaterial arbeitet.

Die ehrliche Einordnung bleibt daher fokussiert: Claude Design ergibt Sinn für erste Entwürfe, Design-Exploration, frühe Decks, Landingpage-Ideen und Handoff-Vorbereitung. Für späte Designphasen behalte das Preview-Label im Kopf und stütze dich weiter auf einen echten Designprozess.

Für einen breiteren Einstieg in KI und das, was du damit tun kannst, empfehle ich unseren AI Fundamentals-Lernpfad.