Claude Design vs. Figma: Ersetzt Claude Design Figma?
Kurz gesagt: nicht für Designteams, und nicht 2026. Claude Design übernimmt einen Teil der Arbeit, für die man bisher Figma geöffnet hat: den ersten Entwurf. Gründer, Produktmanager und Marketer, die früher auf einen Designer gewartet oder selbst Kästen in Figma verschoben haben, beschreiben heute eine Seite und bekommen in wenigen Minuten einen funktionierenden Prototyp. Die Detailarbeit, gemeinsame Designsysteme und die Abstimmung im Team finden weiter in Figma statt, und Figma wächst schneller als vor dem Start von Claude Design.
Die spannendere Frage lautet: Wer muss Figma überhaupt noch öffnen? Für immer mehr Menschen ist die Antwort: niemand, bis das Design wachsen muss.
Was ist Claude Design?
Claude Design ist das Tool von Anthropic, mit dem Sie visuelle Arbeiten im Gespräch mit Claude erstellen: Prototypen, Landingpages, Präsentationen und One-Pager. Anthropic Labs hat es am 17. April 2026 als Research Preview gestartet, auf Basis von Claude Opus 4.7.
Was es kann, Stand September 2026:
- Mit fast allem starten. Ein Text-Prompt, Bilder, Dokumente (DOCX, PPTX, XLSX), ein Abbild einer bestehenden Website oder Ihre Codebasis.
- Ihr Designsystem anwenden. Claude Design baut ein Designsystem aus einem GitHub-Repository, aus Design-Dateien oder Uploads und wendet Ihre Farben, Schriften und Komponenten auf jedes neue Projekt an. Admins können das System sperren, damit alles im Corporate Design bleibt.
- Direkt auf der Fläche bearbeiten. Einzelne Elemente kommentieren, Text direkt ändern, Abstände, Farben und Layout per Regler anpassen und seit Juni Elemente verschieben, skalieren und ausrichten.
- Exportieren. PDF, PowerPoint, eigenständiges HTML, Canva sowie Konnektoren zu Tools wie Adobe, Gamma, Lovable, Miro, Replit, Vercel und Wix.
- An den Code übergeben. Claude Design übergibt ein Projekt an Claude Code, das am Design weiterarbeitet, statt von vorn zu beginnen. In Claude Code erstellt und bearbeitet
/designDesignprojekte,/design-syncholt Ihr Designsystem dazu.
Am 16. September 2026 hat Anthropic Claude Design in Claude integriert: Sie können jetzt in jedem Chat, im Artifacts-Tab oder aus Claude Code heraus nach einem Design fragen. Die Funktion ist als Beta in den kostenpflichtigen Plänen verfügbar (Pro, Max, Team und Enterprise) und außer bei Enterprise standardmäßig aktiviert.
Claude Design schreibt Code. Figma zeichnet Vektoren.
Dieser Unterschied erklärt fast alles andere.
Figma ist eine Zeichenfläche. Sie platzieren Frames, Formen und Text, die Datei speichert sie als Vektoren. Entwickler machen aus diesem Bild später Code.
Claude Design überspringt das Bild. Wenn Sie eine Landingpage anfragen, schreibt Claude HTML, CSS und JavaScript und zeigt Ihnen das gerenderte Ergebnis. Was Sie sehen, ist der Code. Deshalb lässt sich ein Prototyp aus Claude Design von der ersten Minute an klicken und scrollen wie eine echte Website, und deshalb kann er ohne Übergabe-Meeting direkt an Claude Code gehen.
Deshalb fühlen sich manche Dinge aber auch schwerfälliger an. Eine manuelle Änderung bedeutet, dass Claude im Hintergrund Code neu schreibt. Kleine Anpassungen dauern also Sekunden statt sofort, und jede davon verbraucht einen Teil Ihres Claude-Kontingents.
Warum alle von einem Figma-Killer sprachen
Der Start wirkte wie eine Kampfansage, und der Markt hat ihn so behandelt:
- Die Aktie fiel. Die Figma-Aktie verlor am Tag des Starts rund 7 %, von 20,32 auf 18,84 US-Dollar, so DesignRush.
- Der Sitz im Board. Anthropics Chief Product Officer Mike Krieger verließ am 14. April das Board von Figma, drei Tage vor dem Start. Figma-CEO Dylan Field sagte später, Anthropic sei in seiner Kommunikation nicht durchgehend offen gewesen.
- Figma nimmt es ernst. Im Mai sagte CFO Praveer Melwani gegenüber Reuters, man könne Claude Design nicht abtun, und verwies darauf, dass Anthropic eigene Modelle mit eigenen Produkten kombinieren kann.
Auch die Kundenstimmen von Anthropic gingen in diese Richtung: Eine Designerin von Brilliant berichtete, dass komplexe Seiten, die in anderen Tools über 20 Prompts brauchten, in Claude Design mit zwei auskamen.
Was seitdem mit Figma passiert ist
Fünf Monate später sehen die Zahlen nicht nach einem Unternehmen aus, das ersetzt wird:
- Q1 2026: 333,4 Mio. US-Dollar Umsatz, 46 % mehr als im Vorjahr, und eine angehobene Jahresprognose.
- Q2 2026: 370 Mio. US-Dollar Umsatz, plus 48 %, das dritte Quartal in Folge mit beschleunigtem Wachstum. Figma hob die Prognose für 2026 erneut an, auf 1,463 bis 1,467 Mrd. US-Dollar.
- KI in Figma hebt ab. Die wöchentlich aktiven Nutzer von Figma Make stiegen gegenüber dem Vorquartal um mehr als 70 %, und mehr als die Hälfte der großen Figma-Kunden nutzt den eigenen KI-Agenten von Figma jede Woche.
Auch beim Produkt hat Figma schnell reagiert. Im Februar kam Claude Code to Figma, das eine laufende App in bearbeitbare Figma-Ebenen verwandelt. Im Mai folgte ein eigener Design-Agent. Auf der Config am 24. Juni kamen Code Layers (funktionierender Code als Ebene auf der Fläche), Motion, Shader, generative Plugins und ein Agent mit Konnektoren und Team-Skills dazu.
Figmas Argument ist einfach: Einen Screen zu generieren ist leicht. Zehn Richtungen nebeneinander zu vergleichen, sie im Team zu besprechen und hundert Screens konsistent zu halten, braucht eine Zeichenfläche. Bisher geben die Kunden Figma recht.
Claude Design vs. Figma im Überblick
| Claude Design | Figma | |
|---|---|---|
| Gemacht für | Gründer, PMs, Marketer und Designer, die schnell eine erste Version wollen | Designer und Produktteams |
| Arbeitsweise | Beschreiben, dann per Chat, Kommentar und Bearbeitung auf der Fläche verfeinern | Auf der Fläche zeichnen, mit KI-Hilfe von Figma Make und dem Figma-Agenten |
| Ergebnis | Funktionierendes HTML, CSS und JavaScript | Vektordesigns, dazu Prototypen, Figma-Make-Apps und Code Layers |
| Designsysteme | Aus Codebasis oder Dateien aufgebaut und automatisch angewendet | Bibliotheken, Komponenten und Variablen, der Branchenstandard |
| Zusammenarbeit | Teilen und kommentieren; meist steuert eine Person | Echtzeit-Zusammenarbeit in derselben Datei |
| Export | PDF, PPTX, HTML, Canva; Übergabe an Claude Code | Dev Mode, Code-Export, MCP-Server für Coding-Agenten |
| Figma-Dateien | Kein nativer Figma-Import oder -Export | Nativ |
| Zugang | Kostenpflichtige Claude-Pläne (Pro, Max, Team, Enterprise) | Kostenloser Plan; bezahlte Plätze enthalten KI-Credits |
| Am besten für | Prototypen, Landingpages, Präsentationen, One-Pager | Produktdesign, Designsysteme, Abstimmung im Team |
Stand: September 2026.
Wo Claude Design gewinnt
- Tempo ab null. Eine ziemlich detaillierte Landingpage dauert Minuten, nicht Stunden.
- Keine Designkenntnisse nötig. Sie beschreiben das Ergebnis, nicht die Arbeitsschritte.
- Es ist schon Code. Keine Lücke zwischen Entwurf und Umsetzung, und ein direkter Weg in Claude Code.
- Ihre Marke, automatisch angewendet. Sobald das Designsystem hinterlegt ist, folgt jede neue Arbeit ihm, ohne dass jemand Farbcodes prüft.
- Präsentationen und One-Pager. Dafür greifen die wenigsten zu Figma, Claude Design kann es gut.
Wo Figma weiter vorn liegt
- Teams. Mehrere Personen bearbeiten, kommentieren und entscheiden in Echtzeit in derselben Datei.
- Varianten vergleichen. Viele Richtungen nebeneinander zu legen, ist genau das, wofür eine Zeichenfläche da ist.
- Präzision. Pixelgenaue Kontrolle, ohne darauf zu warten, dass Code neu erzeugt wird.
- Designsysteme im großen Maßstab. Bibliotheken, Variablen und Komponenten, auf denen Hunderte Screens aufbauen.
- Planbare Kosten. Keine Überraschung, wenn eine intensive Sitzung das KI-Kontingent einer ganzen Woche aufbraucht.
Die Grenzen, die im Launch-Video fehlen
Die Tests seit April kommen immer wieder auf dieselben Punkte:
- Nutzungslimits. Das ist die größte Kritik. Claude Design teilt seine Limits inzwischen mit dem Claude-Chat und Claude Code, und Tester berichten, dass sie einen Großteil ihres wöchentlichen Pro-Kontingents in unter einer Stunde verbraucht haben. Claire Vo stieß beim Testen an ein Ausgabelimit von 200 US-Dollar.
- Kein Figma-Export. Claude Design exportiert PDF, PPTX, HTML und Canva, aber nicht nach Figma. Um ein Design nach Figma zu bringen, braucht es einen Umweg (siehe unten).
- Änderungen kosten Zeit und Tokens. Jede manuelle Änderung wird als Code neu erzeugt, was XDA bei Detailarbeit als langsam empfand.
- Vage Prompts, generische Ergebnisse. Ohne Briefing oder Designsystem landet das Ergebnis beim immer gleichen, überladenen KI-Look. Im Vergleichstest von XDA mit demselben App-Prompt lieferte Figma Make das klarere Layout.
- Noch Beta. Die Version im Chat wird schrittweise ausgerollt und ändert sich häufig.
Ersetzt Claude Design also Figma?
Das hängt davon ab, wer Sie sind:
- Gründer, Produktmanager, Marketer: für einen großen Teil Ihrer Arbeit ja. Eine Landingpage, ein Pitch-Deck oder ein klickbarer Prototyp brauchen weder Figma noch einen Termin im Kalender eines Designers.
- Designer: nein. Claude Design liefert einen schnellen ersten Entwurf und ist ein guter Sparringspartner. Die Detailarbeit, das System und die Abstimmung bleiben in Figma.
- Produkt- und Webteams: Sie werden beides nutzen. Es zeichnet sich ab: Claude Design zum Erkunden und für frühe Prototypen, Figma zum Verfeinern und für Entscheidungen im Team, Code für den Rest.
Was Claude Design tatsächlich ersetzt, ist die leere Zeichenfläche, genau wie wir es bei Google Stitch beschrieben haben. Der Unterschied: Claude Design endet in Code. Damit wird die nächste Frage dringender: Wie wird aus diesem Design eine echte Website, die Ihr Team betreiben kann?
Von Claude Design zur Live-Website auf HubSpot oder WordPress
Ein Projekt aus Claude Design ist HTML. Eine Website, die Ihr Marketing-Team jede Woche bearbeitet, braucht ein CMS-Theme: Templates, bearbeitbare Module, einen Blog, Formulare. Dorthin führen drei Wege.
1. Der Code-Weg: Claude Design → Claude Code → GitHub → transjt
Übergeben Sie das Projekt an Claude Code, lassen Sie das Frontend bauen und in ein GitHub-Repository pushen. Dann verbinden Sie das Repository mit transjt. transjt macht daraus ein natives HubSpot-Theme mit Modulen, die Ihr Team im Drag-and-Drop-Editor bearbeitet, oder ein natives WordPress-Theme für den Block-Editor. Den ganzen Ablauf zeigen wir in Migration zu HubSpot CMS mit KI und Claude Code.
2. Der Design-Weg: Claude Design → Figma → transjt
Wenn Ihr Team in Figma abstimmt, bringen Sie das Design zuerst dorthin: Öffnen Sie es in Claude Code und senden Sie es mit dem MCP-Server von Figma nach Figma, oder importieren Sie das HTML mit einem Tool wie html.to.design oder Anima. Verfeinern Sie es gemeinsam und exportieren Sie es dann mit dem transjt-Figma-Plugin nach HubSpot oder WordPress.
3. Eine einzelne HubSpot-Landingpage
Der HubSpot-Konnektor für Claude kann eine Datei aus Claude Design als neue HubSpot-Landingpage importieren. Für eine einzelne Kampagnenseite ist das praktisch. Für eine ganze Website mit gemeinsamem Header, wiederverwendbaren Sektionen und Blog brauchen Sie stattdessen ein Theme.
Egal welchen Weg Sie wählen: Das Ergebnis ist in wenigen Stunden fertig, und die Website läuft in Ihrem eigenen HubSpot-Account oder auf Ihrem WordPress-Hosting.
Häufige Fragen
Nein. Claude Design ist Teil der kostenpflichtigen Claude-Pläne Pro, Max, Team und Enterprise. Bei Pro, Max und Team ist es standardmäßig aktiv, bei Enterprise muss ein Admin es einschalten. Die Nutzung zählt zu denselben Limits wie der Claude-Chat und Claude Code.
Nicht direkt. Es exportiert PDF, PowerPoint, HTML und Canva. Um ein Design nach Figma zu bringen, öffnen Sie es in Claude Code und senden es mit dem MCP-Server von Figma nach Figma, oder Sie importieren das HTML mit einem Tool wie html.to.design oder Anima.
Nicht, indem es eine Figma-Datei öffnet. Claude Design baut sein Designsystem aus einem GitHub-Repository, aus Design-Dateien oder Uploads auf, daher erzielen Teams mit einem Designsystem im Code die besten Ergebnisse. Claude Code kann Figma-Bibliotheken außerdem über den MCP-Server von Figma lesen.
Beide lösen dasselbe Problem auf unterschiedliche Weise. Google Stitch erzeugt UI aus Prompts und kopiert Designs nach Figma. Claude Design geht bei Designsystemen weiter und übergibt direkt an Claude Code, hat aber keinen Figma-Export und setzt einen kostenpflichtigen Plan voraus.
Nein. Es ersetzt den ersten Entwurf und viel Routinearbeit am Layout. Zu entscheiden, was gebaut wird, ein Produkt konsistent zu halten und Qualität zu beurteilen, bleibt Designarbeit, und die meisten Teams erledigen sie in Figma.
Ja. Übergeben Sie das Design an Claude Code, pushen Sie den Code zu GitHub und verbinden Sie das Repository mit transjt. Oder bringen Sie das Design nach Figma und exportieren es mit dem transjt-Figma-Plugin. Beide Wege liefern ein natives HubSpot- oder WordPress-Theme, das Ihr Team bearbeiten kann.