Claude Design: Was es ist, wie Sie es nutzen und womit Sie es kombinieren

Anthropic hat Claude Design im April 2026 veröffentlicht und die Resonanz war enorm: Das Launch-Video auf X verzeichnet bereits über 60 Millionen Aufrufe, und in Builder-Foren reichten die Urteile von Nutzern, die Canva kündigten, bis hin zu Berichten über ein wöchentliches Nutzungskontingent, das in einer einzigen Sitzung aufgebraucht war. Doch hinter dem ganzen Lärm verbergen sich drei praktische Fragen: Was kann das Tool, was kostet es und sollten Sie es für Ihre App nutzen?

Claude Design ist ein KI-Design-Tool von Anthropic Labs, das im April 2026 als Research Preview veröffentlicht wurde. Sie beschreiben in einem Chat-Fenster, was Sie möchten, und Claude erstellt direkt daneben auf einer Live-Arbeitsfläche Designs, interaktive Prototypen, Slides und One-Pager. Das Tool ist in den Tarifen Claude Pro, Max, Team und Enterprise unter claude.ai/design enthalten.

Dieser Leitfaden beantwortet diese drei Fragen anhand von Quellen: Was Claude Design ist und wie es funktioniert, was es kostet und wo die Nutzungsgrenzen spürbar werden, wie Sie verwertbare Ergebnisse erzielen, wie es sich vom Claude Frontend-Design-Skill unterscheidet (mit dem es ständig verwechselt wird) und welche Rolle es spielt, wenn das, was Sie designen, eine mobile App ist. Er wurde in erster Linie für Gründer geschrieben.

Was ist Claude Design?

Claude Design ist ein Produkt von Anthropic Labs, das im Dialog Designs, Prototypen, Slide-Decks und One-Pager erstellt. Sie tippen links ein, was Sie wünschen, und Claude baut rechts auf einer Arbeitsfläche ein funktionales Design auf. Es wurde am 17. April 2026 als Research Preview veröffentlicht und basiert auf Claudes Opus-Modell.

Anthropic beschreibt es in der Ankündigung zum Launch so, dass es Ihnen ermöglicht, „mit Claude zusammenzuarbeiten, um professionelle visuelle Arbeiten wie Designs, Prototypen, Slides, One-Pager und mehr zu erstellen“. Der eigentliche Clou ist jedoch die Feedbackschleife: Anstatt die Prompts jedes Mal komplett neu aufzusetzen, können Sie direkt auf bestimmte Elemente Inline-Kommentare setzen, Texte direkt auf der Arbeitsfläche bearbeiten oder mithilfe von Reglern Abstände, Farben und Layouts live anpassen.

Zwei Funktionen richten sich speziell an Leute, die Produkte bauen und nicht nur Präsentationen erstellen. Erstens: Design-Systeme. Beim Onboarding kann Claude ein Design-System für Ihr Team erstellen, indem es Ihre Codebase und Design-Dateien analysiert. Jedes nachfolgende Projekt nutzt dann automatisch Ihre Farben, Typografie und Komponenten. Laut Anthropics Einrichtungs-Leitfaden umfasst diese Extraktion Farbpaletten, Typografie, wiederverwendbare Komponenten und Layout-Muster. Zweitens: das Claude Code-Handoff. Sobald ein Design bereit für die Entwicklung ist, schnürt Claude ein Handoff-Paket, das Sie mit einem einzigen Befehl an Claude Code übergeben können.

Ein Begriff, den Sie verstehen sollten, bevor Sie sich darauf verlassen: Anthropic Labs ist das Team, das laut Anthropic „experimentelle Produkte an den Grenzen von Claudes Fähigkeiten entwickelt“. Und „Research Preview“ bedeutet genau das. Funktionen, Limits und Richtlinien haben sich seit dem Start bereits verändert. Betrachten Sie die Details in jedem Artikel über Claude Design – auch in diesem – daher als Momentaufnahme des jeweiligen Veröffentlichungsdatums. Die hier genannten Fakten wurden im Juni 2026 überprüft.

Das 82 Sekunden lange Launch-Video von Anthropic zeigt die Arbeitsfläche in Aktion:

Ist Claude Design kostenlos und welche Tarife enthalten es?

Nein. Claude Design hat keinen kostenlosen Plan: Es ist in den Abonnements für Claude Pro, Max, Team und Enterprise enthalten, wobei es bei Enterprise-Tarifen standardmäßig deaktiviert ist, bis ein Administrator es freischaltet. Zusätzlich zum Abonnement basiert die Nutzung auf einem wöchentlichen Kontingent, das sich alle sieben Tage zurücksetzt.

