Claude Design: Ein Leitfaden und fünf praktische Szenarien

Praktische Informationen zur Arbeit mit Ailoot finden Sie in der Dokumentation.

Was ist Claude Design und warum schauen alle auf den 17. April?#

Freitag, der 17. April 2026. Anthropic stellt Claude Design vor – ein Tool, das eine Textbeschreibung in eine funktionierende Landingpage, eine Investorenpräsentation oder einen Prototyp für eine mobile App verwandelt. Nicht „noch ein Bildgenerator“. Es ist Anthropics erster Versuch, Designer aus den frühen Phasen der Produktentwicklung herauszunehmen.

24 Stunden später kündigte Adobe einen Firefly-Claude-Connector an und positionierte sich als Plattformpartner. Das Signal: Anthropic gewann keinen Produktkrieg, sondern läutete einen Paradigmenwechsel ein – Design wird jetzt generiert, und etablierte Anbieter werden zu Vertriebspartnern.

Claude Design wird hier aus der Perspektive eines Vibe-Coders betrachtet: Was kann es, was kostet es, wie nutzt man es ohne Designkenntnisse, und für welche praktischen Aufgaben eignet es sich? Wenn du ein Produkt ohne eigenen Designer entwickelst, ist dieser Leitfaden für dich.

Was Claude Design kann: 6 Arten von Ergebnissen#

Kurz gesagt erstellt Claude Design Entwürfe, für die ein Designer früher 3–5 Tage gebraucht hätte. In Anthropics Worten gibt es sechs Arten von Ergebnissen:

Die Oberfläche hat zwei Bereiche. Links befindet sich der Chat mit Claude, rechts die Vorschau auf einer Live-Arbeitsfläche. Der Ablauf umfasst fünf Schritte: Projekt einrichten, beschreiben, prüfen, überarbeiten und exportieren. Bei einem vagen Prompt stellt Claude Rückfragen. Dadurch ähnelt die Arbeit eher der Zusammenarbeit mit einer Person als der mit einem Generator.

Was als Eingabe akzeptiert wird:

1. Text-Prompts (der häufigste Anwendungsfall).
2. Screenshots, Bilder und vorhandene Assets.
3. Dokumente: DOCX, PPTX, XLSX.
4. Eine Codebasis – über einen Repository-Link oder durch Import eines lokalen Ordners.
5. Eine Aufnahme einer bestehenden Website über ihre URL.

Exportformate:

1. PDF.
2. PPTX (PowerPoint).
3. Eine eigenständige HTML-Datei – du kannst sie sofort als Seite hochladen.
4. Übertragung nach Canva – dort wird sie als vollständig bearbeitbares Projekt geöffnet.
5. Ein Paket für Claude Code – mit der vollständigen Designabsicht für die Entwicklung.
6. Einen Link innerhalb deiner Organisation teilen.

Was Claude Design nicht kann (wichtig, vorab klarzustellen):

• Es bearbeitet keine Codebasis und führt keine Befehle aus – das ist die Aufgabe von Claude Code.
• Es importiert oder exportiert keine .fig-Dateien – eine native Figma-Integration gibt es nicht.
• Es ersetzt weder Figma noch Canva.
• Es gibt weder ein Aktivitätsprotokoll noch Administratorberichte. Daher eignet es sich nicht für große Unternehmen mit Compliance-Anforderungen.
• Es gibt keinen integrierten Videoexport – Animationen lassen sich nur als Screencast aufnehmen.

Wie sich Claude Design von Figma, Lovable, v0 und Canva unterscheidet#

Im hier beschriebenen Ansatz kommen diese fünf Tools für unterschiedliche Aufgaben zum Einsatz. Hier ein Vergleich mit Stand Mai 2026:

Worin Claude Design alle anderen übertrifft:

