ANTHROPIC · CLAUDE DESIGN

Prototypen und Decks mit Claude Design.

Vom Text-Prompt zum klickbaren Prototyp in Minuten. Kein Figma, kein Designer, kein Warten.

Prompt kopieren

Claude.ai Pro · Max · Team · Enterprise · auch in DE/EU

Was Claude Design besonders macht.

Vier Mechaniken, die Claude Design von einem klassischen Mockup-Tool unterscheiden, und vom reinen Chat erst recht.

01 · CANVAS LESEN

Plugin sieht deinen Canvas.

Claude liest dein Figma-File direkt: Layers, Typo, Farben, Komponenten, ohne Screenshot, ohne Copy-Paste. Das Plugin versteht den Canvas wie ein Designer, der neben dir sitzt.

02 · DREI VARIANTEN

Varianten auf einen Blick.

Auf einen Prompt hin liefert Claude drei durchdachte Design-Varianten mit Vorschau-Thumbnail direkt im Plugin-Panel. Du vergleichst, wählst und wendest mit einem Klick an, kein neues Datei-Tab.

03 · VORHER / NACHHER

Frame direkt umgebaut.

Claude wendet die gewählte Variante direkt auf den bestehenden Figma-Frame an, nicht als Kopie daneben, sondern als In-Place-Update. Der Vorher-Zustand bleibt als Undo-Schritt erhalten.

04 · LAYER-BAUM VON CLAUDE

Sauberer Layer-Baum inklusive.

Generierte Frames landen nicht als flattened Bitmap im Figma-File, sondern als sauber benannter Komponentenbaum: editierbar, benannt, bereit für den nächsten Designer-Handoff.

Wie Claude Design wirklich funktioniert.

Claude Design ist unter claude.ai/design erreichbar, ein dediziertes Interface mit Chat-Bereich links und Live-Canvas rechts. Man beschreibt, Claude baut.

Beim ersten Start richtet man optional ein Design-System ein: Claude liest Code-Repositories, Figma-Exporte, Slide-Decks oder einzelne Assets (Logos, Farbpaletten) und extrahiert daraus automatisch Farben, Typografie und Layout-Muster. Alle folgenden Projekte verwenden dieses System, ohne dass man es jedes Mal neu einrichten muss.

Ist ein erster Entwurf generiert, gibt es vier Wege zur Iteration: Chat für strukturelle Änderungen, Inline-Kommentare direkt auf einzelne Elemente, Adjustment-Slider die Claude selbst ins Prototype einbaut, und den Draw-Mode für handskizzierte Annotationen. Ist man zufrieden: Export als ZIP, PDF, PPTX, HTML, Canva oder direkter Handoff an Claude Code.

Wer Claude Design wirklich nutzt.

01 · Beraterin

Kunden-Pitches selbst bauen.

Sarah importiert ihr Firmen-Template einmalig, schreibt den Pitch-Kontext als Prompt und hat in 20 Minuten ein vollständiges, markenkonformes Deck. Export: PPTX für die Präsentation, PDF für den Client.

02 · Solo-SaaS-Gründer

Prototyp für den Demo-Day.

Max beschreibt seinen Onboarding-Flow, gibt seine Brand-Farben aus dem Figma-Export an und bekommt einen klickbaren Prototyp für den Demo-Day. Bei positivem Feedback: Handoff direkt an Claude Code.

03 · Agentur-Inhaber

Varianten live im Meeting.

In der Vorbesprechung entstehen drei Designvarianten für eine Landing-Page-Idee, live vor dem Kunden. Der Kunde kommentiert direkt im geteilten Link, keine E-Mail-Schleifen mehr.

04 · Coach mit Kurs-Produkt

Kurs-Landing-Page ohne Webdesign.

Lena gibt Claude ihre Zielgruppe, den Kursinhalt und drei Referenzseiten als Screenshots. Claude generiert drei Layout-Varianten. Lena wählt eine, feint sie per Chat nach und exportiert als HTML zur Übergabe an ihren Entwickler.

Dein Prototypen-Prompt zum Kopieren.

Dieser Prompt enthält alle vier Komponenten des bewährten Formats: Ziel, Layout, Inhalt, Zielgruppe. Platzhalter in [eckigen Klammern] durch deine Angaben ersetzen, den Rest schreibt Claude.

design_prompt.txt
Du bist ein erfahrener UI/UX-Designer. Ich beschreibe dir ein Projekt, du generierst einen vollständigen, klickbaren Prototyp.

## MEIN PROJEKT

**Was:** [Produkt oder Seite, z.B. "Landing Page für mein B2B-Coaching-Angebot"]
**Zielgruppe:** [Wen soll es ansprechen, z.B. "Führungskräfte in mittelständischen Unternehmen, 35–55 Jahre"]
**Ziel der Seite:** [Was soll der Besucher tun, z.B. "Kostengespräch buchen über eingebetteten Kalender"]

## STRUKTUR

