Build $10,000 Website with GPT-6 ASTRA In 12 Minutes...

0:00 You can now build beautiful and responsive websites with ChatGpt 6 Astra thanks to brand new capabilities with ChatGpt Image 2.5 and an incredible system. And in this video, I'm going to

0:10 show you exactly how to build these premium beautiful websites that are also mobile optimized and on top of that also let you do many things like edit the copy, get them SEO optimized, look at

0:20 graphics copy in your own website OS. So, if you haven't already, grab that beautiful coffee and let's dive straight in. Now to kick things off, we need to understand this has five big upgrades.

0:32 Number one, we're going to show you how to call beautiful websites, how you can just amend and build every screen, best image technology, destroy the slop, and look at it in an operating system. And

0:41 we're going to do this across three very simple levels. So even if you've never even said the word website before, you're going to leave this video with a full understanding of exactly how to get

0:51 a website the clients actually want to pay for. Now, level one is really simple. Essentially, a website is only as good as the references and the images that you actually give it. Now, to get

1:02 better designs than everybody else, you want better references. So, I'll put a link down below for this. Save.com is assembled by designers. This is fantastic. Again, you can come up here

1:09 and search for websites and essentially whatever the thing is that we're looking for, we're trying to find great examples of that to inspire our design. You have inspo.design, which is a very niche,

1:20 untapped source of beautiful designs with great graphics that we can use. Again, here we've got post.design, a slightly different website. Then we've got the classic referral designs that

1:30 has literally premier websites. If you click on this, you'll get the full breakdowns of exactly the design identity that you can literally use to recreate and build your own beautiful

1:39 websites. Min is great for screens. We have this one here, which again is a bit more niche, a bit more out there. That is recent design. Then we've got great things like superhero.io. You have this

1:49 one here which is all about mobile first design because most people are going to be on mobile and effectively all we're going to do is come to these websites and just get a bit of a mood board of

1:58 all the beautiful designs that we want to go ahead and grab. You can even have websites specifically for CTAs and websites that kind of really help you with components. Now once we head over

2:08 to chat GPT and we're going to select ChatGpt Astra 6 extra high and then we're going to describe the kind of website that we would actually want. And before we do that we need to go ahead

2:17 and grab this design lip skill. This is going to be the second link in the description inside my vault. You can literally grab this and all we're going to do is make sure you have this saved

2:25 as a skill in chat GBT. Copy it. Come over to Astro. You can drop it in. And all you're going to say to it is, "Hey, go ahead and save this as a skill." Okay. And this essentially is going to

2:35 be a new technique that's going to help us build beautiful, incredible websites. Let's say, for example, I like the look of this wise website. I can click on that and I can copy and paste this into

2:44 codeex or I can simply use glider and say, "Hey there. I'd like to use my design loop skill and go ahead and build for me a beautiful website inspired by this style for me uh for Jackai that is

2:55 going to be selling websites. Uh create this inside codeex. Now the reason you can do this is just a feature I use in glider lets me just create anything anywhere I want to. And what this will

3:03 effectively let me do is just trigger something off now in codeex and get that entire system started. Now as you can see it's created it own prompt and now that will begin the entire process. And

3:11 remember, you need to understand all three levels. When I get to level three and explain how this entire website operating system works and how we can amend the graphic and the copy all

3:19 within the system is going to really blow you away. And it's super important that you know how to do that. But before we do anything else, we actually have to give chat GBT Astra the ability to

3:28 create unique images and the ability to create video. And to do that, we're going to come over to the settings, click on plugins, and once you're here, you're going to come over, and I just

3:36 want you to click on browse directory for me. And then we're just going to search for Higsfield. And what this will allow us to do within Chat GBT is create any image and video with the best

3:45 models. Come down and click on plus. Once that's done, come down here and click on continue to Higsfield. This will open up a brand new page. Once it's there, come down and click on allow.

3:53 Now, technically speaking, guys, you can generate images inside chat GPT6 using codecs. However, when I played around with it, I was unable to validate that it was GPT 2.5. So, to make sure that we

4:05 can actually do that, we're going to go ahead and use Higold. and we need to use that anyway to generate the videos. Equally on the Higsfield website, you can see exactly how to that plug-in. You

