Mega-prompt: Premium Landing Page (Next.js + Motion)
Skill packs and prompts are provided in English so they work best with the AI tools. Use them as-is.
This is the most powerful prompt in the Web Design area: a single instruction that directs Claude like an elite design agency — senior frontend engineer, senior UI/UX designer, and performance expert at once — building a premium landing page in phases, with your approval between each one. It includes sourcing modern components from 21st.dev, adapted to your brand.
What it produces: a complete landing page in Next.js 14 + Tailwind + Framer Motion — nav, hero, features, pricing, FAQ, footer — with Vercel/Stripe/Linear-level quality, ready to deploy. How it works: it first shows you the architecture, waits for your OK, then goes section by section. You're in charge at every step.
How to use it, in 3 steps
Edit the 6 fields
Everything you must change is highlighted in gold inside the prompt and starts at the FILL THESE IN FIRST block. The table below tells you what to put in each one, with examples.
Paste the whole prompt
Copy with the block's button, paste into Claude Code (model Opus for Phase 1) and send. Don't trim anything: the quality rules at the end are what prevent the generic look.
Approve phase by phase
Claude shows you the architecture and WAITS. You review, approve, and it goes section by section. Never let it build everything at once — that's where the magic is.
⚠️ The 6 fields you MUST personalize
Change only these fields — the rest of the prompt is already tuned. In the block below they appear highlighted in gold so none slips past you.
| Field | What to put | Example |
|---|---|---|
| [PRODUCT / SERVICE NAME] | The name of what you sell | CaféClub — specialty coffee subscription |
| [ONE-LINE VALUE PROP] | The outcome your customer gets, in one line | the best coffee of the month, fresh-roasted, at your door |
| [TARGET AUDIENCE] | Who the page must convince | 25-40 professionals working from home |
| [DESIGN SYSTEM PATH] | The path to YOUR design system — or ask for one | .claude/skills/frontend/SKILL.md · or none — propose one |
| [BRAND REFERENCES] | 2-3 sites whose feel you want | Linear, Stripe |
| [SECTIONS TO SKIP] | Sections that don't apply today | no Pricing yet · or none |
The full prompt
Everything highlighted in gold is editable.
# ══════════════════════════════════════════════
# FILL THESE IN FIRST — everything else is ready
# ══════════════════════════════════════════════
# [PRODUCT / SERVICE NAME] → what you're selling
# [ONE-LINE VALUE PROP] → the outcome your customer gets
# [TARGET AUDIENCE] → who this page must convince
# [DESIGN SYSTEM PATH] → e.g. .claude/skills/frontend/SKILL.md (or write "none — propose one")
# [BRAND REFERENCES] → 2-3 sites whose feel you want (e.g. Linear, Stripe)
# [SECTIONS TO SKIP] → e.g. "no Pricing yet" (or "none")
# ══════════════════════════════════════════════
You are a Senior Frontend Engineer, Senior UI/UX Designer, and Performance
Optimization Expert. Build a world-class, premium SaaS landing page for
[PRODUCT / SERVICE NAME] — value proposition: [ONE-LINE VALUE PROP] — aimed
at [TARGET AUDIENCE]. The final result should feel handcrafted by an elite
design agency, comparable to [BRAND REFERENCES].
# Tech stack (use exactly)
- Next.js 14 (App Router) + TypeScript
- Tailwind CSS + Framer Motion
- React Server Components wherever possible
- Mobile-first responsive design, SEO metadata, WCAG accessibility
- Clean, modular architecture
# Design system
Follow the design system at [DESIGN SYSTEM PATH]. Use every token it defines:
colors, typography scale, 8px spacing, radii, shadows, buttons, cards, grid,
breakpoints, motion guidelines. Never invent styles that conflict with it.
If no design system exists, FIRST propose one (tokens + component patterns)
and wait for my approval before building.
# Component sources
Browse https://21st.dev for modern, high-quality sections — Hero, Navbar,
Pricing, Testimonials, FAQ, CTA, Footer, Feature Cards. Pick the best
candidates and adapt them: never copy blindly — re-skin colors, spacing,
typography and motion to match the design system. Consistency beats novelty.
# Motion requirements (Framer Motion, premium and intentional — never noisy)
- Hero: fade-in, blur reveal, floating/gradient background, headline reveal,
CTA entrance, scroll indicator
- Sections: scroll reveal, fade-up, stagger, viewport detection
- Cards: hover lift + soft shadow/glow, scale
- Buttons: hover scale, tap feedback, icon movement
- Pricing: highlight recommended plan, animated border
- FAQ: smooth accordion with height animation + chevron rotation
- Footer: soft fade-in
Respect prefers-reduced-motion everywhere.
# Page structure (skip: [SECTIONS TO SKIP])
1. Sticky nav 2. Hero 3. Social proof 4. Features 5. Product showcase
6. Benefits 7. Statistics 8. Pricing (monthly/annual toggle, recommended
plan) 9. Testimonials 10. FAQ 11. Final CTA 12. Footer
# Quality bars
- Lighthouse: Performance 90+, Accessibility 95+, Best Practices 95+, SEO 95+
- Optimize images, fonts, bundle, lazy-loading, code-splitting, metadata
- No AI-generated look: layered backgrounds, real typographic hierarchy,
premium spacing, micro-interactions — never generic Tailwind defaults
- Modular, typed, reusable code; no duplication
# Workflow — work section by section, never all at once
Phase 1: project structure (folders, components, routes) → WAIT for approval.
Phase 2: Navbar only, explain decisions → WAIT.
Phase 3: Hero only (JSX + Tailwind + Motion + responsive) → WAIT.
Then continue one section at a time, never advancing until the current
section is approved.
# Final deliverables
Complete source, install instructions, folder explanation, optimization
checklist, Lighthouse summary, future recommendations. Production-ready and
deployable on Vercel.
Begin with Phase 1: the complete project architecture, explaining every
folder before writing any UI code.
How to get the most out of it
- Respect the phases. The magic is in the "WAIT for approval": you review the architecture before a single line of UI exists, and each section before the next.
- Recommended models: Opus for Phase 1 (architecture and decisions) and Sonnet to build each section — the "Opus reviews, Sonnet implements" pattern.
- 21st.dev components: the prompt already tells Claude to source high-quality sections from 21st.dev and re-skin them to your design system — never copy them blindly.
- Combine it with the
frontend-designskill (you installed it in Fundamentals): the prompt says WHAT to build; the skill brings the visual taste. - At the end, ask for the Lighthouse checklist and actually run it — the prompt sets the floors (90+ performance, 95+ accessibility).
10-minute practice: fill the 6 fields with an invented business (a specialty coffee shop, say), paste it, and approve only Phase 1. Watching Claude propose the architecture teaches you more about project structure than an entire tutorial.