AI Web Design Just Got Stupidly Powerful (New Workflow)

0:00 All right, today we continue fangirling GPT Image 2 because I've just been so blown away by how we can actually take beautiful designs, art direct them and build them into real world apps, websites, whatever the hell you want. This is a beautiful time to be a designer. And so what we're going to be doing today is we're going to actually be putting something to the test. So you can see that I've got all of these lovely image to site prompt kits that we've already created inside of image GPT 2. but you can see we got some crazy ones. Okay, so this is just an image right now, and we're gonna see if we can replicate this inside of Codex, and we're just gonna see how it turns out, because I've got a little bit of a workflow. I've got an idea on how this might actually work, but we need to see if we can turn it into something real. All right, so I'm just gonna go ahead here and select get the prompt. And

0:45 so this premium prompt is inside of our school community alongside a bunch of others inside of our profitable prompts program. So you're gonna see here, I'm gonna take this starting prompt. I'm gonna go to GPT2, click image and I'm going to send it and we're going to see what it comes back with. Now it's going to be slightly different to this because you know it's a style prompt at the end of the day it's not a perfect replication but it's going to give us something that we can work off and go into codex with. Alright so let's see what it comes back with and then let's start building it. Alright so image is now created and That kind of looks cool. It looks sci-fi. It looks completely unique. I've never seen a website that looks like that. So that's looking cool. Now, what we need to do, because the process that we're going to be going through is we're not going to get Codex to hand code that, all right? We're essentially going to make

1:31 the hero of our site, the actual image. We're going to turn it into a video and that's going to be the base of the site. So what we need is we need a specific mobile breakpoint as well. And we need to turn this into a mobile version so we can go into coding and ultimately make sure that, you know, things aren't getting broken. Because if we try to build this into a website right now, it would not be responsive. So I'm just going to say here, please now create a mobile breakpoint of this exact hero section. Okay, let's send it like that. Okay, so that should understand the assignment and then turn that into a mobile version of what we're doing here. All right, so we've got our images, we've got our desktop and we've got our mobile. Okay, what we now need to do, because we're going to be taking this image and we're going to be turning it into a video so it looks really cool and this is really going

2:16 to be the base of our hero section of our site. We need to have a button that works on the flipping site. Okay, so you can see here we've got this deploy now button. All I'm going to do is get rid of that. Please remove this deploy now button. Okay, and I'm gonna do that for the mobile as well. Once that's done, we can move over into animating these images. All right, guys, so you can see here that our two images now have no buttons, which is great. So I'm gonna go ahead and save this in the project file that we're gonna be working inside of Codex on. So we got test five. I'm just gonna call this image references, and this is important by the way. And we're gonna save that. And then we're gonna take this one, we're gonna hit save as, we're gonna go there. And then what I'm gonna do is just label these two images.

3:02 So when we get into coding, it's gonna know exactly what we're talking about. So this is mobile and this is desktop. Okay, so we got those two bad boys over there. So now what we're gonna do is we're gonna take those two images, we're gonna pop them into Higgs field, go to video, select Seed Dance 2, and we're gonna animate each of them. All right, so I'm gonna go to upload. I'm gonna upload both of them. All right, and I'm gonna select this one first. So this looks like this is the desktop. And then I'm just going to pop in a prompt here now. Please animate this desktop wallpaper that's going to be used as the hero section of a website. I want the camera to be static and still, but I want the typography to animate as if it's a live living, breathing terminal. You could have some glitch effects in there, but ultimately the image needs to stay

3:47 exactly as it's designed with no extra cuts or anything because it's going to be used for a website. Okay, so let's hope that one makes sense. Okay, and while that's working, I'm just going to X off that and I'm going to choose our mobile version and I'm going to change this to 9x16 and I'm going to use exactly the same prompt, but I'm just going to change this to mobile and I'm going to send that as well. Now, you probably can wait for the first video to generate just so you make sure that the prompt is decent. Otherwise, you're going to be burning credits and you don't want to do that. But let's see what it comes back with. Hopefully it'll be cool. And then we can move into actually creating the website from this. All right, guys. So going to be really honest here. I had a few crappy generations. And so what I did was I took my image and I asked my agent to actually just create a much better prompt for

