Claude Design Anleitung: Vom Designsystem bis zur Animation

Claude Design ist ein Werkzeug von Anthropic, mit dem du Designs per Prompt erzeugst und danach direkt bearbeitest. Mit den letzten Updates sind die Limits und der Funktionsumfang deutlich gewachsen. In dieser Anleitung gehe ich alle wichtigen Artefakte durch, die du damit erstellen kannst, und zwar in fünf Stufen:

1. Designsystem
2. Klickbarer App-Prototyp
3. Pitchdeck
4. Landing Page
5. Animation

Damit das nicht abstrakt bleibt, arbeiten wir an einem durchgehenden Beispiel: einem eigenen Software-as-a-Service-Produkt (SaaS), das wir später mit Claude Code entwickeln wollen.

Das Beispielprojekt: ein Feedback-Analyzer

Unser fiktives Produkt heißt Signal und ist ein „Voice of Customer Analyzer“. Die App nimmt unstrukturiertes Kundenfeedback entgegen und macht daraus eine klare, priorisierte Auswertung: Welche Themen tauchen auf, wie ist die Stimmung dazu, was ist dringend?

Das Problem dahinter kennt jedes Produktteam. Feedback liegt überall verstreut: im Supportsystem, in App-Store-Bewertungen, Google-Rezensionen, auf Reddit oder in Umfragedateien. Das alles strukturiert zusammenzuführen ist aufwendig. Signal sammelt das Feedback per Upload oder über Integrationen ein, analysiert es mit KI und bereitet es in einem visuellen Report mit konkreten To-dos auf. Zielgruppe sind Unternehmen mit einem SaaS-Produkt, die Feedback dazu bekommen.

Claude Design öffnen

Claude Design rufst du im Browser unter claude.ai/design auf. Inzwischen ist es auch in die Claude Desktop App integriert: Unten in der linken Navigationsleiste findest du den Reiter Design, der Claude Design in einem eigenen Fenster öffnet.

Die Startseite ist überschaubar. Oben kannst du direkt loslegen und wählst die Art des Artefakts:

Darunter siehst du deine bisherigen Projekte, deine Designsysteme und Templates.

Stufe 1: Ein Designsystem in Claude Design erstellen

Bevor du ein Produkt gestaltest, brauchst du ein Designsystem. Das ist ein visueller Leitfaden für deine Marke: Logo, Farben, Schriftarten und Standard-Komponenten. Du bereitest es einmal sauber auf und verwendest es danach für alle weiteren Designs. Genau deshalb fange ich immer damit an.

Designsystem anlegen

Wechsle in den Reiter Design System und klicke auf Create Design System. Du kannst das Designsystem direkt in Claude Design erstellen oder mit Claude Code arbeiten. Ich wähle hier Claude Design.

Danach folgt ein kurzer Fragebogen. Ins erste Feld kommt das Briefing zu deiner Firma oder deinem Produkt. Ich habe die Beschreibung von Signal eingefügt: was die App macht, welches Problem sie löst und für wen sie gedacht ist.

Assets mitgeben

Als Nächstes kannst du Claude Material mitgeben, an dem es sich orientieren soll. Dafür gibt es mehrere Wege:

• GitHub verbinden: Du verknüpfst ein Repository, also den Online-Speicher deines Codes, etwa deiner Website oder App. Claude schaut sich den Code an und zieht Farben, Stylings und Komponenten heraus.
• Code hochladen: Statt GitHub kannst du Code-Dateien auch direkt hochladen.
• Figma-Datei hinzufügen: Hast du schon ein Design in Figma, nutzt du es als Grundlage.
• Logos, Fonts und Bilder hochladen: Direkt von deinem Rechner.

Ich habe den letzten Weg genommen. Auf einer Designplattform hatte ich ein Branding gefunden, dessen Farbpalette und visuellen Look ich mochte. Das Bild habe ich gespeichert, hochgeladen und dann auf Continue to Generation geklickt.

Die Rückfragen beantworten

Die Erstellung dauert ein paar Minuten, weil das Designsystem recht umfangreich wird. Vorher stellt Claude noch Rückfragen, um besser zu verstehen, was es erarbeiten soll. Bei mir waren das unter anderem:

• Was soll mit der Inspiration passieren? Claude hatte erkannt, dass mein Bild von einer anderen Marke stammt. Ich habe angegeben, dass es nur als Inspiration dient und eine eigene Brand Identity für Signal entstehen soll.
• Gibt es schon ein Logo? Nein, Claude soll eins mit anlegen.
• Welche Designrichtung? Ich habe „Clean, Analytical, Data Forward“ gewählt, das passt zu einem Analyse-Tool.
• Welche Sprache für die Texte? Englisch.
• Was soll das Designsystem abdecken? Web-App und Marketing-Website, in der Tiefe das Standard-Set mit Buttons, Eingabefeldern und Co.