Dieses Kontingentmodell fällt weitaus mehr ins Gewicht als der reine Abopreis. Laut Anthropics Nutzungs- und Preisseite wird jedes Kontingent pro Nutzer vergeben und nicht innerhalb einer Organisation geteilt. Zusätzliches Guthaben kann erworben werden, und die Freimengen sind ausdrücklich „Beta-Limits, die sich jederzeit ändern können“. Die genaue wöchentliche Menge variiert je nach Tarifstufe. Da Anthropic die Limits während der Preview-Phase bereits angepasst hat, sollten Sie jede konkrete Zahl, die Sie irgendwo dazu lesen, als vorläufig betrachten.

Was heißt das in der Praxis? Intensive Sitzungen verbrauchen das Kontingent schnell, was die mit Abstand häufigste Beschwerde von echten Nutzern ist; der Abschnitt über die Grenzen des Tools unten erklärt die Gründe dafür. Wenn Sie bereits für Claude Pro (für den Chat) oder Claude Code bezahlen, kostet das Ausprobieren von Claude Design Sie keinen Cent extra. Falls Sie das Abonnement jedoch ausschließlich für Design-Arbeiten abschließen möchten, hängt die Rechnung davon ab, wie viele Iterationen Ihre Arbeit erfordert – und genau diese Iterationen lassen das Kontingent schwinden.

Wie nutzen Sie Claude Design?

Öffnen Sie claude.ai/design, beschreiben Sie, was Sie sich vorstellen, und verfeinern Sie das Ergebnis auf der Arbeitsfläche. Dieser Teil dauert nur wenige Minuten. Um jedoch Ergebnisse zu erzielen, die Sie auch anderen präsentieren können, ist ein gezielteres Vorgehen erforderlich. Nutzer, die die besten Resultate erzielen, landen immer wieder bei denselben fünf Gewohnheiten.

1. Richten Sie vor dem ersten Prompt ein Design-System ein

Dies ist der Schritt, der das Ergebnis am stärksten beeinflusst. Laden Sie Ihre Marken-Assets hoch, verknüpfen Sie ein Code-Repository oder füttern Sie das Tool mit bestehenden Design-Dateien und lassen Sie es Ihre Farben, Typografie und Komponenten extrahieren, bevor Sie irgendetwas generieren. Ein Nutzer, der beide Reihenfolgen getestet hat, brachte es im r/ClaudeAI-Thread „Hard-won notes after a few weeks with Claude Design“ auf den Punkt: Ohne Design-System waren die Ergebnisse generisch, nach dem Upload der Marken-Assets führten „die exakt gleichen Prompts zu einem völlig anderen Ergebnis“.

2. Starten Sie mit einer Referenz, nicht mit einer Beschreibung

Referenzbasierte Prompts schlagen reine Textbeschreibungen um Längen. Ein Screenshot eines Layouts, das Sie anspricht, die Seite eines Konkurrenten oder Ihre eigenen bestehenden Screens liefern Claude konkrete Vorgaben; eine Liste von Adjektiven lädt das Tool hingegen zum Raten ein. So verhält sich jedes KI-Design-Tool, und Nutzer von Claude Design berichten, dass der Unterschied enorm ist.

3. Verfeinern Sie auf der Arbeitsfläche, nicht im Chat

Inline-Kommentare zu bestimmten Elementen, direkte Textbearbeitungen und die Einstellregler für Abstände, Farben und Layout ermöglichen gezielte Änderungen, ohne das gesamte Design neu generieren zu müssen. Nutzer berichten zudem, dass die Steuerung über die Arbeitsfläche deutlich weniger des wöchentlichen Kontingents verbraucht als lange Chat-Verläufe, bei denen jede neue Nachricht den gesamten bisherigen Chatverlauf erneut verarbeitet.

4. Speichern Sie Versionen, bevor Sie die Richtung ändern

Claude Design verfügt über eine Versionsverwaltung. Speichern Sie also ab, bevor Sie nach „einem völlig neuen Ansatz“ fragen. Experimente kosten nichts – bis Sie versehentlich genau die Richtung überschreiben, die eigentlich funktioniert hat.

5. Exportieren Sie oder übergeben Sie an Claude Code

