How To Use Codex To Build Insanely Beautiful Websites Using GPT 5.6 Sol
AAI LABS
Computing/SoftwareSmall Business/StartupsInternet Technology
Transcript
00:00:00If you didn't already know we're a software company and we've developed seven stages that
00:00:04you can use to make sure Codex builds websites that don't look AI vibe coded but actually feel
00:00:09professional and belong to a real brand. Whether you're completely new to AI coding or you already
00:00:14have experience with it, there's something here for you. If you've never opened Codex before,
00:00:18that's completely fine because we're going to start from the beginning. And if you already have
00:00:22experience with Codex, this isn't just the same beginner process. We've found new ways that you
00:00:26can use to build better websites. There are timestamps below so you can skip anything you
00:00:31already understand and jump directly to the newer stages. By the end, you'll be able to create some
00:00:36really awesome landing pages and websites and actually sell them to clients as well. So let's
00:00:40not waste any time. Let's get into the video. If you already use Codex, you can skip this setup and
00:00:45move to the first stage. But if you've never opened it before, you need to download the ChatGPT app
00:00:50because Codex is now a mode inside it. After you download it, you're going to see something like
00:00:54this. Then you have to sign in to your account. While the free version does give you very limited
00:00:59usage, we do advise that you get the $20 plus plan if you want to build and that will be enough for
00:01:04your usage. If you want to build more with it, you can upgrade to the $100 or $200 plan. But for now,
00:01:11the $20 plan is fine. The first thing we're going to do is switch into Codex. As you can see,
00:01:16we have multiple projects here. To create a new project, you can start from scratch and call it
00:01:20anything you want. It's going to create a folder for you. To start working in that folder, you just
00:01:24type out your very first prompt. As you can see, Codex has started working and it's going to reply
00:01:29here. Now you can think of these as different chats inside a folder. If we open a new chat, you can see
00:01:34that it creates another one here. If you don't already know, Codex calls these chats threads. Here
00:01:39you can see that we have the model picker. For this video, we're using the latest model GPT 5.6. If you
00:01:45haven't used these settings before, Effort controls how much work the model puts into its answer. We
00:01:50recommend that you always keep it between light and high and never go above that because it just eats
00:01:55away at your usage and doesn't actually give you any benefit. For speed, we recommend that you keep
00:02:00it on standard. These Codex models are comparatively faster than other models such as Claude, so we've
00:02:05never felt the need to switch it to fast because that also uses additional usage. To check your limits,
00:02:10you can click on this menu. Here you'll see that we still have 81% of our weekly usage remaining, so you
00:02:16need to make sure that you keep an eye on this. Now there's one more thing we want to explain before
00:02:21we actually get into the building part. If you don't already know, a Codex project is an actual folder
00:02:26on your computer. If we click here and open the files, it's going to show all the files inside that
00:02:30folder. So you never need to leave the Codex app, you never need to open the terminal, and you never need
00:02:35to open any IDE such as Visual Studio Code. Let's start with the first stage. Before Codex designs
00:02:41anything, it needs to know what the website is supposed to do. A prompt like, build a landing page
00:02:47for an AI community, gives it a topic. But it doesn't explain who the page is for, what that person needs
00:02:52to understand, or what action the page should lead them towards. So Codex has to guess those decisions,
00:02:58and even if the page looks good, it can still solve the wrong problem. So here you can see that we started
00:03:03by telling it that we wanted to build a landing page. You can mention that Codex should use Next.js.
00:03:08If you haven't worked with it before, Next.js is basically the system Codex will use to build the
00:03:12website. If you don't understand what this means yet, just include this line. Then you need to define the
00:03:17purpose of the landing page and what it's for. For example, here we're creating a landing page for an app
00:03:23called Beacon, which is a podcast analytics platform. After that, we define what the platform is going to do,
00:03:28based on which it generates the actual content for the landing page. Then we have the most
00:03:33important part. What is the actual function of the landing page? Here the function of the landing page is to get
00:03:38users to click and join the waitlist. This is the most important line in the prompt. Some landing pages
00:03:43are for products that have already been built. You'll usually see a sign up button on those landing pages,
00:03:48but here we just want people to join our waitlist. So Codex knows exactly what to build.
00:03:53Now Codex can build a website from a single prompt, but it only knows what you've told it inside that
00:03:58conversation. So when you start a new thread or move on to another section, it can start making different
00:04:04decisions about the same project. If you haven't used an agents.md file before, it's basically the
00:04:09instruction file Codex reads before it works on your project. It gives Codex the context it needs about
00:04:15what you're building. So instead of repeating the same instructions in every prompt, every new task
00:04:19starts with the same information. So in order to generate an agents.md file, you don't have to actually
00:04:25write all of this down. There is a custom command built into Codex that you can use. You just have
00:04:30to type a forward slash and it's going to give you a bunch of options. We're going to cover the
00:04:34important options in this video, so you don't need to start thinking about all of them right now.
00:04:38Down here, you'll see that we have the init option. Once you select it and press enter,
00:04:43it's going to give Codex this prompt. Using this, Codex will create an agents.md file and include
00:04:48all the context that we gave it in the initial prompt. If you want to view the file,
00:04:52you can open it up. You'll see that we have a lot of files here. That's because the project
00:04:56has already been built, but don't worry, we'll guide you through all the stages one by one.
00:05:01If we open the agents.md file, you can see that it contains some basic information about how Codex
00:05:07needs to work, along with important details such as the project structure and folder organization.
00:05:12Codex has basically listed all of our important information in the appropriate places. For example,
00:05:17it has written here that this folder contains the next.js landing page for the beacon website.
00:05:22Further down in the file, it has listed all the other details as well. One other important thing
00:05:27is that you need to tell Codex to add an instruction at the top stating that whenever Codex can perform an
00:05:32action itself, it should do so. This includes starting the app and verifying that it was built correctly.
00:05:37We'll come back to this later, but the reason for this is that these Codex models have one flaw,
00:05:42although it has improved a lot with the release of the latest models. They tend to ask you to do things
00:05:46for them, even though they can do them themselves. So adding this instruction at the top of the
00:05:51agents.md file really helps Codex work autonomously, so you don't have to continuously monitor it.
00:05:57Now that Codex knows what we're building, the second stage is giving it a reusable set of design
00:06:03instructions. If you haven't used skills before, they're basically instruction files that Codex reads
00:06:08whenever it's doing a specific type of work. So instead of explaining the same web design rules
00:06:12in every prompt, you save them inside a skill and Codex loads them before it starts designing.
00:06:17This matters because a better model doesn't automatically give you a unique design.
00:06:22Even without additional instructions, the model can generate a pretty good website from a short
00:06:26prompt. The problem only becomes obvious after you've generated enough of them. The content changes,
00:06:31but the same design language keeps appearing. And because thousands of people are generating
00:06:36websites with the same models, that design language starts appearing everywhere. This is what people
00:06:41mean by AI slop. A website might look good on its own, but it still feels like it came from the same
00:06:46template as every other AI-generated website. The original front-end design skill from Anthropic was
00:06:52created to prevent the older AI design defaults, but newer models already avoid many of those choices and
00:06:58have developed a different visual style that the original skill doesn't account for. So for this website,
00:07:03we're using the GPT Taste design skill. It gives Codex updated rules for the entire visual system and
00:07:10pushes it away from the pattern's newer models now repeat. Now the GPT Taste skill comes from this set
00:07:15of 13 skills. While there are lots of skills, the one that's best for use with the GPT models is the GPT
00:07:21Taste skill. If you're using any other model, you can experiment with the rest as well. Adding it to Codex is
00:07:26pretty easy. You just have this install command, copy it, go back into Codex and tell it to install it for you.
00:07:32You can see that it installed all the skills first. Now before you can use them, you have to quit Codex and
00:07:37come back to this chat again. Since this is a thread, everything is going to be saved and you won't lose
00:07:42any of your work. After that, you need to reference the GPT Taste skill. In Codex, type the slash command
00:07:47and write out the name of the command. Once you press enter, it's going to be inserted into your prompt and
00:07:53Codex will basically read everything that's inside the skill. Now you can see that after we added the skill,
00:07:58we told it to start the build and specifically told it not to use the site's skill. If you haven't used
00:08:03the site's skill before, it's OpenAI's replacement for Anthropic's front-end design skill and it copies
00:08:09a lot of the same concepts. But we've experimented with it and it doesn't really produce good outputs.
00:08:14So we would advise you to stay away from it and specifically tell Codex not to use it because
00:08:19it will default to using it if you don't mention it. You can also ask it to write in the agents.md
00:08:24file that it should never use this skill for designing. We're specifically saying for designing
00:08:29because there is one other use for this skill that we'll look at later in the video. After that,
00:08:33it's basically going to build the whole website. You can see that it worked for 17 minutes and built the
00:08:38entire site. Once the site was built, it gave us this link. If you haven't worked with a local website
00:08:43before, localhost means the link only works on your computer. If you share it with someone else,
00:08:48they won't be able to open the website you just built. But don't worry, we'll come to that later
00:08:53in the video. To preview the site, you don't actually need to leave Codex. You can open the
00:08:57side panel and here you'll see that you have a browser. Just enter this link there and you can
00:09:01see the site that it generated for us. So this is the site that it generated and honestly, it looks
00:09:06really really great. The animations are properly done and they're not janky. There are some small issues
00:09:11that we're going to fix in the later stages such as the stock images, a few animations being too janky,
00:09:17and one other issue that we'll bring up later. But one thing we want to mention is that because
00:09:21we clearly defined what this site was for, it accurately set up the user journey. First,
00:09:26it gave us the product showcase. If we had an actual product, it could showcase that here as well. Then
00:09:31it gave us these smaller graphics, which again look really amazing. And finally, because we clearly
00:09:35specified that this was a waitlist landing page, it created a CTA asking users to sign up early.
00:09:41The third stage is browser verification. A website can run correctly and still have visual
00:09:46problems because working code doesn't mean the finished design looks right. Browser verification
00:09:51gives Codex the actual website as feedback so it can catch problems that only become visible once the
00:09:56page is on screen. This is also one of Codex's strongest areas. If you haven't heard the term
00:10:01computer use before, it's basically the model's ability to understand and interact with what's on screen.
00:10:07GPT models are the strongest models for computer use, so in our testing, Codex's browser
00:10:12verification has been much more reliable than what we've seen from other coding agents. Now we didn't
00:10:17have to manually ask it to verify that everything on the landing page looked correct. This is because
00:10:22in the agents.md file, we already told it that it should perform the verification itself. That's
00:10:27why it didn't ask us to do anything. If we scroll down, you can see that it used the browser multiple
00:10:32times to inspect the website. It didn't find any errors, which is why it didn't edit any files during
00:10:37the browser verification. It did edit some files here, but those were code related changes that you
00:10:42don't need to worry about. Another thing it does during browser verification is check responsiveness.
00:10:47If you don't already know, responsiveness is basically how the website adjusts to different
00:10:52screen sizes. For example, if we stretch it out, which is how it's going to appear on a desktop,
00:10:57you can see that it looks great. And if we make it narrow, which is how it's going to look on a mobile
00:11:01device, you can see that Codex has automatically taken care of that. Normally, you had to tell models
00:11:06to make the website responsive. You don't need to do that anymore because they automatically handle it,
00:11:11but as a quick test, you should still drag the window and make sure everything is responsive.
00:11:15If any element isn't responsive, you can just take a screenshot and give it to the model. There is a
00:11:20tool called the annotate tool, but we found that it's really janky and not very reliable,
00:11:24especially when you've zoomed in. So we just use the screenshot method and we'd say it's the better
00:11:29option at the time of recording. Maybe later on, this feature will improve and you can start using
00:11:34it. And if you're enjoying the video so far, subscribe to the channel and hit the hype button.
00:11:38This small gesture of support goes a long way for us. The fourth stage fixes the other problem we
00:11:43mentioned earlier. Even after using the GPT taste skill, the website still falls back to the same kinds
00:11:49of colors that GPT models use across other designs. The skill improves the model's general design
00:11:54decisions, but it doesn't give this specific brand its own visual identity. So if everyone uses the
00:11:59same model with the same skill, the results can still start looking similar. This is where design.md
00:12:04comes in. If you haven't come across it before, Google introduced the design.md format through
00:12:09Stitch, which is its AI design tool. A design.md file is basically an instruction file containing the
00:12:15complete visual system for one brand. It gives the model specific design direction to follow instead of
00:12:20letting it choose from its usual defaults. So the GPT taste skill teaches Codex how to make better design
00:12:26decisions in general, while design.md tells it what this particular website should look like. So here's
00:12:32an example of the problems we're facing here. You already know that the design skill made this website,
00:12:36but without the design skill, GPT 5.6 was able to achieve this. Now again, it's a pretty good website,
00:12:42even without all that flair, but you can clearly see that a lot of the elements have been reused,
00:12:46especially the color scheme. This green color and this purple color are reused quite a bit. The design
00:12:51skill used the purple color a little less, but it still used it. This is why design.md files are so
00:12:57important. Now the question is, where do you get these design.md files? There are lots of resources
00:13:02out there. One of them is called get design.md and it has loads of designs from different people. You can
00:13:08get the design systems of Claude, Cursor, Discord and other well-known companies as well. But we really
00:13:13like this design.md collection from Aura Build, which is actually a website builder, but they also have
00:13:19this free design.md library. You can scroll down, click on the popular ones and you'll find these
00:13:25amazing design systems. It's not like this will change the layout or style of your website. Instead,
00:13:30it applies things like spacing, colors and other design details that give your site a completely
00:13:36different look. That's why we downloaded this design.md file. You can just click this button and it'll
00:13:41download it to your downloads folder. After that, go into Codex, click this button and attach any files
00:13:46or folders that you want. You can see that this is the file we downloaded. After attaching the file,
00:13:51we told Codex that it needed to create a design.md file in the project, copy the contents of this file
00:13:57into it and then revamp the site according to that design.md. We specifically told it that the structure,
00:14:03layout and animations should not change because one important thing is that the GPT taste skill we
00:14:09installed is really good at animations. You don't really need to do anything else in terms of the
00:14:13overall page animations. It handles most of them on its own and you can clearly see that they look
00:14:18really good. And you can see that after it finished, it told us that it had created the design.md file
00:14:24and applied the visual system to our beacon platform. Now you can see that the layout and the structure are
00:14:29still the same and it hasn't changed those but it has completely changed the color scheme and the site
00:14:34looks completely different. If you compare it to the original greenish design, it doesn't look like it
00:14:38was generated by one of the GPT models. This is why having a design.md file is really important.
00:14:44One more thing before we continue to the next stage. Whenever we're building landing pages or even full
00:14:49apps, we always use phosphor icons and we always add that to the agents.md file so that whenever Codex has
00:14:56to create anything new, it can use those icons. This is our favorite icon set because it's really minimal and looks
00:15:02great. Even though it's mostly used in small places such as the arrows, it's still, in our opinion,
00:15:07the best icon set out there. But before we move to the fifth stage, let's have a word by our sponsor.
00:15:12Let's talk about how I launched an e-commerce store ready to take real orders in just minutes without spending weeks
00:15:18on setup. I pasted one link into Copify and minutes later I had a completely live Shopify store, product descriptions,
00:15:25copy, design, everything AI generated and ready to convert visitors into buyers. Real storefront,
00:15:31fully stocked and professionally designed. That's the actual win. Not just having a store,
00:15:36but having a business ready store that makes money before your first sale. Here's exactly how it
00:15:40happened. I clicked connect to Shopify straight from store AI and it pushed everything live instantly.
00:15:46Then I added more products to the same store and built a second complete store from a totally different
00:15:51link in just minutes. There is no manual setup or design work required. But here's what makes this
00:15:56genuinely powerful. AI chat hands you proven marketing angles for every single product and creative AI
00:16:02generates the actual ad creatives to sell them. Everything you need to run a profitable converting
00:16:07store is already built in and ready. Head to the link in the pinned comment and launch your store now.
00:16:12The fifth stage fixes another problem we pointed out earlier, which is the stock images. The design.md
00:16:18file has given the website its own visual system, but the stock images still don't belong to that
00:16:23system. They can fill the empty space, but they rarely match the exact brand. This is another reason AI
00:16:28generated websites can feel assembled instead of designed. This is where original GPT images come
00:16:34in. Codex already understands the product through the agents.md file and it understands the visual
00:16:39direction through design.md. So it can use that context to generate original brand imagery with the
00:16:45GPT image model and add those files directly to the website. So what you need to do is give it a prompt
00:16:50telling it to create an assets folder and link it in the agents.md file as well. This folder will
00:16:56contain any assets that the GPT models generate or anything that we want to add to the landing page
00:17:01ourselves. For example, if we want to use our own custom images. After that, we told it that it needed
00:17:06to replace all the stock images on the landing page. Here are the important things that you need to
00:17:11mention. You need to tell it that the images should match the design and the content they're meant to
00:17:15represent. That way it doesn't just generate random visuals, it generates visuals that are actually
00:17:21relevant. Here we asked it to generate illustrations for us since there was a higher chance of it making
00:17:26mistakes on this task. And especially if you're on the $20 plan where image generation might be limited,
00:17:32we highly recommend turning on plan mode first. If you haven't used plan mode before, it lets codex work
00:17:37out what it needs to do before it changes the project. You don't need to mention it inside the
00:17:42prompt. Just click this button. After that, it's not going to touch any code or make changes to the
00:17:47website. Instead, it's going to come up with a plan first and then generate the images. We went through
00:17:52the plan, told it that everything looked good and then asked it to implement it. After that, it generated
00:17:57these images and you can see that they match the design of the website really well. If you're wondering
00:18:01why some of these images are different from the previous ones, you'll find out when you see where they were
00:18:06placed. It also added instructions to the agents.md file about where the image files should be placed.
00:18:11If you look inside the app folder, under the public folder, you'll find the assets folder. Whenever
00:18:16you need to add images, just put them in there and tell codex what to do with them and it'll add them
00:18:20to your site. As for the final result, this is what we got. And you can see that these illustrations
00:18:25look really amazing. It's not just that they match the design of the website, they also match the
00:18:29descriptions written below the cards. That's the advantage of using these custom models to generate images.
00:18:35Other than that, you can see that it also placed these images in this animated section. If you're
00:18:40wondering why the last three images were different, it's because it generated these avatars for the
00:18:45testimonials. Honestly, they look really, really good. The sixth stage is improving the layout with
00:18:51visual inspiration. At this point, the website has its own design system and original images, but codex
00:18:56still decided where everything should go using the layout patterns it already knows. So the colors and images
00:19:02can feel original while the structure still feels like a standard AI generated landing page. This is
00:19:07most noticeable in the hero section because it's the first thing people see. Layout is also difficult
00:19:13to explain through text alone. So giving codex a visual reference shows it the type of composition we
00:19:18want. The goal isn't to copy another website. It's to use the layout as inspiration while keeping our own
00:19:23brand and content. So where do you get inspiration? One of the most common places is Pinterest, where you can find a
00:19:29lot of inspiration for whatever you're building. For example, we searched for hero sections for SaaS apps
00:19:34because that's what we're building and we've got lots of different designs here. This one is really
00:19:38interesting and you can see that we've got layouts similar to this as well. So this is a really great
00:19:42place to get inspiration. Other than that, we have awards which showcases some really amazing websites.
00:19:48If you go into their directory, you can find some really awesome looking designs. These are some of the best
00:19:53places to get inspiration if you're not satisfied with the layout that the model has generated. In our case,
00:19:58as you already saw, most of the hero sections we found on Pinterest for SaaS apps looked very similar.
00:20:03We're honestly satisfied with this one so we're not going to change it, especially this section here.
00:20:08It looks really great and clearly showcases all the features that the app has. But if you're not
00:20:13satisfied, you can always give the model a screenshot of another design and ask it to recreate it.
00:20:18The seventh and final stage is improving the individual parts of the website. If you haven't
00:20:23worked with components before, a component is basically one reusable part of the page, such as a
00:20:28button. At this point, the overall design is already in place, but some of these smaller parts can still
00:20:33feel generic. Instead of asking Codex to redesign the entire website, we can replace only those parts
00:20:39with components made by other designers. This gives us more control over the smaller details without
00:20:44changing the design direction we've already created. So to get these individual components,
00:20:48there are lots of sites. One of them is 21.dev, and it has both free and paid components. Other
00:20:54than that, there's godly and fancy components. All of them give you components for specific parts of
00:20:59your app. For example, we have this navigation switcher with liquid glass, this background for
00:21:03a hero section, and this navigation expander with a fluid animation. There's lots of stuff,
00:21:08and whatever you feel would improve your application, you can just add it. For example,
00:21:12we only felt that we could improve the landing page in one way, which was by improving the background of
00:21:17the hero section. So on 21.dev, we found these backgrounds called shaders, and we really liked
00:21:22this one. It looked really good to us. All you need to do is copy the prompt. It contains all the
00:21:27information needed to apply it, give Codex the prompt, and tell it to apply it to the hero section. We
00:21:32specifically asked it not to use the skills, because it would use an optimization skill that we're going
00:21:37to talk about later. After that, it applied the change, and then we asked it to tweak the colors a
00:21:41little. This is the final result that we got, and honestly, it looks really amazing. It's a huge
00:21:46improvement over what we had before. Now, you can see one thing. When we navigate around the app,
00:21:50it feels really slow. That's because of how many heavy animations it has. It's not that you need to
00:21:55remove these animations. You just need to optimize your site so that it loads quickly. In order to do that,
00:22:01you just need to ask the model to optimize the site, and that alone can fix most of your problems. But
00:22:06we've made a custom skill for optimizing animation-heavy landing pages. Since it's a skill, you can activate
00:22:12it using the /command. After that, it took quite a long time, and you can see the metrics showing how
00:22:17it reduced a lot of the latency in the website and made it much faster. Now, this is part of our AI
00:22:22Labs design system, which we use when building our own products and working on client projects. You can
00:22:27see that the optimized skill is right here, and we have lots of other skills that we use throughout
00:22:32our design process. This custom skill, along with other resources, can be found in AI Labs Pro,
00:22:37which is our community. That's where you'll get the resources, the starter packs, and more, along with
00:22:42a place to interact with a bunch of like-minded people, including our team. So, if you found value
00:22:47in what we do and want to support the channel, this is the best way to do it. The link's in the description.
00:22:52Now, before we move on to deploying this so that anyone on the internet can see it,
00:22:56we just wanted to give you a small tip. If you haven't used Git before, it lets you create local
00:23:01commits, which are basically checkpoints for your project. You don't need to sign up for anything to
00:23:06use them on your computer. For example, here you can see that we asked Codex to make a local commit.
00:23:11It created the commit and gave it a name. What this does is create checkpoints that you can revert to
00:23:16if anything goes wrong. You can see that we built this entire website, and we've been using these
00:23:20checkpoints to go back and show you the different stages of the project. Right now, we're at the final commit,
00:23:26so you just have to ask Codex to make local commits, and it'll know exactly what to do.
00:23:32It'll also give you the name of each commit. You can even ask it to list all the commits if you've
00:23:36forgotten their names, and then you can easily go back to any of them if Codex messes something up.
00:23:42The website is finished, but right now it only works through localhost, which means it can only be
00:23:47opened on your computer. If you haven't deployed a website before, deployment is basically the process of
00:23:52putting it online so anyone can visit it through a normal link. Previously deploying a website meant
00:23:57creating a Vercel account and connecting the project through GitHub. The process worked, but it
00:24:02involved several separate steps. Codex now makes this much easier through the site skill we mentioned
00:24:07earlier. We didn't use it for designing the website, but we can use it to publish the finished project
00:24:12directly from Codex. So all you need to do is click on this plus button, add the site skill, and ask it to
00:24:17deploy the site for you. It's going to take some time and after that it'll deploy it. Now before you
00:24:22actually visit the site, you can see this separate site section in the sidebar. Open that and this is
00:24:27where you'll find all the sites that you've published through ChatGPT. For example, this is the old site
00:24:32that we designed using the site skill. This is why we were asking you not to use it because the design
00:24:37is so basic and we just weren't satisfied with it at all. This is our second site. If you click on the
00:24:42share button, it'll initially be set to just me. Change it to anyone on the internet and then publish
00:24:48it. After that, you can copy the link and send it to anyone and they'll be able to open the site and
00:24:52visit it. Since it's now deployed, you can visit it yourself as well. If you want to use your own
00:24:57custom domain, just go to settings and there you can add a custom domain. It'll guide you through the
00:25:01whole process and you can deploy a landing page for yourself or for a client all through the Codex app in
00:25:07just a few simple steps. That brings us to the end of this video. If you'd like to support the channel
00:25:12and help us keep making videos like this, you can do so by using the super thanks button below. As
00:25:17always, thank you for watching and I'll see you in the next one.