Claude Code + Free Tools: 10-Min Pro Websites
Build stunning landing pages in 10 mins using Claude Code with Three.js, Spline, and AI videos from Higgsfield—no design or coding skills required, deploy free on Vercel.
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.