1. Designsystem aus einer Codebasis. Keiner der Konkurrenten extrahiert automatisch eine Komponentenbibliothek aus einem Repository. v0 kann aus Figma importieren, aber nicht aus Code.
2. Geschlossene Schleife mit Claude Code. Die Designabsicht bleibt erhalten. Lovable und Bolt erledigen das in einem Tool, aber dort ist Design ein Nebenprodukt des Codes.
3. Mehrere Ergebnisse aus demselben Kontext. Eine Marke – Landingpage, Präsentation, E-Mail-Kampagne, Social-Media-Creative. Die anderen decken jeweils nur einen dieser Bereiche ab.
4. Keine Einarbeitung in eine Oberfläche nötig. Du musst dich nicht wie bei Figma in eine Oberfläche einarbeiten. Das ist wichtig für die Zielgruppe „Gründer und Produktmanager ohne Designhintergrund“ – so positioniert es Anthropic offiziell.

Wo Claude Design Schwächen hat:

1. Keine vollständige Datenbank- und Serverintegration. Lovable und Bolt liefern eine funktionierende App mit Datenbank, Autorisierung und Veröffentlichung. Claude Design liefert nur das Frontend. Für ein vergleichbares Ergebnis brauchst du: Claude Design → Claude Code → Vercel oder einen anderen Host → Zahlungssystem von Hand. Drei Tools statt einem.
2. Keine .fig-Dateien. Designer können das Ergebnis nicht in Figma übernehmen – nur per Screenshot oder durch Neuerstellung.
3. Kein kostenloser Tarif. Alle Konkurrenten haben einen kostenlosen Tarif. Claude Design ist ab Pro verfügbar.
4. Ausarbeitung. Bei der Produktionsreife des Endergebnisses liegt Figma weiterhin vorn. Claude Design ist für den ersten Entwurf gedacht.
5. Geschwindigkeit für einen einfachen Prototyp. Für einen einfachen Prototyp ist Bolt schneller – er startet in Sekunden im Browser.

Claude Design ist ein Tool für eine andere Aufgabe: den ersten Entwurf ohne Designer zu erstellen und ihn anschließend in die Hände anderer zu geben.

Was Claude Design kostet und wie du den Zugriff prüfst#

Tarife und Zugriff:

Das anfängliche Kontingent wird einmalig gewährt – ein Paket mit 20 üblichen Prompts, gültig bis zum 17. Juli 2026. Das reicht, um 2–3 vollständige Projekte zu erstellen und zu entscheiden, ob Claude Design für dich geeignet ist.

Die Schaltflächen der Oberfläche sind nur auf Englisch verfügbar.

So bindest du ein Designsystem aus deiner Codebasis ein#

Der wichtigste Wettbewerbsvorteil von Claude Design richtet sich an Menschen, die bereits etwas entwickelt haben. Kein anderes Tool extrahiert automatisch ein Designsystem aus einem Repository. Das ist vergleichbar mit dem Second-Brain-Ansatz: Du erklärst Claude nicht deine Marke, sondern gibst ihm einen Link zur Quelle, und es findet die Details selbst heraus.

5 Einrichtungsschritte:

1. Öffne Claude Design unter claude.ai/design und erstelle ein neues Projekt.
2. Wähle bei der ersten Einrichtung eine Quelle für das Designsystem. Zur Auswahl stehen: Markenrichtlinien, Frontend-Codebasis, ältere Präsentationen und Styleguides, eine Live-Website per URL und Figma-Dateien.
3. Wenn du ein Repository auswählst – gib einen GitHub-Link an. Claude lädt den Frontend-Ordner herunter und analysiert Theme-Einstellungen, Style-Variablen, vorhandene Komponenten und Typografie.
4. Wenn du eine Live-Website auswählst – gib die URL an. Claude erfasst die Seitenstruktur und extrahiert Farben, Schriftarten sowie Muster für Buttons und Karten.
5. Bestätige die extrahierte Komponentenbibliothek. Claude zeigt die extrahierte Farbpalette, Schriftarten und grundlegenden Komponenten, die du vor dem Speichern bearbeiten kannst.

Danach übernimmt jedes neue Projekt in Claude Design automatisch dein Designsystem. Die Landingpage, die du heute generierst, sieht dadurch genauso aus wie deine aktuelle Website.

