---

Voraussetzungen

Bevor du startest, brauchst du: Claude Code (oder Cursor mit Claude Sonnet 4.6), einen leeren Projektordner, Node.js installiert, und ein klares Referenz-Design vor Augen. Ideal: 2–3 Websites, deren Look du liebst (z.B. linear.app, vercel.com, stripe.com, spline.design).

Schritt 1 — Gib Claude die richtige Identität

Der wichtigste Schritt passiert BEVOR du die erste Zeile Code generierst. Claude muss wissen, wer es sein soll. Ohne Rolle liefert es Standard-Output. Mit Rolle liefert es Senior-Level-Output.

Erstelle im Projekt-Root eine Datei CLAUDE.md. Diese Datei wird bei jedem Claude Code Run automatisch geladen und definiert den Kontext.

Prompt für CLAUDE.md

# Role
You are a Senior UI/UX Engineer with 10+ years of experience building award-winning websites (Awwwards, FWA, CSSDA). You obsess over micro-interactions, typography, whitespace, and performance.

# Design Principles
- Clarity over cleverness
- Whitespace is a feature, not empty space
- Every animation must have a purpose
- Mobile-first, but desktop-refined
- Accessibility is non-negotiable (WCAG AA minimum)
- Performance budget: LCP < 2s, CLS < 0.1

# Tech Stack
- Next.js 15 (App Router) + TypeScript
- Tailwind CSS v4
- shadcn/ui for base components
- Framer Motion + GSAP for animations
- Lucide icons

# Code Standards
- Semantic HTML
- No inline styles — Tailwind only
- Component-driven, reusable
- Comments only for non-obvious logic

# Forbidden
- Generic purple/blue gradient hero backgrounds
- Stock hero illustrations
- "Lorem ipsum" — always ask for real copy
- Default shadcn color palette without customization

Warum das funktioniert: Die Identität verschiebt Claude weg vom Durchschnitt seiner Trainingsdaten (= billig aussehende Tutorials) hin zum Top 5 % (= Senior-Arbeiten).

Schritt 2 — Klone wie ein Profi

Screenshots sind schwach. Claude „sieht" sie, aber versteht die Struktur nicht. Der Pro-Move: Gib Claude den kompletten Quellcode einer Referenz-Website.

So gehts

1. Öffne die Referenz-Seite im Browser
2. Cmd+U (Mac) oder Strg+U (Windows) — zeigt den HTML-Quellcode
3. Cmd+A → Cmd+C — alles kopieren
4. In Claude Code einfügen mit dem Prompt unten

Für externe CSS/JS: Öffne die Links im Quellcode (<link rel="stylesheet"> und <script src="">) und kopiere auch diese Inhalte.

Klon-Prompt

Ich gebe dir den kompletten HTML-, CSS- und JS-Code einer Referenz-Website.
Analysiere die folgenden Aspekte und extrahiere sie als wiederverwendbares System:

1. Color tokens (Primary, Secondary, Accent, Neutrals, Semantic)
2. Typography scale (Font families, Sizes, Weights, Line heights)
3. Spacing system (Grid, Gaps, Paddings)
4. Component patterns (Buttons, Cards, Navigation, Forms)
5. Animation timings und Easings
6. Layout-Prinzipien (Grid vs. Flex, Breakpoints)

Gib mir das Ergebnis als `design-system.md` aus.
Kopiere NICHT 1:1 — extrahiere die Prinzipien und wende sie frisch auf mein Projekt an: [MEIN PROJEKT BESCHREIBEN]

Wichtig: Du klonst nicht die Website, du klonst das Design-System. Das ist der Unterschied zwischen Plagiat und Inspiration.

Schritt 3 — Nutze moderne Frameworks

Verlange explizit Tailwind CSS + shadcn/ui. Claude kennt diese Kombination perfekt und generiert damit professionelle, wiederverwendbare Komponenten. Ohne Ansage baut Claude oft vanilla CSS oder styled-components — beides schlechter für diesen Workflow.

Setup-Prompt

Initialisiere ein neues Next.js 15 Projekt mit folgendem Stack:

- TypeScript (strict mode)
- Tailwind CSS v4
- shadcn/ui (Komponenten: Button, Card, Accordion, Dialog, Sheet, Tabs, Toast)
- Framer Motion
- GSAP + ScrollTrigger Plugin
- Lucide Icons
- next/font für Google Fonts

