Build recipe · for vibecoders
Ship a cinematic editorial site — without writing code yourself.
Eleven prompts, in order. You paste each one into Claude Code and it builds the matching slice of the site — scroll-scrubbed hero film, pinned image reveal, stacking portfolio, admin dashboard with CRM and email. No prior dev experience needed. You handle taste; Claude handles syntax.
What you'll ship
One Next.js codebase.
Two surfaces.
Real studio feel.
Public site
Scroll-scrubbed hero film, smooth-scroll, pinned aperture reveal, stacking portfolio, contact form, per-item dossier pages. Editorial typography — warm ink + gold accent — not the Tailwind template look.
Admin dashboard
Lead CRM with statuses, tags, search, CSV export. First-party analytics (page views, devices, countries). Clerk auth so only you see it. Resend wired so every submission lands in your inbox.
Frame pipeline
You generate a 5-second hero clip in Kling / Sora. Claude turns it into responsive WebP frames (mobile / desktop-1x / desktop-2x) and drops them where the hero looks for them.
Mental model
Six layers. Bottom-up. Don't skip.
Every step above depends on tokens, smooth-scroll, and reveal primitives from steps below. Skipping causes weird breakage that's hard to diagnose later.
- L5CRM, email, auth, analyticsThe admin dashboard at /dashboard
- L4Detail pagesDossier / item / about / contact
- L3Reveals, nav, footer, contactThe supporting cast
- L2Pinned sectionsOverture + portfolio stack
- L1Hero scroll-videoSmooth-scroll + design tokens
- L0FoundationNext.js 16 · Tailwind v4 · fonts · Lenis · GSAP
Fill out the brief once
Open the brand brief, paste your business name, accent color, voice. This single file is read by every other prompt.
Open Claude Code in an empty folder
Install it from claude.com/claude-code. Make a new folder, run claude, and keep this site open in another tab.
Copy each prompt in order, paste, wait
Open step 02 → tap the Copy button → paste into Claude → press enter. When it finishes, move to step 03. Don't skip ahead.
The recipe
Eleven prompts, in order
Each card opens a self-contained prompt. Tap it, then tap Copy prompt and paste into a new Claude Code session.
Business Brief Template — Fill This Out Once
Fill in your brand, voice, accent color, and content once. Every later prompt reads from this one brief.
Open01 — The Scroll Video Workflow (you do this manually)
The only step you do by hand: generate the hero film in Kling / Sora, then hand the MP4 to Claude to bake into scroll frames.
Open02 — Stack & Foundation
Claude scaffolds the Next.js 16 project, installs Tailwind v4, fonts, Lenis smooth-scroll, and the layout shell.
Open03 — Design Language
The editorial CSS system: warm-ink background, gold accent, corner-bracket frames, eyebrow labels, reveal animations.
Open04 — The Scroll-Video Hero
The canvas-based <ScrollVideo> — pre-decoded WebP frames, scrubbed by scroll, with responsive tiers and overlay UI.
Open05 — Pinned Overture (Aperture-Reveal Section)
Pinned aperture reveal: one signature image opens from a slit to full-bleed while big display words drift behind it.
Open06 — Portfolio Stack (Pinned Stacking Section)
Items (homes / services / cases / dishes) stack one over the other on scroll. Pinned timeline on desktop, plain list on mobile.
Open07 — Reveal Primitive + Navbar + Footer + Contact Section + Carousel
Supporting parts: <Reveal>, navbar, footer, marquee, the correspondence contact section, carousel.
Open08 — Detail Pages: Item Dossier, Index, About, Contact
Per-item dossier page, the index page, about, contact — everything that hangs off the home.
Open09 — Admin Dashboard: Turso + Clerk + CRM + Analytics
The admin side: Clerk auth, Turso database, lead CRM with statuses and notes, first-party analytics.
Open10 — Email Notifications via Resend
Resend wiring: an admin notification email when a form is submitted, plus a customer auto-reply.
OpenWhat makes it not look AI-built
Seven moves the prompts keep intact.
Scroll is the timeline.
Every motion locked to scroll position. Nothing autoplays against the user.
Canvas frames, not <video>.
The hero paints WebP stills on a canvas. That's what lets it scrub smoothly at any speed.
Mobile is a different page.
Pinned timelines render only on desktop. On phones, the same sections lay out statically.
Direct DOM on the hot path.
Hero overlays write to style props directly — no re-renders at scroll-frame rate.
Editorial typography ladder.
Display 200–300 at huge sizes; mono 300 with 0.3em uppercase tracking. Not the Tailwind defaults.
Warm ink, never black.
#0f0b06 with two radial warm spots. Pure black is what screams 'template.'
Gold used like a knife.
Hairlines, eyebrow labels, one CTA, gradient text. Never as a card fill.