WEBVTT

00:00:00.320 --> 00:00:07.280
You can now build beautiful websites in the brand new Google AI Studio two with Gemini 3.5.

00:00:07.280 --> 00:00:37.140
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. And 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. If you haven't already, grab that beautiful coffee,

00:00:37.380 --> 00:01:21.775
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. The 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. Right? You can build this, which I did in one shot, by the way. Look how balanced. Look at the white space. Look how beautiful this is. This is just one example. I'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.

00:01:21.935 --> 00:01:30.250
It is, first of all, bear in mind, powered by Gemini three Pro. Okay. So essentially, we're gonna give it a prompt. Gemini three Pro, they just released a brand new model, 3.5

00:01:30.250 --> 00:01:33.450
Flash, which is a mix between capability

00:01:33.530 --> 00:01:38.250
and speed. So we're not waiting here for a thousand years for things to happen. We're gonna get great outputs.

00:01:38.875 --> 00:01:51.290
And it's Gemini 3.5 Flash by default, and you can do two projects completely for free. Now, 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

00:01:51.290 --> 00:02:23.780
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. So 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. But 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

00:02:23.860 --> 00:02:36.315
in Claude. But 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.

00:02:36.475 --> 00:02:38.235
But it has one huge

00:02:38.235 --> 00:02:51.330
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. We have access to both of those pieces of information

00:02:51.410 --> 00:02:57.170
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

00:02:57.465 --> 00:03:00.345
anything that is gorgeous and fantastic easily,

00:03:00.505 --> 00:03:28.985
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. There's actually three ways that you can build a website. Okay? Number 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. The 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.

00:03:29.145 --> 00:03:36.905
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.

00:03:37.145 --> 00:04:01.715
Okay? And then actually kind of basically building out a blueprint of that. So say for example, you're on a website like this. Okay? And you think, hey, I quite like the design of this. Right? 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? 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. I would really love to understand,

00:04:01.955 --> 00:04:49.625
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. I like some of the the way that it rolls. It's just a beautiful thing. Right? 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. We 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. So 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. But 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,

00:04:49.785 --> 00:05:25.345
color palettes, spacing emotions, to kinda get the DNA of the site without copying anything, so we can actually build something really awesome. Right? 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. 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. And we are gonna look at what outliers do, but it just enables you to be very versatile in understanding

00:05:25.345 --> 00:06:28.510
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. 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. 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. Right? 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. You 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? 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. It will take you from zero to hero. People message me about this every single day. It's that freaking cool. So 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,

00:06:28.510 --> 00:06:36.190
what you want to do is some research. Now personally, I use Firecrawl for this. It's a tool that you can use completely for free, and it just enables you to extract

00:06:36.350 --> 00:06:38.590
brand identities in terms of typography,

00:06:39.245 --> 00:06:55.110
fonts, things like that really easily. And 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. As you can see, I've got a zip here. I just upload it. Effectively, this is just a lot of trial and error. But what we're effectively doing is understanding

00:06:55.350 --> 00:07:19.645
what is the kind of design architecture behind it. So I'm just gonna say, hey, that dude. Just 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. So it comes out with our first question. And by the way, you can just give this specific information. So these are some examples. What 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.

00:07:19.885 --> 00:07:26.910
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. We see it with rocket.noom.

00:07:26.910 --> 00:07:32.910
We see it with Stripe. There's also one on, I believe it is called BaseTemp, that we use for Glider.

00:07:33.470 --> 00:07:47.645
Essentially, 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. It'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.

00:07:47.645 --> 00:07:49.485
It's kind of a nice website. It's fairly

00:07:49.980 --> 00:08:04.860
clear. They've got some clear imagery. It's crisp. It's clean. I think it's quite cool. So 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. When you go with another brand and I'm gonna enter in the rocket.new,

00:08:04.860 --> 00:08:07.075
which is fantastic. What's one line description product?

00:08:07.395 --> 00:08:10.675
We help businesses build beautiful websites.

00:08:10.835 --> 00:08:50.290
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. A 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. Now 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. It's really worth understanding. But what I'm gonna show you after we've built this is gonna take it to unbelievable

00:08:50.290 --> 00:09:04.735
levels of conversion. You 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,

00:09:04.735 --> 00:09:06.655
which kind of just is all of the information

00:09:06.815 --> 00:09:47.680
about the website. It 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. So 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. And then what gonna do is just drop in that information, so add files. Okay. Cool. So 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,

00:09:47.840 --> 00:10:08.825
basically giving websites to businesses. We 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. So 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

00:10:09.400 --> 00:10:46.610
AI design style, which when it hadn't proliferated on the Internet, wasn't so much of an issue. But 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. Based 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. I really love the spacious design that you get on this. I think it's fantastic. This is definitely

00:10:46.770 --> 00:11:48.885
more 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. So 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. You 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. Now, 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. 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. So 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. 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,

00:11:48.965 --> 00:12:24.225
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. 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. And 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. But 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. Open this up for me in a local host.

00:12:24.385 --> 00:12:45.005
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. And 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

00:12:45.085 --> 00:13:00.390
just talk to websites now and they do what we want. That's how cool it is. And 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

00:13:00.390 --> 00:14:02.800
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. 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? There'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. I'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. So 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. So 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. And 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. Please keep the lines intact. Put everything from 1,500,000

00:14:02.800 --> 00:14:57.140
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. I think that would look beautiful. Okay. So 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. 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. 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? Could 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,

00:14:57.380 --> 00:15:17.460
no pun intended, the quality of this website. Okay. Now we've got a great prompt. Grab this one here. Head back over to our image generator. Just gonna drop this one in here. And again, it can be anyone you need. It doesn't necessarily have to be this website. It can be anything. And 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? That That is really fantastic. I think immediately,