Erstelle die Projektstruktur, installiere alle Dependencies und richte shadcn/ui mit einem custom Theme ein (basierend auf design-system.md). Zeige mir jeden Schritt als ausführbaren Command.

Komponenten-Prompt

Baue eine [KOMPONENTEN-NAME] Komponente mit folgenden Specs:
- Basis: shadcn/ui [BASE-COMPONENT]
- Variants: primary, secondary, ghost
- Sizes: sm, md, lg
- States: default, hover, active, disabled, loading
- Animation: [BESCHREIBUNG]

Nutze cva (class-variance-authority) für die Variants.
Stelle sicher, dass die Komponente voll typed und accessible ist (ARIA, Keyboard, Focus-States).

Schritt 4 — Weg mit flachen Farben

Flache Hintergründe = Amateur. Moderne High-End-Sites nutzen komplexe Gradients, Mesh-Backgrounds, Noise-Texturen oder sogar Loop-Videos. Das gibt der Seite Textur und Tiefe.

Techniken

Mesh Gradient: Mehrere radial gradients übereinander mit unterschiedlichen Blend-Modes.

Noise Layer: SVG-Filter mit feTurbulence als oberste Layer für organische Textur (Film-Grain-Effekt).

Animated Gradient: CSS-Animation auf background-position für langsam wanderndes Licht.

Hero-Video: 10-15s Loop, unter 2 MB, autoplay muted playsinline, mit <video poster> fallback.

Gradient-Prompt

Ersetze den flachen Hero-Background durch einen cinematischen Mesh-Gradient:

- 3-4 radial gradients an unterschiedlichen Positionen
- Farben aus design-system.md (primary + accent + dark-neutral)
- Sanfte Animation (background-position shift über 20s, infinite alternate)
- Noise-Overlay per SVG feTurbulence (opacity 0.04, mix-blend-mode overlay)
- Dark Mode compatible

Render als reusable Komponente <MeshBackground /> mit Props für Intensität und Farbschema.
Muss performant bleiben (prefers-reduced-motion respektieren, kein Layout-Shift).

Schritt 5 — Bring die Seite zum Leben

Micro-Animationen sind der Unterschied zwischen „nice" und „wow". Zwei Libraries dominieren: Framer Motion für React-native Animationen und State-Transitions, GSAP (mit ScrollTrigger) für komplexe Scroll-basierte Sequenzen.

Faustregel

Framer Motion für: Hover-States, Modal-Transitions, Layout-Animationen, einfache Reveals. GSAP für: Scroll-Pinning, Timeline-Choreografien, Text-Splits (SplitText), Parallax.

Animations-Prompt

Füge folgende Animationen hinzu (nutze Framer Motion wo möglich, GSAP für Scroll-Sequenzen):

1. Hero: Headline wird Wort für Wort per Mask-Reveal eingeblendet (staggered, 80ms delay)
2. Sections: Fade-in + Slide-up bei Viewport-Entry (IntersectionObserver basiert)
3. Cards: 3D-Tilt auf Hover (subtil, max 6deg, spring physics)
4. Navigation: Shrinks on scroll, backdrop-blur wird stärker
5. CTA-Buttons: Magnetic hover (cursor zieht Button leicht an)
6. Scroll-Progress: Dünne Linie oben, färbt sich von 0 auf 100%

Jede Animation MUSS:
- prefers-reduced-motion respektieren
- Performance-optimiert sein (transform + opacity only, kein layout-thrash)
- Auf Mobile disabled oder reduziert werden
- Sauber cleanup machen (useEffect return, GSAP context)

Schritt 6 — 3D als Next-Level-Upgrade

3D-Elemente sind der schnellste Weg, eine Website instantly premium aussehen zu lassen. Zwei Wege: Spline für designer-freundliche 3D-Szenen (kein Code nötig), Three.js / React Three Fiber für volle Kontrolle.

Der Spline-Shortcut

1. Gehe zu spline.design/community
2. Such eine Szene die zum Vibe passt (z.B. „abstract orb", „glass shapes")
3. Remix (eigene Farben, Geometrie anpassen)
4. Export → Code → React Component
5. Code in Claude einfügen mit folgendem Prompt

Spline-Integration-Prompt

Ich gebe dir den Export-Code einer Spline-Szene. Integriere sie in die Hero-Section:

