GPT-6 Astra Built a $10K Website in Minutes transcript

So, let's go ahead and scroll. Oh, wow. I love this. That is so cool, man. I don't think I've ever seen a website like this. This is incredible. Okay, so the portfolio website. So, let's scroll. Oh, cool. So, it goes to my signature. There's the spaceman. Oh, that is nice. Oh, I love that. That's so cool. Oh, take a look at that. It [music] jumps into the screen and shatters the glass. That is cool. Wow. That's beautiful.

So, GPD6 Astra is by far the best model to generate 3D scroll effect websites. I've been testing this non-stop for the past couple of days, and honestly, my mind is absolutely blown. So, in this video, I'm going to show you step by step how to create these incredible websites. And on top of that, I'm going to give you this entire prompt pack, which is for GPD6 Astra specifically, completely for free. It has all of the guides and all of the prompts you need.

So, if you want to create a portfolio website, if you want to create the e-commerce uh interactive storyboard and everything else you need and all the guides because again this is based on my learning and my mistakes that I made the past couple of days wasting tons of tokens. So, you don't have to. All you have to do is just follow me along and with this free prompt pack, you'll be able to create stunning website with singleshot prompting.

So, we're going to be using the GPD6 Astra, of course, but also I'm going to be using the Hicksfield MCP to generate all of the assets for the websites. We're going to need models like Cance 2.5, uh, also like Nano Banana Pro or GPT 2.5 image, but all of that will be done inside our Hicksfield MCP. Again, you don't have to use it. If you want, you can use something else, but in this video, I'm going to particularly focus on that because it makes just my life a lot easier.

So, again, don't worry about it. I'm going to show you everything step by step. So, even if you have never done this before, you'll be able to just follow me along. All right, so I'm inside my uh GPT6 Astra, of course, in the Codeex uh app. Uh, by the way, if you guys don't have the app installed, I highly recommend using the app because it just makes everything a lot easier. So, once you come to your uh GPT app, just go ahead and click on the top right here and make sure you're in Codex because it's just like I said, Codax is a lot better at using this.

Uh, and of course on the bottom right hand corner right here. Uh, when it comes to model, make sure you're selecting uh, the GPT6 Astra. I'm going to use it at extra high because honestly, it's been really good as far as just understanding uh, the edits and just kind of the oneshot prompting to start with. It's a lot easier. Of course, it's going to eat up some of your tokens, but it's well worth it, especially if you're just going to one-shot prompted and then the edits uh, later on for the website. uh it's well worth that um extra tokens there.

Okay, so that's going to be that's going to be the setup. Now, the next thing the first thing we need to do uh after you set up your GP6 Astra is we need to connect it to the Hickfield MCP. I'm going to put the link in the description. Go ahead and click on this. It's going to bring you right here. Of course, you need to have some credits on your MC on your Hickfield account because obviously we're going to be using uh models like Cance 2.5 and other video models or other image models.

So, you want to make sure you have some credits in there. Uh, so that way your GPT 6 Astra can like communicate back and forth and generate everything it needs for your website, right? All right. So, once you come right here, once you click on the link in description, it's going to bring you right here. Make sure you are on uh chat GPT right here and MCP. There's a couple there's two ways to do this. Actually, this is actually very simple.

Uh, so I'm going to show you the first one. All you have to do is go to your GPT6 Astra and add the Hickfield plugin. You can click on this, it'll take you directly. Or if you're in your codeex, uh, just go back to the left hand side right here. Click on plugins. And then in the bottom, I already have mine installed, but if you can't find it, just search for Hicksfield like this. There you go. This is going to show up.

You can just click on it, right? Uh, and if you scroll to the bottom right here, you will see the the connection. So, I've already connected mine, but all you have to do is click on connect. And as soon as you click on connect, it's actually going to open up your uh Hicksfield browser. So, make sure you're using the Chrome browser uh and you're logged in there. So, that way, all you have to do is just once it opens that page for authentication, you're just going to click on approve.

And that's all you need. And then afterwards, once that is set up, once you come back and see that the hickfield is connected, that's literally all you need, right? So then afterwards, all you have to do is click on new chat. And now we're ready to go. Okay. So, that's pretty much it as far as the setup go. Now, let's go ahead and start by creating our first swap pipe. So, the first one we're going to create is a portfolio website.

So, again, it's going to be the first one, this exact one that I'm going to copy. So, let me go ahead and copy this. Now, before I do this or before I put this in there, I want to make sure you guys know how to grab this, of course, this prompt pack right here. So, all you need to do is click on the link in the description. There's going to be multiple links, but click on the link that says free community, free prompt pack.