Prompt zur erneuten Überprüfung des Designsystems:

Zeige mein aktives Designsystem in diesem Projekt: Farbpalette, Typografie,
Basiskomponenten, Abstandsregeln und Eckenradien. Vergleiche es mit meiner Live-
Website [URL] und markiere alle Abweichungen.

Im hier beschriebenen Ablauf wird diese Prüfung innerhalb eines Projekts alle 3–4 Iterationen wiederholt. Anthropic weist in der Ankündigung offen darauf hin, dass Claude das Designsystem nach mehreren Iterationen vergessen und zu Standardmustern zurückkehren kann. Abhilfe schafft ein regelmäßiger Prompt, der Claude wieder an die Komponentenbibliothek erinnert. Im Kern ist das dasselbe Context Engineering wie in Claude Code: Der Kontext wird ausdrücklich verwaltet, nicht stillschweigend.

Szenario 1: Landingpage für einen Produktstart#

Bei dem hier beschriebenen Vorgehen ist das erste Ergebnis eines neuen Experiments mit Claude Design eine Landingpage. Früher: ein Tag Briefing mit dem Designer, gefolgt von einer Woche Iterationen. Heute: ein Prompt, eine Stunde Überarbeitung und fertiges HTML.

Prompt-Vorlage:

Erstelle eine Landingpage für [PRODUCT NAME, ein Satz Beschreibung].
Visuelle Richtung: [Referenzmarke 1] trifft auf [Referenzmarke 2],
mit einem [Adjektiv] und [Adjektiv] Ton. Aufbau: Hero-Bereich mit einem
Wertversprechen, drei Nutzenabschnitte, Formular für den Early Access,
eine FAQ mit 5 Fragen, Footer. Verwende mein Designsystem.

Was du bekommst: Eine eigenständige HTML-Datei mit eingebetteten Styles. Du kannst sie als Seite auf deiner Website oder als separates Projekt auf einem beliebigen Host hochladen.

Was häufig nach Claude geprüft und überarbeitet wird:

• Der konkrete Text im Hero-Bereich – Claude ist gut bei der Struktur, versteht aber die Bedeutung eines Produkts nicht immer.
• Bilder – Claude setzt Platzhalter ein. Ich ersetze sie durch eigene Bilder oder erstelle sie mit einem separaten Tool.
• Kennzahlen und Zahlen – ich verwende immer echte Werte. Erfinde niemals „80 % unserer Kunden“.

Zeitersparnis: 6–8 Stunden Designerarbeit plus einen Tag Frontend-Entwicklung für eine typische Landingpage zum Produktstart. Claude Design erstellt den ersten Entwurf in 40–60 Minuten, anschließend folgt eine Stunde Iteration.

Szenario 2: Präsentation für Investoren oder Partner#

Eine Präsentation ist das zweite wichtige Szenario: Materialien für Investoren, eine Bewerbung bei einem Accelerator oder ein Gespräch mit einem Partner.

Prompt-Vorlage:

Erstelle eine 10-Folien-Präsentation für eine Series-A-Finanzierungsrunde für [Company],
das [was] für [wen] entwickelt und [key metric] erreicht hat. Zielgruppe:
B2B-SaaS-Investoren in der Frühphase. Ton: selbstbewusst, warm, ohne Hype. Folien
in dieser Reihenfolge: Titel, Problem, Lösung, Traktion (Kennzahl deutlich hervorheben),
Produktdemo, Marktgröße, Geschäftsmodell, Wettbewerber, Team, Finanzierungsanfrage.

Was du bekommst: Eine PPTX-Datei und eine Übertragung nach Canva. In Canva wird die Datei als vollständig bearbeitbares gemeinschaftliches Projekt geöffnet.

Zeit: Spare 6–10 Stunden gegenüber der manuellen Erstellung. Am meisten Zeit sparst du bei typografisch geprägten Folien – große Überschriften, wenig visuelles Durcheinander, alles nach deinem Designsystem.

