Claude Code Blueprint Unlocks One-Shot Websites

Jono Catliff demonstrates building four high-end landing pages in ~10 minutes each by treating Claude Code (Anthropic's $17/mo VS Code extension) as a trained employee via a CLAUDE.md blueprint file. This file acts as SOPs, instructing Claude on frontend best practices. Setup in free Antigravity (browser VS Code alternative): install Claude Code extension, add Frontend Design plugin, create project folder, paste blueprint. Tradeoff: Claude's cost vs. free agents in Antigravity; blueprint ensures consistent, polished output without manual tweaks.

He one-shots sites by uploading screenshots (e.g., Netflix hero from dribbble.com, compress <5MB via compresspng.com) and pasting code/links. Results deploy to localhost instantly. Why this over manual coding? Replicates $10k agency designs for non-designers; scales to ecom, SaaS, services.

"Cloud Code comes into the picture by being an extension that lives inside of something like Antigravity... You do not need to be technical whatsoever." – Jono explains accessibility, emphasizing blueprint as 'instruction guide or manual telling Claude Code how to behave.'

Three.js: Copy-Paste 3D Animations for Dynamic Backgrounds

Start with threejs.org examples or curated lists like '153 Three.js examples.' Pick 'peacock' demo (Star Wars/Netflix vibes: scrolling 3D particles). Copy HTML/JS/CSS, prompt Claude: replicate Netflix screenshot but swap static bg for pasted Three.js code.

Outcome: 'Movie Flix' Netflix clone with infinite-looping 3D starfield that accelerates on scroll. Live in minutes. Decision: Three.js over static images for 'dynamic' feel that 'looks stunning'; rejected building from scratch—examples provide production-ready code. Tradeoff: Browser-heavy (needs optimization for mobile), but free and embeddable anywhere.

Why copy demos? 'You can open them up, see what it looks like and then hopefully use one' – faster than custom, instant polish.

Spline: Remix Community 3D, Hide Logos with Gradients

Spline.design (free account): Remix community scenes (e.g., ribbon graphic), delete UI text to avoid overlap. Export iframe URL + '@splinetool/react-spline' NPM package (ensures clean render).

Prompt Claude with Dribbble SaaS hero screenshot (search 'SaaS website dark'), Spline link/package. Result: Purple-accented SaaS page matching design, 3D ribbon bg. Tweak: Prompt gradient overlay (black-to-transparent) hides 'Built with Spline' badge.

"Nothing kills conversion rates faster than having a free tag or free promotion to somebody else's company down here." – Jono on logo hack; gradient preserves visibility below. Rejected paying Spline Pro; free tier + hack = zero cost. Tradeoff: Iframe limits (no deep edits), but remixing beats zero-code alternatives.

Higgsfield AI Videos: Before/After and Cinematic Flythroughs

Before/After (Kling 3.0): Claude.ai crafts prompts for Gemini (free) images: modern vs. 1960s kitchen. Upload to higgsfield.ai ($15+/mo, ~10 free credits). Prompt transition: smooth morph. Embed video in renovation landing page.

"I always start with the beautiful picture first because it's sometimes harder to take an ugly picture and then make it beautiful." – Jono's tip for reliable AI outputs; real client photos ideal for authenticity.

Cinematic (Seedance 2): Compares models (Seedance > Sora/VO3/Kling for coherence). Prompt: universe-to-Earth-to-penthouse flythrough. Embed as luxury condo bg.

Why Higgsfield? Handles image-to-video seamlessly; rejected static images for 'mind-blowing' immersion making '$10k sites.' Tradeoff: Credits limit volume; prompt engineering critical (Claude mega-prompts).

GitHub + Vercel: Instant Free Deploys

Push to GitHub repo, connect Vercel (free tier). Custom domains optional. Full stack: no servers, pure static + embeds. Scales to production; Jono's agency site uses Spline live.

"Using Cloud Code and four tools you can build websites that look like they cost $10,000 to make without any design or coding skills." – Core promise validated across demos.

Key Takeaways

  • Copy CLAUDE.md blueprint from Jono's Skool (free) to train Claude Code instantly—treat as SOPs for consistent UIs.
  • Source Three.js/Spline from examples/community: demo > custom for speed; paste code directly into prompts.
  • Compress screenshots <5MB; use Dribbble for hero inspo—Claude clones pixel-perfect.
  • Hide free-tool watermarks with black-to-transparent gradients—protects conversions.
  • Chain LLMs: Claude prompts → Gemini images → Higgsfield Kling/Seedance videos for pro effects.
  • Deploy every prototype: GitHub + Vercel = live sites in seconds, no hosting costs.
  • Prioritize 'after' images first in before/after AI; real client pics amplify marketing.
  • Plugins like Frontend Design boost defaults; one-shot prompts with assets = 10-min builds.
  • Evaluate AI video models per use: Seedance for cinematic, Kling for transitions.