If you're anything like me, you're not super creative and you don't have awesome ideas when it comes to fonts, colors, spacing, background graphics, and that type of thing, and you end up hitting a wall while you're trying to choose the design direction and the aesthetic of your website. So one of the good things about using AI to help you make your website is that you can go ahead and take inspiration from other sites, then feed that to AI, and then you can give it feedback, and then you can refine the design to something that you like and that fits with your style. So what we're going to do today is find some inspiration, feed that to the AI, and come out with a real homepage hero, and then we're going to use VS Code and Codex to refine it. By the end, we'll have a general direction of the design that our agency website is going to look like.
So the first thing that we're going to have to do is come up with some kind of color scheme for our website. If you already have a logo, then you can just go ahead and take the colors from your logo, and that's exactly what I'm going to do. So I'm going to use these colors right here from this logo. But if you don't, what you can do is go to the internet for some inspiration. One website that I like for inspiration is 21st.dev, and they have an area called themes. So they have quite a few different themes. This is mainly font and color direction. You can go ahead and take a look at any of these. I think this one's kind of nice. It shows you what a dashboard would look like with different components, and over here on the side it shows you the different colors that are used. Then you can always go up here and click dark mode to see what it looks like in dark mode. So after you find the colors that you want, you can go ahead and make a note of that and write down the hex color codes.
Next, we need some inspiration for the overall feel of the website, more like how the fonts and the colors come together to make a complete layout. So we're going to take inspiration from websites that already look good. We're not going to just copy them, but we're going to get a sense of overall layout, spacing, and the feel. On this website, this is called Dribbble, you can go ahead and scroll through and click into any you want for inspiration on colors, layouts, and styles. You can just look out for font pairings that you think look neat, or color combinations and contrast combinations, or anything like that that kind of sticks out to you. Another website is Site Inspire. I'll just list a few different resources that you can go to. Here is Behance. Another one is Best Website Gallery. Take a look through there. When I was looking through these websites on land-book.com, I found one that I wanted to take inspiration from, and that is right here. This is called GoGetta. So I kind of like the font here, I like the header fonts, and I like the hover style for this button. I noticed that this green here seems like it will be easily replaced with this kind of teal that I have in this logo, so I can go ahead and lean on that for that part. I think the teal will kind of look good in place of this green, and I like these little super headers above the bigger headers. I think that style will work pretty well for my website and my style. So this is the one that I'm going to choose to model my website after. Take some time and then go ahead and choose one for yourself.
All right, now before we generate anything, you're going to need to decide the general layout of your hero because, again, we're going to create the hero section for the homepage, and this is important because the AI needs direction. You're going to want to think about what your hero looks like structurally. This website right here is Brixies. I used to use Brixies with Bricks Builder, and it's a template library, and here is the hero section template. So you can easily go there, or to another template library, to find some kind of hero section template that you kind of like the layout of. You can use something like this to get inspiration, or just browse the internet, or use those other resources that I had previously told you. Once you have a layout that you kind of like, what you're going to need to do is either use Lorem ipsum for your hero copy or, if you want it to feel more real and get a little bit more progress in right now, you can go ahead and come up with some copy for your hero section. What I did is I created a mockup inside of Freepik. I chose a fairly simple layout. It's basically copy on the left with a few bullet points and two buttons. There's the regular primary button and then the ghost button. On the right side, we have just an image that goes along with the copy. What I'm going to do is feed this image as a whole into VS Code and Codex as part of the direction for when I build the hero. So you can go ahead and collect the copy that you want for your hero section, the general layout, and then if you want, you can go ahead and collect an image as well. Even though we're using Git, what you can do before we start making changes to your website is open up the directory or the folder itself and then duplicate it or make a copy, so then you can easily revert back to this if you want at a later date. Even though we're using Git, this is just another backup that's quite simple to go back to. Once you have that done, you can open up VS Code, go to the Explorer, click Open Folder, and then find your website.
All right, we are going to open it up and open up your LLM, whatever you have installed. So I'm using Codex. You can open up `index.astro`. One of the things to remember is that this down here says the IDE context includes context from the IDE, such as selection state and open file. Since we're going to be working on the homepage hero, you can go ahead and open up `index.astro`. Now we're going to generate the hero using Codex inside of VS Code. What we're going to do is feed it all of our inputs that we just talked about, our brand colors, our inspiration reference, and the hero layout that we decided on, and we're going to tell it to build the hero for us. I'm going to take a screenshot of this entire hero layout. That will be one of my inputs. Then I'm going to take a screenshot of just this incoming call tracking image right here. This isn't the exact image I'm going to use in the end, but for right now I'm just going to tell Codex to use that as the image inside the actual hero. Then what I need are my actual brand colors. So I'll go ahead and get my primary color, which is this teal, and paste that in. Then I'll get the background body color and paste that in. Then I'm going to get my inspiration website and paste that in. Then I'm going to add my images. So now I have my primary color, I have the dark secondary color, and then I have the inspiration website. I'm going to kind of freestyle this prompt because my setup and your setup is going to be different, and since this is an LLM it's going to be probabilistic. No matter what, we're going to need to adjust it after we send this through and then see what it looks like and keep adjusting it until it looks like something we like. So here's my prompt: I'm creating the hero section for the homepage. I uploaded two screenshots. One is the complete layout that I would like to follow for the hero section. The other is the actual image I would like included in the hero section. My primary brand color is the teal that I uploaded, and then the background body color can be used for the title text and any other area that you see fit for that. But again, the hero section will have a white background. Go ahead and use the fonts from gogetta.com, which I pasted above, and follow the general style and aesthetic of gogetta.com and create a hero section for my homepage. We'll go ahead and send that. Then after it builds the homepage hero, we can have it start the server locally and then look at it. It asks whether I want to allow it to fetch GoGetta's live HTML so it can match the homepage fonts and hero styling accurately, so yes. When you're coding using Codex in VS Code, these stops happen fairly often, so you'll have to keep an eye on it so you can continue with the process. Then it asks whether I want it to download the GoGetta font files into the project so the new hero doesn't rely on their site at runtime. Yes, I want to do that. One thing you need to be careful of is that if you're taking fonts from somewhere else, you need to make sure that you have a license for it. So do so at your own risk. It works for five minutes and 13 seconds, and we have a new homepage hero. So now let's go ahead and start the server and take a look at it. Again, you can start it by bringing up the terminal, opening Terminal from here, or going up here and clicking New Terminal, and then you can run `npm run dev`. Or we can just go into the chat and tell it to start up a server locally and give me the link so I can see how it looks. All right, we have a link.
Let's go ahead and take a look. This is the hero that it made. Let's see how it compares to our mockup. Here's the mockup, and here is the output. So this is pretty good. I think it's a little bit cramped for the homepage hero. I want it to have a full-width layout. The buttons look similar to the mockup, but they don't necessarily look the same as this theme right here. So let's go ahead and change the buttons and make the header full width. When we're working with Codex to make these adjustments, you can tell it to make all of these adjustments at the same time, but it often does better work when you separate them. I could focus on the icons and the bulleted list, or I could focus on the overall layout. So first I want to fix the overall layout. I'll go ahead and dictate what I want. I want the hero section to be full width. I also want the image on the right side to be much bigger, and I want there to be less space between the header and the hero section. So then we'll try it out.
Another switch you can use is the reasoning level. So you can go from medium to high to extra high. Extra high will take longer, and you don't necessarily need it, maybe only for more complex things. I typically just use medium. So we'll go ahead and send it and see what we get. This is the revised layout. Now it's looking much better, and this image is much bigger. It's a little bit blurry probably because I just took a screenshot, but we're going to replace that. What I want to do now is actually get rid of this Google call tracking pill, this thing right here, so then it will pull everything up a little bit more. I also want to make the pill over here that says local SEO for electricians closer to the headline, and I think we'll do that and then we'll fix the button. On the right side above the image, there is a pill-shaped heading that says Google call tracking, and beneath that it says website plus maps plus call attribution, and on the right side it says live. I want you to get rid of that entire pill right there, and once that's gone you can pull up the hero section more. Along with that, on the left side I want the local SEO for electricians pill to be closer to the Get More Electrical Jobs From Google heading. I also want everything on the left side to go up a little bit more. Can you give the three bullets their own unique icons, the bullets that say website live in seven days, show up in Google Maps, and check every call you receive? Also, underneath the Start Today button, the text that says Start Today for $375, can you put that closer to the button? All right, let's see what it does for us.
Okay, it's looking pretty good. So right now we're almost finished with the homepage hero. I think the only thing left to change is this button right here if we want it to look more like this one, if we want it to be thinner and have this little arrow that comes out. So let's go ahead and do that. I'm going to take a screenshot of it. For the button that says Start Today, when you hover over it I want it to have a circle to the right that appears with an arrow just like it does on the GoGetta website. I uploaded a screenshot to show what it looks like from the GoGetta website. Can you go ahead and implement that interaction for me? All right, let's check it out. It worked perfectly. It looks pretty cool. I like it being a little bit closer too. Do we want the same interaction for the ghost button so that it's on brand? I don't think we need it for that one. For the Start Today button on hover, the arrow inside of the circle was a little bit far away from the Start Today button when it appeared. Can you bring it closer so they're almost touching? All right, it's much closer. It's pretty good. Okay. Now we have our homepage hero for the most part.
And we've made a few decisions. We have the colors, we have fonts, and we have some reusable components now, like these buttons. So what we're going to want to do is go ahead and codify this into our design system. This can be changed later, but what we basically want to do is tell Codex that we want it to remember this and then use this as the basis so that we have consistency across the website. So let's go ahead and do that right now. Based on the hero section that we just created, I want you to extract and standardize the colors, the fonts, and all of those types of design decisions, and I want you to create reusable components that we can use across the website so it's a consistent design across the website. I want you to codify the fonts, the sizes, and the colors inside of the design system so that we can have a consistent website and a consistent design across the website as well. If you have any questions for further context before you do that, ask. As you can see, it says, I've confirmed the current site is still mostly raw Tailwind classes, so I'm going to formalize this into tokens plus a few primitives rather than just keeping one-off hero markup around. One of the things that you have to watch out for is overrides. Sometimes when you make a design decision, like you want to change a color, a font, a size, or a spacing, it'll just create a single override for that one specific instance. It's up to you if you think you only need it for that one specific instance or if you want that design decision to be used across the entire website. You have to make that call as you're building your website. It says that we created a reusable design system based on the hero and wired it into the shared site UI, so the source of truth now lives in global CSS and `design-system.ts`. You can go ahead and read through there and see that the changes we made on the site are now inside the files as a design system.
It looks like it changed the Book a Call button all the way up top here as that happened. So the next thing we can do is go ahead and make a Git commit. If you go over to the Source Control panel, what you'll see is that there have been 14 different changes made. Between each one of the prompts that I have been doing, what you could have done is make a commit between each one. That way you have a saved version history, just like I said about it being similar to Google Docs. You could have done that between every prompt and change that you made, but I'm just going to do this one. So we're going to hit plus, create our message, and I will just say create homepage hero. The verb is at the beginning and it is in the present tense. That's typically the format that you use. Press commit. There it is: create homepage hero. Then if we want it to go up to Vercel, we can click Sync Changes and it's going to go ahead and automatically deploy it. Again, since we're still working on the very first version of the site and it's not live yet, there's not really a reason to create a second branch for a different feature or a specific page. So click OK, and then it starts to sync our changes. Now that we have synced the changes, if we go over to the Vercel URL, we have our new homepage hero and it seems to be working out well. So let's recap what we just did. We went ahead and found some inspiration and colors, and then we ended up building an actual homepage hero. So we don't have just an empty project skeleton anymore. We have a visual direction, so it's something that we can build on. If we want to decide to change it later, that's completely fine too. We can reprompt Codex, change that, and then make it part of the codified design system. That's pretty much the philosophy that we're going with: kind of build it as you go instead of creating a full style guide with fonts and colors set in stone. We can build it as we go. The reason that we started with a hero instead of something like a blog post is because if you start with a blog post, it's very text-heavy. It's going to look good and usable and readable, but it doesn't really give us a creative direction as much. So that's why I want to start with the homepage hero. Now that we have a visual direction, in the next video we're going to go ahead and build out a full page layout, something like a blog post. That's where we're going to probably finalize things like the typography, the spacing, and some reusable components. Again, they can always be changed later, but we're going to have a pretty solid start on what the whole website is going to look like after that. So if you found value in this video or you want to see the next one, go ahead and click subscribe.