Vollständiges Transkript anzeigen (3.654 Wörter)
For the last few days, I've been building a prompt that lets GPT-Astra build websites like these. On a left-hand side, this is what it looks like on your computer and the right-hand side, this is what it looks like on your mobile phone. So, the desktop view first, we see the berries drop, some strawberries, raspberries, and they get mixed up into a healthy smoothie. As you scroll through, the website looks fresh, the design looks very nice as well. The mobile view has to be a little bit different because it's not horizontal based view now, it's like a vertical view. So, same thing, the berries goes into this beautiful shake, and the website looks the same across both the desktop and the mobile view, but we have some different elements for mobile view because it's optimized for the smaller screens. Our next demo is this luxurious watch store. As we scroll through, the watch expands into the different components, we zoom in really close, and as we start zooming out, we see the watch and it's on your hand. And this is something that I want to speak about in this video. This is a visual story of your product, and that looks amazing as well. It's a visual story of your product, which means as you walk into the store or like the purpose of you visiting this place is because you want to leave with something. So, here you're walking in to buy a watch, and you want to leave with it on your wrist. So, just an interesting way to think about how to build your website and get that story across. And our final example is this very tasty pizza store. Can you guess the visual story? So, we throw the dough into the air, and the pizza gets, it gets made, it gets cooked, and then finally drops into a box ready for you to take home. And for this design, I actually found some inspiration online, and I think it does look really, really cool. And for the mobile view, we have the same kind of visual story. The dough goes into the air, it gets made, it gets cooked, and lands in that pizza box, ready for you to take home. In this video, I'm going to give you the prompts that I used, as well as walk you through the entire process, start to finish, so you can build a website like this for yourself. I'll break this video down into six simple steps. For step one, we'll start with the tools that we need to get the job done. For step two, we'll learn about your brand. For step three, I'll show you how to create your own visual story that represents your product or your service. In step four, GPT-Astra builds out the entire site for us, kind of putting all those things together. In step five, I'll show you how to refine your website, so how to fix your copy, or look for additional inspiration so you can actually build out the rest of your website. And then finally, in step six, once we're happy with everything, I'll show you how to build out your website into a mobile experience, so if you open up your phone, everything looks good as well. All right, let's start with step one. So for our setup today, I want to be using the Chat GPT desktop app. I'll be inside the Codex mode. I've got a blank project folder created, and I'll be using GPT-6 Astra. And actually, I'm going to bring us down to light mode. When I first started this process, I was using high, but the more that I refine my prompts, I actually found that I can get away with light and still have really good results. The next thing we'll need are the prompts from this GitHub repo. These are the prompts that I made custom for Chat GPT-6 Astra. This first prompt is going to help us build out the entire site. It's going to help us understand our brand, it's going to help us ideate our visual story, and then finally, it's going to build out the entire site. Once we're happy with how the website looks on a desktop, we're then able to call the second prompt, which is the mobile refinement. This is going to convert the desktop view down to a mobile view that's been optimized for that smaller screen. And finally, in order for us to create that visual story, we'll be using Seedance 2.5 inside Higgsfield. Hey guys, just want to take a couple of seconds and say if you're enjoying this process, I'd appreciate if you can like the video, or subscribe to my channel, or drop a comment below. Thank you. So, the first thing you need to do is create a Higgsfield account. I'm going to leave my referral link in a first comment below. I'd appreciate if you could use it. After you've created your account, go across to plugins, go to the search bar and let's search for Higgsfield. I've already authenticated mine, but you'll see a little plus icon over here. Complete the sign up process and then come back into Chat GPT and let's go back into a new chat. So, at this stage, we're ready to start building our website. So, let's go ahead and get the first prompt. I'm going to copy the entire prompt. Now, a quick note here is that the prompts can be pretty long, so if you do want to conserve your tokens, maybe you want to optimize the prompt before you use it. This is still early days for me using it with GPT, so I think over time, I will also optimize it as well. And I'm just going to paste it into here. Now, this prompt is structured like a very autonomous skill, so it's going to get your GPT to take you through the process of learning about your business or your brand, getting your logo, getting your website URL. It's going to ask you for inspiration of different shapes or colors or elements that you want to include. Maybe you want to give different URLs of competitors to draw inspiration from as well. It's then going to really focus on getting your visual story. It's going to use the Higgsfield MCP to actually generate all the different assets that it needs, and then finally, it'll create that website, and then work with you until you're happy with the final product. Now, on the other hand, it doesn't have to be so rigid. It can actually create things from scratch with very little guidance, and that's exactly what we're going to be doing today. Please take this skill and build a website for my outdoor clothing brand. I don't actually have a clothing brand so I don't have like a a name or a logo or anything. So, you have to create all that by yourself, and I want the visual story to be about a weatherproof rain jacket. And at the start, we just see the rain jacket, but as we start zooming in, we start seeing the fibers of the rain jacket, the zippers, the different parts of it, and eventually we start seeing like rain pebbles land on the jacket. And we keep zooming in, we keep zooming in until eventually it gets a little bit blurry. And then as we start zooming out, now, we then see the rain jacket, but it's actually being worn by a hiker who's atop a really high mountain and it's a beautiful view all around him, and then it kind of zooms out and yeah, we just end with that frame. So, let's see how well GPT-Astra Light is able to take my fictional, my fictional brand and actually build out that visual story as well. And this is one of the first things that we see. We actually get the layout. This is a massive bunch of scenes over here, maybe I was a little bit too descriptive. But the main thing that we want to focus on for when we're starting to build a website is actually get that visual story component down pat. So, over here, we have, we start off with a single orange jacket suspended against a dark and misty background. We then start moving the camera towards the zipper, the seams, and a tightly woven fibers, then it starts to rain, the droplets go into the jacket, the weave fills the seam, slips softly out of focus, and as we go back into focus and start zooming out, we see that hiker wearing the jacket on top of a beautiful mountain as well. So, this is going to be pretty complex and let's see, so we're ready to start working with the Higgsfield MCP. So, the first thing we're doing now is just generating that start scene. So, I think it's just going to be the jacket suspended kind of in mid-air. And the awesome thing is that GPT understands all the scenes that it has to create, so it can dynamically create that first starting frame using an image generation model here. So, I actually should have chosen GPT image two, but also Nano Banana is a little bit cheaper on credits, and it also gives us really good results. So, there we go, that's the very first scene. That's a pretty cool jacket as well. And at the same time, we're also able to get the Higgsfield MCP, and actually use this image as a starting frame for a video in Seedance 2.5. And that video is later on what we get, and we kind of split it up into the scroll scrub effect, where each frame is embedded, and it kind of moves through as you scroll on a website. So, looks like we created that first part of the website, we have the Veyra brand over here. I'm not actually able to scroll or anything yet, and this is exactly what happens. We build that first section of the website, and I think in the background we'll start working on the logo, and then next, the video, and we'll start embedding the website piece by piece as well. There we go, generating the video as well now. Now this video generation process, especially for longer clips, can take a couple of minutes, so you just have to be a little bit patient. Now one of the things that I like about this process is that, like, for those first three websites that I showed you at the start of this video, I just had a bit of fun. I kind of sat back in my chair and I I just thought about a visual story that I thought would, like, look cool. I tried to imagine myself, like, what would I want out of the experience of visiting this website. For example, the pizza, I want, like, a pizza box with a steaming pizza inside it, and the same thing here, like, if I buy a jacket, like, what's that, what's that final scene that I want? And it's like to wear the jacket, to be up on a beautiful mountain, like, breathing the fresh, crisp air. If it's raining, then it's totally fine as well. Like, I'm completely cool, and that's the kind of scene that I wanted to recreate here. It looks like the video's been generated. Let's give it a play. So, we have the jacket, we're zooming in to the zipper, we then zoom into the fabric, we have the raindrops, we zoom into one of the droplets, and looks like we've lost a bit of focus, and as we zoom out, we have the person standing on top of the mountain. And now let's actually see how that transfers to the site. So, I'm just scrolling through, we're zooming in, into the fabric, into the rain drop, and then zoom out, we see the person standing there as well. And at the site in general is still pretty basic, so we need to do some work here to fill it up with maybe, like, different products. But there was probably a little bit more that I want to do here. I mean, I like it. It's in my opinion, it's a very soft, kind of visual effect. I guess I did like the, the three effects we had at the start with the pizza, the watch, and the, the smoothie. I want to give a bit more action into the camera as well. Hey, can you take the scene that we have, and I want to make two changes. When we're zooming into the jacket, I actually want to have the jacket, kind of, like, unzip and move around a little bit, and then the camera has a bit more like active motion. We zoom in, we go into the textile and the fabric, and maybe we actually see the fabric itself, like, a cross stitching as if it's like, really thick strands, cuz we're zoomed in so much. And then as we start zooming out, we see the person. I want him to actually take his last few steps, and not just be standing there statically, but I want to take the last few steps, and then finally take the last step and, kind of, then stand there and admire the view. So, there we go, we got a bit more creative direction in here. Revise the film to the jacket unzips, shifts as the camera moves into an extreme close-up of thick woven strands. On the pullback, the hiker will take his last few steps, stop, and admire the view. Awesome. So, while I wait for that video to be generated, which I think is already starting over here, 24 seconds now, a little bit longer, I want to spend some time filling out the rest of this website. And I don't really know, myself, exactly how it should look, so I want to get some inspiration from other really awesome websites. And I also want to generate some photos of different products that I want to put onto here as well. So, I want to be using the Higgsfield MCP for that. But if you do have your own products and you have photos, even if they're not the sharpest, I actually found that you can just upload them into the conversation, and then Astra can actually use your images as, like, reference frames inside Higgsfield, to touch them up, improve the lighting, make them a little bit clearer, whatever has to be done to make them look really good on your website as well. So, a great place that I like to go to for inspiration of, like, really nice-looking websites. One great place, actually, is Pinterest. And if I just open up this, this is that pizza website that we created before. So, just bringing our pizza website here, you can see this hero section. We have a very similar hero section for us as well. We have the button, and then the transparent button, just like here, the feature section, the pizza selection, we also have that here, features and pizza selection, and we have that same part here as well. So, you can see going through this website, we drew some inspiration from here. So, I'm just going to use Pinterest again to draw some inspiration for an outdoor clothing website. And let's just open up a couple of these. I like how this is pretty fresh. Just going to take a screenshot of this. Let's see what else we're working with. Gear for every summit. Yeah, I like that as well. Going to get a screenshot of this, and is there anything else? And maybe, yeah, I like that as well. So, I think from these three, we can get some, some kind of theme for ourselves, like a fusion of all the three. Just going to drop these three into the chat. Hey, I've got some inspiration for the rest of the website that I want to make, and I want to list some additional products. For now, I want to start with a pair of hiking shoes, a pair of like, these like canvas weatherproof pants, and also maybe like a hat and a t-shirt. So, can you generate some nice, similar style clothes, list them, follow this kind of design from these three websites that I'm giving you, but fuse them into our own unique design as well, please. Let's see how we go with that. Okay, so the second video's been created. Let's see if it's any different. So what are we doing here? We're zooming in. Okay, we see the fabrics as well. So I didn't even know this was possible because that video was pretty shit to be honest. But the revised film was finished. I'm checking its motion while the product images finish, and then I'm going to connect both into the existing preview. But the first revision has the magnified woven strands, but it kept too much of the original static jacket and hiker motion. I'm making a targeted correction without the old video as a motion reference. So I think it just gave the original video as a motion reference for generating the next one. It was able to review it, which is, I don't even know this is possible to be honest, and it's going to make a revised second version that hopefully is going to be better because that previous one wasn't that much better. So looks like the product images are ready and we can view the collection. So I'm just going to go into the site and scroll down. Good gear, further horizons. All equipment, shoes, pants, shirt, we can click on the shirt as well and see some information about it, the pants as well, and there's the filter work, apparel, accessories. We have another hero section, the best part is being outside or being out there, that's nice. Less between you and the outside, so it's getting better and better, let's go experience again, and brings us to the very top. I want to skip story, do just brings us, yeah, nice. So nice little additions that we're getting from Chat GPT, actually. This is such a great model at just design, it's very intuitive. All right, looks like the corrected film is ready, and it looks like it's been embedded to the website as well. So, we unzip, we have the fibers, the rain drop, we zoom on all the way, and now we have the person standing the very top. Yeah, and that little look to the right is very nice as well. So now at this stage, I'm happy with where the website's at, and I want to focus on the mobile view. So, we can just look at the device toolbar. We can just pop down here and go to iPhone 15 Pro, and let's scroll through. So, it actually transfers pretty well. This is the like, basically like a vertical, vertical frame, vertical image. So, I guess we've just, like, ultra zoomed into the center, and that center seems to be the focal point, which is pretty cool. But we still are missing like that hamburger menu to be able to like, click because just clicking that button takes us to the very bot, like, to the section of the website where the products are listed, and here I think things are just a little bit too small for mobile view. Like, that's not really going to work for me. So, but that's no problem at all because if we come back to the GitHub page, we have the mobile refinement skill. So, I'm just going to copy that, paste it into here. Hey, that looks awesome. Awesome. Can you now also get this mobile ready as well? Thank you very much. And at this stage, what we're most likely going to get is this initial scene that we see with the hiker, that's most likely going to be reproduced as a separate clip, specifically for this viewport, so like the vertical viewing. But yeah, we'll see what Astra decides. All right, so looks like the video was created, so we have a custom sized one for the mobile view. Let's check it out. So we're scrolling through, so we have a zip, but actually zips back up. So it looks like, yeah, that's a little bit different. We go in, we have the raindrop, and now we have the person from the front, but still on the beautiful mountains. So I guess we just need to make sure that the consistency is there between the desktop view and the mobile view, or maybe we're okay with this because it's like a different experience. Going through the website, the buttons are now a little bit bigger across the width of the screen. That's pretty cool. Can we still click this and see? Yeah, that's awesome. And then going through, and actually one thing I noticed is this orange on the person with the jacket, the V is orange, and also this is orange. So that does look nice. It's like a nice, consistent style between the clothing, the buttons, and the actual brand icon or the logo. That is pretty cool. And there we go, we were able to complete the process. We have the desktop view and then the specialized mobile phone view for our website as well. I hope you guys enjoyed this video, and if you did, I appreciate if you could like and subscribe to my channel. Thank you, and I'll see you in the next one.
Video
Video
Video
Video
