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

Summary

Jack Roberts presents a workflow for creating polished, conversion-focused websites with Google AI Studio and refining them in Claude Code. His central argument is that attractive design alone is not enough: websites also need clear offers, credible evidence, and a structure informed by what works in the intended market.

Website-Building Workflow

1. Start with design references, not just a prompt. Roberts contrasts buying a generic template, building entirely from scratch, and analyzing the “design DNA” of effective websites. The goal is to identify elements such as typography, colors, spacing, layout, and visual style, then apply those principles without copying the original site.

2. Create a design blueprint. He demonstrates using a blueprint extractor or AI-assisted research to analyze a reference website. The resulting materials may include a brief, a page preview, an HTML scaffold, and design tokens such as spacing and typography guidance. He also mentions Firecrawl for extracting site and brand information.

3. Generate the initial site in Google AI Studio. The blueprint and a description of the business are supplied to AI Studio, which generates a website project. Roberts describes AI Studio as offering free access to a Gemini model and highlights its usefulness for quickly generating designs. He cautions that the initial result may look generic or have a recognizable “AI design” style, so it should be treated as a starting point.

4. Export and iterate in Claude Code. The project is downloaded as a ZIP and opened in Claude Code, where it can be run locally—Roberts gives localhost:3000 as an example. Working with the exported code makes it possible to refine the site through natural-language requests and move beyond the AI Studio environment.

5. Improve the hero section with custom media. In the demonstration, Roberts generates a rocket-themed image and adjusts its composition so the rocket sits on the right, leaving clear contrast for text on the left. He then creates a short, subtle looping video from the image using an image-to-video tool and adds it to the site. He stresses checking file size and loading speed when using video.

6. Refine through repeated review. Changes include updating the headline and supporting copy, adjusting the hero’s height, removing distracting elements, and reducing overly long text. Roberts recommends making the first screen’s message immediately understandable and avoiding excessive text density.

Conversion and Research Principles

• Use competitor research to find patterns. Roberts describes an “outlier” research method: examine strong and weak websites in a target industry, identify recurring features among top performers and shortcomings among weaker ones, and use those findings to guide the site. His example research covers website builders; he suggests applying the same approach to specific local-service niches.
• Make the offer clear at a glance. Visitors tend to scan rather than read, so the headline should quickly communicate what is being offered. Roberts recommends keeping the H1 concise—around seven words or fewer.
• Establish credibility. Possible signals include customer or partner logos, testimonials, and recognizable platforms the product works with. If a business lacks established logos, he suggests using other relevant trust indicators.
• Explain what the customer gets. Present the offer and its benefits clearly, support them with credibility, and include a prominent call to action.
• Keep the page focused. The broader principle is “don’t make me think”: reduce unnecessary text and visual clutter, and make the next step obvious.

Guides, Tools, and Demonstrations

• Google AI Studio: Initial website generation from a design brief.
• Claude Code: Local preview and iterative code editing after exporting the project.
• Firecrawl: Website and brand research.
• Design blueprint extractor: A community-provided tool or skill for turning a reference site into a design brief and related files.
• Outlier research skill: A community-provided workflow for researching high- and low-performing sites in a market.
• Image and video generation: Roberts demonstrates creating a hero image and turning it into a short video. He mentions Hexfield, Pixlr, and Kling 3.0 as tools used in the example.
• Additional design inspiration: Roberts recommends browsing Godly.website for website design examples.

Main Speaker and Source

Jack Roberts is the presenter and narrator. He demonstrates the workflow and shares recommendations based on his experience building websites and businesses.