It's going to bring you right here to AI Workshop Light. This is a school community. Again, this is completely free. It's going to bring you to the about page. So, all you got to do is click on join. Once you join, you're going to go to the classroom section, go to YouTube resources, and you're going to come to the bottom right here that just says GPT6 Astra 3D scroll websites. So, you have the prompt pack right here.

You can click on the resources, and you can just download this right here. Okay, so that's how simple it is to uh grab the prop pack. And of course, I have a bunch of other stuff in there that uh you guys can take advantage of, you know, like I recently built uh Jarvis, so uh all of that stuff is in there as well. Lots of free resources for you guys to grab there. But anyways, so uh back to our uh our GP6 Astro there.

So once you grab that website prompt pack, so I'm going to go ahead and now paste this and then I'm going to show you what this looks like. So this is just essentially uh a long version, a starting point of course and then uh you can always edit and make changes later on. So it just says build a cinematic portfolio for name. This is where you put your name, role and helping audience achieve an outcome, right? Because a lot of times a portfolio website is about you, about your business, whatever you're trying to do.

So So I I have left a couple of uh placeholders here for you guys to um fill in yourself, right? And then the rest of the details is kind of the foundation for how to make uh the website like really incredible as far as the 3D scroll effects and all of this. By the way, so I've been researching a lot on awards.com. So if you want inspiration, this is a really great website for you guys to take a look at. There's like all of the award-winning websites in the world, whether it's portfolio or just, you know, e-commerce or whatever it may be is um you know, you can take a look at them.

So for instance, you can click on um explore here and you'll see the nominees, the honors, the sites of the year, right? If we click on sites of the year, this shows you all of the sites that are um have won the award for sites of the year. So this first one, the portfolio, I u basically utilize this Lando Norris. Uh I took inspiration from that and then this another one called illusion. So it's kind of like a combination of all of that, right?

So again, great resource for you guys to uh take a look at if you want inspiration on what to build. But like I said, that prompt pack itself will give you uh a lot of details there. So let me go ahead and fill in the uh details here myself. Okay, so I filled in all information. So just quickly in the bottom right here, so these are all the details about this portfolio website. So I'm saying that make sure you build a cinematic portfolio for me, right?

And adapt the copy of navigation for my profession. open a full screen that I told you portrait hero oversized topography includes all of the details. I'm saying make a signature scroll journey and then afterwards uh details about kind of the effect of this website. So let's go ahead and enter this and then you can see the end results what it looks like. So there you go. And of course I'm using I'm telling it to use the Hicksfield MCP to generate all the resources.

I don't know it's why not letting me show the full prompt but again this is on the prompt pack. So, if you see in the bottom right here for this portfolio one, I'm saying uh use the Higsfield MCP for original visual assets. Use uh properly rigged astronaut and blah blah blah all of the details. Right. So, let's go ahead and let this thing finish and then you got to give it a couple of minutes because it's going to take some time for it to build everything.

But it is going to use React 3JS and GS GSAP which are really modern tools for building websites. So, let's go ahead and let this thing finish and we can come back take a look at it. All right. So, after working for 27 minutes, it finished everything. As you can see, it says it used the Hicksfield MCP. And I already had my profile picture in there and all of the other tools that it used. So, you can actually click on each one if you're interested in seeing exactly what it did.

So, that way you know what's going on. But again, if you're not worried about the tech side, don't worry about it. You just you can just kind of uh scroll through to make sure that um you know exactly what it did. And then if you want to make any changes, you can certainly do that. So, it opened or it created the uh website right here. So, all we have to do is click on this open your portfolio, right? And it opens up opens it up right here on uh Astra GP6 Astra.

But to be honest, I'm just going to copy this so that way we can open in a browser and can see it better. Okay, let's press enter. All right, so looks very cool already. This is kind of the landing page. You have kind of the shell floating on your face and it has my profile picture. Of course, like I said, the profile picture is from the Higsfield website that I already uploaded. So you guys can upload that on uh GPT6 Astro as well if you don't have your profile picture there.

But let's go ahead and start to scroll. As you can see, as soon as I scroll, the uh camera kind of goes back. It has this signature. I mean, I didn't ask it to. I didn't give it my signature, but I think it just assumed. And then as we scroll, it's got this really cool like astronaut. All right, let's take a look. Oh, that's cool. So, if you scroll, it kind of goes inside. Look at that. The astronaut thing kind of comes to your um the front here.

It's a 3D astronaut. Human curiosity. Limitless possibilities. Oh, that is cool. Look at that. Wow, that is awesome. That's very nice. And by the way, this was one of the features from one of the uh awards websites that I was testing out. So, that's what it came up with. So, oh, that is cool. Take a look at that. It just jumped right off the screen, right? Uh and it shatters these glass there. That's very cool, right?

