Zum Inhalt springen
CASOON

Claude Design: Anthropics KI-Tool für Prototypen – und was das für Figma bedeutet

Research Preview, Opus 4.7, zwei Prompts bis zum Prototyp – und ein CPO, der den Figma-Aufsichtsrat verlässt

16 Minuten
Claude Design: Anthropics KI-Tool für Prototypen – und was das für Figma bedeutet
#Claude #Anthropic #Design #Figma

Kurz vor dem Launch von Claude Design verließ Anthropics Chief Product Officer den Aufsichtsrat von Figma. Das war kein Zufall. Im April 2026 brachte Anthropic ein KI-gestütztes Design-Tool auf den Markt, das Prototypen, Wireframes, Mockups und Pitch-Decks direkt aus Text-Prompts generiert – und das explizit als Konkurrenz zu Figma, Canva und Adobe positioniert wird. Als Research Preview zunächst für Claude Pro-, Max-, Team- und Enterprise-Nutzer verfügbar, ist Claude Design der bisher direkteste Vorstoß eines LLM-Anbieters in den Designmarkt.

Was Claude Design ist

Claude Design basiert auf Claude Opus 4.7 und ist in die Claude-Oberfläche integriert – kein separates Tool, keine neue App. Wer Claude nutzt, kann direkt im Gespräch Design-Outputs erzeugen: Wireframes für Landing Pages, interaktive Prototypen für Onboarding-Flows, Pitch-Deck-Layouts, Mockups für Mobile-UIs.

Das entscheidende Feature ist die Integration bestehender Design-Systeme. Claude Design kann Farben, Typografie und Komponenten aus einer bestehenden Codebase oder einer Figma-Datei importieren und auf generierte Outputs anwenden. Das Ergebnis ist kein generisches KI-Design, sondern ein Output, der zumindest optisch zur bestehenden Markensprache passt – ohne manuelle Nacharbeit für jedes Element.

Eine Canva-Integration erlaubt es, generierte Designs direkt als editierbare Dateien in Canva weiterzubearbeiten. Das macht Claude Design nicht zu einem abgeschlossenen System, sondern zu einem Einstiegspunkt in bestehende Design-Workflows.

Das Design-System: Einrichten und Pflegen

Der Unterschied zwischen generischem KI-Design und brauchbarem Output liegt fast vollständig im Design-System. Claude Design erstellt dieses automatisch durch Analyse hochgeladener Assets – und das ist der Schritt, der die meiste Sorgfalt verdient.

Als Quellen akzeptiert Claude Design Git-Repositories (React-, Vue- oder andere Komponenten-Bibliotheken), Figma-Dateien, PDFs und Screenshots. Claude scannt diese und extrahiert daraus strukturierte Daten: primäre und sekundäre Farbpaletten, Typografie-Hierarchien mit Größen und Gewichten, Komponenten-Inventar (Buttons, Cards, Formulare) und Layout-Muster wie Abstände und Raster. Das generierte UI-Kit wird zur Überprüfung präsentiert – Elemente können angepasst, ergänzt oder entfernt werden, bevor das System aktiviert wird.

Nach der Aktivierung gilt das Design-System automatisch für alle neuen Projekte im Konto oder Team. Kein erneutes Hochladen pro Projekt, kein manuelles Referenzieren. Das ist der praktische Wert: Konsistenz ohne Overhead.

Wer keine Codebase hat oder in einem frühen Stadium arbeitet, ist nicht ausgeschlossen. Claude leitet das Design-System auch aus Brand-Guides, öffentlichen URLs oder Screenshots ab. Die Qualität hängt dann von der Vollständigkeit dieser Quellen ab – ein gut dokumentierter Style Guide liefert bessere Ergebnisse als ein einzelner Screenshot.

Pflege ist iterativ: Wenn sich das Design-System weiterentwickelt – neue Komponenten, aktualisierte Farben, geänderte Typografie – kann Claude Design erneut analysieren oder manuell bearbeitet werden. Das ist kein einmaliges Setup, sondern ein fortlaufender Prozess, der parallel zur Produktentwicklung läuft.

Der kritische Punkt für Teams: Je besser die eigene Codebase dokumentiert und strukturiert ist, desto genauer wird das extrahierte Design-System. Ein unaufgeräumtes Repository mit inkonsistenten Klassenbenennungen liefert ein unaufgeräumtes System. Claude analysiert, was vorhanden ist – es korrigiert keine strukturellen Schulden in der Codebase.

Der Workflow in der Praxis

Claude Design ist über claude.ai/design erreichbar und setzt ein Claude Pro-, Max-, Team- oder Enterprise-Abo voraus. Der Einstieg ist optional, aber der entscheidende Schritt: Kontext hochladen. Wer seine Codebase, Figma-Dateien oder Brand-Guidelines vor dem ersten Prompt einspielt, bekommt Outputs, die das eigene Design-System treffen – richtige Farben, passende Schriften, bekannte Komponenten. Wer das weglässt, bekommt generisches Design.