Stolperfalle: Claude Design erstellt statische Folien. Wenn du Animationen brauchst, übernimm sie entweder in Canva und animiere sie dort oder verwende Figma.

Szenario 3: Klickbarer Prototyp für eine mobile App#

Ein praktisches Szenario: Teste eine Hypothese für eine mobile App, bevor du einen Entwickler bezahlst.

Prompt-Vorlage:

Erstelle einen interaktiven Onboarding-Prototyp für die mobile App von [product]
mit drei Szenarien: leerer Zustand, erste Aktion des Nutzers und der Moment
der Erkenntnis. Gestalte die Elemente klickbar für einen unbeaufsichtigten Nutzertest
mit Maze oder Useberry.

Was du bekommst: Einen Link zum Prototyp. Du kannst ihn direkt an Maze schicken, um einen Test mit 5–10 Nutzern durchzuführen.

Was du prüfen solltest:

• Bildschirmabmessungen – vergewissere dich, dass Claude das richtige Seitenverhältnis für iOS/Android verwendet hat.
• Tiefe der Szenarien – Claude fasst komplexe Abläufe manchmal auf einem Bildschirm zusammen. Der Prompt „Zeige jeden Zweig als separaten Bildschirm“ schafft Abhilfe.
• Zustände – leer, Fehler, Laden. Claude erstellt sie nur, wenn du danach fragst.

Zeitersparnis: 1–2 Sprints gegenüber der manuellen Erstellung in Figma + ProtoPie.

Szenario 4: Marketingkampagne mit 5 einseitigen Websites#

Ein Szenario für bezahlte Werbung: Vergleiche fünf Wertversprechen mit demselben Formular und einer einheitlichen Messmethode.

Prompt-Vorlage:

Erstelle 5 einseitige Websites im Markenstil für unterschiedliche Wertversprechen:
[Option 1, Option 2, Option 3, Option 4, Option 5].
Jede Seite braucht einen Hero-Bereich mit eigener Überschrift, einem Bild und einem
CTA-Button zu [DIESELBE ECHTE FORMULAR-URL]. Exportiere jede Seite als eigenständiges HTML.
Erstelle außerdem PDF-Vorschauen und einen Canva-Ordner für die Designprüfung.
Verwende auf allen fünf Seiten dasselbe CTA-Ziel und einheitliche Messereignisse.

Was du bekommst: Fünf HTML-Seitenentwürfe, fünf PDF-Vorschauen und einen Canva-Projektordner. Die Vorschauen helfen bei der Freigabe des Designs; sie belegen weder funktionierende Landingpages noch Conversion-Tracking.

Bevor du Besucher auf die Seiten schickst:

1. Veröffentliche jede HTML-Seite unter einer eigenen URL beim gewählten Hoster oder übergib sie Claude Code zur Umsetzung in deiner Website.
2. Ersetze Platzhalter und prüfe jeden CTA. Sende einen harmlosen Testeintrag über das gemeinsame Formular und kontrolliere dessen Eingang am vorgesehenen Ziel.
3. Vergib für jede Seite eine eigene Kampagnen- oder Variantenkennung. Erfasse Seitenbesuche, CTA-Klicks und erfolgreiche Formulareinsendungen getrennt, damit dieselbe Besucheraktion verglichen wird.
4. Öffne die veröffentlichten URLs auf Desktop und Smartphone. Prüfe die aufgezeichneten Testereignisse und starte erst danach den geplanten Besuchertest.

Verwendung: Bezahlte Werbung, E-Mail-Kampagnen und Social-Media-Tests. CTA-Klicks je Seitenbesuch ergeben die Klickrate, erfolgreiche Einsendungen je Besuch die Conversionrate. Eine PDF- oder Canva-Prüfung allein ist eine Designprüfung.

Stolperfalle: Claude Design wählt Bilder automatisch aus seinen Assets aus. Wenn du bestimmte Fotos brauchst, lade sie vorher hoch.

Szenario 5: E-Mail-Kampagne für Resend, Mailchimp oder Sendsay#

