The EASIEST Way To Create $10,000 Websites With GPT-6 Astra
CChase AI
Computing/SoftwareSmall Business/StartupsInternet Technology
Transcript
00:00:00GPT-6 Astra has made it easier than ever to defeat AI slop and create front-end designs
00:00:05that actually work. And the best part is, it actually got better yesterday with the addition
00:00:11of GPT Images 2.5. So we not only have arguably the best AI model in the world at creating
00:00:18websites, we now have the best image generation tool attached to it for free. We don't have to
00:00:24add anything else, which makes the design process quick and cheap compared to what we have to do
00:00:30with some alternative models. So today, I'm going to give you the exact process for creating high-level
00:00:34front-end designs with Astra so you no longer get stuck with AI slop. Now, one of the really cool
00:00:40things about Astra and these GPT models is the built-in image generation tool, which is a huge
00:00:45advantage when we compare it to the Anthropic competition. And that's because front-end design
00:00:49is an extremely iterative process. I want to be able to go through a ton of different versions
00:00:54of what I'm trying to create until I finally land on something I like. And oftentimes, we're creating
00:00:59our own assets, our own graphics, and a built-in image generation tool makes that process quick,
00:01:04and it makes it cheap, especially when we think about what we have to do with the Fable models,
00:01:08which is hook up some sort of external tool, whether that's Fowl or Higgsfield, and we're paying
00:01:12for every single generation. Not the case here. And this allows me to get to a place like this,
00:01:17and I'll show you how to get here from step zero very shortly, where I have a ton of different
00:01:21versions of my website across a ton of different design families very easily. Because at least for
00:01:27me, I need to see a bunch of different versions of my potential website before I actually like it
00:01:31and nail it down. Like I got to go through version one, version two, version three, version four,
00:01:35see it visually before I'm actually happy with it. And again, having a built-in design tool just
00:01:39speeds up that process significantly. Well, what exactly is that process? Well, luckily,
00:01:44it's just a handful of steps. You can apply this to any sort of front end design you're creating.
00:01:48And step zero, it's pretty simple. It is find inspiration so we aren't starting from scratch.
00:01:54Now when I'm saying find inspiration, I'm saying you need to go out on the web and you need to find
00:01:58examples of web pages and front end design aesthetics you like. You can find these all over the place.
00:02:03Some great examples are Pinterest, Twitter, Landbook. You can also go on websites like Dribbble,
00:02:08that's Dribbble with three B's, and search for stuff like front end design for SaaS or landing page
00:02:13for your sort of product. And you will see examples there. Now, what you really want to do to make this
00:02:18sustainable is you eventually want to create a library, some sort of vault of all these designs you like.
00:02:24Right here is mine. I just call it my taste vault. I've thrown this inside originally, Fable,
00:02:29and now I throw it inside of Astra. And I essentially give it screenshots of these things I like and it
00:02:34puts it all in one place and it breaks it down by design family. So you can see here over on the left,
00:02:40I have examples of monumental editorial, product led minimalism, technical systems, futurism, print tech
00:02:49paper, on and on and on. The idea is I now have a one stop shop where I can see a bunch of different
00:02:54designs I like. And what that really buys us is when it comes time to tell Astra, hey, I want to create a
00:03:01website. Well, I can say, hey, can you give me some examples of what this website would look like if we're
00:03:05doing technical systems? I can give it the whole sort of section and say, hey, look at all five and
00:03:10pull some of the sort of like design, you know, patterns. Or I could say, hey, I really like this
00:03:15one. Let's try to like recreate this exactly and then eventually edit it to make it ours.
00:03:20Furthermore, I cannot just give it one of these options. I could say, hey, give me some variations
00:03:25of print tech paper and dither mono and vast quiet cinematic on and on and on. So the point is I'm not going
00:03:31to just be starting from scratch when it comes to my front end design. I'm not just going to say,
00:03:36mmm, make it pop, mmm, make it look clean, make it look minimal. I'm giving it actual examples that
00:03:42it can pull into its own work. Now, I'll be giving you a copy of my exact taste fall as well as all
00:03:48the prompts I use in this video inside the pinned comment. So just check there if you want to get all
00:03:53of this and like have something you can actually copy and paste into asterisk yourself to sort of follow
00:03:57along. So that's step one. Step zero is like you need to figure out what sort of website you're
00:04:00trying to create, right? Like what is your product? What are we doing? Step one becomes,
00:04:04okay, inspiration. What sort of vibe am I going for? And this should be an ongoing process.
00:04:09Anytime you see a cool website you like, just take a screenshot of it,
00:04:12throw it into Astro and say, hey, add it to my taste fall.
00:04:15Now, before we jump into step two, which is the sort of skills you should be adding into your
00:04:19workflow, a quick word from today's sponsor, me. So inside of Chase AI Plus, I have just released
00:04:24an updated version of my Cloud Code Masterclass and I also have a Codex Masterclass.
00:04:29So if you're someone who's trying to figure out how can I get the most out of both of these tools,
00:04:33this is the place for you. And I also assume you have zero technical knowledge coming into this.
00:04:39So it doesn't matter what your background is. If you want to learn how to master AI,
00:04:43this is the place for you. You can find a link to it inside of the pinned comment.
00:04:47So you got your references. Now what? Well, now we have to tell Astro to go ahead and start building
00:04:51our landing page for us using some of these styles, some of these screenshots as references.
00:04:56Now, some of you may already know exactly what sort of design style you're going for.
00:04:59You're like, hey, I want sort of this product minimalism thing. I know I'm doing a dashboard.
00:05:03I know I want it to look like this. I want you to be sort of like a specific standard SaaS thing.
00:05:06I'll make some changes on the margins, but I know the sort of like path I'm going down aesthetically.
00:05:12For many of us, that's not the case. So what we want to do when we prompt Astro is we don't want to say,
00:05:17build me a landing page in this style. We're going to say, build me several landing pages.
00:05:22And I want each landing page to be associated with this particular aesthetic.
00:05:26So again, one is going to be technical systems. One will be product led minimalism.
00:05:30Maybe one is sort of this like, you know, vast, quiet, cinematic, it calls it.
00:05:35So I want multiple versions to choose from because eventually I'm going to go down one of those paths,
00:05:39but I need to see them first. Beyond that, the second thing you need to think about is what skills do I want Astro to invoke?
00:05:44What skills do I want Astro to use when it is creating these designs? And we have some options.
00:05:49The most popular one, and I've spoke about this at length, is impeccable.
00:05:53This is a front end design skill. It's got, you know, 66,000 stars.
00:05:57It's like the conversion like 4.3. And it's all about, hey, we're eliminating AI slop.
00:06:02Another popular one is the taste skill, sitting at about 86,000 stars.
00:06:07And third, you can totally use something like Anthropic's front end design skill and bring that into Astro.
00:06:15The thing is, you just need to experiment. You need to kind of feel it out which one you like.
00:06:20For today's example, I had it use all of them. Plus, I had it created not using any skills at all.
00:06:26Just like baseline Astro because I wanted to see what it would look like.
00:06:29And so that's what you see here. Now, for context, the website we are building is for a product called Vantage.
00:06:35It's like an AI analytics thing for financial markets, for personal investors.
00:06:39Hey, here's what sort of stock you should like buy or sell or whatever, right? Totally made up.
00:06:44But what I told it was, I don't want one version of this website. I want two versions.
00:06:48I actually want five versions across five different design families.
00:06:51And I will turn off my camera so you can see this a little better.
00:06:54So I wanted luminous futurism, print type paper, quiet cinematic, technical systems, and product minimalism.
00:07:00Again, all those aesthetic design families are tied to references in the vault.
00:07:05Furthermore, I told it to do four variations of each of those. That's why you see 20.
00:07:10So we have the version without the skill. Okay. This is like just pure raw Astra.
00:07:17We then have it with front end design skill from Anthropic. So it pulled in that information.
00:07:22Then I had it use impeccable and then I had it use the taste skill.
00:07:25So for example, if we look at technical systems, you know, I can see the whole page.
00:07:30I can click up here on the right where, okay, now I can see it with front end design, you know, the Anthropic skill.
00:07:35I can see it with impeccable. Right. And then I can also see it with the taste skill.
00:07:42And this is all happening within the Codex desktop app, which does a pretty good job of being able to like kind of see all this visually.
00:07:48Again, I can jump between the aesthetics and I can also like very for cell coded.
00:07:53I can also click back up here, go back to the full 20 preview.
00:07:56So I did this just to show you guys sort of the sort of the differences between these skills.
00:08:03Impeccable and the taste skill are kind of the biggest ones these days when it comes to like outside GitHub repo front end design skills that I think aren't overly prescriptive.
00:08:14There's a lot of skills out there that are like, oh, here's this fancy front end design skill.
00:08:17And it's like the scrolling animation thing.
00:08:19But that's like all it does, which isn't realistic for most people.
00:08:22Most people want a skill that sort of like improves front end design at a very high level and isn't going to give me the same design every single time.
00:08:29So what I do want to point out is that maybe there's like some of these look better with impeccable and the taste skill.
00:08:39But in general, the baseline Astra does really solid.
00:08:44Like, for example, technical systems, this is just baseline Astra.
00:08:48I feel like this looks pretty good, right?
00:08:52Now, there's a little bit of a difference between like impeccable, like it kind of has the big photo here, right?
00:08:57And there's sort of small changes on the margins.
00:08:59But I wouldn't say it's like, oh, with impeccable, this looks amazing.
00:09:03And with no skill whatsoever, this looks like AI slop.
00:09:06Not the case, not the case at all.
00:09:08And honestly, I think that lends itself to a bigger discussion about how good these models are getting at, again, at a baseline level.
00:09:14And we probably need less and less scaffolding these days to like make things actually work.
00:09:19But discussion for another time.
00:09:21Point being, at this step, what are we doing?
00:09:23We've already gotten our references.
00:09:25Now we're in sort of the iteration process and you're deciding what sort of skills you want.
00:09:29And if you're someone who hasn't added any skills to your stack, honestly, Astra's pretty good.
00:09:36Astra's pretty good.
00:09:37And we talked earlier about sort of having the image generation piece built into it.
00:09:40Like this image was created by Astra, right?
00:09:44I didn't hook it up to anything, right?
00:09:46This image created by Astra.
00:09:48And it just created that.
00:09:49I didn't even give it any real sort of design guidance outside of those references.
00:09:54It on its own was like, oh, cool.
00:09:56We should do something with like clouds and observatory because, you know, we're trying to like understand something and see something in the distance.
00:10:01So it also made the designs sort of relevant to the story being told, so to speak.
00:10:07So at this step, what have we done?
00:10:11We now have a bunch of different versions across different design families.
00:10:16Now what you want to do is you want to pick a design family.
00:10:19So for me, out of all these, I kind of like the technical systems.
00:10:23I think this looks cool.
00:10:24I think this kind of stands out.
00:10:26And from here, as you quickly kind of saw, I don't think any one of these particularly stands out all the way from no skill baseline all the way to something like taste.
00:10:35I kind of think they all look cool, honestly.
00:10:38And I could see an argument for doing any of these.
00:10:41So it really just kind of comes down to personal taste.
00:10:44What I kind of like the most is honestly the no skill version of the technical systems.
00:10:52I think this one on the far left looks pretty cool.
00:10:55So what I'm going to do now, once I have picked the design family, now I want to see different variations of this one.
00:11:02Because this looks cool.
00:11:03Maybe I'm kind of in love with it.
00:11:05But I'm now going to do more iterations and say, okay, Astra, you have this design family, which is going to be technical systems.
00:11:12I want to use it without the skill.
00:11:14Now give me different versions of this.
00:11:16Give me three distinct versions of this one before I finally settle on one I like and we go into more like micro changes.
00:11:22And so that kind of becomes the cycle.
00:11:25We're looking for different variations at a very high level, like design aesthetic.
00:11:30Now I'm going to look at different versions of that design aesthetic.
00:11:32We'll pick one and then we'll go into sort of like micro edits and tweets to really make it ours.
00:11:37That's how I like to approach it.
00:11:39And this is the prompt I would use at this point, which is like, hey, keep the aesthetic.
00:11:42I want to make three variations within that particular direction.
00:11:46Again, this is inside the GitHub.
00:11:47And when I gave Astra that prompt, here are the three versions that created for us.
00:11:51We have the original field of view and the research bureau version.
00:11:54Again, all just sort of different flavors of the same thing.
00:11:57So we already saw the original over here.
00:11:59We have the field of view where sort of that hero image takes a bigger chunk of sort of the visual real estate.
00:12:05Other than that, a lot of it is pretty similar as we go down.
00:12:08We have sort of this dashboard right here, which is again, totally made up, but it actually is interactive.
00:12:14I can click through sort of the different tickers, see different information and all that is reflected here as well.
00:12:21I will say this one is very green.
00:12:23So it's a lot of green versus the original, a little more white, which I kind of like.
00:12:28And then we also have this one, the research bureau is what this called it.
00:12:33Kind of picture takes smaller stage, not as large.
00:12:36But again, you see some similarities and just different flavors, not massive changes.
00:12:41But if you want massive changes, you can always tell that in the prompt.
00:12:44And so now at this point, all you have to do is choose which one you like.
00:12:48Out of these ones, I kind of like the original.
00:12:50I feel like it's clean.
00:12:51I feel like it still has some character.
00:12:53And so at this point, we've kind of started to move into step three of this process, which is the iteration side.
00:12:59So we've chosen the references.
00:13:02We've figured out what design family we like.
00:13:05We've now chosen a specific path within that design family.
00:13:08Are we done?
00:13:09Am I just like, okay, cool.
00:13:10This is what it gave me.
00:13:11No.
00:13:12Now what we're going to do is we're going to start doing much more lower level micro changes to this.
00:13:17And Codex and Astra make this very easy to do because I don't necessarily have to like prompt my way into each and every change.
00:13:24I'm going to have it create a tweaks bar similar to what you've seen in Claude Design where I can mess with a bunch of different things all at once with like sliders and like see it in real time.
00:13:34And so I'll turn off my camera so you can see it's a little bit better on the right hand side.
00:13:37We have essentially this tweaks panel and understand you aren't limited to just the tweaks you see here.
00:13:43This is entirely customizable, but it includes some presets.
00:13:46So we sort of have the original and the original when I open up the web page and nothing really happens.
00:13:51There's no sort of motion.
00:13:52If I go to the expressive option, you can see as I replay the entrance like things kind of load.
00:14:00There's some weight to this as you scroll in, which does add a bit more of a premium effect versus just be sitting there.
00:14:07Furthermore, when it comes to the minor tweaks with what things look like, I can just use these sliders.
00:14:15So I can change the headline weight.
00:14:17We can change the height, letter spacing, so on and so forth.
00:14:22This makes it a lot easier than just saying, hey, prompting wise, hey, can you make the headline bigger?
00:14:25Can you make it smaller?
00:14:26This is something Anthropic and Fable have also kind of added to their stack when you use slash design.
00:14:32We can mess with the image brightness, contrast, zoom in and out.
00:14:37I can even change the sort of grid pattern.
00:14:40We can do dots, kind of do whatever we want here.
00:14:43The point is, again, just easy to iterate.
00:14:45That's sort of the name of the game with everything here because I don't know what you like.
00:14:48You probably don't even know what you like.
00:14:50You got to see it.
00:14:51We can change accent colors.
00:14:53We can really do just whatever we want.
00:14:56Even made some changes to the footer.
00:14:58So I could just do the original footer and do a large watermark and sort of add this wireframe city with a little bit of motion.
00:15:07Change the weight of the line.
00:15:10Do they want windows?
00:15:11We want to animate the city, so on and so forth.
00:15:13I can save the settings, reset them, all that sort of stuff.
00:15:16Or always I can, you know, also compare it to the original, return to the polished version, open up the untouch original, so on and so forth.
00:15:25So Codex and Astro make it very, very easy to just not only iterate, but to see what your changes actually look like.
00:15:30And the prompt to get something like this is, again, inside of the GitHub.
00:15:34Now, beyond the tweak slider, there's some other sort of micro adjustments we can make.
00:15:38And the easiest thing is just sort of like adding custom components or finding components on the web that you want to bring into your design.
00:15:45Now, my favorite website for this, and there's a number of them that sort of do the same thing, is 21st.dev.
00:15:49So if I had to 21st.dev, I come over here and I go to components, I can see a million and one different sort of examples of different components.
00:15:58So whether that's something like borders or it's something like the marquee section or text or testimonials or cards or calendars or buttons.
00:16:11Point being, I can see literally in the case of buttons, thousands of different buttons.
00:16:16And again, I think the hardest thing for so many of us who don't come from a design background is like we just don't know what we don't know.
00:16:22And that's why finding inspiration and references is so important and being exposed to different sort of references is also really big.
00:16:30Because if you haven't seen it before, you don't know what like you might like and what will make the most sense for you.
00:16:35And we don't want to be necessarily hamstrung or pushed into whatever the median output is for Astra, for example.
00:16:42Like you saw the median output for Astra is actually really good, but there's so much out there.
00:16:47And I think just taking maybe five, 10 minutes to sort of scroll through different things like these buttons and cards, you might really fall in love with something.
00:16:55And in that case, it's as simple as like clicking on it, hitting copy prompt down here and then bringing that into Codex.
00:17:05And like if you find one sort of component you like, it's not too hard to then sort of expand that entire aesthetic from that single component into the rest of the website at large.
00:17:16So when we talk about the taste ball and references, like your reference could quite literally be the way a particular card is set up.
00:17:23And we can take that and we can expand that to everything on the web page.
00:17:28We just got to start from somewhere.
00:17:29Now, once you've gone through your micro changes, you've done the tweaks bar, you've added different components.
00:17:33What's really cool about Codex and Astra is this site feature.
00:17:38So all you're going to say is, hey, I want to apply these new settings and let's get this website up on sites.
00:17:43So sites, and you can get that by just doing at sites inside of Codex, it's going to deploy your website to the web.
00:17:51So this isn't, this is essentially the same in many aspects, like, all right, I'm putting on GitHub and then putting it on Vercel.
00:17:58So it's sort of like a, you know, simpler version of getting your website hosted via Vercel.
00:18:03Now, this isn't something you would really want to do in terms of production.
00:18:06But when we're talking about, hey, I kind of just want to share it with people.
00:18:10I want them to take a look at what I've done so far.
00:18:12This is a really simple way to do it, right?
00:18:14Like, OpenAI ChatGPT is going to host your thing and you can share it with whoever you want and maybe get some more feedback before you edit it some more.
00:18:21So you can see here, it's created the site.
00:18:23And if you want to share it to people in particular, you just go to share and you can enter their email address.
00:18:27Or you can have anyone on the internet take a look at this thing.
00:18:31If it's private, it's going to ask you just to log in.
00:18:33And now we have our Vantage website up and running.
00:18:37So it really is that simple.
00:18:39Astra makes it very quick to sort of iterate through all these different design styles, iterate through all these different versions.
00:18:44Of a set design style and having the built in image generation tool makes it very cheap and quick to sort of like create these assets like we did here in the hero section.
00:18:54Furthermore, I think this is just sort of the cycle you need to apply to all aspects of this.
00:18:58And I think it's also really cool that Astra is able to create this without using any skills like this is the no skill version.
00:19:04We didn't have to come up with some wild thing and use impeccable or use taste, although those still did give us solid outputs.
00:19:10If you're someone who isn't a fan of adding a bunch of skills to your stack and you kind of want to be in control just with like the baseline GPT-6, you get solid outputs.
00:19:20And from here, it's just a matter of iterating it and getting it to a place you like.
00:19:23Like it's very flexible.
00:19:25I don't think you need to have like these very prescriptive skills that only give you one particular style.
00:19:30You need to figure out your own style, which is why sort of step one of finding references and creating that sort of taste library, that vault, that repository of different like things you like is so important.
00:19:41So, as always, let me know how this worked for you.
00:19:45Make sure to check out Chase AI+ if you want to get your hands on my Codex and Cloud Code Masterclass.
00:19:50I'll also have a link down to that GitHub repo if you want to get your hands on that.
00:19:54Besides that, I'll see you around.
00:19:56around.
Community Posts
No posts yet. Be the first to write about this video!
Write about this video