26:29Jack Roberts · Tutorial
Claude Code + Stitch 2.0 Destroys Web Design
A 26-minute screen-recorded walkthrough of the DRIP framework: from Stitch vibe mockups to a deployed React app with Supabase auth and Stripe payments.
March 24thThe argument in one line.
AI website builders produce generic output not because they lack capability, but because they have no ruleset for what great design looks like — feeding them a structured design brief and competitor intelligence is what separates a $500 site from a $10,000 one.
Read if. Skip if.
READ IF YOU ARE…
- You build websites for clients and want a repeatable AI-assisted workflow that justifies four-figure pricing.
- You are frustrated that prompting AI tools directly produces results that look identical to every other AI-built site.
- You are comfortable orchestrating multiple tools in a single session (Google AI Studio, Claude Code, Firecrawl, an image/video generator).
- You have a live business or offer and need a site that converts visitors, not just one that looks good.
SKIP IF…
- You want a single-tool solution — this workflow requires at least four separate platforms working in sequence.
- You need a deployed, SEO-ready site immediately — the video stops before hosting and search optimization.
- You are looking for deep conversion rate optimization theory; the outlier research section covers it at a high level only.
The full version, fast.
Most AI-generated websites look identical because the model has no reference for what great looks like in your specific context. The fix is a two-stage intelligence layer: first extract the design DNA of a site you admire (typography, spacing, color palette) into a structured brief, then after building run an outlier analysis comparing the top five and bottom five sites in your niche to identify the conversion patterns worth stealing. Google AI Studio generates the initial site from the brief for free, Claude Code handles iterative refinement and image/video integration, and the whole pipeline takes roughly one working session.
Members feature
Chat with this breakdown.
Modern Creator members can chat with any breakdown — ask for the hook, quote a framework, find the exact transcript moment. Unlocks at T2: refer 3 friends + add your own API key.
Create a free account →Where the time goes.
00:00 – 00:47
01 · Stop Building Broken Websites
Hook: most AI websites fall apart on client handoff. Sets up the problem and promises a battle-tested system.
00:47 – 01:09
02 · What Great Websites Are
Shows a clean, white-space-heavy example site built in one shot. Frames the goal: balance, not chaos.
01:09 – 01:43
03 · Google AI Studio Explained
Introduces AI Studio powered by Gemini 3.5 Flash; free tier covers 2 projects; full-stack, annotation, cloud export.
01:43 – 03:36
04 · 3 Ways To Build
Template (generic), scratch (exhausting back-and-forth), or DNA extraction (the recommended path).
03:36 – 04:56
05 · Extract Any Website's DNA
Core concept: reverse-engineer typography, spacing, color palette, and layout rules from an admired site — without copying.
04:56 – 06:29
06 · The Design Blueprint Method
Custom Claude skill + Firecrawl produces builderbrief.md, scaffold.html, typography tokens, and a site preview image.
06:29 – 07:08
07 · Firecrawl For Brand Research
Firecrawl extracts brand identities (fonts, colors) for free; feeds directly to AI.
07:08 – 08:27
08 · Build The Design Brief
Picks rocket.new as inspiration; walks through extractor Q&A to produce the 4-file design brief package.
08:27 – 10:00
09 · Brief Into AI Studio
Uploads brief to AI Studio; prompts for a website-selling-service business; critiques the default AI aesthetic.
10:00 – 11:32
10 · Iterate The Design
Demonstrates remixing, inline edits, and copy changes inside AI Studio before export.
11:32 – 12:17
11 · Export To Claude Code
Downloads zip from AI Studio; drops into Claude Code; opens on localhost.
12:17 – 13:20
12 · Open On Local Host
Claude Code opens a local dev server; demonstrates chatting with the live site to make changes in natural language.
13:20 – 14:22
13 · Add A Hero Image
Generates a Ghibli-style rocket hero image in Hailuo; integrates it as hero background via Claude Code prompt.
14:22 – 15:33
14 · Refine The Hero Section
Iterates image composition (rocket right, text-friendly left area); adjusts h1 copy, gradient, section height.
15:33 – 19:29
15 · Image To Video
Converts hero image to looping 8s video with Cling 3.0 (same start/end frame); replaces static hero; discusses file size.
19:29 – 21:41
16 · Fix Text Density
Biggest community feedback: too much text. Shows generic over-prompted vs. clean design. Rule: do not make me think.
21:41 – 22:42
17 · The Outlier Strategy
Analyzes up to 12 competitor sites: top 5 and bottom 5. Extracts what high-performers do vs. poor performers.
22:42 – 24:34
18 · Run The Research Skill
Uses outlier research skill (Claude skill + Firecrawl) to compare Wix, Squarespace, Shopify, Framer, Lovable.
24:34 – 26:29
19 · Homepage Must Haves
Seven-word h1 max, one viewport/one thought, credibility logos or platform stack, clear offer stack, testimonials, CTA.
26:29 – 27:18
20 · Read The Blueprint
Outlier skill outputs a detailed winning anatomy document with section-by-section recommendations from real competitor data.
27:18 – 28:01
21 · Turn Viewers Into Buyers
Recap and CTA to Claude Code masterclass inside the community.
Lines worth screenshotting.
- AI website builders produce generic results not because they lack generation power, but because they have no reference for what good looks like in your specific niche.
- The trick is not writing a better prompt — it is giving the AI agent a ruleset: a design scaffold extracted from a site you already admire.
- Firecrawl can extract brand identity data (typography, color palette, spacing) from any live site for free and feed it directly into a build prompt.
- The outlier strategy — comparing top-five and bottom-five sites in a niche — surfaces conversion patterns that raw intuition misses entirely.
- Too much text density is the single most common AI website mistake; AI tools pad because they optimize for completeness, not attention economy.
- Websites are not read — they are glanced at; every design decision should survive a two-second attention span.
- A seven-word h1 maximum is a concrete design constraint, not a stylistic preference — longer headlines require cognitive engagement most visitors will not give.
- An animated looping hero video (~8 seconds, same start and end frame) adds perceived production value without significant file size overhead.
- One viewport, one thought — the visible area on load should communicate exactly one idea before the user scrolls.
- Credibility signals do not require Trustpilot; showing the platforms you built with borrows social proof from tools visitors already trust.
- Building in Google AI Studio first, then exporting to Claude Code, separates the design generation phase from the iterative refinement phase.
- The AI aesthetic has proliferated enough that it looks AI is now a conversion liability, not a novelty.
The brief beats the prompt every time.
WHAT TO LEARN
The bottleneck in AI website building is not generation power — it is the absence of a ruleset that tells the model what great looks like in your specific context.
- Raw prompting gives AI tools no reference for quality; feeding them a design brief extracted from a site you already admire produces dramatically better results than describing what you want from scratch.
- Typography, spacing, color palette, and section order are all extractable from any live site using free tools like Firecrawl — this data becomes the rules your AI follows instead of guessing.
- Too much text is the most common conversion mistake on AI-built sites; AI tools optimize for completeness, not for the two-second attention span that decides whether a visitor stays.
- The outlier strategy — studying the top five and bottom five performers in a niche — reveals specific, repeatable patterns (real photos, video testimonials, credibility logos) that intuition alone cannot reliably identify.
- A seven-word h1 maximum is a structural constraint, not a style preference; headlines longer than seven words require cognitive engagement that most visitors will not spend.
- One viewport should contain one thought; every competing element above the fold reduces the clarity of the offer and lowers the probability of a click.
- An animated looping hero video created from a single still image (same start and end frame, ~8 seconds) meaningfully elevates perceived production quality with minimal technical overhead.
- Credibility signals do not require paid review platforms; displaying the tools you built with borrows social proof from brands the visitor already trusts.
Terms worth knowing.
- Design DNA extraction
- The process of analyzing an admired website's typography, spacing, color palette, and layout rules into a structured document that can be fed to an AI as a design brief — without copying the original site.
- Design blueprint extractor
- A custom Claude skill that interviews the user about a target brand and produces four output files: a builder brief, a scaffold HTML, a typography token file, and a site preview image.
- Outlier strategy
- A competitive research method that analyzes up to 12 sites in a niche — splitting them into top performers and poor performers — to identify the specific elements (images, testimonials, section order) that correlate with high conversion.
- Scaffold HTML
- A structural HTML skeleton that defines the section order and component hierarchy of a website without styling, used to guide AI generation toward a specific layout pattern.
- Firecrawl
- A tool that crawls a live website and extracts its brand identity data — fonts, color palettes, typography — into a structured format usable by AI tools.
- One viewport, one thought
- A design principle stating that everything visible on the screen without scrolling should communicate a single coherent idea, preventing the cognitive overload that causes visitors to leave.
Things they pointed at.
Lines you could clip.
04:01
“AI now can effectively build anything if you tell it what good looks like. The trick isn't the prompt, it's giving the agent the rules to follow.”
24:34
“Websites are not read. Websites are glanced at. Do not take their attention for granted.”
20:20
“The biggest feedback I find myself giving is too much text density. Don't make me think.”
21:41
“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.”
Word for word.
analogy
00:00You can now build beautiful websites in the brand new Google AI Studio two with Gemini 3.5. Most people build websites that look flashy but don't work and fall apart the second a client touches them, Which is why in this video, I'm gonna show you exactly how to build beautiful and profitable websites with brand new systems that actually convert viewers into buyers even if you are a complete beginner.
00:25And if you're new, I'm Jack. I built and saw my last tech startup with the gazillion customers. Now I'm building my own AI companies, and I share here the stuff that actually works.
00:34If you haven't already, grab that beautiful coffee, and let's dive straight in. Now I've been going deep on AI Studio, and I am gonna save you so much time with what's changed and what you need to know.
00:43The reality is most websites fall apart like season eight of Game of Thrones. In reality though, what are great websites? Well, they're not necessarily full of chaotic things.
00:53Right? You can build this, which I did in one shot, by the way. Look how balanced.
00:57Look at the white space. Look how beautiful this is. This is just one example.
01:00I'm gonna show you exactly how you build this and how you can reverse engineer what I would call architecture of a website, and we're gonna be using this new AI Studio. But first of all, let me jump in with what's actually new and why we need to talk about it today, and what the hell is really going on here. So the idea is how do build websites in AI Studio, which you can start using completely for free online.
01:21It is, first of all, bear in mind, powered by Gemini three Pro. Okay. So essentially, we're gonna give it a prompt.
01:26Gemini three Pro, they just released a brand new model, 3.5 Flash, which is a mix between capability and speed.
01:34So we're not waiting here for a thousand years for things to happen. We're gonna get great outputs. And it's Gemini 3.5 Flash by default, and you can do two projects completely for free.
01:43Now, couple of things that you can do in AI Studio before we go and build, and I'm show my new strategy, new method I developed, which is just crushing it, and there's somebody who's actually sold websites for thousands and thousands of dollars. Some of stuff I'm gonna show you is actually completely battle tested and will enhance your business or your clients' businesses.
01:58So it can do full stack, native Android builds, you can annotate things in it. Basically, you can send things to the cloud. And crucially, you can export from anti gravity.
02:08But probably, guys, its most powerful feature, genuinely speaking, is just the fact that we're using Gemini 3.5 Flash for free inside Google, and then we're gonna take it over to Claude code to really supercharge it. Anything I show you in this video, you can do directly in Claude.
02:24But what we're gonna be doing is building out in AI Studio because it has access to a very broad design library and its whole purpose and strategy is to design something that looks freaking gorgeous. But it has one huge limitation and that's that the models do not understand what excellent design looks like, and they also do not understand what realistically turns viewers into buyers.
02:48We have access to both of those pieces of information if we know where to live properly. And when you use the system I'm about to show you, not only can we design essentially anything that is gorgeous and fantastic easily, but we can also do it in a way that will convert viewers into buyers and increase your business.
03:05Now 99% of people, when they start building websites, will come up to this, they'll put a prompt in, and they'll say, hey, let's go. There's actually three ways that you can build a website. Okay?
03:13Number one is what we call buying a template. So, hey, come buy my template, download it. The problem is everyone's got those templates that looks generic.
03:20The second one is you can build from scratch. That is gonna involve you going back and forth like a 12 round boxing fight, trying to get it look perfect. It is good and fantastic.
03:29And then another option that you've got as well that you can look at is what we call understanding the DNA of a website that you already think is excellent. Okay? And then actually kind of basically building out a blueprint of that.
03:40So say for example, you're on a website like this. Okay? And you think, hey, I quite like the design of this.
03:46Right? Well, you would never just copy the design of it. But what you could probably do is just understand, well, what is the design architecture of this?
03:53And what this effectively means is any website that you see, like, say for example this, you're like, Jack, I think this website is gorgeous. I would really love to understand, you know, because you can't articulate what excellent design is, but you can see it and think, I love the white space in this design.
04:07I like some of the graphics. I like some of the the way that it rolls. It's just a beautiful thing.
04:12Right? Well, if you wanted to do that, we can effectively use a certain system that I built that affects you breaks down what is the architecture of that website. So for example, here a headline, h two.
04:21We have logos here. And it's kind of understood that everything is in boxes. So AI now can effectively build anything if you tell it what good looks like.
04:30So the trick isn't the prompt, it's giving the agent the rules to follow. And if you look at some of the best websites you've ever seen designed, you'll notice in many cases, people are actually just pasting code in there because it really steers it. And you'll find that below the components.
04:43But what we're gonna do is get an inspiration site. So we're gonna find a site that we think is gorgeous, and we just wanna understand typography, color palettes, spacing emotions, to kinda get the DNA of the site without copying anything, so we can actually build something really awesome.
04:56Right? So effectively, we wanna make sure that we've got the font looking good, the font weights, pixel line heights, not ratios, how much white space. These are all the kind of beautiful things that you can use to build a fantastic site that Gemini by itself doesn't quite fully understand just yet.
05:12And the reason why I'm showing you this way rather than saying, hey, just paste this in, is because you may have a different idea of what you want your brand to look like. And we are gonna look at what outliers do, but it just enables you to be very versatile in understanding what great design is.
05:26Because the way that most designers build, typically speaking, is they will get inspiration from different websites and think, I like the way that it does this. And you can stack this across four, five, six different websites, find out what they're doing that makes it look awesome, and then actually use and leverage that to build your own from scratch.
05:41Now, a simple way of doing this is actually grabbing a website you think is gorgeous and actually sharing it in here and say, hey there, help me understand what are the design components of this website. Right? And it can actually talk you through everything.
05:52If you wanna go there quicker, faster, I actually have one I built inside the community, which is I call the design blueprint extractor. You literally come over here, you just download this. And by the way, if you're thinking, Jack, this is fantastic.
06:02How does this all fit together? Well, I've got a full CallCode masterclass that I'm releasing inside the community. It covers everything from foundation setup, building websites, stuff that I've never shared online, all the way through to Hime's agents, apps, building everything.
06:15It will take you from zero to hero. People message me about this every single day. It's that freaking cool.
06:20So I just wanna put that on your radar. Now either way you're doing it, whether you're using the skill or you're gonna ask and provide a URL to claw to chat GPT, what you want to do is some research.
06:30Now personally, I use Firecrawl for this. It's a tool that you can use completely for free, and it just enables you to extract brand identities in terms of typography, fonts, things like that really easily.
06:41And you can also give this to basically your AI if you want to. But let's maybe come back over then to Cord, for instance. I'm gonna go down and just upload the files.
06:48As you can see, I've got a zip here. I just upload it. Effectively, this is just a lot of trial and error.
06:52But what we're effectively doing is understanding what is the kind of design architecture behind it. So I'm just gonna say, hey, that dude.
06:59Just open these, and I want you to go ahead and perform it for a specific site URL. And just go ahead and click enter. Cool.
07:04So it comes out with our first question. And by the way, you can just give this specific information. So these are some examples.
07:09What What I thought would be really cool for us to do together actually would be this Rocket website, because what we could probably do is have some kind of Rocket launch happening on it that I think would really visually intriguing. One of the things that you'll notice as well, guys, on this is that the there's a a real popular theme that's emerging now with lines.
07:25We see it with rocket.noom. We see it with Stripe. There's also one on, I believe it is called BaseTemp, that we use for Glider.
07:33Essentially, based on our, like, kind of inference providers. It's like what we do for our speech to text. But you'll see you see this kind of dotted line notion thing.
07:41It's very, very popular trending style right now. So I think we go ahead and why don't we go ahead and extract the brand identity for rocket.meme. It's kind of a nice website.
07:48It's fairly clear. They've got some clear imagery.
07:51It's crisp. It's clean. I think it's quite cool.
07:53So we can go down here and there's some cool stuff that we can do with it. So I'll come down here to other and just go through it next. Again, if you're building this yourself, just basically just answer these questions directly with it.
08:01When you go with another brand and I'm gonna enter in the rocket.new, which is fantastic. What's one line description product?
08:07We help businesses build beautiful websites. Okay. So we'll pretend it's a kind of website selling service, which is the best way to get started if you are trying to build like an AI business or something.
08:18A lot of people find it really easy to build these products and stuff. So it's a fun one to play around with. But what we're effectively gonna get off the back of this is a design blueprint.
08:27Now if you want to, you can go directly and get started over here and just say, I want you to build me a website. And it will look okay. But if you want it to look the best, and you want it to look like something you think looks gorgeous, we just wanna take the slight little little pre you know, we say like an ounce in pre is worth a pound in post.
08:44It's really worth understanding. But what I'm gonna show you after we've built this is gonna take it to unbelievable levels of conversion.
08:51You definitely need to make sure that you understand how to do this because if you want a website that turns viewers into buyers, you need to understand how to do this. And when that's complete, you will get four basically files that come out or if you've done it yourself, you'll just get a bit of detail. So we have the builderbrief.md, which kind of just is all of the information about the website.
09:07It just explains a lot of interesting things about it, how it works, the kind of like the structure. We have a preview of the entire website itself in one image, which is really handy. We've got the scaffold dot HTML, which is kind of like, look, this is kind of how you want to break down the website.
09:22So now you have a scaffold that we can give to Gemini to make our website look freaking awesome. And then some information on the tokens about, spacing and also typography. So what we'll do next is we head over to Google AI Studio.
09:32And then what gonna do is just drop in that information, so add files. Okay. Cool.
09:35So once uploaded, then we're just gonna basically give it a prompt about what we want to build. So in this case, let's say that we wanna build a website selling company. So you could say, hey there, I'd like to use the attached information to build for me a website that is about selling, basically giving websites to businesses.
09:49We build websites for businesses. We essentially get you more clients and and build beautiful websites that convert. And as you can see, as it's building out, what it will do is show some design previews if you wanna go ahead and build that, like, editorial aesthetic, bold typography.
10:02So doing through this thing, dude, I like the look of this. To me though, guys, honestly, I think a lot of these have a quite traditional AI design style, which when it hadn't proliferated on the Internet, wasn't so much of an issue.
10:14But I think now, you know, it kind of just has a very AI look and feel to them. So we wanna use these more kind of like latest methods that's gonna build stuff that really creates that wow factor that actually physically works. Now once this is done, you'll get a website that looks a little bit something like this.
10:30Based on whatever it is that you upload, you can go back and forth, give it prompts, give it questions. Like I showed you earlier, this is another example for a completely different type of website. You can see this one is gorgeous.
10:41I really love the spacious design that you get on this. I think it's fantastic. This is definitely more my my kind of vibe.
10:48And you can see we can get all the stuff. One cool thing that you can do with this as well, if you want to, you can remix them, which is good because you can effectively share this with other people. So what you could actually do as well is you can amend within, which is kind of handy to be fair.
10:59If you click on this little pen icon over here, we can just do some quick little crisp edits. So instead of website is built to scale, we may wanna go ahead and just change that text. You can do that basically by clicking on it, and then you got a h one click.
11:10Then the bottom left, the component is that, so you can say, hey, change the copy to insert the blank. And all I'm looking for from this first thing is an initial shot. Now, what you can do is go ahead and publish it.
11:21To be completely honest with you guys, I wouldn't really go through this entire interface right now just because it's not crazy. There's a lot of stuffing to integrate. What we need to do is take this to a new level in terms of design, and then also make it so that people will actually go and buy our stuff.
11:35So what I recommend that you do is click on code, like so, and this is export button. Just come down. You can open this up in anti gravity.
11:42I'll put a link on screen for my full new anti gravity two point o video that explains what's happened, what the hell's gone on with anti gravity, anti gravity two point o in the IDE. But what you're gonna do is come down and click on download as a zip file.
11:54So now your entire website will be in this file and we can do whatever we want. So so come down here, grab a zip file and just go ahead and download it. And then you've downloaded that website, all you're do is literally come over and drop it into Claude.
12:06And if you don't have Claude or this sounds like I'm speaking Spanish, check this video on screen. It just gives you a quick tell the overview of exactly what Clord is. But basically, it's just a desktop app that we're downloading.
12:16And let's just use Clord code, which is really freaking cool. So now all I'm gonna do is this command, is, hey there, dude. Open this up for me in a local host.
12:24Local host just basically means instead of it hosting on a server somewhere, it's actually the website's entirely running on your laptop, which is gonna be the future of how you can build this stuff now. AI has made this stuff way more accessible. And the cool thing is now, when we own the website, we own all the code, basically, you can chat to the website.
12:41You can go, hey, change it from blue to red or change this and we basically just talk to websites now and they do what we want. That's how cool it is.
12:48And when you're using these strategies, that's how you get gorgeous websites. They pretty much do anything. So this has now taken all the files that Google built for us and it's just taken it out of the Google ecosystem into our environment where we can bring it into our own apps, anti gravity and Claude and Codex and all these different places so we can do some magical things with it.
13:08And so now it's opened up in a local host 3,000. Let's open this bad boy up, and we can see now we have the whole thing onto our computer. But you know what, guys?
13:16There's a lack of imagery, and it's irking me somewhat. So I actually now wanna go ahead and build an image. Now, cool thing is we can use anything for this just simply for simplicity.
13:24I'm gonna go ahead and Hicksfield. Again, they're not sponsoring this video or anything. I just think it's easy to do, but you can use anyone that you want to.
13:30So what I've asked you here is a beautiful Ghibli style rocket taking off in a jaw dropping environment. Gorgeous blue sky, screen fields, it just looks beautiful. So I think it would be cool if we actually integrated something like this into the website just as a nice kind of backdrop.
13:44So something gorgeous, something looks really decent. All I would do is download the image or just like grab it from wherever you would like. I can do this by simply coming and dragging.
13:51And so I've just dropped this image in. So we're gonna go ahead and give it a prompt. Hey, I would like this image I've uploaded here to be the background of the first section.
13:59Please keep the lines intact. Put everything from 1,500,000 people, the h one, h two, that first box.
14:05Let's have this image as the background to it, and then just have a nice little bit of contrast so it's visible. I think that would look beautiful. Okay.
14:12So we're just kinda like teaching with that. This step really is just amending getting the initial design right. So now I'm just done that, and I think the image looks beautiful.
14:19But what's interesting to me here is I think it would look a little bit better if the rocket was slightly off to the right hand side. So what I'm do is just amend this image very quickly by coming over here and I'm gonna come down, I'm just gonna reference this. And effectively, I'm just gonna come back over to Claude and I'm gonna say, hey there, could you do me a favor?
14:35Could you just write me a prompt to amend the image? Maybe whereby the rockets more on the right hand side of the image, and then there'd be a background that would be suitable for the text on the left, that will just enhance it a little bit without really changing the core of the image. Now since this is our hero asset, I really think it's worth taking just one or two minutes to go through just perfecting it, then we can just give it an upgraded prompt, an upgraded image, and it will just really lift, no pun intended, the quality of this website.
14:59Okay. Now we've got a great prompt. Grab this one here.
15:01Head back over to our image generator. Just gonna drop this one in here. And again, it can be anyone you need.
15:05It doesn't necessarily have to be this website. It can be anything. And guys, look at this.
15:09I think this is really awesome. Do you see how when we've got, like, actually an image that kind of would fit our website? That That is really fantastic.
15:16I think immediately, this one is looking the most natural to me. I think that's fantastic.
15:20So let's go ahead and download this bad boy and shoot straight back over to Claude once we've got it fully downloaded. Awesome. I've just attached the latest image.
15:27Please update it accordingly. That should present enough space to write it. Just have a look at where the image sits and make sure that the text sits on those bits with the best contrast.
15:35Alright. I think this is good. But since we've got a rocket and we're using a launch theme, let's tie that in a little bit.
15:40Hey, I'd like to change the h one to launch your beautiful website for $0. And then I've I'm seeing a grid frame overlay on the right hand side. Let's just remove that, please.
15:50Now what I'm thinking would be a cool offer is basically they're gonna give the website for free. And then obviously, can work with them in a different services to upsell and do various different things. Also, I think this is looking now I think what actually be great is if we could just increase the height of this a little bit because it's really nice.
16:03Typically speaking, you want one viewport, one thought. For example, with this Jupiter thing, can you see how it's like, look, I've got one image, it's one thing.
16:11So we can set the height to a 100%. I think though with this specific website, it's a slightly different thing here. And by the way, if you're looking for inspiration to a website, it's a great website called godly.website.
16:20You can literally scroll through this and get different ideas, different examples. Google it. There's like a gargantillion different examples of how you could do that.
16:27I do want the height to be a little bit larger. Do me a favor my man. Just increase the height of that first section.
16:33I think it would really benefit from being a little bit taller. And so now we've got this. I think this is really tasty.
16:39This is taking up a little bit too much of my attention though. I think we just wanna reduce this down. So why don't we do something like just reduce that down a little bit, come back over and say and again, you know, this is all about going back and forth, and I was playing around with some different sizes here.
16:52But I can say, hey, dude. Change the 1,500,000 people have tried Rocket across a 180 countries to something like 1.5 k people have launched with Rocket.
17:01Something like that or, you know, successful launch Rocket. Just something a little bit shorter. It's taking up a little bit too much space.
17:07Also, you'll notice, like, we've got this beautiful kind of gradient theme. I wonder if it would be worth just kind of like changing that color to be somewhere similar to that.
17:17Cool. And drop that one off. Now, what I think we could do to elevate this even further before we even get started with how we actually turn this into customers is I think this would really serve, I think, a little bit of a video.
17:29So what I'm gonna do is actually turn this image into a really cool freaking video. So I'm gonna shift to Hicksville to do this.
17:34Again, use anyone that you want to. I've already got this image. I'm gonna shoot over to video.
17:39You hear the rocket? Oh my gosh. So here's one I was playing with earlier.
17:43You can see the rocket's kind of flying off into space, which is interesting. What I think we should do though is one that has the same start frame and end frame so we can ideally loop this together. So come down here and upload the image, and then just do the same thing for the end frame, exact same image.
17:57Okay. So I basically got both images, one for the start frame, one for the end frame. I've set this out, and let me just bring this out so you can see.
18:04I'm I'm using here Cling three point o, and I'm basically just gonna say, hey, just launch basically a takeoff. I don't want the rocket to continue to take off per se, but I just wanna look like it's about to take off and that basically finishes the same frame.
18:19Beautiful, buttery smooth animation.
18:22Really cool. And the reason why I'm doing this, I think eight seconds is fine because they shouldn't really take more than eight seconds to read it. I feel sorry for the people here at the bottom who are struggling a little bit.
18:32And if you wonder what this called superhero is, actually in the dashboards and stuff I've been doing, if I show you actually this, because it's a really interesting one here. I use the same principles in building out my Claude code operating system, like this is the Hermes image in the background, and again, even over here.
18:45This just basically shows you a breakdown of all the usage across all apps, whether it's Claude, track GPT codec, anti gravity. It literally analyzes all the stuff that you're working on on a daily basis, and it'll give you suggestions of how you can save money and different it even researches stuff for you.
18:59It's like working an agent working for you overnight. But the cool thing is I even integrate these things into these dashboards because because I think it just brings it to life and adds a certain level of dynamic system that just makes it easy to consume, and I think it just adds a lot to it. Beautiful.
19:11So now we got our rocket, and then you can see it's kinda, like, running, and the clouds are emerging, and it's decent. I think that's not too bad, actually. It's kind of like you can see it's gentle.
19:20It's not distracting. There's some gentle movements in the clouds. Again, they're not gonna be studying this like a movie.
19:25Right? So once we've done that, what we're gonna do guys is come down and we're going to download this video. Now, in reality, speed is an important factor on your website.
19:34If your your website takes too long to load, people are really freaking impatient. Okay? It's like if it takes fifteen business days, they will leave.
19:41So what I do is I come back over to Claude. I just drop this video in. In fact, I can even say, hey dude, I'd like to basically replace the image with a video.
19:48I just downloaded the video and just put it there. Just take a look at the file size. If it's gonna be too big or create too much latency, we can compress it a little bit.
19:56But let me see what it looks like in four k first. Exactly the same dimensions, please. Alright?
20:00Drop that one off and send it off. And I can tell you, there's a great website to do speed checking that I recommend that you do is just going out your website. I mean, the last one I had run about 50,000 unique visitors a month, and we basically went through and made sure the speed was right, the conversions were right, and you can get these cool things like heat maps that show exactly what you need to collect, just little details as you're scaling up the business.
20:20Alright, guys. And look at how freaking cool is this? And do you know why I prefer this to maybe some of the more kind of, like, out there whimsical designs?
20:29It's because it it's there's less stuff to go wrong and it just sits there beautifully in the background, launching your website. Beautiful. Come down, you can see, and now we've got the rest of the stuff that we can optimize and have a great time doing.
20:40But I think it looks freaking amazing. And again, in reality, what you will need to do is just basically have a couple of prompts. And honest guys, I'd come back.
20:47You realistically, you're going to generate two, three of these just to get the right level down. I'm getting a couple here just so can play around with it and you can see the different design styles that you get. And just to show you, this is the kind of thing you get when you don't necessarily use all of these tools.
21:00And it's just generic and it can go crazy and it's just way too much text density. I recently went through over probably 200 different people in my community asking me questions about their website. The biggest feedback I I I find myself giving is too much text density.
21:15Don't make me think. Now, let's just cover what we've covered here. Okay?
21:18So let's take a look at this. We've covered what a great website is. We've got one brief, one brief.
21:22We basically throw it in there. Now, what we've done is we pasted the brief into AI Studio. Basically, what's happened there is the anti gravity agent has created a multi file project.
21:31Right? And then we've iterated on it in that. Now once we've actually edited Claude, we're gonna bring on to probably the most important step of this entire process.
21:38And this is actually understanding how do we turn the viewers into buyers. 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.
21:50So what we're gonna do now is actually use something called an outlier strategy that when you understand it, is gonna get you light years ahead of your competitors. And the idea with this one is super simple. Effectively, what we're going to do is based on the industry that we're in, we are going to look at up to 12 different websites.
22:05And we are going to analyze those websites in terms of like what are the top five doing and what are the worst five doing. So say for example, we're looking for roofers in Texas. Well, we can find the best websites for roofers in Texas.
22:18And did you realize that every single roofer in Texas showcases beautiful roofs within the first page? Awesome.
22:25Write that down. The next thing they do is show actual images of people and they have video testimonials. Ace, write that down.
22:31And we can actually extract these insights based on the top performers, and we can also look at what the the bad guys are doing.
22:38What are the ones with the worst reviews doing? And we can kinda build this out. So for this, I use Fyquel.
22:42I'm gonna put this skill down below for you completely for free so you can grab that. Effectively, let me just go ahead and grab it from the classroom for you. Come down here to every AI automation, and here's the thing.
22:50Let me come down, and this is called the outlier research skill. Basically, open up a brand new chat and just drop in that zip. So I'm gonna say, hey there, I'd like to use this skill with the fire crawl search to go ahead and do some research for me for my website.
23:04Okay? Then I'm gonna come back over here, I'm gonna grab our beautiful website, I'm gonna come back over here, I'm gonna paste it in and say, here's a lot of information about my website, who my ideal customer is. I'd like to go ahead and find other, basically websites like this to help me improve the positioning, the order, do I need testimonials, I need anything like that.
23:21Now, you don't need to give it that verbal overview because it will already know that and it will already do that for you. I'm just kind of like including that so you get a sense of what you need to do there. And so what this will do when you download this skill, again, I built this for you completely for free, you can just grab it.
23:34It's gonna ask you some questions. So we're gonna say, hey, so we are competing against, you know, website builders, think of, you know, basically companies like Wix and Lovable and loads of different websites like this.
23:46Alright. I'd enter in the information. Geography of the contenders.
23:48Let's do global slash US. It'd be decent. And what type should the blueprint reverse engineer?
23:53I think realistically, we wanted to do I'd like to do all three of those things for me, please. Now the really cool thing to understand here is that there are many things we have to do when building a website and growing our businesses, but we don't need to reinvent the wheel every single time.
24:08And understanding psychologically and just based on our outlier performance from these incredible websites that are already converting, we know we can just identify the commonality and trends and then literally cherry pick the best components for us and for our offer, which is shortcuts the journey between where you are and exactly where you wanna get to.
24:27Now obviously, in addition to this, what you're gonna need to do is go through the website. Just really make sure it's got everything you want to. Crucially, what you need to do first of all, at the very beginning while this is working is I need to, at a glance, be able to understand what this website is about.
24:41Remember, websites are not read. Websites are glanced at. Do not take their attention for granted.
24:47A simple thing like launch a website for $0, I get exactly what the offer is here. You're gonna launch my website, Now you bought my attention. I've got something eye catching.
24:56That is freaking awesome. The next thing that we have to address actually, and it's a really cool one I found to include in here, we used to pay a company called Trustpilot. Gosh.
25:04Like, maybe 10 like, literally thousands and thousands and thousands of pounds to be able to show the the logo for credibility. So what we need to basically communicate is why are you credible? We can do this by either showing additional logos, like, hey, these are the companies that we work with.
25:19If you don't have that credibility, what you can do instead is built with platforms you love and then show the common platforms that they may have. We need to include things like testimonials. But crucially, once we've given them the offer or the frustration hook, and we've kind of and again, no longer than this.
25:35Like this h one, I don't wanna be any longer than seven words. This is fine. It's like something I look at last.
25:41But once we've done that, effectively, what we need to do is just communicate very clearly what is the what is the office stack. Like, what do I get out of it? Remember, we live in the world unfortunately where people only really care what they get out of it most of time, and you're asking them to spend their precious attention seconds in understanding this.
25:58So I need to go, hey. This is what you get. This is what you get.
26:00This is what you get. Very clearly. Okay.
26:02Then we wanna see bit more about credibility, and ideally, then we want a CTA. So this here isn't really doing too much heavy lifting.
26:08I'd probably remove this. I then have a launch very, very, very, very clear. The website doesn't need to be too long.
26:13So the basic idea here is don't make me think. Don't make me engage my critical system one brain. I need to be chimp brain.
26:20I need to be green equals good, red equals bad. I I covered a lot of this in the ClaudeCode master class with the website section, so I won't go too deep into it here to repeat myself, but you get the idea of how this all works. And just like that, guys, we get this ridiculously detailed site blueprint the website builds in 2026.
26:35The winning anatomy of a website building homepage, pricing page, and feature page. And it has looked at Wix, SquarePace, Squarespace. Oh my gosh.
26:43How many covers have I had? Shopify, Framer, Livable. We've got all the logos, why this is not a generic one, and it goes through the blueprint and it breaks down everything in detail from the hero, the stat strip, the use cases, template, customer site gallery.
26:55You get the idea. Now, I've done this for website builders. In reality, you're gonna do this for your specific niche.
27:00Right? Roofers, drainage companies, whatever the thing is, we are looking for what is specifically crushing it and what isn't.
27:08And this has gotten so many different data points. And once we've got all that stuff look at this. No AI mentioned on anywhere in the on the page for this company.
27:16Really interesting insights. Then when you come back, your base is gonna say, awesome. Based on all this data, could you create for me an action plan of all the stuff that we should change on our current website to make sure that we can maximize our conversions and turn viewers into buyers based on our specific intention?
27:31And our intention might be the product that we've got right. So we need to make sure that it fully aligns. And then essentially, Claude will give you information based on the website you built in Google's AI Studio of how to improve it and get a high converting website built on the principles we spoke about earlier.
27:45And I know the exact matter of building these beautiful websites. The next thing that we need to do is learn exactly how to publish it, manage SEO, how do we sell these if we wanna scale it, or how do we implement it in our businesses all the way through. And we're gonna learn that by watching this master class right here.
The Hook
The bait, then the rug-pull.
The title promises $10,000 websites in 17 minutes, and the spoken hook doubles down immediately — but the real argument comes 90 seconds in: most AI websites fall apart the second a client touches them, not because the tools are bad, but because they were given nothing but a prompt.
Named ideas worth stealing.
03:36model
Design DNA Extraction
Instead of prompting from scratch, analyze a site you admire and extract its typography, spacing, color palette, and layout rules into a structured brief that AI can follow as a ruleset.
Steal forAny website or landing page build — feeds directly into AI Studio or Claude Code as a design brief
21:41model
The Outlier Strategy
Study 10-12 competitor sites in your niche, split into top-5 and bottom-5 performers. Extract the specific elements (imagery, testimonial types, section order, h1 length) that correlate with the top performers. Cherry-pick those elements into your own site.
Steal forAny niche — roofers, SaaS, coaches, agencies — to short-circuit conversion guesswork with real data
24:34concept
One Viewport, One Thought
The visible area on page load should communicate exactly one idea. Every additional element above the fold competes for the visitor's attention and reduces conversion.
Steal forHero section design on any landing page or product homepage
How they asked for the click.
VERBAL ASK
27:18product
“The next thing we need to do is learn exactly how to publish it, manage SEO, how do we sell these if we want to scale it — and we're going to learn that by watching this masterclass right here.”
Soft hand-off to a paid community masterclass (Skool). Mentioned once mid-video (design blueprint extractor) and once at the end. No hard sell — relies on demonstrated value from the tutorial itself.
MENTIONED ON CAMERA
Visual structure at a glance.