Das Exportmenü umfasst ZIP, PDF, PPTX, „Send to Canva“ und eigenständiges HTML sowie das Claude Code-Handoff mit Optionen für einen lokalen Agenten oder das Web, laut Anthropics Erste-Schritte-Leitfaden. Was spürbar fehlt: Es gibt keinen Figma-Export und keinen direkten PNG-Export. Das schränkt den Kreis derjenigen ein, für die das Tool derzeit wirklich nützlich ist.

Was können Sie mit Claude Design erstellen?

Landingpages, Slide-Decks, Marketing-Grafiken, interaktive Prototypen und Konzepte für App-Screens. In den Berichten zum Launch und den Nutzer-Erfahrungen zeichnet sich ein klares Bild ab: Claude Design hat seine Stärken bei eigenständigen visuellen Elementen, die auf der grünen Wiese entstehen. Schwächen zeigen sich dort, wo das Ergebnis exakt zu einem bestehenden System passen muss.

Für Projekte, die auf der grünen Wiese starten, gibt es echtes Lob. Ein Nutzer auf Hacker News bat um das Redesign eines Footers, erhielt „vier Optionen, von denen die vierte ziemlich gut war“, und ließ den Gewinner von Claude Code programmieren und bereitstellen. Andere berichten von der Kündigung ihrer Canva-Abos, weil Claude Design dieselben Aufgaben abdeckt, und Führungskräfte in Unternehmen erstellen damit ihre eigenen Pitch-Decks. Das am meisten gelobte Feature ist die Verbindung zu Claude Code. Das Fazit eines Anwenders nach wochenlanger Nutzung aus demselben r/ClaudeAI-Thread mit praxisnahen Erkenntnissen: Das Tool glänzt vor allem bei „dem Kreislauf von ‚Ich habe eine Idee‘ über einen funktionierenden Prototyp bis hin zu Claude Code, der die eigentliche App daraus baut“. Das 16-minütige Walkthrough-Video von Peter Yang zeigt fünf Anwendungsfälle, darunter die Erstellung einer mobilen Fitness-App in einem Rutsch, falls Sie sich einen Eindruck verschaffen möchten, bevor Sie es selbst testen.

Dort, wo exakte Übereinstimmungen gefordert sind, knirscht es hingegen im Getriebe. Marketing-Teams stoßen an die Grenzen des Exports (etwa bei einem Instagram-Karussell, das als HTML statt als Bilddatei exportiert wird), und die Arbeit mit Design-Systemen offenbart Konsistenzprobleme, auf die der nächste Abschnitt näher eingeht. Zu wissen, in welche dieser beiden Kategorien Ihre Aufgabe fällt, sagt Ihre Erfahrung mit dem Tool besser voraus als jeder Testbericht.

Was sind die Grenzen von Claude Design?

Fünf Einschränkungen tauchen in den Nutzerberichten und Anthropics eigener Dokumentation immer wieder auf: Das Nutzungskontingent verbraucht sich schnell, die Exporte sparen Figma und PNG aus, die Ergebnisse weichen vom zuvor erstellten Design-System ab, die Standard-Ästhetik hat einen hohen Wiedererkennungswert und die Preview enthält noch ungelöste Fehler. Keine davon ist für einen ersten Entwurf fatal. Aber alle fallen ins Gewicht, wenn Sie darauf aufbauend produktiv gehen wollen.

Der Verbrauch des Kontingents ist die Beschwerde Nummer eins. Claude Design basiert auf Opus, und iterative Sitzungen sind teuer: Ein Nutzer auf Hacker News berichtete, dass er 95 % seines wöchentlichen Design-Kontingents in einer einzigen Feedback-Runde aufgebraucht hat; ein anderer erzielte in zehn Minuten großartige Ergebnisse, „und danach war mein Kontingent verbraucht“. Die Steuerung direkt auf der Arbeitsfläche hilft hierbei (siehe die Anleitung oben), aber Sie sollten sich darauf einstellen, dass dieses Kontingent Ihre Arbeitsweise prägen wird.

Exporte sparen die beiden am häufigsten nachgefragten Formate aus. Kein Figma-Export bedeutet, dass es keine editierbare Übergabe an das Tool gibt, in dem die meisten Designer und Agenturen arbeiten. Der von Nutzern beschriebene Workaround besteht darin, HTML zu exportieren und das Ganze manuell neu aufzubauen. Kein PNG-Export bedeutet, dass für Marketing-Assets ein zusätzlicher Konvertierungsschritt von HTML zu Bild erforderlich ist. Die offizielle Liste der Exportformate umfasst ZIP, PDF, PPTX, Canva, eigenständiges HTML und Claude Code.

