§ 01 · 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.
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.
Visual structure at a glance.
Named ideas worth stealing.
03:36
model
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 for Any website or landing page build — feeds directly into AI Studio or Claude Code as a design brief
21:41
model
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 for Any niche — roofers, SaaS, coaches, agencies — to short-circuit conversion guesswork with real data
24:34
concept
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 for Hero section design on any landing page or product homepage
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."
Things they pointed at.
How they asked for the click.
27:18
product
"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.
Word for word.
HOOK opening / re-engagementCTA the pitch analogy
00:00HOOKYou 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:25HOOKAnd 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:34HOOKIf 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:43HOOKThe 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:34HOOKSo 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:43HOOKNow, 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:58HOOKSo 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:08HOOKBut 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:24HOOKBut 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:48HOOKWe 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
02:57HOOKanything 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. Now 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.
03:10HOOKThere's actually three ways that you can build a website. Okay? Number one is what we call buying a template.
03:15HOOKSo, hey, come buy my template, download it. The problem is everyone's got those templates that looks generic. The second one is you can build from scratch.
03:22HOOKThat 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. And 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.
03:37Okay? And then actually kind of basically building out a blueprint of that. So say for example, you're on a website like this.
03:43Okay? And you think, hey, I quite like the design of this. Right?
03:46Well, 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? And 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.
04:00I 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. I like some of the graphics.
04:08I like some of the the way that it rolls. It's just a beautiful thing. Right?
04:12Well, 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. We have logos here.
04:22And 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. So the trick isn't the prompt, it's giving the agent the rules to follow.
04:33And 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. But what we're gonna do is get an inspiration site.
04:45So 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. Right?
04:57So 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. And 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.
05:20And we are gonna look at what outliers do, but it just enables you to be very versatile in understanding what great design is. Because 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.
05:33CTAAnd 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. Now, 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.
05:49CTARight? And it can actually talk you through everything. If you wanna go there quicker, faster, I actually have one I built inside the community, which is I call the design blueprint extractor.
05:58CTAYou literally come over here, you just download this. And by the way, if you're thinking, Jack, this is fantastic. How does this all fit together?
06:04CTAWell, 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. It will take you from zero to hero.
06:17CTAPeople message me about this every single day. It's that freaking cool. So I just wanna put that on your radar.
06:22CTANow 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. Now personally, I use Firecrawl for this.
06:32It'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,
09:04which kind of just is all of the information about the website. It just explains a lot of interesting things about it, how it works, the kind of like the structure.
09:12We 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. So now you have a scaffold that we can give to Gemini to make our website look freaking awesome.
09:26And 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. And then what gonna do is just drop in that information, so add files.
09:35Okay. Cool. So once uploaded, then we're just gonna basically give it a prompt about what we want to build.
09:38So 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
10:46more my my kind of vibe. And 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.
10:55So what you could actually do as well is you can amend within, which is kind of handy to be fair. If 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.
11:07You can do that basically by clicking on it, and then you got a h one click. Then 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.
11:19Now, what you can do is go ahead and publish it. To 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.
11:29What 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. So what I recommend that you do is click on code, like so, and this is export button. Just come down.
11:40You can open this up in anti gravity. I'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.
11:50But what you're gonna do is come down and click on download as a zip file. So 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.
12:02And then you've downloaded that website, all you're do is literally come over and drop it into Claude. And 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.
12:13But basically, it's just a desktop app that we're downloading. And 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.
12:21Open this up for me in a local host. Local 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.
12:36And the cool thing is now, when we own the website, we own all the code, basically, you can chat to the website. You 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.
12:47That's how cool it is. And when you're using these strategies, that's how you get gorgeous websites. They pretty much do anything.
12:53So 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. And so now it's opened up in a local host 3,000.
13:11Let's open this bad boy up, and we can see now we have the whole thing onto our computer. But you know what, guys? There's a lack of imagery, and it's irking me somewhat.
13:18So I actually now wanna go ahead and build an image. Now, cool thing is we can use anything for this just simply for simplicity. I'm gonna go ahead and Hicksfield.
13:25Again, 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. So what I've asked you here is a beautiful Ghibli style rocket taking off in a jaw dropping environment.
13:35Gorgeous 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. So something gorgeous, something looks really decent.
13:46All 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. And so I've just dropped this image in.
13:52So 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. Please keep the lines intact.
14:01Put everything from 1,500,000 people, the h one, h two, that first box. Let's have this image as the background to it, and then just have a nice little bit of contrast so it's visible.
14:10I think that would look beautiful. Okay. So we're just kinda like teaching with that.
14:14This step really is just amending getting the initial design right. So now I'm just done that, and I think the image looks beautiful. But 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.
14:25So 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? Could you just write me a prompt to amend the image?
14:37Maybe 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,
14:57no pun intended, the quality of this website. Okay. Now we've got a great prompt.
15:00Grab this one here. Head back over to our image generator. Just gonna drop this one in here.
15:04And again, it can be anyone you need. It doesn't necessarily have to be this website. It can be anything.
15:08And guys, look at this. I think this is really awesome. Do you see how when we've got, like, actually an image that kind of would fit our website?
15:15That That is really fantastic. I think immediately, this one is looking the most natural to me.
15:19I think that's fantastic. So let's go ahead and download this bad boy and shoot straight back over to Claude once we've got it fully downloaded. Awesome.
15:26I've just attached the latest image. Please update it accordingly. That should present enough space to write it.
15:31Just have a look at where the image sits and make sure that the text sits on those bits with the best contrast. Alright. I think this is good.
15:37But since we've got a rocket and we're using a launch theme, let's tie that in a little bit. Hey, 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.
15:48Let's just remove that, please. Now 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.
15:57Also, 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. Typically speaking, you want one viewport, one thought.
16:06For example, with this Jupiter thing, can you see how it's like, look, I've got one image, it's one thing. So we can set the height to a 100%. I think though with this specific website, it's a slightly different thing here.
16:16And by the way, if you're looking for inspiration to a website, it's a great website called godly.website. You can literally scroll through this and get different ideas, different examples. Google it.
16:24There's like a gargantillion different examples of how you could do that. I do want the height to be a little bit larger. Do me a favor my man.
16:31Just increase the height of that first section. I think it would really benefit from being a little bit taller. And so now we've got this.
16:37I think this is really tasty. This is taking up a little bit too much of my attention though. I think we just wanna reduce this down.
16:43So 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. But I can say, hey, dude.
16:53Change 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,
17:27I think, a little bit of a video. So what I'm gonna do is actually turn this image into a really cool freaking video.
17:33So I'm gonna shift to Hicksville to do this. Again, use anyone that you want to. I've already got this image.
17:37I'm gonna shoot over to video. You hear the rocket? Oh my gosh.
17:41So here's one I was playing with earlier. You 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.
17:52So come down here and upload the image, and then just do the same thing for the end frame, exact same image. Okay. So I basically got both images, one for the start frame, one for the end frame.
18:02I've set this out, and let me just bring this out so you can see. I'm I'm using here Cling three point o, and I'm basically just gonna say, hey, just launch basically a takeoff.
18:11I 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. Beautiful, buttery smooth
18:21animation. Really 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.
18:29I feel sorry for the people here at the bottom who are struggling a little bit. And 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,
19:54we can compress it a little bit. But let me see what it looks like in four k first. Exactly the same dimensions, please.
19:59Alright? Drop 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.
20:07I 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. Alright, guys.
20:21And 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? It's because it it's there's less stuff to go wrong and it just sits there beautifully in the background, launching your website.
20:34Beautiful. 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. But I think it looks freaking amazing.
20:41And again, in reality, what you will need to do is just basically have a couple of prompts. And honest guys, I'd come back. You realistically, you're going to generate two, three of these just to get the right level down.
20:51I'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. And it's just generic and it can go crazy and it's just way too much text density.
21:05I 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. Don't make me think.
21:16Now, let's just cover what we've covered here. Okay? So let's take a look at this.
21:19We've covered what a great website is. We've got one brief, one brief. We basically throw it in there.
21:23Now, 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. Right?
21:31And 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. And this is actually understanding
21:40how 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. So 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.
21:57And 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. And we are going to analyze those websites in terms of like what are the top five doing and what are the worst five doing.
22:12So say for example, we're looking for roofers in Texas. Well, we can find the best websites for roofers in Texas. And did you realize that every single roofer in Texas showcases
22:22beautiful roofs within the first page? Awesome. Write that down.
22:25The next thing they do is show actual images of people and they have video testimonials. Ace, write that down. And we can actually extract these insights
22:34based on the top performers, and we can also look at what the the bad guys are doing. What are the ones with the worst reviews doing?
22:39And we can kinda build this out. So for this, I use Fyquel. I'm gonna put this skill down below for you completely for free so you can grab that.
22:45Effectively, 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,
24:05but we don't need to reinvent the wheel every single time. And understanding psychologically
24:10and 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,
24:38be able to understand what this website is about. Remember, websites are not read. Websites are glanced at.
24:45Do not take their attention for granted. A 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.
24:55I've got something eye catching. That 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.
25:04Gosh. Like, 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?
25:14We can do this by either showing additional logos, like, hey, these are the companies that we work with. If 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.
25:29But crucially, once we've given them the offer or the frustration hook, and we've kind of and again, no longer than this. Like this h one, I don't wanna be any longer than seven words. This is fine.
25:39It's like something I look at last. But 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?
25:49Remember, 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. So I need to go, hey. This is what you get.
25:59This is what you get. This is what you get. Very clearly.
26:02Okay. Then we wanna see bit more about credibility, and ideally, then we want a CTA.
26:06So this here isn't really doing too much heavy lifting. I'd probably remove this. I then have a launch very, very, very, very clear.
26:12The website doesn't need to be too long. So the basic idea here is don't make me think. Don't make me engage my critical system one brain.
26:18I need to be chimp brain. I 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.
26:29And just like that, guys, we get this ridiculously detailed site blueprint the website builds in 2026. The winning anatomy of a website building homepage, pricing page, and feature page.
26:39And it has looked at Wix, SquarePace, Squarespace. Oh my gosh. How many covers have I had?
26:44Shopify, 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. You get the idea.
26:56Now, I've done this for website builders. In reality, you're gonna do this for your specific niche. Right?
27:01Roofers, drainage companies, whatever the thing is, we are looking for what is specifically crushing it and what isn't. And this has gotten so many different data points.
27:11And once we've got all that stuff look at this. No AI mentioned on anywhere in the on the page for this company. Really interesting insights.
27:17CTAThen 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? And our intention might be the product that we've got right.
27:33CTASo 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:45CTAAnd 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.
— full transcript
§ 05 · For Joe
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.