4:14 can come down here and generate any images, any videos, and this just gives you access to the best image and video generation models on the entire planet. So, you can rock and roll and create.

4:24 Now, as you can see, all of the assets that I designed inside Chat GBT are actually here. So, for example, it's gone ahead and created a beautiful globe. And then from that globe, it can

4:32 then go ahead and animate that and turn that into a video just by giving it a prompt. And if I don't like it, I can simply click on it. I can click on reference and I can say, hey, make the

4:41 blue red instead. And then I can come down, pick 2.5 sunburst for exceptional quality. Come down there and let's just do two variations and click on generate. And if this sounds like I'm speaking

4:51 Spanish, I'm going to put a link down below where I'm going to be releasing my full zero to AI course with chatbt Astra. It covers AI foundations. It covers productivity on live, how to

5:01 scale your business, marketing, creation, automation, and agents, as well as immediate access to the entire uh chat GBT and called Agentic OS. You got all my memory systems, you get

5:10 everything to do with Hermes agent. I'll put a link down below if you want to get liars ahead and get an immediate install with all of this stuff. Now, as you can see in Hicksville, it's now turned it to

5:18 red, but we can do this programmatically. In other words, just by chatting to chat GBT inside the app and build it directly into our websites. Now, level two is the design loop. And

5:27 essentially what's going to happen now in TypeGBT is it's going to go around in a circle. We've given it a reference like this beautiful wise website and then it essentially spins up many agents

5:36 all of whom debate each other until we get the end output that we actually really like. So we have one product photo and it will then go ahead and it will enable you to basically do so many

5:46 different iterations until you get the beautiful output. It goes from having something that's generic, that's sloth, that no one wants, no one wants to have that on the website, to something that

5:56 is genuinely beautiful and looks like that on every screen, whether it's desktop, mobile, tablet, it doesn't really make a huge difference. And so, for example, this is what it went ahead

6:05 and built. And as you can see, if you're familiar with the Wise Vibe, that it's been able to create all of this dynamically. Again, it created the actual Earth using Higfield and then

6:13 just annotated it and built these different asset components. And you can see all these beautiful things it's got here. Now, look at this, guys. you know, you're doing a website shop and you can

6:20 come through, you can click on this. It just shows you all the different clients that you can play around with. Again, for brands going places, you can see you've got this beautiful scrolling

6:27 animation. Good ideas, deserve a brilliant website. Comes down here just looks crisp and decent. As you can see, big idea, clear next steps, things are changing. Let's make your next move.

6:37 Then we got this one here for seriously good websites. As you can see, this is a really fun one that has like this kind of beautiful animation where actually scrolls and falls all the way down the

6:45 website. I think that's really fun. It's fun. It's vibe. It's good. It's a little bit unique and it has a lot of personality. And then you got a little bit more of a kind of interesting style

6:53 kind of scroll stopping thing where you zoom in, you got this beautiful kind of like nice feel and vibe as you come down. It's a little bit slightly different angle. You get the idea. But

7:01 one really interesting thing that you'll find when you're having conversation chat GPT and I did this here for example. You see ordinarily these are just images. But what I did is I

7:09 actually made them animated videos on a loop. And you can do that with Higfield. I'll put a link down below if you want to grab that. And effectively you have a start frame and an end frame. and it

7:18 takes just what otherwise be quite boring images and just sets them on a loop. So these run around, you know, a nice movement of the bushes in the background. We have a butterfly flapping

7:27 its wings and then we have this kind of like beautiful um, you know, kind of like rabbit having a great time. Just really elevates the quality, makes it feel more personal. Then this takes us

7:36 on to the third and final level, which is the website operating system. This is the step that everybody misses and a result of it, they're thinking, "Dude, what the hell is going on? How do I edit

7:44 this without spending a fortune on tokens? This will save you so much money because let's say you spend 500,000 tokens building a website and you want to change a piece of text. You've got to

7:54 go through all those tokens again, leaving you with no access to Jack Pastra. And guys, I want you to have the access to that. The design OS kind of solves this and and basically gives us

8:03 so many other different capabilities. So if you're using one from the community, all you do is you come down into the claude code course here and then you download this the Hermes operating