Die Genauigkeit bei Design-Systemen ist wackelig. Die Funktion, ein Design-System aus Ihrer Codebase zu erstellen, existiert zwar, aber Tester berichten von generierten Komponenten, die nicht zu dem System passen, das das Tool gerade erst erstellt hat. Das ernüchternde Fazit eines Designers im r/UXDesign-Thread „Client just replaced me with Claude design“: „Es kann Komponenten im Design-System nicht nachbilden. In einigen Fällen ist es nicht einmal nah dran.“ Für einen Gründer, der Konzepte durchspielt, ist das nur ein Schönheitsfehler; für ein Team, das auf Markenkonsistenz achten muss, ist es ein Ausschlusskriterium.

Die Standard-Ästhetik hat einen hohen Wiedererkennungswert. Ohne Steuerung driftet das Ergebnis schnell in denselben Look ab. Wie es ein Nutzer im r/ClaudeAI-Thread zur Frage, ob Claude Design nützlich oder nur Hype ist, formuliert hat: „Ohne Vorgaben driftet es ab zu Inter und lila Farbverläufen. Sagen Sie dem Tool, was es nutzen soll, nicht nur, was es vermeiden soll.“ Dies ist das stärkste Argument für den Grundsatz „Design-System zuerst“. Und das ist kein reines Claude-Problem; jedes generative Design-Tool hat seinen statistischen Schwerpunkt.

Es ist eine Preview – und Anthropic macht daraus keinen Hehl. Die offizielle Liste bekannter Probleme führt unter anderem Inline-Kommentare auf, die gelegentlich verschwinden, bevor Claude sie liest, Speicherfehler in der Kompaktansicht sowie Verzögerungen bei der Verknüpfung großer Repositories. Laut dem Admin-Leitfaden gibt es bisher weder Audit-Protokolle noch ein Nutzungs-Tracking – was für Unternehmen mit Compliance-Anforderungen eine Rolle spielt.

Fazit: Dies ist eine erst wenige Wochen alte Research Preview von einem Team, das extrem schnell entwickelt. Jede der oben genannten Grenzen ist von der Sorte, die mit der Zeit behoben wird. Die Liste zeigt, was Sie prüfen sollten, bevor Sie sich voll darauf verlassen, ist aber kein Grund, das Tool nicht auszuprobieren.

Was ist der Claude Frontend-Design-Skill und worin unterscheidet er sich?

Beide teilen sich einen Markennamen, sonst nichts. Der Frontend-Design-Skill ist eine Instruktionsdatei für Claude Code, die dafür sorgt, dass generierte Weboberflächen nicht nach standardisiertem KI-Design aussehen. Claude Design hingegen ist ein eigenständiges Produkt mit einer eigenen Arbeitsfläche. Der Skill verbessert Code, den Claude Code ohnehin schon schreibt; das Produkt erstellt Entwürfe in einer separaten Anwendung.

Die Verwirrung ist verständlich, aber eine Unterscheidung lohnt sich, da beide Tools unterschiedliche Probleme lösen. Der Frontend-Design-Skill wird von Anthropic herausgegeben, verzeichnet laut Anthropics Plugin-Verzeichnis über 860.000 Installationen und aktiviert sich automatisch, sobald Sie Claude Code bitten, Webkomponenten oder -seiten zu erstellen. Unter der Haube handelt es sich um eine Markdown-Datei mit Design-Richtlinien: Sie weist Claude Code an, abgenutzte Schriftarten, „lila Farbverläufe auf weißem Hintergrund“ sowie Schema-F-Layouts zu vermeiden und stattdessen auf eine charakteristische Ästhetik zu setzen. Der Skill generiert selbst nichts, ruft keine externen Werkzeuge auf und beschränkt sich laut eigener Beschreibung auf Webarbeiten.

Damit ist er eine von drei verschiedenen Formen, die ein „KI-Design-Skill“ annehmen kann:

Die dritte Zeile beschreibt das, was wir entwickeln. Sleeks sleek-design-mobile-apps-Skill (über 201.000 Installationen auf skills.sh) verbindet Claude Code mit der REST-API von Sleek: Der Agent erstellt ein Projekt, beschreibt Screens in natürlicher Sprache und erhält gerenderte, mobil-optimierte App-Designs samt Code zurück – ohne das Terminal zu verlassen. Der Skill und die API sind im Sleek Pro-Tarif enthalten. Wir haben den Agent-Workflow in Wie KI-Agents mobile Apps mit Sleek designen beschrieben.

