Claude Design: Prototypen, Slides und Grafiken per Beschreibung
Das baust du
Du öffnest Claude Design in der Claude Desktop-App und baust Prototypen, Slides, Poster, Social-Media-Grafiken und Animationen, indem du sie einfach beschreibst. Du bekommst den kompletten Ablauf vom ersten Prompt bis zum Export, den Flugsimulator-Prompt aus dem Video und 20 fertige Prompts für echte Projekte. Der wichtigste Teil ist der Bearbeiten-Modus: Damit passt du jedes Detail an, ohne eine Zeile Code anzufassen.
So funktioniert Claude Design
Claude Design ist kein Bildgenerator. Du beschreibst im Chat, was du willst, und Claude baut daneben auf einer Arbeitsfläche (dem Canvas) einen funktionierenden Entwurf: klickbare Prototypen, ganze Präsentationen, Dokumente, Poster und 3D-Visualisierungen. Unter der Haube entsteht echter Web-Code, also HTML, CSS und JavaScript, die Bausteine jeder Website. Den kannst du später als Datei herunterladen, an Canva schicken oder als Live-Seite veröffentlichen.
Der Aufbau ist simpel: links redest du mit Claude, rechts aktualisiert sich das Design. Du musst dafür weder Figma noch Canva bedienen können.
Claude Design in der Desktop-App öffnen
Öffne die Claude Desktop-App. In der unteren linken Ecke siehst du Design. Klick darauf. Das ist Claudes neues Design-System, das noch in der Beta ist, auf das du aber schon Zugriff hast.
Jedes Design ist ein eigenes Projekt mit eigenem Chatverlauf und eigenem Canvas. Starte für jedes neue Vorhaben ein neues Projekt, dann vermischt sich nichts.
Dein erstes Design beschreiben
Tipp deine Anfrage ins Chatfeld links. Deutsch funktioniert genauso gut wie Englisch. Nenne immer drei Dinge:
- Was du willst: Landingpage, Präsentation, Poster, Spiel.
- Welche Bestandteile drin sein sollen: Überschrift, Preistabelle, Fragen-Bereich.
- Welchen Stil: dunkel, modern, verspielt.
Fang mit dem Prompt aus dem Video an. Claude baut dir einen interaktiven Flugsimulator, der direkt im Browser läuft. Du steuerst mit den Tasten W, A, S und D. Claude stellt manchmal Rückfragen, bevor es loslegt. Beantworte sie kurz, dann wird der erste Entwurf besser.
Baue mir einen interaktiven Flugsimulator direkt im Browser. Ich will mit den Keyboard-Tasten W, A, S, D steuern und über eine 3D-Stadt fliegen.
Noch ein Startprompt
Bau mir eine Landingpage für eine Fitness-App namens PeakForm. Dunkles Design mit neongrünen Akzenten. Enthalten: Hero-Bereich mit Headline, drei Feature-Karten, Preistabelle mit 3 Stufen und ein Footer mit Social-Media-Links.
Mit Bearbeiten alles anpassen
Wenn du oben auf Bearbeiten klickst, ist alles voll anpassbar. Du hast drei Wege, dein Design zu verfeinern:
- Chat: Du tippst die Änderung links ins Chatfeld. Am besten für große Änderungen wie Farbschema, Layout oder neue Bereiche.
- Kommentar am Element: Du klickst direkt auf eine Stelle im Canvas und schreibst dort hin, was sich ändern soll, zum Beispiel „diesen Button-Text ändern“. Am besten für gezielte kleine Korrekturen.
- Direkt bearbeiten: Du ziehst, vergrößerst und richtest Elemente selbst mit der Maus aus. Am besten für den Feinschliff.
Geh von grob nach fein: erst das komplette Layout bauen lassen, dann Struktur per Chat ändern, dann gezielte Fixes per Kommentar, zum Schluss Feinschliff mit der Maus. Ein kurzer Satz wie „Überschrift größer“ reicht völlig, du musst nicht das ganze Design neu erklären.
Mach das ganze Design dunkler. Wechsle zu einem Navy/Anthrazit-Farbschema. Schieb den Preisbereich über die Testimonials. Füg darunter einen FAQ-Bereich ein. Mach alle Überschriften größer. Nutze die Schrift Inter. Runde alle Button-Ecken auf 12px. Formuliere die Hero-Headline aktiver. Ändere den Button von "Mehr erfahren" zu "Kostenlos starten".
Deine Marke einmal festlegen
Wenn du öfter für dieselbe Marke baust, leg ein Design-System an. Das sind deine festen Farben, Schriften und Bausteine. Jedes neue Projekt startet dann automatisch in deinem Look, und du musst deine Marke nie wieder erklären.
Ersetze im Prompt unten die Farbcodes und Schriften durch deine eigenen. Farbcodes (Hex-Codes) sind die sechsstelligen Werte mit Raute davor. Du findest sie zum Beispiel auf deiner Website oder in Canva unter den Markenfarben.
Erstelle ein Design-System für meine Marke. # Farben Primär: #1B3A5C (Dunkelblau) Sekundär: #C88B2E (Gold) Akzent: #2E8B7A (Petrol) Hintergrund: #F8F9FA (Hellgrau) Text: #3A3A3A (Dunkelgrau) # Typografie Überschriften: Inter Bold Fließtext: Inter Regular, 16px Bildunterschriften: Inter Light, 14px # Komponenten Buttons: abgerundet (8px), Primärfarbe Karten: weiß, weicher Schatten, 12px Radius Icons: Outline-Stil, 24px Speichere das als mein Standard-Design-System und wende es auf alle künftigen Projekte an.
Aus Figma importieren
Du kannst sogar direkt aus Figma importieren. So holst du bestehende Designs und Komponenten in dein Projekt, statt bei null anzufangen. Außerdem kannst du jederzeit Material dazugeben, damit Claude besser versteht, was du willst:
- Screenshots und Bilder: einfach ins Chatfeld ziehen und schreiben „mach es so wie das hier“.
- Dateien: Word, PowerPoint oder Excel ins Projekt hochladen, Claude übernimmt den Inhalt.
- Code: Wer eine eigene Website auf GitHub hat, kann das Projekt verknüpfen. Dann nutzt Claude die echten Bausteine deiner Seite.
Exportieren und teilen
Wenn dein Design fertig ist, klick oben rechts auf Export. Du hast diese Möglichkeiten:
- PDF zum Drucken oder Verschicken.
- PPTX für PowerPoint, oder direkt nach Google Slides.
- .zip mit allen Dateien oder eine einzelne HTML-Datei, die sich in jedem Browser öffnet.
- Direkt an andere Tools wie Canva, Miro, Vercel oder Wix, wenn du dort weiterarbeiten oder die Seite live stellen willst.
- An Claude Code, wenn aus deinem Prototyp eine echte App werden soll.
Zum Teilen klickst du auf Share (Teilen) und legst fest, wer dein Design sehen, kommentieren oder bearbeiten darf. Neue Designs sind erst mal nur für dich sichtbar.
Was du alles bauen kannst
Claude Design ist nicht auf eine Art von Ergebnis festgelegt. Für jede Art findest du hier einen Prompt, den du direkt einfügen kannst. Tausch nur die Eckdaten aus: dein Produkt, deine Farben, deine Bereiche.
Bau einen interaktiven Prototyp für eine Aufgaben-App. Enthalten: - Seitenleiste mit Projekt-Kategorien - Kanban-Board mit verschiebbaren Spalten (To Do, In Arbeit, Fertig) - Aufgaben-Detailfenster mit Fälligkeitsdatum, zuständiger Person und Beschreibung - Dark-Mode-Schalter oben in der Leiste Alle Interaktionen sollen funktionieren.
Erstelle ein 10-seitiges Pitch Deck für eine Series-A-Finanzierung. Das Unternehmen ist eine KI-Plattform für juristische Recherche. Enthalten: Titelfolie, Problem, Lösung, Marktgröße, Produkt-Screenshots, Geschäftsmodell, Wachstums-Kennzahlen, Wettbewerb, Team und Finanzierungsfrage. Cleanes, modernes Design in Dunkelblau und Weiß. Professionell, aber nicht steif.
Gestalte ein Instagram-Carousel (5 Folien) zum Thema "5 KI-Tools, die du 2026 brauchst". Stil: fette serifenlose Headlines, dunkle Farbverläufe im Hintergrund, neonblaue Akzente. Pro Folie: ein Tool-Name, ein Einzeiler zur Beschreibung und ein passendes Icon. Folie 1 ist der Hook, die letzte Folie der Call-to-Action.
Gestalte ein Poster für eine Tech-Konferenz namens "Build 2026". Datum: 15. bis 17. September. Ort: München. Stil: futuristisch, dunkler Hintergrund, holografische Farbverläufe. Mit freien Flächen für Speaker-Fotos, einem Bereich für Sponsoren-Logos und einem QR-Code zur Anmeldung.
Gestalte einen modernen Lebenslauf für eine Senior Product Designerin. Zweispaltiges Layout. Linke Spalte: Kontakt, Skills als Balken, Ausbildung, Zertifikate. Rechte Spalte: Berufserfahrung mit Rolle, Firma, Zeitraum und je 3 Stichpunkten. Cleane serifenlose Schrift, dezente Farbakzente, druckfertig.
Bau ein interaktives 3D-Sonnensystem. Ich will jeden Planeten anklicken können und seine Fakten sehen: Durchmesser, Abstand zur Sonne, Umlaufzeit, Anzahl der Monde, Oberflächentemperatur. Realistische Farben und Größenverhältnisse, Umlaufbahnen sichtbar, langsame Rotation, Zoom-Steuerung.
Erstelle ein Wireframe für eine Mobile-Banking-App. Screens: - Start-Dashboard (Kontostand, letzte Umsätze, Schnellaktionen) - Geld senden (3 Schritte) - Umsatzhistorie mit Filtern - Einstellungen Bewusst einfach, in Graustufen, mit kurzen Anmerkungen zu jedem Bereich.
Bau eine Landingpage für einen Online-Kurs namens "KI für Einsteiger". Enthalten: Hero mit Headline und Button, aufklappbare Kursübersicht, Vorstellung der Kursleitung, 3 Testimonial-Karten, Preis mit Geld-zurück-Siegel und ein FAQ-Bereich. Helles Design, freundliche Farben.
20 Prompts für echte Projekte
Ein Wireframe ist übrigens eine bewusst schlichte Skizze einer App, nur Struktur und noch kein Design. Die folgenden 20 Prompts liefern jeweils etwas, wofür du sonst einen Designer gebraucht hättest. Die ersten sechs sind für Business und Marketing, 7 bis 13 für Lernen und Kreatives, 14 bis 20 für Shops und Spielereien.
Gestalte eine professionelle Visitenkarte. Vorderseite: Name, Titel, Logo-Bereich. Rückseite: Telefon, E-Mail, Website, LinkedIn-QR-Code. Minimalistisch, dunkles Design.
Gestalte eine Newsletter-Vorlage für ein SaaS-Unternehmen. Header mit Logo, Hero-Bild-Bereich, zweispaltiger Feature-Teil, 3 Blog-Vorschauen, CTA-Button und Footer mit Abmelde-Link.
Erstelle eine Launch-Grafik für Social Media. Produktname groß, Key-Features als Icons, Launch-Datum und ein "Coming Soon"-Badge. Größe: 1080x1080 für Instagram.
Bau einen Brand Style Guide mit: - Farbpalette mit Hex-Codes - Typografie-Skala (H1 bis Fließtext) - Button-Stile (primär, sekundär) - Karten-Komponenten - Abstände und Raster - Do's-and-Don'ts-Beispiele
Bau ein Analytics-Dashboard mit: - Leiste oben: Zeitraum-Auswahl, Filter - KPI-Karten: Umsatz, Nutzer, Kündigungsrate, MRR (mit Trendpfeilen) - Liniendiagramm: Monatsumsatz - Balkendiagramm: Anmeldungen nach Kanal - Tabelle: Top-10-Kunden Dunkles Design, interaktiv.
Gestalte ein Quartals-Dashboard: GuV-Übersicht, Cashflow-Wasserfall, Umsatz nach Segment als Donut, Vorjahresvergleich als Tabelle, Kostenaufstellung. Clean und seriös.
Bau ein interaktives Quiz über Geografie. 10 Multiple-Choice-Fragen mit sofortigem Feedback (richtig/falsch mit Erklärung). Am Ende Punktestand mit Auswertung und "Nochmal"-Button.
Gestalte eine visuelle Kurs-Übersicht für ein 12-Wochen-Data-Science-Bootcamp. Jede Woche als Karte mit Thema, gelernten Skills und Fortschrittsbalken. Scrollbar und interaktiv.
Bau eine Portfolio-Seite für eine UX-Designerin. Bereiche: Hero mit Name und Tagline, Raster mit 6 Projekten, Über-mich mit Fläche für ein Foto, Skill-Liste, Kontaktformular. Minimalistisch, viel Weißraum.
Gestalte eine digitale Hochzeitseinladung. Elegante Serifenschrift, Aquarell-Blumenränder, Namen des Paares, Datum, Location, RSVP-Button und Countdown. Zartes Rosé und Salbeigrün.
Gestalte einen 4-Screen-Onboarding-Flow für eine Meditations-App. Pro Screen: Illustrationsfläche, Headline, Text, Fortschrittspunkte und "Weiter"-Button. Letzter Screen: "Loslegen". Ruhige Blau- und Lilatöne.
Bau eine Preisseite mit 3 Stufen: Starter (19 €/Monat), Pro (49 €/Monat), Enterprise (auf Anfrage). Feature-Vergleich als Tabelle darunter. Jährlich/monatlich-Umschalter. Pro-Stufe als "Beliebteste Wahl" hervorheben. FAQ-Bereich.
Bau eine interaktive Weltkarte. Beim Klick auf ein Land: Einwohnerzahl, Hauptstadt, BIP und Flagge. Farbcodierung nach Kontinent, Zoom-Steuerung und Suchleiste.
Erstelle einen Musik-Visualizer mit Audio-reaktiven Balken, Wellenformen und Partikel-Effekten. 3 wählbare Stile, Play/Pause und Lautstärkeregler. Nutze WebGL.
Gestalte eine Produktseite für Premium-Kopfhörer. Bild-Karussell, Farbauswahl (3 Optionen), Preis mit durchgestrichenem Originalpreis, In-den-Warenkorb-Button, Specs-Tabelle, Kundenbewertungen mit Sternen und ähnliche Produkte.
Bau einen 3-Schritte-Checkout: 1: Warenkorb mit Mengen 2: Formular für Lieferadresse 3: Zahlung mit Kartenfeldern Fortschrittsbalken oben, Bestellübersicht seitlich, Vertrauens-Siegel. Alle Schritte interaktiv.
Erstelle eine Infografik "KI im Jahr 2026". Enthalten: Zeitstrahl der wichtigsten Launches, Marktgrößen-Vergleich, Nutzung nach Branche und ein Ausblick. Vertikales Scroll-Layout, modernes Flat Design.
Bau eine interaktive Vergleichstabelle für 5 Projektmanagement-Tools. Nutzer können auswählen, welche Tools verglichen werden. Kategorien: Preis, Features, Teamgröße, Integrationen, Mobile App, Gesamtwertung.
Bau ein Memory-Spiel. 4x4-Raster mit verdeckten Karten. Klicken zum Umdrehen, Paare finden. Züge und Zeit zählen. Gewinn-Screen mit Konfetti-Animation. Fröhliches Farbschema.
Erstelle ein animiertes Logo-Intro für einen YouTube-Kanal namens "TechPulse". Die Buchstaben sollen nacheinander mit Puls-Effekt erscheinen. Dahinter eine dezente Schallwellen-Grafik. Animation als Loop.
Tipps für bessere Ergebnisse
| Tipp | Warum es hilft |
|---|---|
| Maße nennen | „1080x1080“ oder „16:9“ liefert gleich beim ersten Versuch das richtige Format. |
| Plattform nennen | „für Instagram“ verändert, wie Claude das Ergebnis aufbaut. |
| Stil beschreiben | „im Stil der Apple-Website“ gibt Claude eine klare Richtung. |
| Beispiel hochladen | Screenshot von etwas, das dir gefällt, reinziehen: „mach es so wie das hier“. |
| Varianten verlangen | „Zeig mir 3 verschiedene Layouts“ ist schneller als raten. |
| Zwischenstand sichern | „Speichere, was wir haben, und probier einen ganz anderen Ansatz“ hält deinen bisherigen Entwurf fest. |
Häufige Fragen
Kostet Claude Design etwas?
Nein, es ist auch im Gratis-Plan dabei. Du zahlst nur, wenn du Claude Pro oder Max abschließt, um mehr Nutzung zu bekommen.
Brauche ich Design-Kenntnisse?
Nein. Wenn du beschreiben kannst, was du willst, reicht das. Je genauer du Was, Bestandteile und Stil nennst, desto besser wird der erste Entwurf.
Kann ich das Ergebnis in PowerPoint weiterbearbeiten?
Ja. Exportiere über Export als PPTX und öffne die Datei in PowerPoint. Alternativ geht der Export direkt nach Google Slides oder Canva.
Startmuster für jeden Prompt
- Schnelles MockupBau ein [Typ] für [Zweck]. Enthalten: [Bereiche]. Stil: [Stil].
- PrototypBau einen interaktiven Prototyp für [App]. Screens: [Liste]. Interaktionen: [Liste].
- PräsentationErstelle ein Deck mit [Anzahl] Folien zu [Thema]. Folien: [Liste]. Stil: [Stil].
- Social-GrafikGestalte [Format] für [Plattform] zu [Thema]. Größe: [Maße]. Stil: [Stil].
Danke! Magst du kurz sagen, was am meisten geholfen hat? (optional)
Danke. Was hat gefehlt? (optional)