Before you start you need: Claude Code (or Cursor with Claude Sonnet 4.6), an empty project folder, Node.js installed, and a clear reference design in mind. Ideal: 2–3 websites whose look you love (e.g. linear.app, vercel.com, stripe.com, spline.design).
The most important step happens BEFORE you generate the first line of code. Claude has to know who it should be. Without a role you get default output. With a role you get senior-level output.
In the project root, create a file CLAUDE.md. It's loaded automatically on every Claude Code run and sets the context.
# 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
Why this works: the identity shifts Claude away from the average of its training data (= cheap-looking tutorials) toward the top 5 % (= senior work).
Screenshots are weak. Claude "sees" them but doesn't understand the structure. The pro move: hand Claude the complete source code of a reference site.
Cmd+U (Mac) or Ctrl+U (Windows) — shows the HTML sourceCmd+A → Cmd+C — copy everythingFor external CSS/JS: open the links in the source code (<link rel="stylesheet"> and <script src="">) and copy that content too.
I'm giving you the complete HTML, CSS, and JS code of a reference site.
Analyse the following aspects and extract them as a reusable 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 and easings
6. Layout principles (grid vs. flex, breakpoints)
Output the result as `design-system.md`.
DO NOT copy 1:1 — extract the principles and apply them fresh to my project: [DESCRIBE MY PROJECT]
Important: you're not cloning the website, you're cloning the design system. That's the difference between plagiarism and inspiration.
Demand Tailwind CSS + shadcn/ui explicitly. Claude knows this combo inside out and produces professional, reusable components. Without specifying, Claude often falls back to vanilla CSS or styled-components — both worse for this workflow.
Initialise a new Next.js 15 project with this stack:
- TypeScript (strict mode)
- Tailwind CSS v4
- shadcn/ui (components: Button, Card, Accordion, Dialog, Sheet, Tabs, Toast)
- Framer Motion
- GSAP + ScrollTrigger plugin
- Lucide icons
- next/font for Google Fonts
Create the project structure, install all dependencies, and set up shadcn/ui with a custom theme (based on design-system.md). Show me every step as an executable command.
Build a [COMPONENT-NAME] component with these specs:
- Base: shadcn/ui [BASE-COMPONENT]
- Variants: primary, secondary, ghost
- Sizes: sm, md, lg
- States: default, hover, active, disabled, loading
- Animation: [DESCRIPTION]
Use cva (class-variance-authority) for variants.
Make sure the component is fully typed and accessible (ARIA, keyboard, focus states).
Flat backgrounds = amateur. Modern high-end sites use complex gradients, mesh backgrounds, noise textures, or even loop videos. That gives the page texture and depth.
Mesh gradient: multiple radial gradients stacked with different blend modes.
Noise layer: SVG filter with feTurbulence as a top layer for organic texture (film-grain effect).
Animated gradient: CSS animation on background-position for slow drifting light.
Hero video: 10–15-second loop, under 2 MB, autoplay muted playsinline, with <video poster> fallback.
Replace the flat hero background with a cinematic mesh gradient:
- 3-4 radial gradients at different positions
- Colours from design-system.md (primary + accent + dark neutral)
- Soft animation (background-position shift over 20s, infinite alternate)
- Noise overlay via SVG feTurbulence (opacity 0.04, mix-blend-mode overlay)
- Dark mode compatible
Render as a reusable component <MeshBackground /> with props for intensity and palette.
Must stay performant (respect prefers-reduced-motion, no layout shift).
Micro-animations are the difference between "nice" and "wow". Two libraries dominate: Framer Motion for React-native animations and state transitions, GSAP (with ScrollTrigger) for complex scroll-based sequences.
Framer Motion for: hover states, modal transitions, layout animations, simple reveals. GSAP for: scroll pinning, timeline choreography, text splits (SplitText), parallax.
Add the following animations (use Framer Motion where possible, GSAP for scroll sequences):
1. Hero: headline fades in word by word via mask reveal (staggered, 80ms delay)
2. Sections: fade-in + slide-up on viewport entry (IntersectionObserver based)
3. Cards: 3D tilt on hover (subtle, max 6deg, spring physics)
4. Navigation: shrinks on scroll, backdrop-blur intensifies
5. CTA buttons: magnetic hover (cursor pulls the button slightly)
6. Scroll progress: thin line at the top, fills from 0 to 100%
Every animation MUST:
- Respect prefers-reduced-motion
- Be performance-optimised (transform + opacity only, no layout thrash)
- Be disabled or reduced on mobile
- Clean up properly (useEffect return, GSAP context)
3D elements are the fastest way to make a site look instantly premium. Two paths: Spline for designer-friendly 3D scenes (no code required), Three.js / React Three Fiber for full control.
spline.design/communityI'm giving you the export code of a Spline scene. Integrate it into the hero section:
- Lazy load (scene loads when hero is in viewport)
- Loading skeleton while the scene loads
- Performance fallback: on mobile AND with prefers-reduced-motion → static PNG
- Mouse parallax (scene reacts subtly to cursor position)
- Max bundle impact: 150KB (suggest an alternative if larger)
Typography accounts for 60 % of the visual impression. The €10,000 formula: one distinctive display font for headlines (e.g. Editorial New, Fraunces, Clash Display, Instrument Serif) + one clean sans for body (e.g. Inter, Geist, Satoshi, General Sans).
All available for free via Google Fonts or Fontshare, all loaded optimally via next/font (zero layout shift, self-hosted) — and if you download and serve them from your own server, it's GDPR-compliant.
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.
Set up the typography system:
- Display font: [NAME] via next/font/google or local
- Body font: [NAME] via next/font/google
- Mono font: Geist Mono (for code/tables)
Create a fluid type scale with CSS clamp():
- display-1: clamp(3rem, 8vw, 7rem) — hero headlines
- display-2: clamp(2.25rem, 5vw, 4.5rem) — section headlines
- h1–h6 by major-third ratio (1.25)
- body-lg, body, body-sm, caption
Define in Tailwind config as font-display, font-sans, font-mono and as text-size utilities.
Apply across the site: headlines in display, everything else in sans.
Line-height: 1.1 for display, 1.6 for body.
Letter-spacing: -0.02em for large headlines, 0 for body.
If you want all 7 steps in one go, here's the condensed master prompt. Paste it into Claude Code after CLAUDE.md exists.
Build a high-end landing page for [PROJECT-NAME].
Audience: [AUDIENCE].
Message: [ELEVATOR PITCH in 1 sentence].
Stack: Next.js 15, TypeScript, Tailwind v4, shadcn/ui, Framer Motion, GSAP,
next/font (display: [FONT], body: [FONT]).
Sections (in this order):
1. Nav (sticky, shrinking, glass blur)
2. Hero (Spline 3D or 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)
Colours from design-system.md.
All animations performant and respect reduced motion.
Dark mode default, light mode toggle top right.
LCP under 2s, accessibility WCAG AA.
Start with project structure and the first 3 sections.
I review, then we continue with the rest.
Don't generate everything at once — Claude loses context with huge outputs. Section by section. Don't settle for the first version — two, three iterations per section make the difference. Don't trust "Claude builds everything" — you're the art director, Claude is the craftsperson. And: never start without CLAUDE.md, that's the most important file in the whole project.
In Cowork and Claude Code there are specialised skills that automate individual steps: design:critique for structured feedback on every finished section, design:accessibility for WCAG audits before launch, design:ux-copy for microcopy and CTA text, engineering:review for code review before deploy, and icondesign for custom icons that match the brand. Just invoke them in chat once the relevant step comes up.
No spam, unsubscribe at any time