Das fertige Designsystem

Am Ende steht ein komplettes Designsystem: Briefing und Anwendungsbeschreibung, visuelle Grundlagen, ein minimalistisches Logo, Farbakzente und Abstufungen, zusätzliche Farben für Meldungen in der App, Buttons, Tabs und Schriftarten. Sogar ein Mockup eines fertigen Reports war dabei.

Das Designsystem kannst du jederzeit weiter bearbeiten. Entweder schreibst du Claude im Chat, was du ändern möchtest, oder du gibst Feedback direkt an einzelnen Komponenten. Über Edit öffnest du eine Komponente, etwa das Report-Mockup, in einem eigenen Fenster und arbeitest dort weiter.

Stufe 2: Einen klickbaren App-Prototyp erstellen

Mit dem Designsystem im Rücken geht es an das Kernprodukt. Ziel ist ein klickbarer Prototyp, also eine Vorschau der App, durch die man sich wie durch die echte Anwendung klicken kann. Er dient später als Vorlage für die Entwicklung mit Claude Code.

Der Prompt

Auf der Startseite wähle ich das Designsystem aus und gebe folgenden Prompt ein:

Kannst du bitte einen App-Prototyp mit mehreren Seiten erstellen, basierend auf dem Designsystem? Dort gibt es schon eine vollständige UI-Ansicht der App, die ich gerne wiederverwenden möchte.

Workflow: Man landet auf dem Dashboard. Von dort kann man Feedback hochladen, als CSV-Datei oder über externe Systeme. Daraus wird dann eine Collection bzw. ein Report angelegt.

Über das Plus-Symbol im Eingabefeld kannst du weiteren Kontext hinzufügen: Dateien, andere Projekte als Referenz, eine GitHub-Verbindung, Code oder Skills. Außerdem wählst du hier Templates und das Modell. Ich habe mit Fable 5 gearbeitet.

Rückfragen zum Prototyp

Auch hier fragt Claude erst nach. Meine Antworten:

• Was zeigt das Dashboard? Eine Liste bestehender Collections bzw. Reports, zusammenfassende KPIs, zuletzt analysierte Themen und einen prominenten Einstieg „Feedback analysieren“.
• Welche externen Systeme stehen beim Import zur Wahl? Alle vorgeschlagenen.
• Wie wird nach Feedback gesucht? Je nach Quelle per Suchbegriff bzw. Produktname oder über eine Systemverbindung.
• Ist das Anlegen einer Collection ein eigener Schritt? Nein, die Collection entsteht automatisch beim Import.
• Wie sieht der Report aus? Die bestehende Übersicht aus dem Designsystem wiederverwenden.
• Wie interaktiv soll der Prototyp sein? Voll klickbar, jeder Schritt führt zum nächsten.

Der fertige Prototyp

Heraus kam ein funktionierendes Dashboard mit KPIs, bestehenden Reports und zuletzt analysierten Themen. Über „Neue Feedbackanalyse“ startet ein dreistufiger Assistent: Quelle wählen (CSV-Datei, Text einfügen, App Store, Zendesk, Reddit oder Umfrage, auch mehrere gleichzeitig), Collection konfigurieren, Analyse starten. Danach folgt eine Animation, die die Verarbeitung im Hintergrund andeutet, und schließlich der Report.

Der Report zeigt die Themen, die Stimmungsverteilung, die Anzahl der Bewertungen je Quelle und Tabs für einzelne Bereiche. Klickst du auf ein Thema, etwa die Ladezeit der App, klappt eine empfohlene Maßnahme auf, die du auf die Roadmap oder an ein Projektmanagement-Tool wie Jira übergeben kannst. Darunter stehen die auffälligsten Bewertungen zu diesem Thema. Alle Zahlen darin sind natürlich Platzhalterdaten.

Zusätzlich blendet Claude Tweaks ein. Das sind kleine Regler, mit denen du Varianten durchspielst, zum Beispiel welche Seite als Startseite dient oder wie lange die Analyse-Animation dauert.

Den Prototyp verfeinern: Markieren, Kommentieren, Bearbeiten

Ein paar Stellen waren noch nicht fertig. Die Benutzereinstellungen fehlten zum Beispiel ganz, und der Fragebogen war unschön umgebrochen. Für solche Anpassungen bietet Claude Design drei Werkzeuge:

