How I build $10,000 AI Websites in 17 mins (Google AI Studio 2.0)

The video presents a practical workflow for building beautiful, profitable websites that actually convert, using Google AI Studio 2 with Gemini 3.5 to create an initial design and then supercharging that output in Claude Code. Jack emphasizes that the secret isn't clever prompts but giving AI explicit rules and design DNA—concrete details like typography, spacing, and brand identity—so the tool understands what "good" looks like. The process starts with pre-work and brand research, generates a rough draft in AI Studio, exports it to Claude for hands-on refinement, and elevates the design with elements like a subtle animated hero video generated in Cling 3.0. He stresses the importance of speed, iteration, and avoiding common pitfalls like excessive text density, ultimately delivering a polished site that is both visually stunning and built to scale a business.

• ▶ 0:00 The video promises a workflow for building beautiful, profitable websites that actually convert, not just flashy ones, using Google AI Studio 2 with Gemini 3.5.
• ▶ 1:09 Google AI Studio is free to use online, powered by Gemini 3 Pro and Gemini 3.5 Flash by default, and lets users build two projects for free.
• ▶ 2:21 Jack's core strategy is to build the initial design in AI Studio for its broad design library, then supercharge the output in Claude Code.
• ▶ 2:38 A key limitation is that AI models don't truly understand great design or buyer conversion—so Jack's system focuses on structuring sites to look gorgeous and grow a business.
• ▶ 3:05 There are three ways to build a website: using generic templates, building from scratch (a time-consuming back-and-forth), or understanding the DNA of a great site you admire.
• ▶ 4:26 The key isn't the prompt itself but giving the AI the rules to follow—if you tell it what good looks like, it can build anything.
• ▶ 5:00 Great design comes from concrete details like fonts, font weights, pixel line heights, and white space—details AI like Gemini doesn't yet fully understand on its own.
• ▶ 6:27 Use Firecrawl for brand research to extract typography and brand identity, then hand it to an AI assistant.
• ▶ 8:28 Do pre-work before building: "an ounce of pre is worth a pound in post" to create a site that turns viewers into buyers.
• ▶ 8:58 The blueprint outputs four key files: builderbrief.mmd, a preview image, scaffold.html, and token/spacing/typography details.
• ▶ 9:28 Use Google AI Studio to generate an initial website from attached reference files and a prompt, treating the first output as a rough draft rather than a finished product.
• ▶ 11:30 Export the generated website as a ZIP from the Code view, then drop it into Claude to take ownership of the code and run it locally on localhost.
• ▶ 12:34 Once in Claude, you can chat directly to the code to make changes and combine it with other tools to build functional, polished websites.
• ▶ 13:30 Selects a stylized rocket-launch image to serve as the hero backdrop, then uploads it into the site generator.
• ▶ 14:26 Refines the image prompt via Claude to reposition the rocket to the right and leave clean space for text, improving contrast and layout.
• ▶ 15:36 Ties the imagery to the value proposition by changing the H1 to "Launch your beautiful website for $0," increasing section height for a stronger first impression.
• ▶ 17:15 The creator finalizes the color scheme, aiming for a tone "somewhere similar" to the referenced color.
• ▶ 17:19 Deciding what would elevate the design further, the creator concludes that adding "a little bit of a video" would serve the site well.
• ▶ 17:30 The plan shifts to transforming the static image into a "really cool freaking video" to make the design more dynamic and engaging.
• ▶ 17:33 The creator moves into generating the website video, using a ready still image and any video-generation tool.
• ▶ 17:47 To fix the earlier "floating off into space" loop problem, he sets the same image as both the start and end frame for a clean loop.
• ▶ 18:06 Using Cling 3.0, he prompts for a rocket "about to take off" rather than launching, so the final frame matches the original for a smooth animation.
• ▶ 18:31 The speaker acknowledges viewers are struggling and introduces his personal Claude Code operating system, which uses the same design principles as client-facing websites.
• ▶ 18:46 The system provides a comprehensive breakdown of usage across all apps (Claude, ChatGPT, etc.), automatically analyzes daily work, and offers cost-saving suggestions across subscriptions.
• ▶ 18:59 It can act as an autonomous agent, researching topics independently overnight, and the speaker integrates these insights into dashboards to "bring them to life" and make information easier to consume [19:03–19:10].
• ▶ 19:10 The speaker notes that motion in the video adds a lot to the experience, making it more engaging to consume.
• ▶ 19:16 The result is assessed as decent and "not too bad," with a gentle visual tone that feels appropriate for a website context.
• ▶ 19:22 The subtle, non-distracting cloud motion is rationalized as fitting since the audience won't study the video frame-by-frame like a movie.
• ▶ 19:25 After generating the video, the creator reviews it carefully ("studying this like a movie") before downloading it and using Claude to replace the existing static image with the video.
• ▶ 19:32 Website speed is critical—users are impatient—so Claude must check the video file size, compress it if it creates latency, but first review it in 4K while keeping the exact same dimensions as the original image.
• ▶ 20:03 Use website speed-checking tools, and when scaling (e.g., to ~50,000 monthly visitors), verify speed and conversions, plus use heat maps to see exactly where users need to click.
• ▶ 20:20 The speaker expresses strong enthusiasm for the design, highlighting its relevance when "scaling up the business" and exclaiming "look at how freaking cool is this."
• ▶ 20:25 They state a clear preference for this design over "some of the more out there whimsical designs" because it has "less stuff to go wrong."
• ▶ 20:29 The speaker values the design for its simplicity and stability—it "just sits there"—offering reliability and low risk as the business grows.
• ▶ 20:33 The final website result is "freaking amazing," but there is still room for further optimization and refinement.
• ▶ 20:47 Expect to iterate through two or three generations of the website to achieve the right level of quality and style.
• ▶ 21:04 A common critical issue is "way too much text density" — after reviewing over 200 websites, this was the most frequent feedback given.
• ▶ 21:16 The speaker recaps the workflow: starting from a single brief, pasting it into Google AI Studio, having the agent create a multifile project, and iterating on it before moving to Claude for editing.
• ▶ 21:34 The most important step is turning viewers into buyers; a flashy website that can't convert is like a Lamborghini with no engine.
• ▶ 21:51 The "outlier strategy" is introduced as the method for conversion-focused design, described as "super simple" but capable of putting users "light years ahead" of competitors.
• ▶ 21:57 Analyze up to 12 competitor websites, comparing the top five versus the worst five in your industry and location.
• ▶ 22:19 Extract insights from top performers—such as showcasing beautiful work, real people, and video testimonials—and write them down as takeaways.
• ▶ 22:36 Study the worst-performing sites to identify what not to do, and use a tool like Firecrawl to automate the extraction.
• ▶ 22:41 The Outlier Research Skill is a free tool that uses Firecrawl for website research.
• ▶ 22:55 To use it, open a brand new chat, drop in the skill, and prompt it to research for your website.
• ▶ 23:10 Provide website context (ideal customer, similar sites, missing elements) for better results, though the skill can work on its own.
• ▶ 23:51 The blueprint should be comprehensive, combining all three types of sites rather than just one example.
• ▶ 23:59 Don't reinvent the wheel—reuse proven approaches for recurring website and business tasks.
• ▶ 24:12 Study successful, high-converting sites to find common trends, then cherry-pick the best components to apply to your specific offer.
• ▶ 24:34 Check first that visitors instantly understand what the website is about before any other refinements.
• ▶ 24:43 Remember the core principle: websites are glanced at, not read—never take the visitor's attention for granted.
• ▶ 24:48 A crystal-clear offer (e.g., “launch a website for $0”) is what earns attention, and you must pair it with an eye-catching element to hold it.
• ▶ 25:02 Build credibility with recognizable logos (client logos or tools you use) and testimonials, rather than paying for third-party validation.
• ▶ 25:35 Keep the H1 headline to no more than seven words, then immediately answer "What do I get out of it?" by repeating the benefits clearly.
• ▶ 26:03 Structure the page as offer → credibility → a simple, unmissable Call-to-Action (e.g., a clear "Launch" button) and remove weak elements that don't help conversion.
• ▶ 26:12 Keep the website concise to avoid information overload and unnecessary scrolling.
• ▶ 26:14 Apply the "Don't Make Me Think" principle, targeting the fast, automatic "chimp brain" rather than analytical thought.
• ▶ 26:22 Use instant visual cues like green = good, red = bad to remove cognitive friction.
• ▶ 26:30 The final output is a data-driven, non-generic blueprint for website builders, breaking down ideal homepage, pricing, and feature pages based on analysis of competitors like Wix, Squarespace, Shopify, Framer, and Webflow.
• ▶ 26:30 The blueprint provides a section-by-section structure (hero, stat strip, use cases, templates, customer gallery), giving builders a concrete plan to construct high-converting pages.
• ▶ 27:13 A key insight is that no AI is mentioned anywhere on the winning page, suggesting top performers may not rely on AI messaging despite its popularity.
• ▶ 27:18 Ask Claude to create a data-driven action plan for changes to the current website, with the goal of maximizing conversions and turning viewers into buyers.
• ▶ 27:32 Ensure the plan is tailored to the specific intention: the product being offered, so all recommended changes support selling that product.
• ▶ 27:35 Claude's response will explain how to improve the site built in Google's AI Studio, based on the conversion and design principles discussed earlier.
• ▶ 27:46 The technical process of building visually impressive websites is complete.
• ▶ 27:48 Next steps include publishing the site live, managing SEO, selling websites as a service, and integrating into a business context.
• ▶ 27:58 A master class is promised to cover these publishing, SEO, sales, and scaling topics in depth.

• ▶ 0:00 Introduction and AI Studio Overview (0:00 - 3:07) - - Introduces building profitable websites, new AI Studio features, and the overall strategy.
• ▶ 3:07 Design Blueprint Strategy (3:07 - 6:30) - - Covers the three build methods, design architecture vs. copying, and extracting design components.
• ▶ 6:30 Research and Blueprint Output (6:30 - 9:30) - - Shows brand research, entering site details, and receiving the four blueprint output files.
• ▶ 9:30 Generate and Refine in AI Studio and Claude (9:30 - 13:27) - - Walks through attaching files in AI Studio, generating/remixing the site, then moving into Claude.
• ▶ 13:27 Imagery and Hero Section Refinement (13:27 - 17:19) - - Adds and refines hero imagery, ties in the launch theme, adjusts copy, height, and video.
• ▶ 17:19 Final Review and Iteration (17:19 - 28:03) - - Covers the looping video, website speed, 4K review, and ongoing design/text density tweaks.