10-Min $10K Sites: Claude Code + 4 AI/3D Tools
Build pro landing pages with exploding watches, space flythroughs, 360 cars, and AI before/after videos using Claude Code + free tools like Three.js, Spline, Higgsfield—no design or coding skills needed. Deploy free on Vercel.
Claude Code Setup Unlocks No-Skill Web Building
Jono Catliff demonstrates building four high-end landing pages in ~10 minutes each using Claude Code ($17/mo extension for VS Code or Antigravity), no prior coding or design experience required. The core workflow starts with a CLAUDE.md blueprint file acting as SOPs to train the AI: paste it into a new project folder, install the Frontend Design plugin, and prompt with screenshots + code snippets. This one-shots full sites like a Netflix clone with dynamic backgrounds.
Tradeoff: Claude Code requires payment, but Antigravity's free agent approximates it. Images must be <5MB (compress via compresspng.com). Jono rejects manual coding, opting for AI to handle HTML/CSS/JS integration instantly.
"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."
Three.js: Instant 3D Animations from Examples
First tool: Three.js (threejs.org) for free 3D effects like exploding watches, vortexes, or globe connections. Jono browses 153 examples at threejs.org/examples, picks "peacock" for Star Wars-style rolling credits, copies demo code (HTML/JS/CSS), and prompts Claude: "Build a full Netflix clone hero matching this screenshot, but use this Three.js code as background."
Result: Movie Flix site with accelerating 3D starfield on scroll, live at localhost. Why Three.js? Pre-built examples skip creation; direct code paste ensures compatibility. Rejected: Static images (boring) or building from scratch (slow). Sites look $10k+ vs. bland alternatives.
"We're going to make it really dynamic... instead of having a static graphic we have this Star Wars kind of theme."
Spline: Remixable 3D Graphics, Watermark Hacks
Spline (spline.design, free account) offers community-remixable 3D scenes like ribbons or agency-style orbs. Jono remixes a scene, deletes UI text to avoid overlap, exports iframe URL + NPM package (@splinetool/react-spline). Prompts Claude with Dribbble SaaS hero screenshot (search "SaaS website dark"), Spline link, and NPM install instructions.
Output: Purple-accented SaaS landing matching Dribbble. Final tweak: Gradient overlay (black-to-transparent) hides "Built with Spline" logo, preserving conversions. Tradeoff: Free tier watermarks kill trust; gradient hack fixes without paying. Better than Three.js for interactive, no-code edits.
"Nothing kills conversion rates faster than having a free tag or free promotion to somebody else's company down here."
Higgsfield + Kling: Before/After AI Video Morphs
For service businesses (e.g., renovations), generate before/after videos via Higgsfield ($15+/mo, ~10 free credits) + Kling 3.0 model. Workflow: Claude crafts prompts for Gemini to image-gen modern vs. 1960s kitchen (start with "after" image—easier to degrade than upgrade). Upload pair to Higgsfield, add transition prompt (Claude-generated), set duration/quality, generate.
Integrate video into Claude Code prompt for home reno landing. Result: Seamless kitchen morph video showcasing transformation. Decision: Client photos ideal, but AI fills gaps. Rejected static images; videos convert better for proof.
"It's way easier to make a good looking picture ugly afterwards... perfect marketing for your business."
Seedance 2: Cinematic Backgrounds Beat Competitors
Higgsfield's Seedance 2 tops Sora/VO3/Kling for space-to-penthouse flythroughs. Jono compares models, picks Seedance link (higgsfield.ai/s/seedance-2-0-jonocatliff-iTBKxB), generates video, backgrounds luxury condo site. Prompts Claude with video embed.
Why Seedance? Smoothest cinematic quality. All sites deploy free: GitHub repo → Vercel. Evolution: v1 static → 3D → interactive → AI video = billion-dollar polish.
"These landing pages... look like they cost $10,000 to make without any design or coding skills."
Free Deployment and Scaling
Every site pushes to GitHub, deploys on Vercel (free tier). No servers needed. Jono's stack scales his 7-figure agency; shares blueprints in Skool community.
Key Takeaways
- Start projects with CLAUDE.md blueprint + Frontend Design plugin for polished outputs.
- Source Three.js from examples, copy code directly into prompts for 3D backgrounds.
- Remix Spline scenes, delete text, use NPM + gradient to pro-ify without watermarks.
- Gen before/after via Claude → Gemini → Higgsfield/Kling; prioritize "after" image first.
- Test AI video models (Seedance > Kling > Sora) for cinematic site heroes.
- Compress images <5MB; deploy GitHub + Vercel for instant live sites.
- Avoid free tool branding—hacks like gradients maintain conversion rates.
- Total time: 10 mins/site; tradeoff Claude cost for 10x visual impact.