Claude Design im Test: Das visuelle Upgrade, das Claude Code gefehlt hat
Die E-Mail kam um 7:42 Uhr am 17. April 2026. Betreff: „Introducing Claude Design.“ Ich war mitten im Kaffee, halb durch eine Claude Code Session für ein Ramlit-Kunden-Dashboard, und mein erster ehrlicher Gedanke war: „Heute nicht.“ Ich habe schon genug Launch-Day-Demos erlebt, um zu wissen, dass die Research Preview fast nie dem Keynote-Hype gerecht wird.
Dann klickte ich zur Anthropic Labs-Ankündigung durch. Opus 4.7 unter der Haube. Web-Capture direkt von Live-Seiten. Codebase-Analyse, die automatisch Brand-Tokens extrahiert. Übergabe mit einem Klick zurück in Claude Code.
Ich schloss meinen Kundentab. Ich öffnete claude.ai/design. Vier Stunden später hatte ich Prototypen für alle vier meiner Brands — mejba.me, Ramlit, ColorPark und xCyberSecurity — durchlaufen lassen und eine ganz andere Meinung als zu Beginn.
Dieser Beitrag ist die ehrliche Version dieser Session. Was Claude Design tatsächlich macht, wenn man es über die üblichen Marketingscreenshots hinaus treibt. Wo es in meinem Tool-Stack wirklich andere Tools ersetzt. Wo nicht. Und das Workflow-Muster, mit dem es für mich klick gemacht hat — denn die ersten vierzig Minuten waren frustrierend.
Wenn du Claude Code bislang im Terminal betrieben hast und dieselbe Reibung gespürt hast wie ich — wo die Logik zwar rasant, die visuelle Iteration aber im Schneckentempo vorangeht — dann liest du den richtigen Beitrag.
Die Lücke, über die ich seit sechs Monaten klage
Das Problem mit Claude Code, das niemand, der es liebt, offen aussprechen will, ist: Es ist fast ausschließlich ein Text-Tool.
Ich arbeite jeden Tag damit. Ich habe damit alles gebaut – von Laravel-Adminpanels bis hin zu Remotion-Videopipelines – und das alles innerhalb dieses Terminal-Fensters. Es ist ehrlich gesagt die produktivste Umgebung, in der ich je gearbeitet habe. Doch sobald ein Projekt tatsächlich visuelle Iterationen erfordert – eine Hero Section, die sich ganz besonders anfühlen muss, ein Dashboard, dessen Hierarchie auf einen Blick erkennbar sein soll, ein Foliensatz, den ein Kunde vor dem Vorstand präsentiert – bricht der Workflow auseinander.
Man macht eine Art Tanz daraus. Claude Code damit beauftragen, eine Komponente zu generieren. npm run dev ausführen. Localhost öffnen. Screenshot machen. In ein anderes Tool einfügen, um zu annotieren. Zurück ins Terminal. Prompt mit "mach die Abstände enger und verwende unser Markenlila" neu tippen. Noch einmal ausführen. Wieder ein Screenshot. Vergleichen.
Ich habe einmal mitgezählt. Für einen einzigen Landingpage-Hero habe ich siebzehn Runden zwischen Terminal und Browser gedreht, bevor es richtig aussah. Das ist kein 10x Engineering. Das ist eine ganz andere Art von langsam.
Über Teile dieses Problems habe ich bereits geschrieben. Die Claude Code + Figma MCP Bridge schließt die Lücke teilweise für Entwickler, die ohnehin schon in Figma arbeiten. Die AI-Designsystem-Plattform, die ich in Claude Code gebaut habe, sorgt für die Konsistenz der Tokens. Der Design-to-Code-Workflow-Post behandelt die umgekehrte Richtung. Doch all das setzt voraus, dass irgendwo bereits ein visuelles Artefakt existiert – eine Figma-Datei, ein bestehendes Designsystem, ein Screenshot zum Einlesen.
Claude Design ist anders. Es ist das visuelle Artefakt, erschaffen innerhalb von Anthropics eigenem Interface, mit direktem Bezug zu jedem beliebigen Codebase, das man ihm zuweist.
Dieses Framing ist entscheidend. Ich zeige Ihnen, was ich meine.
Was Claude Design tatsächlich ist (jenseits der Pressemitteilung)
Reduziert man das Marketing-Blabla, bleibt folgende funktionale Beschreibung: Claude Design ist ein ausschließlich webbasiertes visuelles Workspace unter claude.ai/design, angetrieben von Opus 4.7, und steht Pro-, Max-, Team- sowie Enterprise-Abonnenten ohne zusätzliche Kosten über den bestehenden Claude-Plan hinaus zur Verfügung.
Zugänglich ist es über das Paletten-Symbol in der linken Navigation von Claude.ai. Noch keine Desktop-App. Noch keine Terminal-Integration. Man benötigt einen Browser.
Die Ausgabemöglichkeiten sind breiter gefächert, als ich erwartet hatte:
- Prototypen — interaktive, klickbare UI-Flows
- Mockups — statische Bildschirme, responsive Vorschauen
- Präsentationen — vollständige Slide-Decks mit Rednernotizen
- One-Pager und Marketingmaterialien — Landingpages, Brand-One-Sheets
Der Export ist möglich als ZIP, PDF, PowerPoint (.pptx), eigenständiges HTML, Canva (über die offizielle Anthropic–Canva-Kollaboration, die zum Launch angekündigt wurde) und als direkte Übergabe zurück in Claude Code als gebündeltes Instruktionspaket.
Gerade dieser letzte Exportweg interessiert mich am meisten. Darauf komme ich im Workflow-Abschnitt noch einmal zurück, denn hier hört Claude Design auf, „nur ein weiteres Design-Tool“ zu sein, und wird etwas grundlegend anderes.
Die Eingabefläche ist der Moment, in dem sich das Produkt ungewohnt anfühlt. Starten kann man von:
- Einer leeren Leinwand mit einem Textprompt
- Einem hochgeladenen Bild, Dokument oder PDF
- Einer Live-Website-URL (es werden DOM-Elemente erfasst, kein Screenshot)
- Einem Link zu einem GitHub-Repository
- Einem lokalen Ordner, der direkt auf die Leinwand gezogen wird
Gerade die letzten beiden Punkte sind spannend — und das war auch das erste, was ich intensiv getestet habe.
Der Brand-Extraction-Test (Das hat meine Meinung geändert)
Ich betreibe vier Marken. Jede davon hat eine eigene visuelle Identität – teils in Figma-Dateien, teils in Tailwind-Konfigurationen, teils im produktiven CSS und zum Teil in meinem Kopf. Die Designs über all diese Marken hinweg konsistent zu halten, ist eine permanente Herausforderung und war der Hauptgrund, warum ich KI-Design-Tools bislang skeptisch gegenüberstand. Alle, die ich ausprobiert hatte, lieferten generische Ergebnisse, die wie Vorlagen wirkten.
Das erste, was ich mit Claude Design getan habe: Ich habe meinen mejba.me Next.js-Ordner auf das Canvas gezogen und gesagt: „Erstelle mir einen Blog-Post-Hero-Bereich, der zu dieser Marke passt.“
Was dann geschah, hat meine Meinung verändert.
Claude Design hat nicht mein gesamtes Code-Repository hochgeladen – das hätten 400MB Chaos ergeben. Stattdessen hat es das Projekt durchsucht, intelligent die relevanten Dateien ausgewählt – meine Tailwind-Konfiguration, das globale CSS, meine Logo-SVGs, die Schriftdeklarationen im Layout, einige Hero-Bereiche aus vorhandenen Seiten – und begann, Tokens zu extrahieren.
Der Fortschrittsbalken stand beim ersten Durchlauf etwa siebzehn Minuten lang auf „Entwerfe Design-Assets...“. Ich habe mir einen weiteren Kaffee gemacht, Slack-Nachrichten beantwortet und bin dann zurückgekommen. Als ich das Canvas wieder öffnete, hatte Claude Design basierend auf meinem tatsächlichen Produktionscode ein Design-System erstellt:
- Primärfarben exakt mit ihren Hex-Werten übernommen (#8B5CF6, #3B82F6, #06B6D4 – die drei, die ich für meine Verläufe verwende)
- Typografie-Skalierung aus meinen Utility-Klassen für Type-Ramps extrahiert
- Spacing-Tokens passend zur Tailwind-Abstandsskala übernommen
- Logo-Varianten automatisch aus meinem
/public-Ordner erkannt - Einige Bildelemente aus bestehenden Hero-Bereichen als Referenzbilder gekennzeichnet
Kein Vorlagen-Feeling. Keine generischen Sans-Serif-Standards. Das Tool hat meinen Code gelesen und meine Marke verstanden – genauso, wie es ein Junior Designer tun würde, wenn man ihm das Repo gibt und sagt: „Mach es genau so.“
Ich habe den Test drei weitere Male wiederholt. GitHub-Link für ColorPark. Lokalen Ordner für den xCyberSecurity-Code gezogen. Eine Live-Site-URL für ein Ramlit-Kundenprojekt. Die Extraktionszeiten lagen je nach Repo-Größe zwischen zwölf und zweiundzwanzig Minuten. Jedes Mal entstand eine konsistente Ausgangsbasis mit Markentreue, die mir kein anderes KI-Design-Tool bisher ermöglicht hat.
Das ist das Feature, das Claude Design vom Rest abhebt. Google Stitch liefert schnelle Ideenfindung aus Prompts. v0 liefert produktionsreife React-Komponenten. Figma Make sorgt für systemkonsistentes Design direkt in Figma. Aber keines dieser Tools liest tatsächlich deinen ausgelieferten Code und baut in einem Schritt ein Design-System daraus.
Aber die Extraktionszeit ist real. Zwanzig Minuten sind kein Pappenstiel, wenn man im Flow ist. Plane das entsprechend ein.
Das Q&A-Prompting-Muster (Das ist das eigentliche Produkt)
Hier kam der Moment, auf den ich am wenigsten vorbereitet war. Ich tippte einen Prompt ein – „Erstelle eine interaktive, dunkel gestaltete Globus-Grafik für meine Hero-Section mit leuchtenden Datenfluss-Pfaden“ – und drückte Enter, in Erwartung, dass Claude Design sofort ein Ergebnis liefern würde.
Es geschah nichts. Stattdessen stellte mir Claude eine Frage.
Dann noch eine. Und noch eine. Insgesamt sechs Fragen, in enger, dialogischer Abfolge:
- „Welchen kulturellen oder visuellen Stil soll der Globus widerspiegeln? Wissenschaftlichen Realismus, retro-futuristisch, abstrakt-geometrisch oder einen gemischten Stil mit Elementen aus verschiedenen Richtungen?“
- „Für die Datenfluss-Pfade – sollen es jeweils erkennbare Bögen zwischen bestimmten Städten sein oder eher diffuse, fließende Ströme über die Oberfläche?“
- „Farbpalette: Eintöniger Glow (kühler, fokussierter) oder mehrfarbig (wärmer, redaktioneller)?“
- „UI-Komplexität: Nur die minimalistische, leuchtende Kugel oder ein vollständiges Dashboard-Kontext mit Metrik-Panels und Legenden?“
- „Grundstimmung: Editorial und reflektierend, energiegeladen und animiert oder datenoperativ und ernst?“
- „Welche Parameter sollen nachher anpassbar sein? Rotationsgeschwindigkeit, Glühintensität, Farbpalette der Flüsse, Markerdichte oder andere?“
Meine Antwort: gemischter Stil, diffuse Ströme, mehrfarbig, nur die Kugel (kein Dashboard), editorial, anpassbare Farbpalette der Flüsse.
Das Ergebnis war das bislang Nächstliegende an „genau das, was ich im Kopf hatte“, das ich je von einem Design-Tool bekommen habe. Noch nicht ganz versandfertig ohne Feinschliff, aber nah genug dran, dass mir sofort klar wurde, warum Anthropic diesen Ansatz gewählt hat.
Hier die Erkenntnis, für deren Formulierung ich dreißig Minuten gebraucht habe: Der Grund, warum One-Shot-Text-Prompts mittelmäßige Design-Ergebnisse liefern, ist nicht, dass die Modelle schlecht im Designen sind. Der Design-Brief in meinem Kopf besteht aus vielleicht vierzig impliziten Entscheidungen, und ich habe nur sieben davon getippt. Das Modell muss die übrigen dreiunddreißig erraten. In der Regel liegen die Schätzungen daneben, weil mein Gehirn die nötigen Informationen nicht geliefert hat.
Das Q&A-Muster zwingt mich dazu, diese Entscheidungen einzeln offenzulegen. Das ist derselbe Grund, aus dem ein erfahrener Senior-Designer beim Kickoff mit einem Kunden zwanzig Fragen stellt, bevor er überhaupt etwas skizziert. Die Fragen sind bereits die Designarbeit. Die Generierung ist nur noch Rendering.
Anthropics eigener Senior Product Designer hat öffentlich erklärt, dass Seiten, die in Konkurrenz-Tools zwanzig Prompts benötigen, in Claude Design mit nur zwei auskommen. Als ich das las, klang es nach Marketing. Nachdem ich diesen Workflow nun selbst erlebt habe, halte ich dies für die konservativste Aussage zum Launch.
Ein wichtiger Hinweis: Das Q&A-Muster wird nur bei Prompts mit tatsächlicher Mehrdeutigkeit ausgelöst. Tippt man „mach den Button rot“, wird der Button einfach rot. Das interaktive Prompting startet erst, wenn Claude erkennt, dass im Brief noch offene Designentscheidungen stecken.
Der visuelle Editor (Wo ich fast aufgegeben hätte, dann aber begeistert war)
Nachdem der Globus generiert war, wechselte ich in den visuellen Editor. Und hier wurde es in den ersten vierzig Minuten richtig holprig.
Die Arbeitsfläche erinnert an eine Mischung aus Figma und einem DevTools-Panel im Browser. Man kann jedes Element anklicken – einen Button, einen Textblock, den Globus selbst – und es direkt manipulieren. Rotationsgeschwindigkeit der Kugel? Schieberegler. Leuchtintensität? Schieberegler. Farbe eines einzelnen Bogens? Anklicken, Farbauswahl, fertig. Für Detailanpassungen ist kein Prompting nötig.
Das ist das richtige Modell. Aber beim ersten Benutzen habe ich trotzdem immer wieder versucht, mich über Prompts durch die Änderungen zu hangeln („die Rotation langsamer machen“), statt einfach den Schieberegler zu bedienen. Es gibt also eine gewisse Lernkurve: Wann tippt man, wann klickt man? Bei mir hat es etwa neunzig Minuten gedauert, bis ich das verinnerlicht hatte – weshalb sich die erste Session langsamer anfühlt, als sie eigentlich müsste.
Als ich diesen Punkt überwunden hatte, fing der Editor tatsächlich an, einzelne Teile meines Workflows zu ersetzen. Früher habe ich:
- Claude Code gebeten, eine Komponente mit geänderten Werten neu zu generieren
- Neu gebaut
- Neu geladen
Jetzt:
- Klicke ich das Element in Claude Design an
- Ziehe den Schieberegler
- Sehe das Ergebnis in Echtzeit
Drei Schritte werden zu einem. Über ein Dutzend Micro-Edits pro Komponente hinweg ist das der entscheidende Grund, warum ich glaube, dass Claude Design in meinem Tages-Stack bleiben wird – und nicht nach der Review-Phase in Vergessenheit gerät.
Es gibt außerdem eine Kollaborations-Ebene, für die ich mich zuerst gar nicht interessiert habe, die ich dann aber innerhalb weniger Stunden genutzt habe. Man kann Inline-Kommentare an spezifischen Elementen hinterlassen. Man kann direkt auf der Arbeitsfläche Anmerkungen skizzieren – ich habe zum Beispiel in die Ecke eines Landingpage-Mockups einen Halbmond gezeichnet und dazu geschrieben: „das hier ungefähr als Hintergrund-Element einfügen.“ Claude Design hat das zusammen mit drei anderen von mir notierten Anpassungen in eine Edit-Queue gepackt und dann alles zusammen mit einem einzigen Durchlauf umgesetzt.
Das Batching ist viel wichtiger, als es klingt. Es bedeutet, dass das Modell den gesamten Satz an beabsichtigten Änderungen als zusammengehöriges Design-Update betrachtet – und nicht als eine Folge von sich widersprechenden Einzeländerungen. Ich habe schließlich fünf oder sechs Änderungen pro Canvas markiert, sie als ein einziges Update abgeschickt und damit deutlich bessere Resultate erzielt als zuvor, als ich die Änderungen einzeln abgerufen hatte.
Die Claude Code-Übergabe (Das ist für mich der springende Punkt)
Wenn Sie sich nur eine Sache aus diesem Beitrag merken, dann diesen Abschnitt. Der Exportpfad Claude Design → Claude Code ist der Grund, warum dieses Tool in meinen Workflow gehört.
Das ist der Ablauf, den ich letzte Woche an einem echten Ramlit-Kundenprototypen vollständig durchgespielt habe:
Schritt 1: Claude Design auf das bestehende Next.js-Repository des Kunden per GitHub-Link zeigen. Etwa achtzehn Minuten auf die Markenextraktion warten.
Schritt 2: Prompt: „Erstelle einen neuen Preisseiten-Abschnitt mit Drei-Karten-Layout, Jahres-/Monats-Umschalter und der bestehenden visuellen Sprache der Marke.“ Die sechs anschließenden Q&A-Fragen beantworten.
Schritt 3: Im visuellen Editor iterieren. Abstände anpassen, die Akzentfarbe einer Karte austauschen, den Toggle mit einem Kommentar zur Barrierefreiheits-Kontrastierung versehen.
Schritt 4: Als „Claude Code handoff bundle“ exportieren. Dies erzeugt ein strukturiertes Anweisungspaket, das die Designspezifikation, die extrahierten Marken-Tokens, den Komponentenaufbau und eine Reihe von Implementierungshinweisen enthält.
Schritt 5: Dasselbe Projekt in Claude Code öffnen. Das Übergabepaket als Kontext übergeben. Eine einzige Anweisung — „implementiere diesen Preisseiten-Abschnitt mit dem beigefügten Claude Design Bundle und halte unsere bisherigen Component Conventions ein“ — und Claude Code generierte den produktionsreifen React-Code in rund vier Minuten.
Der erzeugte Code war nicht perfekt. Ich habe schätzungsweise rund 20 % davon während des Reviews angepasst. Aber er war klar im Stil des bestehenden Codebases gehalten, nutzte die richtigen Tailwind-Tokens und entsprach der visuellen Spezifikation innerhalb einer Toleranz, für deren manuelle Übertragung ich sonst etwa vierzig Minuten gebraucht hätte.
Das ist die Rundreise, die Konkurrenz-Tools nicht bieten können. Figma Make übergibt Code via MCP, aber man arbeitet vollständig innerhalb des Figma-Ökosystems. Google Stitch generiert zwar beeindruckende Ideenskizzen, hat jedoch keine direkte Integration zurück in den eigentlichen Code. v0 erzeugt großartige Komponenten, übernimmt jedoch nicht deine Marke. Claude Design positioniert sich genau in der Mitte all dieser vier Richtungen und — das ist entscheidend — befindet sich innerhalb derselben Anthropic-Oberfläche wie Claude Code selbst.
Für alle, die heute schon mit einem Claude Code-zentrierten Workflow arbeiten, ist diese Oberflächen-Vereinheitlichung das eigentlich Entscheidende.
Wie es sich im Vergleich zu den Tools schlägt, die ich tatsächlich nutze
Ich muss hier vorsichtig sein, denn jeder Vergleichsartikel online ist derzeit überschwänglich. Lassen Sie mich konkret werden.
Im Vergleich zu Google Stitch: Stitch ist kostenlos und besser geeignet für schnelle, rein promptbasierte Ideation, wenn noch keine Codebasis existiert. Wenn ich für ein neues Projekt vor einer Präsentation zehn visuelle Richtungen brainstorme, ist Stitch immer noch schneller. Claude Design gewinnt in dem Moment, in dem eine echte Codebasis vorhanden ist.
Im Vergleich zu Figma Make: Figma Make ist immer noch das bessere Tool, wenn Ihr Team in Figma arbeitet und Ihre Designer das System führen. Die Kollaborationsmöglichkeiten sind größer, die bestehende Komponentenbibliothek ist umfangreicher und die Übergabe in die Produktion über Figma's Dev Mode ist ausgereift. Claude Design punktet, wenn Sie ein developer-first Team sind, bei dem die Codebasis die zentrale Quelle der Wahrheit ist, nicht die Figma-Datei. Ich habe eine ausführliche Anleitung zu Figma Make und Designsystemen geschrieben, falls Sie mehr zum anderen Vergleichspunkt erfahren möchten.
Im Vergleich zu v0: v0 erzeugt bessere eigenständige React-Komponenten von Grund auf, besonders bei Standardmustern. Claude Design liefert dafür markenkonsistente ganze Screens. Unterschiedliche Tools für unterschiedliche Aufgaben.
Im Vergleich zu Pencil.app: Die Stärke von Pencil ist das Low-Fidelity-Brainstorming auf einer Zeichenfläche. Claude Design will das gar nicht abdecken. Wenn Sie ein Whiteboard brauchen, bleiben Sie bei Pencil.
Im Vergleich zur reinen Arbeit in Claude Code mit terminalbasierten Prompts: Genau das ersetzt Claude Design für mich am direktesten. Für einfache Komponenten setze ich weiterhin auf reinen Claude Code – ein einzelnes Utility-Component braucht kein Design-Canvas. Aber alles, was Markenkonsistenz, visuelle Hierarchie oder Kundenreview erfordert, startet jetzt in Claude Design und wird in Claude Code abgeschlossen.
Die ehrlichen Einschränkungen (Dinge, die nerven werden)
Ich werde nicht so tun, als wäre das hier ein fertiges Produkt. Ist es nicht.
Nur Web. Keine Desktop-App. Keine Terminal-Integration. Wer offline arbeitet oder in Umgebungen mit niedriger Bandbreite unterwegs ist, für den ist das aktuell nicht nutzbar. Mir ist das letzte Woche im Zug passiert und ich bin komplett auf meinen bisherigen Workflow zurückgefallen.
Die 15–20-minütige Extraktions-Wartezeit. Die Markenauswertung ist beeindruckend, aber definitiv nicht schnell. Für kleine Nebenprojekte, bei denen man nur etwas skizzieren möchte, ist diese Wartezeit ein echtes Hindernis. Ich starte Extraktionen jetzt nur noch bei Projekten, von denen ich weiß, dass ich mehrere Sessions dafür investieren werde.
Die Lernkurve: Prompten oder Klicken. Ich habe es bereits erwähnt, aber es ist echt: Man sollte ein bis zwei Stunden im Tool einplanen, bevor man sich wirklich flüssig fühlt. Die erste Session wird sich langsamer anfühlen als der bisherige Workflow.
Einschränkung durch den Forschungs-Vorschau-Status. Das ist die Kommunikation von Anthropic, nicht meine. Das Produkt ist als „Research Preview“ gekennzeichnet, was in der Regel bedeutet: Funktionen können sich ändern, die Preise könnten variieren, und es gibt Bugs in Randfällen. Bei meinen Tests bin ich auf zwei Darstellungsfehler gestoßen – einmal wurde ein SVG-Import mit kaputten Pfaden übernommen, ein anderes Mal wurde ein Wechsel ins Dark Mode-Farbset nicht auf verschachtelte Komponenten übertragen. Beides war behebbar, sollte aber bekannt sein.
Opus 4.7 Anfragevolumen ist wichtig. Claude Design läuft auf Opus 4.7, das heißt: Wer im Pro-Plan ohnehin schon viel Claude Code nutzt, wird feststellen, dass die Session-Limits schneller erreicht sind, als erwartet. In einer langen Iterationssession bin ich einmal an die Grenze gestoßen. Wer den Max-Plan hat, wird sich hier wohler fühlen.
Noch kein Ersatz für erfahrene Design-Judgments. Das ist mir besonders wichtig zu betonen: Claude Design liefert wirklich gutes visuelles Output. Es ersetzt aber nicht den Menschen, der versteht, warum sich eine Hero Section falsch anfühlt oder wann sich eine Marke zu weit entfernt. Es beschleunigt die Umsetzung von Design-Entscheidungen. Es nimmt dir diese Entscheidungen aber nicht ab.
Das mentale Modell, das bei mir den Knoten gelöst hat
Wenn du nur ein einziges Framework aus diesem Beitrag mitnimmst, dann dieses.
Jedes von mir getestete AI-Design-Tool lässt sich in eine von drei Kategorien einordnen:
- Ideations-Tools — schnell, promptgesteuert, generieren aus dem Nichts. Google Stitch gehört hierher. Gut zur Erkundung, schwach für den produktiven Einsatz.
- System-Tools — integriert in bestehende Designsprachen, stark in der Konsistenz. Figma Make ist hier zu Hause. Gut für die Verfeinerung im Produktionsprozess, schwach bei der Entwicklung von Grund auf.
- Komponenten-Tools — generieren Produktionscode für spezifische UI-Elemente. v0 gehört dazu. Stark bei der Implementierung, schwach bei der Komposition von Ganzseiten.
Claude Design ist das erste Tool, das ich genutzt habe, das sinnvoll in allen drei Kategorien agiert und dabei strukturell einzigartig bleibt. Es ideiert, arbeitet dabei aber mit deiner echten Marke. Es systematisiert, aber ausgehend vom Code, nicht von einer Figma-Bibliothek. Es übergibt an Produktionscode, aber über Claude Code, nicht über einen generischen React-Export.
Für diese neue Kategorie gibt es bislang keinen griffigen Namen. "Codebase-native Design" ist das Treffendste, das mir bislang eingefallen ist. Es ist ein Workflow, bei dem dein Produktionscode die Quelle der Wahrheit für das Designsystem ist, dein visuelles Canvas die Iterationsebene bildet und dein AI-Modell als bidirektionaler Übersetzer fungiert.
Sollte dieses Muster im kommenden Jahr zum dominanten Ansatz für Entwickler-geführte Produkt-Teams werden — und ich vermute, das wird so sein —, ist Claude Design die erste ernstzunehmende Implementierung davon.
Der Workflow, den ich nach diesem Test beibehalte
So sieht mein Montag jetzt aus. Dieses Muster hat sich nach der vierstündigen Sitzung für mich herauskristallisiert:
Morgens — Claude Code im Terminal. Logik, Backend, Geschäftsregeln, Datenmodellierung. Nichts Visuelles. Genau darin liegt die Stärke von Claude Code und daran muss ich nichts ändern.
Mittags — Claude Design für visuelle Arbeiten. Immer wenn ich einen Hero-Bereich, ein Dashboard, eine Preisseite, ein Kunden-Review-Artefakt oder ein Folienset erstelle, beginne ich in Claude Design mit dem relevanten extrahierten Codebase. Ich starte die Q&A-Runde, arbeite iterativ im visuellen Editor, bündle meine Änderungen.
Übergabe — Export zu Claude Code. Das Handoff-Bundle aus Claude Design kommt ins Terminal. Claude Code erzeugt die produktionsreife Implementierung. Ich überprüfe, bearbeite die 20 %, die noch Feinschliff brauchen, und liefere aus.
Kundenreview — Export zu Canva oder PDF. Wenn ein Kunde einen Prototyp sehen möchte, exportiere ich zu Canva, falls er selbst Anmerkungen machen will, oder zu PDF, wenn er nur überprüfen möchte. Das ersetzt für kleinere Projekte für mich den Figma-Sharing-Link-Workflow.
Nach vier Stunden hat mir dieses Muster ungefähr 40 % der Zeit eingespart, die ich zuvor für visuelle Iterationen benötigt habe. Diese Zahl stammt aus einer echten Arbeitswoche und wurde mit den vergangenen zwei Wochen ähnlicher Arbeiten verglichen. Nach einem ganzen Monat werde ich Genaueres wissen, aber ich rechne nicht damit, dass diese Zahl sinkt.
Eine Sache, die du in den nächsten 24 Stunden ausprobieren solltest
Wenn du einen Pro-, Max-, Team- oder Enterprise-Plan von Claude hast, öffne claude.ai/design jetzt sofort. Ziehe ein echtes Repository, an dem du gerade arbeitest, auf das Canvas. Starte die Markenauslese.
Während das läuft — und es dauert seine zwanzig Minuten —, mach dir einen Kaffee. Dann komm zurück und probiere exakt einen Prompt: „Erstelle einen [Hero-Bereich / eine Preisübersicht / eine Dashboard-Karte – wähle eins], das zur visuellen Sprache dieser Codebasis passt.“ Lass dich vom Q&A leiten. Antworte ehrlich.
Was du am Ende dieser dreißigminütigen Hin- und Rückrunde siehst, wird entweder sofort Klick machen oder eben nicht. Bei mir hat es Klick gemacht. Was mich überrascht hat, war, wie schnell der Wechsel kam — ich bin in die Session gegangen, um eine skeptische Review zu schreiben, und habe sie verlassen, nachdem ich die Hälfte meiner Wochenarbeitsweise umgebaut hatte.
Erinnerst du dich an die Mail von 7:42 Uhr morgens aus dem Anfang dieses Beitrags? Die, die ich fast ignoriert hätte? Ich nutze Claude Design jetzt für jedes Projekt, bei dem visuelle Iteration zählt. Vier Stunden haben meinen Standard geändert.
Die visuelle Lücke im Frontend von Claude Code war das, was meine Produktivität seit sechs Monaten am stärksten gebremst hat. Seit letztem Freitag ist diese Lücke bei mir geschlossen. Falls du den gleichen Produktivitätsbremser gespürt hast, hast du jetzt ein Produkt zum Probieren und einen Workflow zum Austesten.
Öffne das Canvas. Schau dir an, wie dein eigener Code einer Modell-Intelligenz erscheint, die ihn tatsächlich versteht.
Häufig gestellte Fragen
Was ist Claude Design und wie unterscheidet es sich von Claude Code?
Claude Design ist die visuelle Design-Oberfläche von Anthropic unter claude.ai/design, basiert auf Opus 4.7 und wurde am 17. April 2026 veröffentlicht. Sie generiert Prototypen, Mockups, Foliensätze und One-Pager über einen konversationellen Q&A-Prompter sowie einen direkt manipulierbaren visuellen Editor. Anders als der terminalbasierte Coding-Workflow von Claude Code ist Claude Design ausschließlich im Browser verfügbar und auf visuelle Ausgaben fokussiert – beide Systeme sind jedoch direkt durch ein One-Click-Handoff-Bundle integriert. Einen vollständigen Workflow-Walkthrough finden Sie im Claude Code Handoff-Abschnitt weiter oben.
Wer kann derzeit auf Claude Design zugreifen?
Claude Design steht Pro-, Max-, Team- und Enterprise-Abonnenten von Claude ohne zusätzliche Kosten zur Verfügung. Nutzer der Free-Stufe haben während der Research Preview keinen Zugriff. Das Angebot ist ausschließlich web-basiert – es gibt keine Desktop-App oder Terminal-Integration zum Launch. Der Zugriff erfolgt über das Paletten-Symbol in der linken Navigation auf Claude.ai.
Wie lange dauert die Codebase-Brand-Extraktion?
In meinen Tests über vier Marken hinweg lief die Marken-Extraktion zwischen zwölf und zweiundzwanzig Minuten, abhängig von der Größe des Repositories. Claude Design lädt nicht die gesamte Codebase hoch – stattdessen werden intelligent relevante Dateien wie Tailwind-Konfigurationen, globale CSS, Logo-Assets und Font-Deklarationen ausgewählt – doch Extraktion und Token-Analyse benötigen trotzdem spürbare Echtzeit. Planen Sie dies ein, indem Sie die Extraktion anstoßen, bevor Sie sie benötigen.
Welche Exportformate unterstützt Claude Design?
Claude Design exportiert als ZIP, PDF, PowerPoint (.pptx), eigenständiges HTML, Canva (über die offizielle Anthropic–Canva-Kooperation) und als direktes Claude Code Handoff-Bundle. Interne Organisations-URLs und Ordner-basiertes Sharing werden ebenfalls für Team-Workflows unterstützt.
Sollte ich von Figma Make oder Google Stitch auf Claude Design wechseln?
Das hängt vom primären Workflow ab. Arbeitet Ihr Team vollständig in Figma und liegt die Verantwortung für das Design bei den Designern selbst, passt Figma Make weiterhin am besten. Für kostenlose, schnelle, prompt-gesteuerte Ideengenerierung bei Greenfield-Projekten bleibt Google Stitch am schnellsten. Claude Design ist die beste Wahl, wenn Sie eine echte Codebasis als Single Source of Truth haben und markenkonsistente Prototypen wollen, die sich verlustfrei zu Claude Code transferieren lassen. Einen vollständigen Vergleich finden Sie im entsprechenden Abschnitt oben.
Lassen Sie uns zusammenarbeiten
Möchten Sie KI-Systeme entwickeln, Workflows automatisieren oder Ihre technische Infrastruktur skalieren? Ich helfe Ihnen gerne weiter.
- Fiverr (individuelle Lösungen & Integrationen): fiverr.com/s/EgxYmWD
- Portfolio: mejba.me
- Ramlit Limited (Enterprise-Lösungen): ramlit.com
- ColorPark (Design & Branding): colorpark.io
- xCyberSecurity (Sicherheitsdienstleistungen): xcybersecurity.io
