The purple-gradient hero. The floating glass cards. The same 4 stock-photo testimonials. You know the look — and you've seen it on every AI-generated site this year. Claude builds these by default. Not because it's bad. Because nobody told it what good looks like.
The Problem
AI template vs. studio grade. Here's the gap.
Ask Claude to "build me a landing page" and you get the same template every time. Gradient mesh background, glassmorphism cards, generic copy. It's technically correct and aesthetically exhausted.
The gap isn't Claude's capability. It's context. Claude optimizes for average — because the average prompt gives it nothing to aim higher at. Give it the right tools and vocabulary, and it builds like a senior design engineer.
Default prompt
Purple template. Every time.
With the 5-tool stack
Awwwards-caliber. Every time.
The Stack
5 tools. Nothing else.
The gap between AI template and studio-grade is exactly these five working together. Not a framework. Not a boilerplate. Five sharp tools with a shared vocabulary.
TOOL 01 / 05
Claude Code
The brain of the stack. Orchestrates everything else and writes the site. Runs from your terminal via the Anthropic CLI. Pair it with CLAUDE.md system context and it develops with consistent design intent across every section.
npm install -g @anthropic-ai/claude-code
# Authenticate once
claude auth login
TOOL 02 / 05
Nano Banana
Google's image model, accessible from your terminal. Generates real product photography — not AI art, not stock photos. Hero imagery generated by Nano Banana beats every alternative. Get an API key from Google AI Studio. The free tier covers your first dozen images.
pip install nanobanana
# Set API key (from Google AI Studio)
export GOOGLE_API_KEY=your_key_here
# Generate hero image
nanobanana generate "cinematic product hero, dark studio, 8K"
TOOL 03 / 05
Motion
Formerly Framer Motion. The animation runtime for React. Makes the page feel alive with spring physics and gesture recognition. Claude knows its API well — just name the pattern and it wires it up correctly every time.
# In your component
import { motion, AnimatePresence } from 'motion/react'
TOOL 04 / 05
GSAP + GreenSock Skills
The scroll vocabulary. That pinned section on Apple's Vision Pro page? GSAP. The GreenSock skills repo at github.com/greensock/gsap-skills gives Claude every scroll pattern by name — so it pulls from real training data instead of improvising geometry.
# With ScrollTrigger
import { gsap } from 'gsap'
import ScrollTrigger from 'gsap/ScrollTrigger'
gsap.registerPlugin(ScrollTrigger)
TOOL 05 / 05
21st Dev MCP
A catalog of premium pre-built React components. Connect it once as an MCP server and Claude pulls from real, production-tested components instead of writing each one from scratch. Pricing tables, testimonial carousels, feature grids — all studio-grade out of the box.
{
"mcpServers": {
"21st-dev": { "command": "npx @21st-dev/mcp" }
}
}
The Framework
7 steps. Walk Claude through them in order.
Don't ask Claude to "build me a landing page." That's the prompt that gets you the purple template. Walk it through these seven steps — in this exact order — and it builds like it has a design director looking over its shoulder.
Show it what good looks like
Send 3–5 reference URLs of sites you love. Linear, Stripe, Apple's Vision Pro page, Igloo Inc, anything off awwwards.com. Tell Claude to study them before it writes a single line of code. It'll extract palette, type hierarchy, spacing rhythm, and motion vocabulary.
Lock the look before any code
Colors, fonts, vibe — define them once, write them down as design tokens. Every section has to obey this contract. No drift halfway through. This is the step most developers skip, and it's why AI pages look inconsistent.
Plan sections like a magazine
Hero, problem, feature deep-dive, comparison, pricing, closing CTA. Decide the order first. Give each section a different visual treatment — varying density, dominant color, layout grid — so the page doesn't feel monotonous. A magazine art director designs every spread differently.
Pick how things move
Use the named GSAP patterns Claude already knows: pinned-scrub, sticky-stack, image-sequence-scrub, horizontal-on-vertical, splittext-reveal. Naming them triggers Claude to pull from training data instead of guessing scroll geometry. Each section should have a named pattern.
Pull in real parts
Tell Claude to use 21st Dev components and GreenSock patterns. Explicitly say: "don't write custom components unless no 21st Dev equivalent exists." This forces it toward battle-tested UI instead of reinventing the wheel with worse results.
Generate the imagery
Use Nano Banana for the hero. Real product photography beats AI illustrations every time — it has depth, texture, and a physical quality that AI art doesn't. Run it from your terminal, iterate on the prompt until it's cinematic, then hand the path to Claude.
Test, fix, repeat
Screenshot after every section at 1440px. Compare to your references. Tell Claude what's off with specific language — "the feature section feels too light, needs more visual weight" rather than "make it better." Keep iterating until your screenshot belongs on Awwwards.
The Vocabulary
Keywords that unlock Claude.
Drop these into your prompts. Each one corresponds to a real pattern Claude already knows from GSAP, Linear, Stripe, and Apple's sites. Naming them makes Claude pull from training data instead of improvising.
The Prompt
Your first prompt. Copy it. Adapt it.
This is the exact prompt structure that gets you studio-grade output. Replace the bracketed sections for your product. The order matters — each step sets up the next.
# Studio-Grade Landing Page Prompt I want to build a studio-grade landing page for [PRODUCT NAME]. Reference sites: [URL 1], [URL 2], [URL 3] Tone: [premium / playful / industrial / editorial] Audience: [who buys this] Use: - Motion + GSAP + Lenis for smooth scroll and animations - 21st Dev MCP for components - Nano Banana for the hero image Follow this order: # 1 — Scrape references first Scrape the reference sites. Extract palette, type scale, spacing system, and motion vocabulary. Show me what you found before touching any code. # 2 — Lock design tokens Propose CSS custom properties for color, type, spacing. Wait for approval before writing any component. # 3 — Plan sections Plan 5–8 sections with distinct visual treatments. Specify the layout, dominant color, and visual density for each. Different every time. # 4 — Name the scroll patterns For each section, pick a named scroll pattern: pinned-scrub, sticky-stack, image-sequence-scrub, horizontal-on-vertical, or splittext-reveal. # 5 — Pull from 21st Dev Use 21st Dev components wherever possible. Only write custom ones when no equivalent exists. Tell me which you pulled vs. wrote. # 6 — Generate hero image via Nano Banana Run: nanobanana generate "cinematic [product] hero, dark studio, 8K sharp" Iterate the prompt until it's photo-quality. Then use that image. # 7 — Screenshot and iterate Take screenshots at 1440px after every section. Compare to the references. Tell me what's off. Don't ship until the screenshots feel like the reference sites.
Pro Tip
One color swap. Big difference.
Don't use pure black for the background. Don't use pure white for the text. These two swaps separate premium dark mode from default dark mode — and they cost you nothing.
#000000 ✗
OLED dead-zone. Shadows, gradients, and tonal layers have nowhere to live. The whole site reads flat.
#121414 ✓
The slight warm bias gives your shadows, gradients, and glass layers room to breathe. Premium instantly.
Same logic for text: #e3e2e2, not #ffffff. Pure white blows out contrast on dark backgrounds and reads harsh at any screen brightness. The warm-gray bias creates visual hierarchy between headings and body text without touching font weight.
[ Ship it ]
Five tools.
Seven steps.
One prompt.
Go build something that belongs on Awwwards.
Back to Blog