00:15:17.700 --> 00:15:45.185
this one is looking the most natural to me. I 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. I've just attached the latest image. Please 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. Alright. 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. Hey, I'd like to change the h one to launch your beautiful website for $0.

00:15:45.550 --> 00:16:05.805
And then I've I'm seeing a grid frame overlay on the right hand side. Let'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. 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. Typically speaking, you want one viewport,

00:16:06.125 --> 00:16:20.830
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. So 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.

00:16:20.910 --> 00:16:44.920
You 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. I do want the height to be a little bit larger. Do me a favor my man. Just 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. I 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. So why don't we do something like

00:16:45.560 --> 00:16:54.525
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. Change the 1,500,000

00:16:54.525 --> 00:16:59.085
people have tried Rocket across a 180 countries to something like 1.5

00:16:59.085 --> 00:17:14.100
k people have launched with Rocket. Something like that or, you know, successful launch Rocket. Just something a little bit shorter. It's taking up a little bit too much space. Also, 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

00:17:14.820 --> 00:17:27.545
that color to be somewhere similar to that. Cool. 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,

00:17:27.865 --> 00:17:31.705
I think, a little bit of a video. So what I'm gonna do is actually turn this image

00:17:31.945 --> 00:17:41.050
into a really cool freaking video. So I'm gonna shift to Hicksville to do this. Again, use anyone that you want to. I've already got this image. I'm gonna shoot over to video. You hear the rocket? Oh my gosh.

00:17:41.770 --> 00:18:09.590
So 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. So 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. I'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

00:18:09.750 --> 00:18:19.750
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. Beautiful,

00:18:19.910 --> 00:18:21.110
buttery smooth

00:18:21.190 --> 00:18:21.750
animation.

00:18:22.355 --> 00:18:52.815
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. I 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. This 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

00:18:52.815 --> 00:19:16.810
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. It'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. So now we got our rocket, and then you can see it's kinda, like, running, and the clouds are emerging, and it's decent.

00:19:17.130 --> 00:19:54.625
I think that's not too bad, actually. It's kind of like you can see it's gentle. It's not distracting. There's some gentle movements in the clouds. Again, they're not gonna be studying this like a movie. Right? 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. If 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. So 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. I 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,

00:19:54.705 --> 00:19:58.145
we can compress it a little bit. But let me see what it looks like in four k first.

00:19:58.385 --> 00:20:28.930
Exactly the same dimensions, please. Alright? 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. 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. Alright, 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?

00:20:29.010 --> 00:21:31.020
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. 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. But 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. You 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. And 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. Don't make me think. Now, let's just cover what we've covered here. Okay? So let's take a look at this. We've covered what a great website is. We've got one brief, one brief. We 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.

00:21:31.260 --> 00:21:40.255
Right? 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. And this is actually understanding

00:21:40.335 --> 00:22:05.625
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. 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. 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.

00:22:05.705 --> 00:22:22.320
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. So 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

00:22:22.400 --> 00:22:30.160
beautiful roofs within the first page? Awesome. Write that down. The next thing they do is show actual images of people and they have video testimonials.

00:22:30.425 --> 00:22:34.105
Ace, write that down. And we can actually extract these insights

00:22:34.105 --> 00:22:35.785
based on the top performers,

00:22:35.865 --> 00:22:50.230
and we can also look at what the the bad guys are doing. What are the ones with the worst reviews doing? And 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. Effectively, let me just go ahead and grab it from the classroom for you. Come down here to every AI automation,

00:22:50.390 --> 00:23:03.935
and here's the thing. Let 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.

00:23:04.095 --> 00:23:38.795
Okay? 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. Now, 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. It's gonna ask you some questions. So we're gonna say, hey, so we are competing against,

00:23:38.955 --> 00:23:55.025
you know, website builders, think of, you know, basically companies like Wix and Lovable and loads of different websites like this. Alright. I'd enter in the information. Geography of the contenders. Let's do global slash US. It'd be decent. And what type should the blueprint reverse engineer? I think realistically,

00:23:55.025 --> 00:24:05.025
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,

00:24:05.185 --> 00:24:09.720
but we don't need to reinvent the wheel every single time. And understanding

00:24:09.720 --> 00:24:10.680
psychologically

00:24:10.680 --> 00:24:14.440
and just based on our outlier performance from these incredible

00:24:14.440 --> 00:24:38.365
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. Now 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,

00:24:38.820 --> 00:25:11.220
be able to understand what this website is about. Remember, websites are not read. Websites are glanced at. Do 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. I'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. Gosh. Like, maybe 10 like, literally thousands and thousands and thousands of pounds to be able to show the the logo for credibility.

00:25:11.380 --> 00:25:29.405
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. 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.

00:25:29.405 --> 00:26:04.435
But 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. It'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? 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. So I need to go, hey. This is what you get. This is what you get. This is what you get. Very clearly. Okay. Then we wanna see bit more about credibility,

00:26:04.515 --> 00:26:32.375
and ideally, then we want a CTA. So 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. The 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. I 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. And just like that, guys, we get this ridiculously

00:26:32.375 --> 00:26:35.630
detailed site blueprint the website builds in 2026.

00:26:35.630 --> 00:27:02.050
The winning anatomy of a website building homepage, pricing page, and feature page. And it has looked at Wix, SquarePace, Squarespace. Oh my gosh. How 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. You get the idea. Now, I've done this for website builders. In reality, you're gonna do this for your specific niche. Right? Roofers,

00:27:02.370 --> 00:27:39.770
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. And 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. 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? And 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

00:27:39.770 --> 00:28:01.005
AI Studio of how to improve it and get a high converting website built on the principles we spoke about earlier. And 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.