Vom Text-Prompt zum klickbaren Prototyp in Minuten. Kein Figma, kein Designer, kein Warten.
Vier Mechaniken, die Claude Design von einem klassischen Mockup-Tool unterscheiden — und vom reinen Chat erst recht.
Drei Zeilen Beschreibung reichen — Claude Design baut daraus einen klickbaren Prototyp mit echten Buttons, Sections und Übergängen. Kein Figma-File, kein Tool-Lernen.
Du wechselst zwischen Layout, Style und Inhalt — jeder Modus ändert nur seinen Teil. Keine kaputte Variante, weil du an einer Farbe gezogen hast und die Struktur mitgewandert ist.
Claude Design nutzt ein internes Design-System: gleiche Buttons, gleiche Abstände, gleiche Typo — auch nach zehn Iterationen. Du bekommst keine Frankenstein-UI mit zwölf Schriftgrößen.
Mit einem Klick übergibst du das fertige Design an Claude Code — als HTML, React oder fertig integrierten Component. Kein 'Pixel-perfect-Übersetzen' mehr für den Developer.
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.
01 · Beraterin
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
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
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
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.
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.
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.
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.
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.
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.
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.