Claude Design: Der vollständige Guide für 2026
Claude Design ist seit Ende April 2026 verfügbar — und es ist deutlich mächtiger als die meisten Leute auf den ersten Blick erkennen. Kein gewöhnlicher "Generate a website"-Button. Es ist ein vollständiges Design-Werkzeug: klickbare Prototypen, Pitch Decks, animierte Videos, ein Brand-Design-System das über alle Projekte hinweg greift, und ein direkter Hand-off zu Claude Code.
Dieser Guide fasst zusammen, was du wirklich wissen musst — ohne Hype, mit konkreten Prompts und Schritt-für-Schritt-Workflows aus echten Test-Sessions.
Was ist Claude Design und was kann es?
Claude Design ist unter claude.ai/design erreichbar — nur im Browser, keine App. Es ist von den normalen Claude-Chats getrennt.
Was du damit bauen kannst
| Output | Beschreibung | |--------|--------------| | Klickbarer Prototyp | Multi-Page-Website mit echter Navigation, Formularen, Hover-States | | Pitch Deck | HTML-basierte Präsentation, exportierbar als PPTX oder PDF | | Animiertes Video | Timeline-basiertes Marketing-Video für Social Media | | Mobile App Mockup | UI-Screens für iOS/Android mit Interaction-Flows | | Wireframe | Schnelle Konzept-Skizzen für Feedback-Runden |
Wer braucht was?
- Claude Pro/Max — Claude Design ist inklusive, du kannst sofort loslegen
- Team/Enterprise — muss von einem Admin in den Organization-Settings aktiviert werden (default: off)
Das Skills-System: der Schlüssel zum Tool
Das größte Missverständnis bei Claude Design: Es ist kein einfaches Prompt-Box-Interface. Der eigentliche Hebel ist das Skills-System — du konfigurierst vor der ersten Generation, was Claude bauen und wie es exportiert werden soll.
Skills findest du im Chat-Interface unter "Skills and design systems". Es gibt drei Kategorien:
1. Output-Type-Skills — was wird gebaut?
| Skill | Einsatz | |-------|---------| | Interactive prototype | Klickbare Website mit echter Navigation | | Make a deck | Folienpräsentation | | Animated video | Bewegtes Marketing-Video | | Wireframe | Schnelle Konzept-Skizzen |
2. Behavior-Skills — wie soll Claude arbeiten?
| Skill | Einsatz | |-------|---------| | Frontend design | Ästhetische Richtung wenn kein Brand-System vorhanden | | Make tweakable | Baut Live-Schieberegler und Toggles ins Design ein |
3. Export-Format-Skills — und das ist entscheidend
| Skill | Wann aktivieren | |-------|-----------------| | Save as standalone HTML | Website-Outputs, offline-fähig | | Export as PPTX (editable) | Präsentation in PowerPoint bearbeitbar | | Export as PPTX (screenshots) | Pixel-perfekte Folien, nicht editierbar | | Save as PDF | Druckfertige Version | | Send to Canva | Weiterarbeit in Canva |
Wichtig: Export-Skills aktivierst du vor der Generation, nicht danach. Claude baut das Design von Anfang an mit den richtigen Constraints — z.B. PPTX-kompatible Effekte statt CSS-Transitions, die beim Export verloren gehen.
Die richtigen Skill-Kombinationen im Überblick:
| Ziel | Output-Skill | Behavior | Export | |------|-------------|----------|--------| | Klickbare Website | Interactive prototype | Frontend design (kein Brand-Sys.) | Standalone HTML | | Pitch Deck | Make a deck | Frontend design | PPTX (editable) | | Marketing-Video | Animated video | Frontend design | Standalone HTML | | Schnelle Skizze | Wireframe | — | PDF |
Die 5 Eingabe-Methoden: mehr Kontext = besserer Output
Claude Design akzeptiert fünf verschiedene Eingabe-Quellen — und du kannst sie kombinieren. Das wird von den meisten Einsteigern unterschätzt.
| Methode | Wann nutzen | |---------|-------------| | Text-Prompt | Basis immer, strukturiert nach Vier-Punkte-Formel (siehe unten) | | Dokument hochladen | DOCX, PPTX, XLSX — z.B. ein bestehendes Briefing oder Pitch als Stil-Referenz | | Bild hochladen | Screenshots, handgezeichnete Skizzen, Logos, Konkurrenz-Sites | | Codebase verlinken | GitHub-Repo oder lokaler Ordner mit bestehenden Komponenten | | Web-Capture | URL einer Live-Site — Claude grabbt Layout und Elemente direkt |
Praxis-Tipp: Bild- oder Datei-Anhänge immer vor dem Text-Prompt in die Chat-Box ziehen. Claude bezieht alle Anhänge automatisch in die erste Generation ein.
Den ersten Prototyp bauen: Schritt für Schritt
Hier siehst du den vollen Workflow am Beispiel Bergwerk Coffee — eine Salzburger Spezialitäten-Rösterei mit wöchentlichem Bohnen-Abo für Cafés, Restaurants und Hotels in Österreich.
Schritt 1: Vier-Punkte-Prompt formulieren
Anthropic empfiehlt diese Struktur für den Eröffnungs-Prompt:
| Element | Frage | |---------|-------| | Goal | Was wird gebaut und wozu? | | Layout | Welche Sektionen/Seiten? | | Content | Welche Inhalte kommen rein? | | Audience | Wer nutzt das Ergebnis? |
Vollständiges Beispiel:
Build a website for Bergwerk Coffee — a Salzburg-based specialty coffee
roastery offering weekly bean subscriptions for cafés, restaurants
and hotels in Austria.
Goal: Customer acquisition in the Austrian gastronomy market.
Layout: Landing page + 2 subpages (Sortiment, Über uns).
On the landing: Hero, 3 USPs, Sortiment-Grid, Abo-Ablauf in Schritten,
Herkunft/Direct-Trade-Section, Testimonials, FAQ, Footer mit Kontakt.
Content: Weekly delivery of freshly roasted beans, 4 standard varieties
plus rotating single origins, free shipping Austria-wide, flexible
quantities (2–80 kg/week).
Audience: Austrian café owners and restaurant operators, age 30–55.
Primary language: German.
Tone references: workhorseroasters.com (calm, craft), oatly.com
(typographic). Decide which fits better, or surprise me.
Mobile responsive. Generate 2 distinct visual variants.
Schritt 2: Den Clarifying-Questions-Flow nutzen
Claude Design fragt bei offenen Punkten nach — und zwar gezielt:
- "Rustic/handcrafted oder modern/minimal?"
- "Wie viele Design-Varianten — 1, 2, oder 3+?"
- "Preise zeigen, 'auf Anfrage', oder ausblenden?"
- "Produktfotos als realistische Platzhalter oder abstrakte Texturen?"
Strategie:
- Bei ästhetischen Fragen (Stil, Farben, Typografie): "Decide for me" ist oft die beste Antwort. Claude macht dann echte Konzept-Arbeit.
- Bei inhaltlichen Fragen (welche Sektionen, Preislogik): selbst beantworten.
- 2 Varianten sind fast immer der Sweet Spot — genug für einen Vergleich, nicht zu viel zum Verzettelung.
Schritt 3: Reviewen und verfeinern
Nach der Generation (Multi-Page dauert 3–10 Minuten) hast du vier Wege für Anpassungen:
| Modus | Wie | Wofür | |-------|-----|-------| | Chat | Normale Nachrichten | Größere strukturelle Änderungen | | Inline Comments | Rechtsklick auf Element | Gezielte Änderungen an einer Komponente | | Direct Edit | Direkt im Canvas klicken | Text-Edits, Farb-Korrekturen | | Custom Sliders | Tweakable-Controls | Live-Variation per Schieberegler |
Design System aufsetzen: der wichtigste Schritt für ernsthafte Projekte
Ohne Design System sehen alle Claude-Outputs ähnlich aus — solide, aber generisch und "Claude-like". Das Design System ist der einzige wirkliche Qualitäts-Hebel im gesamten Tool.
Der einmalige Aufwand lohnt sich:
- 45–75 Minuten Setup (inklusive Asset-Vorbereitung)
- Alle zukünftigen Projekte nutzen automatisch deine Farben, Typografie und Komponenten
- Konsistenz über Landing Page, Deck, Mobile-Mock — alle wirken wie aus einer Hand
So richtest du es ein
- Geh auf claude.ai/design → Tab "Design systems"
- Klick auf "Create new design system"
- Fülle die sechs Eingabe-Felder aus:
Feld 1: Company name and blurb (Pflichtfeld)
Format: [Name]: [Beschreibung mit allen Touchpoints]
Bergwerk Coffee: Salzburg-based specialty coffee roastery with weekly
bean subscription for Austrian cafés, restaurants and hotels.
Touchpoints: marketing website, B2B customer portal,
packaging labels, email newsletters.
Touchpoints konkret benennen — "Website" ist zu vage. "Marketing website + B2B customer portal + packaging labels" hilft Claude, den richtigen Scope zu verstehen.
Felder 2–5: Quellen (alle optional, aber empfohlen)
| Slot | Was du reinsteckst | |------|-------------------| | Link code on GitHub | Public-Repo oder frontend-fokussierter Subfolder | | Link code from computer | Lokale Komponenten (gezielt auswählen, nicht ganzer Monorepo) | | Upload .fig file | Figma-Datei — wird lokal im Browser geparst, nicht hochgeladen | | Add fonts, logos and assets | Logo-Varianten (SVG bevorzugt), Schriften (.woff2), Beispiel-Fotos |
Minimum was du wirklich brauchst:
- 2 Logo-Varianten (hell/dunkel) als SVG oder PNG
- Primärfont als .woff2
- Farbpalette mit Hex-Codes
Feld 6: "Any other notes?" — der wichtigste Hebel
Hier gibst du Claude den Charakter deiner Marke mit. Drei Säulen:
Visual Direction:
Visual: Editorial design language. Warm cream backgrounds (#F5EFE6)
with deep navy (#1A2238). Terracotta (#C2542D) as accent, used
sparingly. Serif headlines (Fraunces, italic). Sans-serif body
(IBM Plex Sans). Generous whitespace.
Voice & Tone:
Voice: Direct, craft-oriented, no marketing speak. Short declarative
statements. Confident without arrogance. Specific over vague.
Anti-Patterns — mindestens 5, konkret:
Anti-patterns:
- No stock photography
- No gradients, no glassmorphism
- No exclamation marks in copy
- No buzzwords like "leidenschaftlich", "premium", "innovativ"
- No carousel sliders
- No headline wrapping to 4+ lines
Warum Anti-Patterns so wichtig sind: Eine "Tu das"-Liste schließt nicht aus, dass Claude trotzdem in Klischee-Fallen tappt. Eine "Tu das NICHT"-Liste schließt diese Wege explizit aus. In der Praxis verbessert sich das Ergebnis um schätzungsweise 30% wenn du Anti-Patterns sauber definierst.
Generation und Review
Nach dem Klick auf "Continue to generation →" wartest du 5 Minuten (Tab offen lassen). Claude produziert dabei:
- Logo-System (rekonstruiert aus deinen Assets oder inferiert — transparent als "inference, not vendor asset" markiert)
- Type-Stack und Farbpalette
- Komponenten-Bibliothek (Buttons, Cards, Nav, etc.)
- UI-Kits für jeden deiner Touchpoints
Im "Review draft"-Modus bewertest du jedes Element:
- "Looks good" — übernehmen
- "Needs work" — Freitextfeld öffnet sich: spezifisch formulieren, keine Adjektive
Effiziente Review-Reihenfolge: Brand-Assets → Colors → Typography → Components → Spacing
Lies immer die Caveats-Sektion am Ende des Chats — dort zeigt Claude transparent, was er rekonstruiert hat und was du noch ersetzen musst, bevor das System produktionsreif ist.
Export & Hand-off
| Ziel | So gehts | |------|----------| | Standalone HTML | Download als single file, läuft offline | | PowerPoint | PPTX (editable) für weiterbearbeitbare Folien | | Claude Code | "Continue in Claude Code" — übergibt den generierten Code als Startpunkt für reale Entwicklung | | Canva | Export über das Canva-Skill direkt in den eigenen Canva-Workspace |
Der Claude Code Hand-off ist besonders wertvoll: Du designst den Prototyp in Claude Design, übergibst ihn dann an Claude Code, und entwickelst von dort weiter — mit einem soliden visuellen Ausgangspunkt statt einer leeren Seite.
Was Claude Design nicht kann
Damit die Erwartungen stimmen:
- Kein Produktivsystem — die generierten Sites sind Prototypen/HTML-Mocks, keine deploybaren Next.js-Apps
- Keine dynamischen Daten — Backend-Anbindungen, Datenbanken, Auth sind außerhalb des Scope
- Kein Print — Flyer, Plakate im physischen Druckformat sind keine Stärke
- Kein Offline-Tool — funktioniert nur im Browser unter claude.ai/design
- Fotos kann Claude nicht generieren — fehlende Fotos werden als Platzhalter markiert, nicht erfunden
Pro-Tipps aus echten Test-Sessions
Mehrere Design Systems anlegen: Als Freelancer oder Agentur lohnt es sich, pro Kunde ein eigenes System zu haben. Beim Projekt-Anlegen wählst du das passende aus dem Dropdown.
Iteration statt Perfektion: Bau das System einmal sauber auf, nutze es in 2–3 Projekten, verfeinere dann. Die fehlenden Stücke erkennst du erst beim Arbeiten.
GitHub-Repo > Figma: Wenn du die Wahl hast zwischen Figma-File hochladen und Code-Repo verlinken mit definierten Design-Tokens (Tailwind-Config, CSS-Variables): Nimm das Repo. Design-Tokens als Code sind eindeutiger als Figma-Layer-Strukturen.
Caveats immer lesen: Claude listet am Ende jeder Generation transparent auf, was er rekonstruiert hat und was noch fehlt. Das ist kein Anhang — das ist die Handlungsliste.