Baue folgende Sektionen in dieser Reihenfolge:
1. Hero: klare Headline (max. 8 Wörter), 1-Satz-Subtext, primärer CTA-Button
2. Problem-Sektion: 3 Karten mit je einer Schmerz-Situation meiner Zielgruppe
3. Lösung / Angebot: kurze Beschreibung mit 3–4 Bullet-Points
4. Social Proof: 2 Testimonial-Karten (Platzhalter-Text, aber realistisch formatiert)
5. CTA-Sektion: wiederholter Buchungs-Button mit Trust-Signal darunter

## DESIGN-REGELN

- Primärfarbe: [deine Markenfarbe, z.B. #2D6BE4]
- Stil: [clean und professionell | warm und einladend | modern und minimalistisch]
- Schriftgröße: gut lesbar auf Desktop und Mobile
- Weißraum: großzügig, keine überladenen Sektionen
- Buttons: abgerundet, Primärfarbe als Background, weißer Text

## EXTRAS (optional)

- Responsiv (Mobile-First-Ansatz)
- Sticky Navigation mit Logo links + CTA-Button rechts
- Footer mit Impressum-Platzhalter

Starte direkt mit dem Prototyp. Ich iteriere danach per Chat und Inline-Kommentaren.

In 3 Schritten zum ersten Prototyp.

01

Design-System einrichten

Auf claude.ai/design öffnen, Brand-Assets hochladen (Logos, Farbpaletten, Schriften oder den Figma-Export). Claude extrahiert automatisch Farben, Typografie und Komponenten, „Published"-Toggle aktivieren. Einmal pro Marke.

02

Prompt mit vier Bausteinen

„New Project" anlegen und den Prompt oben einfügen: Ziel, Layout, Content und Zielgruppe als vier klare Bausteine. Kontext-Material (Screenshots, Texte) vorab hochladen. Claude liefert in 30–60 Sekunden den ersten klickbaren Entwurf.

03

Iterieren und exportieren

Strukturelle Änderungen über Chat, element-spezifische über Inline-Kommentare, Feintuning über Slider, Skizzen über Draw-Mode. Fertig: Export als PDF, PPTX, HTML, ZIP oder direkter Handoff an Claude Code.

Prompt kopieren und loslegen.

Claude Design läuft direkt in deinem Browser. Kein Extra-Tool installieren, kein Onboarding. Prompt kopieren, unter claude.ai/design einfügen, fertigen Prototyp in Minuten.

Prompt kopieren

Mehr Setups auf @till.schae

Häufige Fragen.

Ist Claude Design ein Ersatz für Figma?
Nein, und das ist auch nicht das Ziel. Claude Design ist am stärksten in der frühen Explorations- und Prototyping-Phase: schnelle erste Entwürfe, Varianten für Stakeholder-Feedback, Pitch-Decks und interaktive Mockups. Für professionelle Design-Systems mit Pixel-genauer Kontrolle, komplexen Komponenten-Libraries und echtzeitiger Team-Kollaboration bleibt Figma die richtige Wahl.
Welcher Pricing-Plan ist nötig?
Claude Design ist für Pro (ca. 20 USD/Monat), Max (ca. 100–200 USD/Monat), Team (ca. 30 USD/Nutzer/Monat) und Enterprise-Abonnenten verfügbar. Ein kostenloses Konto reicht nicht aus. Die Nutzung zählt gegen separate wöchentliche Design-Kontingente, nicht gegen das normale Chat-Limit.
Funktioniert Claude Design in Deutschland und der EU?
Ja. Anthropic hat Claude seit 2024 offiziell in der EU mit DSGVO-konformen Policies freigegeben. Claude Design ist als Teil von claude.ai ohne regionale Einschränkungen in Deutschland nutzbar. (Quelle: anthropic.com/news/claude-europe)
Was passiert mit meinen hochgeladenen Brand-Assets?
Hochgeladene Assets werden im Design-System der Organisation gespeichert. Anthropic speichert diese gemäß der allgemeinen Datenschutzrichtlinie. Vor dem Hochladen von Kundenmaterialien oder internen Unternehmensdaten die eigene DSGVO-Prozessierung prüfen und ggf. nur anonymisierte oder bereits veröffentlichte Assets verwenden.
Kann ich die generierten Designs direkt live schalten?
Der HTML-Export ist technisch einsetzbar, aber als Produktions-Output noch nicht ausgereift: keine eingebaute SEO-Optimierung, kein CMS-Backend, kein Accessibility-Audit. Für interne Prototypen, Pitch-Präsentationen und Kunden-Demos ist der direkte Export hervorragend geeignet. Für öffentliche Websites empfiehlt sich der Handoff an Claude Code oder einen Entwickler.
Was ist der Unterschied zwischen Claude Design und Claude Artifacts?
Claude Artifacts generiert Code, Dokumente und kleine Tools als Nebenprodukt im normalen Chat. Claude Design ist ein eigenständiger, dedizierter Workspace mit Live-Canvas, Design-System-Integration, vier Editing-Modi und direktem Claude-Code-Handoff. Claude Design ist für visuelle Arbeiten optimiert, Artifacts für schnelle Code-Snippets und Dokumente.