Für jede Massen-E-Mail-Kampagne wird eine HTML-Vorlage mit eingebetteten Styles benötigt. Für Marketer ohne Frontend-Entwickler ist das eine technische Herausforderung.

Prompt-Vorlage:

Erstelle eine HTML-E-Mail-Vorlage für [campaign topic]. Design: dunkles Theme,
der primäre Akzent deiner Marke, Markenschriften. Aufbau: Unterüberschrift,
Überschrift, 3 Absätze, Call-to-Action-Button, Signatur. Als
eigenständige HTML-Datei mit eingebetteten Styles und ohne externe Abhängigkeiten exportieren.

Was du bekommst: Eine HTML-Datei, die du direkt in Resend, Mailchimp, Sendsay oder Unisender einfügen kannst.

Was häufig geprüft und überarbeitet wird:

• Breite – E-Mail-Clients bevorzugen eine feste Breite von 600px.
• Bilder – ich ersetze die Links durch Links zu meinen online gehosteten Assets.
• Reintextversion – Claude Design erstellt keine; ich schreibe sie selbst.

Zeitersparnis: 2–3 Stunden Layoutarbeit pro Vorlage.

Übergabe an Claude Code: die geschlossene Schleife#

Im hier beschriebenen Ansatz rechtfertigt diese Funktion die Wahl von Claude Design, selbst wenn du Figma hast. Jedes andere Designtool übergibt ein Bild oder eine Figma-Datei. Danach sieht der Entwickler sie an und setzt sie „nach eigenem Verständnis“ um. Dabei gehen 30–40 % der Designabsicht verloren.

Claude Design liefert ein Paket mit mehr als nur visuellen Elementen:

• Komponentenstruktur (wie die Komponenten logisch zusammenhängen).
• Die Logik hinter Designentscheidungen (warum die Abstände so sind, warum diese Eckenradien verwendet werden, warum die Hierarchie so aufgebaut ist).
• Responsive Anker – wo ein Block bei unterschiedlichen Größen „am Bildschirm haftet“.
• Benannte Style-Werte statt magischer Zahlen.

Claude Code öffnet dieses Paket direkt und schreibt Code, der die Designabsicht bewahrt. Es bildet nicht einfach ein Bild in einem Layout nach, sondern setzt die Designlogik um. Das funktioniert zusammen mit der CLAUDE.md deines Projekts: Je präziser die Regeln in CLAUDE.md sind, desto weniger „weicht“ Claude Code von der ursprünglichen Absicht ab.

Workflow:

1. In Claude Design – Design fertigstellen → auf „Export to Claude Code“ klicken.
2. In Claude Code – Projekt öffnen → Paket-ID einfügen → Prompt: „Diesen Entwurf in src/components/ umsetzen.“
3. Claude Code – liest das Paket, versteht die Muster und schreibt Komponenten mit deinem aktuellen Stack (Next.js + Tailwind, Vue, Svelte – was auch immer du verwendest).
4. Danach – Änderungen entweder im Code mit Claude Code vornehmen oder in Claude Design eine neue Designiteration erstellen und erneut übergeben.

Worauf es ankommt: Es geht nicht um „KI schreibt Frontend“, sondern darum, dass „Design und Code zu einem Dokument werden“. Wenn ich in Claude Design den Abstand zwischen Abschnitten ändere, versteht Claude Code bei der nächsten Iteration, dass dies ein neues Muster und keine einmalige Korrektur ist.

Was der Konkurrenz fehlt:

• Lovable / Bolt – Design ist ein Nebenprodukt des Codes. Wenn du das Designsystem ändern möchtest, musst du den gesamten Prompt neu schreiben.
• v0 – liefert React-Komponenten, aber kein Paket mit der Designabsicht. Danach arbeitest du mit Code, nicht mit Design.
• Figma + Cursor – es gibt Plugins, aber sie übertragen nur die visuellen Elemente, nicht die Logik hinter den Entscheidungen.

Eine exklusive Integration, die Claude Design in Anthropics Strategie „Agent plus Canvas“ einbindet.