1. Markieren und direkt beauftragen. Im Markierungsmodus klickst du ein Element an und schreibst eine Anweisung dazu. Ich habe den Profil-Button markiert und geschrieben:

Bitte mach den Button klickbar und öffne dann die User Settings, sodass ein Nutzer seine eigenen Daten einsehen und bearbeiten und seine Pläne verwalten kann.

Die Anweisung landet im Chat, und Claude setzt sie um. Was mir dabei gefällt: Claude prüft seine Ergebnisse selbst. Nach der Umsetzung schaut es sich die Oberfläche noch einmal an, analysiert sie und bessert nach, bevor es fertig meldet.

2. Kommentare sammeln. Statt jede Änderung einzeln abzuschicken, kannst du mehrere Kommentare an verschiedene Elemente hängen, etwa „noch ein Reiter für Spracheinstellungen“ und „noch ein weiterer Menüpunkt in den Einstellungen“. Am Ende hakst du alle an und schickst sie gesammelt mit Send to Claude.

3. Edit Mode. Kleine Änderungen machst du selbst, ohne Prompt. Du klickst ein Element an und änderst etwa einen Text von „Einstellungen“ in „Settings“. Links siehst du die Hierarchie der Code-Elemente, rechts kannst du das Styling anpassen, mit CSS oder im einfacheren Simple Mode wie in einem Baukasten.

Teilen, exportieren, an Claude Code übergeben

Bist du zufrieden, speicherst du den Prototyp. Danach hast du mehrere Möglichkeiten:

• als Link mit deinem Team teilen,
• als PDF, PowerPoint oder HTML-Datei exportieren (mit HTML kann sich dein Team durch den Prototyp klicken),
• direkt an Claude Code senden, um ihn zu entwickeln.

Ein wichtiger Hinweis zum letzten Punkt: Ein Prototyp ist noch keine fertige Software. Ich würde ihn nicht einfach „stumpf“ in Claude Code hineinprompten. Wenn daraus ein echtes Produkt werden soll, brauchst du einen strukturierten Ansatz mit Spezifikation, Planung und Tests. Nur so behältst du bei wachsenden Projekten die Kontrolle, und Claude macht nicht nebenbei Dinge kaputt.

Stufe 3: Ein Pitchdeck mit Claude Design erstellen

Nehmen wir an, Signal hat erste Kunden gewonnen, und jetzt soll Kapital her, um das Team aufzubauen, Marketing zu starten und die Entwicklung zu finanzieren. Dafür brauchst du ein Pitchdeck.

Wieder auf der Startseite wähle ich das Designsystem, als Template Slides und als Modell Fable 5. Der Prompt:

Es steht ein Investorenpitch für eine Pre-Seed-Finanzierungsrunde an. Ich benötige ein Pitchdeck für das SaaS Signal. Kannst du auch den Wettbewerb analysieren? Kernkunden sind Product Manager und Product Owner von SaaS-Unternehmen.

[Produktbriefing einfügen]

Die Rückfragen drehen sich diesmal um die Inhalte des Pitches. Meine Beispielantworten:

Heraus kamen elf Folien, inklusive Sprechernotizen: Titelfolie, Problem („Produktteams ertrinken in verstreutem Feedback“), Lösung, Zielgruppe, Pricing, Traction, Marktanalyse, Wettbewerb und Abgrenzung, Dreijahresplan und Team.

Das ist kein fertiges Investoren-Deck, aber eine sehr gute Basis. Mit denselben Werkzeugen wie beim Prototyp (Markieren, Kommentieren, Edit Mode) verbesserst du einzelne Folien weiter. Die recherchierten Marktzahlen solltest du vor einem echten Pitch unbedingt selbst prüfen.

Stufe 4: Eine Landing Page mit Claude Design erstellen

Um Signal zu vermarkten, brauchst du eine Landing Page: eine Seite, auf der sich Interessierte über das Produkt informieren und sich anmelden oder kaufen können.

Der Prompt ist diesmal kurz, weil das Designsystem und die Rückfragen den Rest erledigen:

Kannst du bitte eine Landing Page für das Produkt Signal erstellen?

Designsystem auswählen, als Template Prototype, Modell Fable 5. Meine Antworten auf die Rückfragen:

• Primäre Zielgruppe: Product Manager und Founder.
• Haupt-Call-to-Action: Warteliste, da das Produkt noch nicht live ist.
• Sektionen: Hero mit Produkt-Mockup, „So funktioniert's“, Feature-Grid, FAQ.
• Pricing: 49 € für den Pro-Plan.
• Tonalität: nach Designsystem.
• Varianten: zwei bis drei Hero-Varianten.
• Sprache: Deutsch.