Der eigentliche Ablauf ist ein geteilter Bildschirm: links der Chat, rechts die Canvas. Ein erster Prompt beschreibt das Ziel, das Layout und die Zielgruppe – präzise genug, um eine Richtung zu geben, nicht so präzise, dass kein Spielraum bleibt. Claude generiert einen interaktiven Prototyp auf der Canvas. Von dort gibt es mehrere Iterationswege: Chat-Nachrichten für inhaltliche Richtungsänderungen, Inline-Kommentare durch Klick auf einzelne Elemente, direkte Text-Edits im Canvas, und Custom-Slider für Abstände und Farben. Das ist keine lineare Sequenz, sondern ein Geflecht aus parallelen Eingriffsmöglichkeiten.

Wer schnell mehrere Richtungen erkunden will, fragt direkt danach: „Zeig drei Layout-Varianten” produziert parallel vergleichbare Optionen, ohne jede manuell aufzubauen. Feedback zu Barrierefreiheit lässt sich einfordern, bevor das Design weiterentwickelt wird – ein Punkt, der in frühen Phasen selten freiwillig adressiert wird.

Am Ende stehen mehrere Exportformate: PDF und PPTX für Präsentationen, HTML für schnelle Web-Vorschau, Handoff-Bundle für die Entwicklerübergabe, URL-Sharing für asynchrones Feedback. Das Handoff-Bundle ist der interessanteste Punkt für Teams – wie vollständig es tatsächlich ist und ob es Figmas Dev-Mode-Standard erreicht, wird die Praxis zeigen.

Praktisch bewährt sich ein schrittweises Vorgehen: erst Struktur und Layout klären, dann Details ausarbeiten. Wer sofort mit Details startet, erzeugt Mehraufwand bei strukturellen Änderungen. Das ist keine Besonderheit von Claude Design – es gilt für jeden Design-Prozess. Aber die Versuchung ist bei einem Prompt-getriebenen Tool besonders groß, weil das Feedback so schnell kommt.

Prototypen in zwei Prompts

Was Nutzer aus der Beta berichten, ist konsistent: Was früher Wochen dauerte – Briefing, Wireframing, Feedback-Runden, erste Prototypen – verdichtet sich auf eine Sitzung. Typischerweise zwei Prompts: einer für die Grundstruktur, einer für Anpassungen.

Das ist keine Hyperbel für Trivialfälle. Für eine Landingpage für eine neue Funktion, ein Onboarding-Screen-Set oder ein Investor-Deck ist das ein realistisches Tempo – wenn der Kontext gut vorbereitet ist. Was Claude Design nicht ist: ein Tool für Pixel-präzises Feindesign oder für die Übergabe an Entwickler mit sauberen Handoff-Daten. Dafür bleibt Figma das etablierte Werkzeug.

Für wen es wirklich nützlich ist

Claude Design richtet sich erkennbar an Nicht-Designer oder an Designer in frühen Projektphasen.

Product Manager können Konzepte visualisieren, ohne auf Designer-Kapazitäten zu warten. Ein grober Flow, ein Stakeholder-Mockup, eine erste Struktur für ein Feature – das entsteht jetzt im Gespräch, nicht nach drei Wochen Designprozess.

Gründer und Startups können Pitch-Decks und frühe Produktvisionen schnell materialisieren. Der Schritt von Idee zu gezeigtem Produkt wird kürzer.

Marketer können Landing-Page-Entwürfe und Kampagnen-Layouts skizzieren, ohne Design-Briefings schreiben zu müssen. Wenn das Layout stimmt, geht es in Figma oder Canva zur Feinbearbeitung.

Designer selbst profitieren am stärksten in der Explorationsphase: Statt leerer Leinwand gibt es einen Ausgangspunkt. Mehrere Richtungen parallel ausprobieren, ohne jede davon vollständig auszuarbeiten. Die Frage „Wie sähe das aus?” beantwortet sich in Sekunden statt Stunden.

Was Claude Design nicht ersetzt: die konzeptuelle Arbeit dahinter. Wer keine klare Vorstellung vom Nutzer, vom Ziel und vom Kontext hat, bekommt gut aussehendes Design ohne inhaltliche Substanz. Das Tool beschleunigt die Ausführung, nicht das Denken.

Claude Design vs. Figma: Wofür welches Tool

Der direkte Vergleich macht die Unterschiede konkreter als jede Beschreibung. Beide Tools lösen reale Probleme – aber nicht dieselben.

KategorieClaude DesignFigma
Prototyping-GeschwindigkeitSehr hoch: Prototyp in Sekunden aus PromptMittel: manuell, aber volle Interaktivitätskontrolle
Design-SystemAutomatisch aus Code/Dateien extrahiertManuell präzise: Variables, Styles, Auto Layout
KollaborationBegrenzt: URL-Sharing, PreviewExzellent: Real-time Multi-User, Kommentare, Versionierung
PräzisionGut, aber approximativ (KI-generiert)Pixel-perfekt, Vector-Editing
Code-HandoffDirekt: HTML/CSS/JS, Bundle für Claude CodeGut: Dev Mode, Specs, Plugin-Ökosystem
LernkurveMinimal (Chat-basiert)Mittel bis hoch (Canvas-Werkzeuge)
ExportPDF, PPTX, HTML, CanvaFigma-Datei, PDF, CSS, Asset-Export
Primäre ZielgruppeNon-Designer, Ideation, Solo-EntwicklerProfi-Designer, Teams, Produktions-Workflows