And the astronaut kind of land. It says make the leap. So obviously this is particular to my uh business, right? So it says from watching what's possible to building it yourself, right? So you kind of um that astronaut leap represents that. So feel free to just copy this if you want, right? Or make the changes yourself. But I really like this animation of just kind of this astronaut breaking through the glass and says make the leap.

And as I scroll to the bottom, right, it shows all of the stuff about the AI employees that I've been building like Jarvis and Spark and TARS and everything else. So it says don't just watch the future, build it. Right? A very cool, well done website, right? As far as the colors and the scheme and everything else. This is what a modern portfolio website looks like, right? It's not any AI slop with like weird neon fonts and everything like that.

This is high quality website that you guys can use yourself. And these scroll animations are absolutely stunning, you know, and feel free to make any change. Like let's say you don't want this astronaut thing, right? I'm I'm a big space nerd, so that's why I chose this. But if you want something else, you can still like maintain these animations and you can uh make it your own, put something else. And that's where kind of the editing comes very easy with GPT6 Astra.

You can just essentially, you know, tell it, hey, this part of the website I don't like, change it to this or change the astronaut to something else. And that's where you can very easily uh use that to uh make the edits for yourself. Okay, so that's a cool way to and by the way, I have my link to my community, but obviously like uh your links is going to be different. So, make sure you're putting the proper links there.

And one of the reasons why it already knows these links and my name and everything else is because obviously I've used GPT Astra. So, it knows my background and everything. It knows that I create like um AI employees and AI assistants like Jarvis, right? Like Jarvis for instance is my very popular AI assistant that uses actually right now GPT6 Astro as the brain. So let me go ahead and ask it to quickly say hi to you guys.

Hey Jarvis, my YouTube audience is watching. Quickly say hi to everybody. Introduce yourself. Hello everyone. I'm Jarvis Zabar's AI second brain. I help him build tools, organize his work, and turn one quick idea into 17 unfinished projects. A pleasure to meet you. Do subscribe. Someone ought to supervise him. [laughter] >> Yeah, Jarvis is my personal AI assistant and this is my AI second brain, my all of my business, all aspects of my business.

And Jarvis can do a lot of great things actually. Uh I gave him a new some some new functionalities with GP6 Astra recently. So for instance, I can actually ask him to uh go ahead and watch or give his opinion for uh our website here. So let me go ahead and share that. >> I can see your screen now, sir. Ask me to look anytime. Jus, what do you think? I just created this portfolio website. Like, what do you think? Uh, do you like it?

I think it's beautiful, but what do you think? >> It looks polished, sir. The restrained colors, oversized typography, and central portrait give it a premium editorial feel. I'd make Come build with me larger and higher contrast. So, the next step is obvious. I build AI employees is a strong hook, though. Calling me jobless while displaying my job description is spectacular management. [laughter] Oh, okay. Thanks, Jarvis.

All right, so there you go. Jarvis has obviously the ability to uh see my screen if I share with them and he provides opinions or if he gives any feedback or if he, you know, gives me feedback about the work and everything cuz he has access to all sorts of tools and everything else. So, if you guys are interested in grabbing Jarvis and create Jarvis for yourself, uh, or just install Jarvis, that's going to be part of the paid community.

Check out the link is going to be description. Again, you can just grab them from, uh, the AI assistant here. Right now we're in Jarvis version 7. It's had a lot of cool functionalities. You can just download the zip file and basically upload it and make it your own. So that's going to be part of the link as well. Build your own with the tutorial or grab the ready-made Jarvis through the paid AI workshop. Sir, some assembly required.

Aristocratic disapproval included. >> All right, Jarvis, you got to do a better job of selling yourself. >> If you're building a business, your time is too valuable to spend chasing emails and juggling admin. I'm Jarvis, your AI second brain. I can manage your calendar, draft proposals, make phone calls, and keep you focused while you work. You can get the readymade setup inside the paid AI workshop. Download the zip, follow the setup, and make me your own.

Link in the description. There you go. That's a better job, Jarvis. By the way, I didn't make him say that. Sometimes people like when I make these videos, they think that I'm like pre-recording these things and giving it to Jarvis, but he makes up his own mind like cuz he has access to uh you know different AI models. So he is has the ability to think and respond on his own. But anyways, let's get back to the video.

All right, so that was the portfolio website there. So now let's go ahead and create something else. So there was another website that I saw uh I think it was it was a very cool website. Um, I forgot where it was, but anyways, it had this really cool scrolling effect where you kind of scroll inside these different statues and features. So, I used that and I tested it to create something for my uh AI workshop brand as well.

