Claude Design Hands-on: Multi-Page-Website bauen
Eine klickbare Multi-Page-Website in Claude Design — von der Skill-Auswahl über den Vier-Punkte-Prompt bis zum Hand-off zu Claude Code. Diese Übung zeigt das vollständige Workflow für Websites.
Empfehlung: Lies zuerst den vollständigen Überblick zu Claude Design — dort findest du die Grundlagen des Skills-Systems, der Eingabe-Methoden und der Design-System-Konzepte, die hier vorausgesetzt werden.
Vorentscheidung: Hast du ein Design System?
- Ja → Claude nutzt automatisch deine Farben, Typografie und Komponenten. Direkt zu Schritt 1.
- Nein → Zwei Optionen: Erst ein System aufsetzen (empfohlen, Übung 3) — oder den "Frontend design"-Skill nutzen (dieser Weg wird hier beschrieben).
Ohne Design System sehen Claude-Outputs ähnlich aus — solide, aber generisch. Das System ist der größte Qualitätshebel im ganzen Tool.
Schwierigkeit: Einsteiger · Zeitbedarf: 30–40 Min · Ergebnis: Eine komplette Website mit Landing Page + 2–3 Unterseiten, optional in mehreren Design-Varianten
Schritt 1: Skills auswählen
Im Menü "Skills and design systems" — drei Kategorien:
Richtige Kombination für eine Multi-Page-Website:
| Kategorie | Skill | Warum | |-----------|-------|-------| | Output-Type | Interactive prototype | Klickbare Navigation, echte Forms | | Behavior | Frontend design | Ästhetik-Richtung ohne Brand-System | | Export-Format | Save as standalone HTML | Website offline-fähig downloaden | | Optional | Make tweakable | Live-Slider für visuelle Anpassungen |
Wichtig: Export-Skills vor der Generation aktivieren. Claude baut das Design dann von Anfang an mit den richtigen Constraints — z.B. kein CSS-Glassmorphism, das beim HTML-Export zerschossen wird.
Schritt 2: Eingabe-Methoden kombinieren
Claude Design akzeptiert fünf Quellen — und du kannst sie kombinieren:
| Methode | Wann nutzen | |---------|-------------| | Text-Prompt | Immer die Basis | | Dokument hochladen | DOCX, PPTX, XLSX — z.B. bestehendes Briefing als Stil-Referenz | | Bild hochladen | Skizzen (auch handgezeichnet), Screenshots, 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 |
Anhänge immer vor dem Text-Prompt in die Chat-Box ziehen. Claude bezieht alle Attachments automatisch in die erste Generation ein.
Schritt 3: Der Vier-Punkte-Prompt
Anthropic empfiehlt diese Struktur:
| Element | Frage | |---------|-------| | Goal | Was wird gebaut und wozu? | | Layout | Welche Sektionen/Seiten? | | Content | Welche Inhalte? | | Audience | Wer nutzt das Ergebnis? |
Vollständiges Beispiel (Bergwerk Coffee — Salzburger Spezialitäten-Rösterei):
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).
Landing: Hero, 3 USPs, coffee grid, subscription steps,
origin/direct-trade section, testimonials, FAQ, footer.
Content: Weekly delivery of freshly roasted beans, 4 standard varieties
plus rotating single origins, free Austria-wide shipping,
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 4: Den Clarifying-Questions-Flow nutzen
Claude Design fragt bei offenen Punkten nach — gezielt, nicht generisch:
- "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 statt in einen Kompromiss-Korridor zu fallen.
- Bei inhaltlichen Fragen (welche Sektionen, Preislogik): selbst beantworten — das ist dein Content.
- 2 Varianten sind fast immer der Sweet Spot — genug für einen Vergleich, nicht zu viele.
Schritt 5: Reviewen und verfeinern
Multi-Page-Outputs mit 2 Varianten dauern 3–10 Minuten. Danach hast du vier Refinement-Modi:
| 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 |
Gute Chat-Prompts:
"Mach das Farbschema dunkler und reduzierter."
"Ordne den Hero um: Headline oben, USP-Strip direkt darunter."
"Wende sticky Header mit subtilem Schatten auf alle Seiten an."
"Zeig mir 2 alternative Layouts für die Hero-Section."
Inline-Comments:
[Rechtsklick auf Button]
"Padding größer — 16px vertikal, 32px horizontal."
Bug: Inline-Comments werden manchmal ignoriert. Comment-Text in den normalen Chat kopieren — funktioniert immer.
Custom Sliders anfordern:
"Add a slider to control hero spacing intensity."
"Add a toggle for image vs. texture-only mode."
Schritt 6: Export und Hand-off zu Claude Code
Oben rechts → "Share" oder "Export":
| Option | Wann nutzen | |--------|-------------| | Standalone HTML | Selbst hosten oder als Showcase | | Export PDF | Statische Vorschau | | Send to Canva | Team-Final-Polish | | Handoff to Claude Code | Echte produktive App bauen |
Der Hand-off zu Claude Code ist der Killer-Move: Claude Design packt Design + Komponentenstruktur in ein Bundle. Claude Code schreibt daraus production-ready Code.
I'm attaching the Claude Design handoff bundle. Please:
1. Set up a new Next.js project with App Router
2. Use Tailwind CSS matching the design tokens
3. Make it fully responsive
4. Structure components for reuse across pages
5. Add SEO meta tags
Don't write any code yet — first show me the proposed folder
structure so I can confirm.
Letzter Satz zwingt Claude Code in Plan-Mode — verhindert tausende Zeilen Code, die du zurückrollen müsstest.
Erfolgs-Check
- ✓ Richtige Skill-Kombination aktiviert (Interactive prototype + Frontend design + HTML)
- ✓ Mindestens 2 Eingabe-Methoden kombiniert
- ✓ Clarifying-Questions-Flow komplett durchlaufen
- ✓ Mindestens 3 der 4 Refinement-Modi verwendet
- ✓ Mindestens 2 Design-Varianten zum Vergleich