Ein faires Fazit: Prompt-basierte Skills sind kostenlos und schulen den Designgeschmack; Claude Design bietet eine Arbeitsfläche und einen Allround-Designer; ein API-gestützter Skill stattet Ihren Agenten mit einem echten Design-Tool aus, das klare Vorstellungen von seinem Fachgebiet hat.

Kann Claude Design mobile Apps entwerfen?

Ja, im Sinne von: Sie können nach Screens in Smartphone-Größe fragen und erhalten diese auch. Aber Mobile ist eher eine Prompt-Anweisung als ein echter Produktfokus: Anthropics eigene Anleitung rät dazu, „anzugeben, ob Ihr Design auf Mobilgeräten, Tablets und Desktops funktionieren muss“. Dahinter stehen jedoch weder Device-Frames noch iOS- oder Android-Konventionen noch Werkzeuge für Multi-Screen-Apps.

Diese Lücke zeigt sich darin, wie die Community die Frage beantwortet. Als ein Entwickler auf r/ClaudeAI fragte: „How good is Claude for mobile app UI design?“, nachdem Apple seine App wegen der Design-Spam-Richtlinie abgelehnt hatte, empfahl die Community spezialisierte mobile Design-Tools statt Claude. Das Muster leuchtet ein: Das Design mobiler Apps ist ein Spiel mit festen Konventionen. Screens benötigen echte Geräteabmessungen, native Navigationsmuster, plattformkonforme Touch-Targets und visuelle Konsistenz über einen Flow von 10 Screens hinweg. Eine universelle Arbeitsfläche überlässt all diese Spezifikationen bei jedem Prompt Ihnen.

Das Interessante für Claude-Nutzer: Die Kombination beider Welten funktioniert besser als der bloße Ersatz. Die Feedbackschleife, die Claude Design populär gemacht hat – mit KI designen und das Ergebnis an Claude Code zur Umsetzung übergeben –, ist genau die Schleife, die Sleek für Mobile nutzt: Claude Code steuert Sleek über den Agent-Skill, Sleek generiert iOS- und Android-Screens, die den Plattformkonventionen folgen und innerhalb eines Flows konsistent bleiben. Die Designs lassen sich als native Figma-Ebenen oder in React mit Tailwind CSS exportieren, damit derselbe Agent sie umsetzen kann. Über 60.000 Menschen haben bereits mehr als 220.000 mobile App-Screens mit Sleek entworfen.

Die praktische Antwort für einen Gründer mit einer App-Idee lautet daher: Nutzen Sie Claude Design für das Pitch-Deck der App und die Landingpage zur Vermarktung. Verwenden Sie für die App-Screens selbst ein Tool, das voll und ganz auf Mobile spezialisiert ist. Unser vollständiger Leitfaden zum KI-Design mobiler Apps führt Sie durch den gesamten Prozess vom Konzept bis zu den exportierten Screens, und unser Ranking der KI-Design-Tools für mobile Apps vergleicht das Feld, falls Sie die Optionen selbst bewerten möchten.

Häufig gestellte Fragen

Wo Claude Design in Ihren Stack passt

Claude Design hat die Aufmerksamkeit verdient. Für Decks, Landingpages und erste visuelle Entwürfe ist es ein echtes Werkzeug mit einer echten Verbindung zu Claude Code. Und wenn Sie ohnehin für Claude Pro bezahlen, kostet das Ausprobieren nichts außer Nutzungskontingent. Gehen Sie mit der Gewohnheit „Design-System zuerst“ an die Sache heran, behalten Sie die Liste der Exportformate im Hinterkopf und bewerten Sie das Tool anhand der Version dieser Woche – statt auf den Hype oder die Beschwerden der ersten Launch-Tage zu hören.

Kombinieren Sie es für die eigentliche App mit einem Spezialisten. Starten Sie kostenlos mit Sleek: Beschreiben Sie Ihre mobile App oder passen Sie eine der Vorlagen für mobile Apps an, erhalten Sie in wenigen Minuten professionelle iOS- und Android-Designs und exportieren Sie diese nach Figma, in Code oder an Ihren KI-App-Builder, sobald Sie bereit für die Umsetzung sind. Wenn Sie in Claude Code arbeiten, installieren Sie den Agent-Skill mit npx skills add sleekdotdesign/agent-skills -s sleek-design-mobile-apps und überlassen Sie das Designen Ihrem Agenten.