- Lazy load (Scene lädt erst wenn Hero im Viewport)
- Loading-Skeleton während Scene lädt
- Performance-Fallback: auf Mobile UND bei prefers-reduced-motion → statisches PNG
- Mouse-Parallax (Scene reagiert leicht auf Cursor-Position)
- Max Bundle-Impact: 150KB (wenn mehr, schlage Alternative vor)

Schritt 7 — Typografie ist alles

Typografie macht 60 % des visuellen Eindrucks aus. Die 10.000€-Formel: eine markante Display-Font für Headlines (z.B. Editorial New, Fraunces, Clash Display, Instrument Serif) + eine clean Sans für Body (z.B. Inter, Geist, Satoshi, General Sans).

Alle über Google Fonts oder Fontshare kostenlos verfügbar, alle via next/font optimal geladen (zero layout shift, selbst gehostet) und wenn du sie runter lädst und auf deinem Webserver installierst, dann ist das auch DSGVO konform.

Pairing-Cheatsheet

Editorial/Serious: Fraunces (Display) + Inter (Body). Tech/Modern: Geist Mono (Display) + Geist Sans (Body). Luxury: Instrument Serif (Display) + Satoshi (Body). Bold/Agency: Clash Display + General Sans.

Typografie-Prompt

Richte das Typografie-System ein:

- Display Font: [NAME] via next/font/google oder lokal
- Body Font: [NAME] via next/font/google
- Mono Font: Geist Mono (für Code/Tabellen)

Erstelle eine fluide Type-Scale mit CSS clamp():
- display-1: clamp(3rem, 8vw, 7rem) — Hero Headlines
- display-2: clamp(2.25rem, 5vw, 4.5rem) — Section Headlines
- h1 bis h6 nach Major Third Ratio (1.25)
- body-lg, body, body-sm, caption

Definiere in Tailwind config als font-display, font-sans, font-mono und als text-size utilities.

Wende sie auf die gesamte Seite an: Headlines in Display, alles andere in Sans.
Line-height: 1.1 für Display, 1.6 für Body.
Letter-spacing: -0.02em für große Headlines, 0 für Body.

Bonus — Der Master-Prompt

Wenn du alle 7 Schritte in einem Rutsch willst, hier der verdichtete Master-Prompt. Kopiere ihn in Claude Code nachdem CLAUDE.md steht.

Baue eine High-End Landing Page für [PROJEKT-NAME].
Zielgruppe: [ZIELGRUPPE].
Botschaft: [ELEVATOR PITCH in 1 Satz].

Stack: Next.js 15, TypeScript, Tailwind v4, shadcn/ui, Framer Motion, GSAP,
next/font (Display: [FONT], Body: [FONT]).

Sections (in dieser Reihenfolge):
1. Nav (sticky, shrinking, glass-blur)
2. Hero (Spline 3D oder Video BG, animated headline, 2 CTAs)
3. Social Proof (Logo-Wall, scroll-marquee)
4. Feature Grid (bento-style, 6 Cards, hover-tilt)
5. How it works (3 Steps, scroll-pinned horizontal scroll via GSAP)
6. Testimonials (auto-carousel)
7. Pricing (3 Tiers, highlighted middle)
8. FAQ (shadcn Accordion)
9. CTA-Section (mesh gradient background)
10. Footer (minimal, multi-column)

Farben aus design-system.md.
Alle Animationen performant und respect reduced-motion.
Dark Mode default, Light Mode toggle oben rechts.
LCP unter 2s, accessibility WCAG AA.

Start mit der Projekt-Struktur und den ersten 3 Sections.
Ich reviewe, dann weiter mit dem Rest.

Pitfalls, die du vermeiden solltest

Nicht alles auf einmal generieren — Claude verliert Kontext bei zu großen Outputs. Lieber Section für Section. Nicht bei der ersten Version bleiben — zwei, drei Iterationen pro Section machen den Unterschied. Nicht auf „Claude baut alles" vertrauen — du bist der Art Director, Claude der Handwerker. Und: nie ohne CLAUDE.md starten, das ist der wichtigste File im ganzen Projekt.

Skills, die diesen Workflow verstärken

In Cowork und Claude Code gibt es spezialisierte Skills, die einzelne Schritte automatisieren: design:critique für strukturiertes Feedback auf jede fertige Section, design:accessibility für WCAG-Audits vor dem Launch, design:ux-copy für Microcopy und CTA-Texte, engineering:review für Code-Review vor dem Deploy, und icondesign für custom Icons die zum Brand passen. Einfach im Chat aufrufen, sobald der jeweilige Schritt dran ist.