Claude hat zwei Varianten erstellt. Beide sind clean gehalten, wie es das Designsystem vorgibt: ein Produkt-Mockup im Hero-Bereich, drei Schritte zur Nutzung, Features, Kundenstimmen, Preispläne, ein aufklappbares FAQ und ein abschließender Call-to-Action. Die zweite Variante ordnet den Hero zentriert an, ansonsten unterscheiden sie sich nur leicht.

Auch hier gibt es Tweaks, etwa um Beschriftungen anzupassen oder die Kundenstimmen auszublenden. Ein Tweak betraf ein Zusatz-Upgrade, das Claude offenbar aus dem Designsystem übernommen hatte. Claude bedient sich also auch an Inhalten aus dem Designsystem, nicht nur an dessen Optik.

Wenn du tiefer einsteigen willst, wie du Webseiten baust, die nicht nach dem typischen KI-Einheitslook aussehen, findest du meinen kompletten Ablauf in Webseiten mit Claude Design erstellen.

Stufe 5: Animationen mit Claude Design erstellen

Zum Schluss soll die Landing Page eine animierte Sektion bekommen. Das geht genauso einfach wie alles andere. Ich wähle das Designsystem, als Template Animation, Modell Fable 5, und gebe diesen Prompt ein:

Ich möchte eine Animation für meine Landing Page des Produkts Signal erstellen. Animiere Folgendes: Unstrukturiertes Feedback aus verschiedenen Quellen wird zusammengeführt und landet in einem visuell ansprechenden Report, wie er im Designsystem gezeigt wird. Der Übergang soll klar sein. Dazu eine kleine Animation, die die KI-Analyse visualisiert.

Das Ergebnis: Feedback aus verschiedenen Systemen fliegt zusammen, wird von der KI analysiert, und am Ende steht das Report-Mockup. Über die Tweaks steuerst du die Geschwindigkeit, blendest Bedienelemente zum Bearbeiten ein und lädst die Animation als MP4 herunter, etwa zum Teilen auf Social Media.

Animation in die Landing Page einbauen

Um die Animation auf der Website zu nutzen, exportierst du sie über Share als Standalone HTML. Die Datei hängst du anschließend im Landing-Page-Projekt an und gibst Claude die Anweisung:

Entwurf 1A kannst du löschen. Bitte setze die angehängte Animation in der Hero-Sektion meiner Landing Page anstelle des Produkt-Mockups ein.

Danach läuft die Animation im Hero-Bereich der Landing Page. Bei mir war an dieser Stelle übrigens das Nutzungslimit erreicht. Bei mehreren großen Artefakten am Stück solltest du das im Hinterkopf behalten.

Von Claude Design zu Claude Code

Ist die Landing Page fertig, übergibst du sie zur Entwicklung: Share → Send to Claude Code. Claude Design erzeugt einen Prompt, den du kopierst und in Claude Code einfügst.

In der Praxis habe ich gemerkt, dass bei dieser Übergabe manchmal Details verloren gehen. Ich lade mir deshalb oft zusätzlich das Standalone-HTML herunter und gebe es Claude Code als Vorlage mit. Inzwischen geht es noch direkter: Mit dem /design-Skill holst du die Funktionen von Claude Design direkt in dein Projekt. Wie das funktioniert, zeige ich in Design direkt in Claude Code: der /design-Skill.

Wenn du mit Claude Code noch nicht gearbeitet hast, starte mit meiner Anleitung, wie du mit Claude Code deine erste Web-App entwickelst.

Zusammenfassung

Claude Design deckt den kompletten visuellen Teil eines Produkts ab. Die Reihenfolge, die sich für mich bewährt hat:

1. Designsystem zuerst, damit alles Weitere einheitlich aussieht.
2. Prototyp des Kernprodukts, klickbar und mit Platzhalterdaten.
3. Pitchdeck mit recherchiertem Markt und Wettbewerb als Basis.
4. Landing Page in mehreren Varianten.
5. Animation als Standalone-HTML für die Landing Page.

Die Rückfragen, die Claude vor jeder Generierung stellt, sind dabei kein Hindernis, sondern der Hebel für gute Ergebnisse. Je genauer du antwortest, desto weniger musst du nacharbeiten.

Ein Design ist aber noch keine Software. Sobald aus dem Prototyp ein Produkt werden soll, das echte Nutzer:innen verwenden und für das sie bezahlen, brauchst du einen strukturierten Entwicklungsprozess mit Spezifikation, Architektur, Plan, Umsetzung und Tests. Claude Design liefert dir dafür die visuelle Vorlage.