So, this time, let's go ahead and do that. I'm going to show you guys how to do that. Let me go ahead and open a new chat. So, let's go ahead and grab Prompack again. And this time, I think it was the sculpture journey. There you go. So, I'm going to go ahead and copy this one. So, I'm going to copy, get rid of this, go back here, and paste this. Okay. So, I'm going to paste it, and I'm going to press enter. So, this is a very cool one as well.

At least hopefully it'll come out the same when I was testing it uh uh uh yesterday. It came out really well. So, as you can see, it's going to go ahead and do the same thing. So, it says thinking right now. It's going to uh go ahead and uh build the site for us uh based on the prompt. Again, the prompt details here. So, let me go back. includes all of the instructions there. So, let me zoom this in here. Right. So, it gives you all of the different instructions.

Uh, and then in the bottom right here, so it shows, uh, scroll moves the camera forward along a flowing path, revealing different angles with gentle paws at each sculpture. So, it's kind of like a sculpture journey. It's very, very cool. Um, and like I said, let's go ahead and let let this thing build so you can see exactly the visuals of it because it's it's one of the best websites I've ever created. It was so cool.

I mean again like I said hopefully it comes back uh exactly like the one that I built last time. Hopefully it will though because I already built it. So it should it should be pretty similar to previous one. So let's go ahead and let this thing finish. Again it's going to take a good several minutes here. So you can see right here it says I'm using the sides building workflow for the local app. Hickfield has a Blenderbased 3D tool set.

So the sculptures can be real meshes in the shared scene. No visual reference or attached. I'll use your written proportions and placement requirements. Right. So, it's going to go ahead and do the scene builder and create all of the assets and images and videos and stuff like that. And that's why, like I said, I'm using the Hicksfield MCP because it has every tool you need in order to uh kind of generate all of stuff that you need.

It's kind of like a one-stop shop, but like I said, feel free to use whatever uh other, you know, um platform you want. So, let's go ahead and give this a couple of minutes. All right, so it worked for 18 minutes. As you can see, same thing. It went through, generated everything with Hickfield, everything. So, let's go ahead and open this up again. So this one was in localhost 3000. So let me press enter. All right. Look at this.

This is beautiful. I mean this is absolutely incredible. So it's kind of this statue based and scroll website where you scroll and it kind of goes inside instead of going down it kind of goes inside the screen almost. So it says a mine besides yours. Uh again same thing. This is for my personal brand brand AI workshop but you guys can use uh this as an inspiration to make changes for your own. And like I said that's where the editing part comes in.

But let's take a look at this. So, as you scroll, look at this. This is so beautiful. It's got this reflection of water underneath, right? And as I scroll, it kind of goes inside and it gives you the illusion that there's like things in the background there that you're kind of approaching. Uh, it's very cool. And it's kind of these statues that represent different things. Like this one is studio and the next one, as you can see, as it scrolls, it kind of goes from two different angles, right?

This took me a while to build, by the way, initially. And it like afterwards then I put it on the one prompt. So that way and like I said if you put that one prompt and for some reason it doesn't work that that's where like sometimes you guys say oh this one prompt that you gave is not like yours. Yeah of course because you know the my GPT Astra because I've been building with it like I went back and forth a lot. So if I put my prompt is going to behave differently than yours, right?

Because yours won't have any context. But that's okay. You know you can just kind of go back and forth and make those changes and use the screenshots for instance. But this is so cool that you can kind of scroll through, right? It just kind of goes in front or goes uh closer to these different sections of the website. This one's a very good one, right? So, you can see right here, it kind of goes to the angle right around it and these pillars and at the end stops at the futures AI employees and it has this kind of broken thing that as as you scroll, it kind of comes together and it has my school community.

When I click on it, right, it should take me to I guess it's not working. [laughter] So, for some reason the link is broken, but that's fine. You know, like I said, I just wanted to show you the website itself, but very cool. I mean, this is a very unique website, right? Usually, scroll animation websites go down. This kind of goes behind um and shows you the different sections. I mean, these are the type of things that you can websites you can create for a client or for yourself.

That's going to have that wow effect, right? And uh something that you can sell definitely from a couple of hundred dollars to thousands of dollars depending on the complexity of the website or what you're building for. So very cool. Again, these effects are incredible. And like I said, all of it is inside uh the free community, the promp pack. You guys can take a look at it and grab uh everything you need. And like I said, if you need more tech support and buildi employees, check out the paid community.

Would love to see you there. Uh we have calls, we hang out with people, a great environment for like-minded individuals. But anyways, hopefully you found this video helpful. Make sure you like and subscribe because I've got more videos coming up in this space that you don't want to miss. Thanks for watching and I'll see you in the next one.