4:32 me. I think this should work better. So let's see what happens. So don't make the same mistake I did. Sometimes I get away with like doing really simple prompts when it comes to video, like just animate works. But when you're doing this and you're not getting the results you want, you know, Sometimes just asking AI to help you is probably the best thing you can do. All right, so let's see what it comes back with. Hopefully it's better. All right, guys. So finally, we have our animated video for the hero and we've got our mobile version. Okay, so you can see there's some subtle animation there, some flickering of the terminal, which is kind of cool. We've got this moving, a little bit of that moving and a nice sort of glitching effect on the monolith. Now, what I'm going to do is go ahead and download these real quick. as video heroes in our project next to our image

5:18 references and this is important to do that for mobile as well okay i'm just going to relabel these as desktop and mobile okay so this is mobile video desktop hero video all right so you can see here we've now got our image references okay and we've got our video heroes okay so these are the animated versions of it essentially okay so what we're going to do now is we're going to grab our monolith prompt Now this prompt has been designed specifically for this workflow. So you can see here, I'm attaching a desktop hero reference image, a mobile hero reference image, and a subtle animated hero video. All right. And you can see the rest of it goes down and it basically tells Codex to use this and create a design reference from the actual references and to basically build a design spec for it. And

6:04 there's also a few specific rules inside here. Okay, so I'm going to go ahead and just copy this whole bad boy, move over to Codex and I'm going to paste it. What you'll notice is Codex is inside the same folder where we've been saving the reference images, which is again, very important. So all I'm going to do now is go into these and I'm just going to grab the path name for this folder and I'm going to say image references are there and paste the path name and then video heroes and I'm just going to paste the path name for this folder and that's going to tell Codex exactly where they are. Okay, so that's all I'm going to do and I'm going to send that and let's see what it comes back with. All right, so you can see what Codex is doing. It's answering our prompt very, very well. It's going visual spec and it's building out exactly

6:53 what the infrastructure is so the rest of our site ultimately matches that epic looking hero that we have. All right, my friends, so there you go. You can see the fully designed site now and Codex has understood the assignment really, really well. And it's added its own button in the same style. And that's why we removed it at the start. If you remember correctly. Now, if I start to scroll down, you'll see that it's added the rest of the site. And we've got these different sort of sections where it's kind of just made up the content because we haven't given it any copy yet, which is fine. And obviously this is ridiculously long. However, you know, we now have a site which just doesn't look like anything else I've ever seen. Now provided before you guys slam me in the flipping comments, obviously This is not a real site right now. But all I wanted to show you was that

7:39 you can now start literally designing and creating anything you want using this process. Huge amount of power is unlocked and it is now for your creativity and your brain to take that, apply it. You can use some of the templates and the prompts we've got and you can go out and create some amazing stuff. Now provided my first piece of feedback would be to clean up this huge blob of text. I can basically go out and do this for any of these cool designs. I can do it for this. Imagine that just moving like a timeline and these sort of animating in a nice way. You know, imagine this kind of flipping around and, you know, sort of doing some cool stuff. Imagine this vault opening and the website goes directly through it. Like literally it is completely open to your imagination right now. You can create anything you flippin' want in the digital realm. What a time to

8:26 be alive, guys. If you wanna get access to the big system prompt that we use for Codex, all of these are inside of our school community where we're helping people use AI tools to build real business infrastructure that actually helps you drive business. Now, whether you're building this for yourself, you're building these for your clients, inside of our school community, We have a full stack course, loads of cool resources in there, and we do calls every single week. And I would love to see you there, my friend. If that sounds cool, jump in. The link's in the description of this video, and I'll see you on the next one.