8:13 system down there at the bottom. Click on download Aentto OS and it'll all be there for you. But effectively I built this with Astra and all you do is click on website OS. Now check this out guys.

8:23 Now you can do this and gives you ultimate customizability. So for example I can view it on what does it look like on tablet? what does it look like on mobile? And you can just see how that

8:33 all looks and you can make different amendments. On the right hand side, I have our design system. So, I can just change the color palette if I want to. I have this color picker. And the thing

8:41 is, guys, you can do what I call UI sniping. UI sniping is you head to a website like this, which is 21st.dev. And initially, guys, it gave me a really trash color picker. I was like, I don't

8:52 like that color picker. So, what did I do? I went over to 21st. I typed in the words color picker right there. And I found one that I like, which is this one. And I was like, "This looks really

9:02 cool." I was slightly different than this one, but you get the idea. And I just picked one that I liked. And I dropped it in. And as a result now, and our actual design system over here, we

9:11 have a beautiful color picker. And it ju, you know, rounded edges. It just kind of adds a nice vibe to it. Really cool. Then what's really cool down here, we have the typography, which is

9:20 awesome. So I can see what that looks like. I can edit the headline. I'll come over to graphics. And this here is really powerful. So what you can do in this design operating system guys is I

9:29 can look at all the assets that are in the website. So if I scroll down I can see this open AAI thing right and it shows me dimensions but what if I want something different? Well what I can

9:40 actually do is regenerate this with Higfield directly here and I can just say hey let's regenerate this. Okay come down here I click on regenerate video and that's going to go ahead and

9:48 regenerate for me whilst this stays in place and I can just see a different thing. So I can just dynamically now edit this inside my own website which is crazy. And on top of that I have all the

9:58 assets I have here. My photo of the herosphere all this sort of stuff. Then I have the copy and I can literally if I want to come down here let's come to the top. If I don't want less watching I

10:09 might say less hearing and I can just change what's on this website. So changes and get that full copy there and bam less hearing. So it just I don't have to mess around and

10:20 ask chat GPT to edit it. It's going to save so many tokens. It's ridiculous. But this is where it gets crazy. Why it's just so sick and it's just beautifully organized for me. The about

10:29 section that's really crisp. Work section, footer section, method, all the text on the website that is beautifully organized for me. Then I have the slop monster. This is really incredible. The

10:40 slop monster. Something that I built with the very best humanizing repos on the planet. It basically makes sure it just checks all your text for all signs of AI slopage and destroys it. sends it

10:51 straight to the shadow work realm. And on top of that, also has marketing stuff. So, it checks for AI vocab, it does AI constructions, punctuation, cadence, ruler through rhythm. All of

11:00 this is built directly into the system. This repo is completely free. I'll put a link down below using Grabber and just tell your AI, hey, run this through the AI slot monster before you even let it

11:09 see the light of day. And I can come down, I can request a fresh rewrite. And essentially, this will then run through the entire slot monster system. And then finally, we have SEM. So, I can come

11:17 down here. I can do an SEO review. I can edit the page metadata. I can do anything that I want to just to see what it looks like. Here's my page title. Here's my search description. And I can

11:26 save those changes, enabling me to SEO optimize my entire website. I can make sure it's optimized for tablet, for desktop, the graphics, the design, anything that I want. Where this goes to

11:36 a completely new level is if you have clients and you want to sell websites to them. I mean, I even had somebody in the community, I think it was 3 days ago, $18,500 on a website with a $350

11:46 retainer. Not typical, but I'm just saying people use these strategies to go ahead and do some beautiful websites, guys. But what I'm most excited about about this is just simply the fact that

11:56 you can give this to a client. So, you don't have to necessarily, and this is the way I built it this way specifically, so you don't necessarily have to be on the hook thinking, "Oh my

12:03 gosh, I've got to edit it." You can give them some degree of editability themselves. So, they can change it. They can add new pages. You can build this into a billion different directions. All

12:13 meaning crucially, guys, that you can edit more without having to rebuild everything at the same time. Now, design systems are one thing, but if you don't know how to use this feature inside

12:22 GPT6, you're leaving too much value in the table. So, the next thing we're going to do is learn exactly what that is and how it can help you take it to the next