Claude Design: Der vollständige Guide für 2026

Claude Design ist seit dem 17. 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 die sind 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, einer 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 Verzetteln.

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 und Mobile-Mock, alles wirkt wie aus einer Hand

So richtest du es ein

1. Geh auf claude.ai/design → Tab "Design systems"
2. Klick auf "Create new design system"
3. 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, dort 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 und 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 die eigentliche Handlungsliste, kein Anhang.

---

Quellen

• Anthropic: Get Started with Claude Design
• Anthropic: Set up your design system
• Anthropic: Claude Design Announcement