Was die Tabelle zeigt: Es ist kein symmetrischer Vergleich. Claude Design gewinnt bei Geschwindigkeit und Zugänglichkeit – für alle, die kein tiefes Design-Wissen haben oder schnell einen Ausgangspunkt brauchen. Figma gewinnt bei Präzision, Kollaboration und dem gesamten Produktions-Workflow. Der Code-Handoff ist der interessante Grenzfall: Claude Design exportiert direkt HTML/CSS/JS und ein Bundle, das mit Claude Code weitergenutzt werden kann – ein vertikaler Stack, der für Solo-Entwickler relevant ist, aber Figmas Plugin-Ökosystem noch nicht erreicht.

Für KMU und Solo-Entwickler verschiebt sich die Rechnung. Wer nie tief in Figma eingestiegen ist, bekommt mit Claude Design sofort brauchbare Outputs. Wer Figma produktiv nutzt, wird Claude Design als Explorations-Tool in seinen Prozess integrieren – nicht als Ersatz.

Was das für Figma und Adobe bedeutet

Der Börsenmarkt reagierte auf den Launch mit Kursausschlägen bei Figma und Adobe. Das ist ein Marktreflexion, keine Prognose – aber es zeigt, wie die Branche die Positionierung liest: nicht als Ergänzung, sondern als Angriff auf frühe Phasen des Design-Prozesses.

Figmas eigene Reaktion war nicht passiv. Mit Figma Make hat Figma selbst eine KI-gestützte Prototyping-Funktion eingeführt. Der Wettbewerb ist damit nicht Claude vs. Figma, sondern ein breiterer Umbau des Design-Tool-Markts, bei dem KI-gestützte Generierung in alle bestehenden Plattformen einzieht.

Analysten sehen das Risiko für Adobe und Figma weniger im direkten Feature-Vergleich als in der strukturellen Verschiebung: Wenn ein LLM-generierter Prototyp in zwei Prompts entsteht, sinkt der wahrgenommene Wert eines Tool-Ökosystems, das primär auf manuellem Aufbau basiert. Das ist mittel- bis langfristig relevant, nicht kurzfristig.

Lovable, Stitch und andere KI-Native-Design-Tools zeigen denselben Trend: Das Spielfeld für frühe Designphasen ist fragmentiert und wächst schnell. Kein einzelnes Tool dominiert, und die Konsolidierung steht noch aus.

Was sich für Entwickler-Teams konkret ändert

Für Teams, die gleichzeitig entwickeln und gestalten – typisch in kleinen Produktteams und bei Freelancern – verschiebt Claude Design den Arbeitsbeginn. Statt mit Wireframe-Briefings zu starten, kann ein Entwickler einen Designentwurf als Ausgangspunkt nehmen, der nah genug am eigenen Design-System ist, um direkt damit zu arbeiten.

Die Integration in bestehende Codebases ist dabei der kritische Faktor. Ein Tool, das generisches Design produziert, schafft Nacharbeit. Ein Tool, das das eigene Komponentensystem versteht und anwendet, reduziert sie. Ob Claude Design dieses Versprechen in der Research-Preview bereits einlöst, hängt von der Qualität der Codebase-Integration ab – das ist der Punkt, den reale Workflows schnell zeigen werden.

Was bleibt: die Übergabe an Entwickler. Figma hat mit Dev Mode und Plugin-Ökosystem einen Standard gesetzt, der Claude Design noch nicht erreicht. Für den Weg von Prototyp zu Production-Code ist der Figma-Export nach wie vor der etablierte Pfad.

Einordnung

Claude Design ist eine konsequente Erweiterung dessen, was Claude bereits gut kann: komplexe Anforderungen verstehen, strukturieren und in konkrete Outputs überführen. Der Schritt von Text zu Code war bereits da. Der Schritt von Text zu Design ist die logische Fortsetzung.

Was das für die Praxis bedeutet: Der Design-Prozess beginnt früher und kostet weniger Vorlauf. Das ist für alle relevant, die heute in frühen Projektphasen auf manuelle Design-Arbeit warten. Figma ist dadurch nicht obsolet – aber der Anteil der Arbeit, der in Figma stattfindet, verschiebt sich Richtung Feinabstimmung und Handoff.

Research Preview bedeutet: Das Tool ist noch nicht fertig. Die kommenden Monate werden zeigen, wie tief die Design-System-Integration tatsächlich geht, ob der Export-Workflow für Entwickler brauchbar wird, und ob der Prototyp-Output stabil genug ist für reale Produktentscheidungen.

Der CPO-Rücktritt aus dem Figma-Board war das klarere Signal als der Launch selbst. Er sagt: Anthropic sieht Figma nicht mehr als Partner, sondern als Wettbewerber. Für Nutzer beider Tools ist das keine schlechte Nachricht – Wettbewerb beschleunigt in der Regel die Entwicklung beider Seiten.