← Google AI Studio
Jack Roberts
How I build $10,000 AI Websites in 17 mins (Google AI Studio 2.0)
⏱ 28 min video · 3 min read26 May 2026Worth watching
TL;DR
Jack Roberts demonstrates a step-by-step workflow for building high-converting websites using Google AI Studio (Gemini 2.0/3.5 Flash) combined with Claude Code, Firecrawl, and AI image/video generation. The method goes beyond aesthetics by using competitor analysis and conversion principles to turn visitors into buyers.
Key points
1
Use Google AI Studio (Gemini 3.5 Flash, free) to generate the initial website from a design blueprint, then export the code as a zip and bring it into Claude Code for full control and iteration
2
Extract the design DNA of inspiration websites using a 'Design Blueprint Extractor' tool (typography, spacing, color palette, white space ratios) rather than copying outright, to steer Gemini toward genuinely great design
3
Use Firecrawl and an 'Outlier Research Skill' to analyze the top and worst 12 competing websites in your niche, identifying conversion patterns like testimonials, imagery of real people, and clear CTAs
4
Replace static hero images with looping AI-generated videos (Kling 3.0 used here) to add visual dynamism, while keeping file size in check for page speed
5
Core conversion principles: H1 under 7 words, no text density overload, clear offer above the fold, credibility signals (logos, testimonials), and a single strong CTA — websites are glanced at, not read
Actionable insights
→
Before prompting AI, extract a design blueprint from an inspiration site using Firecrawl or Claude to get exact typography, spacing, and color tokens — this is what prevents the generic AI look
→
Run the Outlier Research Skill (Firecrawl + Claude) on 12 competitors in your niche to identify what the top performers have in common, then cherry-pick those components for your own site
→
After building in AI Studio, download the zip and open it in Claude Code via localhost to retain full ownership of the code and iterate freely without platform lock-in
→
For hero sections, generate a looping AI video (same start and end frame) using tools like Kling 3.0 to replace static images — check file size to avoid latency penalties
→
Apply the 'don't make me think' rule: one clear offer in the H1, immediate credibility (logos or platform badges), benefit bullets, testimonials, then a single CTA — remove anything that does not serve this flow
Notable quotes
“Websites are not read. Websites are glanced at. Do not take their attention for granted.”
“The trick isn't the prompt, it's giving the agent the rules to follow.”
“A flashy website that can't actually do anything is like a Lamborghini with no engine — looks great, but doesn't really cut the mustard.”
Worth watching?
✅
Worth watching the full video?
Watch if you want to see the live workflow in action — the tool chain (AI Studio, Claude Code, Firecrawl, Kling) is demonstrated step by step, and seeing the before/after design iterations adds context the summary alone cannot fully convey.
Saved you some time? The creator still deserves a like.
Want this for your own channels?
Add the channels you follow. Every new video summarised and in your inbox the moment it drops. From £4/month.
Try it free