Was nicht funktioniert: architektonische Schwächen#

Anthropic sagt offen: Das ist eine Vorschau. Einige Funktionen funktionieren noch nicht zuverlässig.

Architektonische Schwächen:

• Kein Aktivitätsprotokoll – problematisch für große Unternehmen mit Compliance-Anforderungen.
• Keine Anforderungen an die Datenaufbewahrung – das Tool kann nicht mit regulierten Daten verwendet werden.
• Experimentelles Design (Sprache, Video, 3D) ist als experimentell gekennzeichnet und kann fehlerhaft sein.
• Kein integrierter Videoexport – Animationen lassen sich nur als Screencast aufnehmen.

Verhaltensauffälligkeiten von Claude (bei allen Tools üblich, nicht nur Design):

• Nach mehreren Iterationen vergisst es Anforderungen und kehrt zu Standardmustern zurück.
• Bei klar strukturierten Aufgaben (ein Muster wiederholen) ist es gut, bei offenen Aufgaben (eine neue Richtung entwickeln) weniger gut.
• Es kann an seinen Gewohnheiten „festhalten“, statt den genannten Zielen zu folgen.

Abhilfe schafft ein Erinnerungs-Prompt, der Claude alle 3–4 Iterationen wieder auf das Designsystem ausrichtet. Das ist kein Hindernis, erfordert aber eine regelmäßige Gewohnheit.

Wann du bei Figma, Lovable oder Canva bleiben solltest#

Im hier beschriebenen Ansatz kommen diese fünf Tools für unterschiedliche Aufgaben zum Einsatz. Hier eine ehrliche Aufschlüsselung, wann du welches Tool verwenden solltest:

Verwende Claude Design, wenn:

• du Gründer, Produktmanager oder Marketer ohne Designhintergrund bist.
• du den ersten Entwurf einer Präsentation, Landingpage oder eines Mock-ups in einer Stunde statt einem Tag brauchst.
• du bereits eine Codebasis oder Markenrichtlinien hast, die Claude verwenden kann.
• du das Ergebnis einem Designer oder Entwickler zur Ausarbeitung übergeben möchtest.
• du mit Claude Code programmierst und eine geschlossene Schleife „Design → Entwicklung“ möchtest.

Verwende Figma, wenn:

• du Designer bist und den letzten Feinschliff machst.
• du als Team mit gemeinsamem Schwerpunkt auf der Übergabe an Entwickler arbeiten musst.
• du Plugins, den Entwicklermodus oder eine umfassende Versionsverwaltung benötigst.
• du ein endgültiges, produktionsreifes Design brauchst.

Verwende Lovable oder Bolt, wenn:

• du mit einem einzigen Prompt ein funktionsfähiges Produkt mit Datenbank, Autorisierung und Veröffentlichung brauchst.
• du bereit bist, Designqualität gegen Geschwindigkeit einzutauschen.
• ein kostenloser Tarif wichtig ist.

Verwende Canva, wenn:

• du Marketingmaterialien aus fertigen Vorlagen benötigst.
• die Designaufgabe darin besteht, Elemente aus einer Bibliothek zusammenzustellen, nicht darin, Neues zu gestalten.
• du Print, soziale Medien und Video in einem Produkt brauchst.

Verwende v0, wenn:

• du Frontends entwickelst und fertige Komponenten zum Kopieren und Einfügen brauchst.
• du bereits im Next.js-/Vercel-Ökosystem arbeitest.
• du direkt aus Figma importieren möchtest.

Der typische Ablauf im hier beschriebenen Ansatz: Claude Design erstellt den ersten Landingpage-Entwurf → Claude Code überträgt ihn nach src/app/ → Änderungen im Code → für typografischen Feinschliff wechsle ich zu Figma → für Animationen in sozialen Medien zu Canva.

Claude Design erhebt nicht den Anspruch, alles zu können. Es soll der erste Schritt sein, nach dem klar ist, was als Nächstes zu tun ist.

Zu Ailoot.