How To Use Codex To Build Insanely Beautiful Websites Using GPT 5.6 Sol transcript

If you didn't already know, we're a software company and we've developed seven stages that you can use to make sure Codex builds websites that don't look AI vibecoded, but actually feel professional and belong to a real brand. Whether you're completely new to AI coding or you already have experience with it, there's something here for you. If you've never opened Codeex before, that's completely fine because we're going to start from the beginning.

And if you already have experience with Codeex, this isn't just the same beginner process. We've found new ways that you can use to build better websites. There are timestamps below, so you can skip anything you already understand and jump directly to the newer stages. By the end, you'll be able to create some really awesome landing pages and websites and actually sell them to clients as well. So, let's not waste any time.

Let's get into the video. If you [snorts] already use Codex, you can skip this setup and move to the first stage. But if you've never opened it before, you need to download the chat GPT app because Codex is now a mode inside it. After you download it, you're going to see something like this. Then, you have to sign into your account. While the free version does give you very limited usage, we do advise that you get the $20 plus plan if you want to build and that will be enough for your usage.

If you want to build more with it, you can upgrade to the $100 or $200 plan, but for now, the $20 plan is fine. The first thing we're going to do is switch into Codeex. As you can see, we have multiple projects here. To create a new project, you can start from scratch and call it anything you want. It's going to create a folder for you. To start working in that folder, you just type out your very first prompt. As you can see, codeex has started working and it's going to reply here.

Now, you can think of these as different chats inside a folder. If we open a new chat, you can see that it creates another one here. If you don't already know, Codeex calls these chats threads. Here you can see that we have the model picker. For this video, we're using the latest model GPT 5.6. If you haven't used these settings before, effort controls how much work the model puts into its answer. We recommend that you always keep it between light and high and never go above that because it just eats away at your usage and doesn't actually give you any benefit.

For speed, we recommend that you keep it on standard. These Codeex models are comparatively faster than other models such as Claude. So, we've never felt the need to switch it to fast because that also uses additional usage. To check your limits, you can click on this menu here. You'll see that we still have 81% of our weekly usage remaining. So, you need to make sure that you keep an eye on this. Now, there's one more thing we want to explain before we actually get into the building part.

If you don't already know, a Codeex project is an actual folder on your computer. If we click here and open the files, it's going to show all the files inside that folder. So, you never need to leave the Codeex app. You never need to open the terminal and you never need to open any IDE such as Visual Studio Code. Let's [snorts] start with the first stage. Before Codex designs anything, it needs to know what the website is supposed to do.

A prompt like build a landing page for an AI community gives it a topic, but it doesn't explain who the page is for, what that person needs to understand, or what action the page should lead them towards. So, Codex has to guess those decisions, and even if the page looks good, it can still solve the wrong problem. So, here you can see that we started by telling it that we wanted to build a landing page. You can mention that Codeex should use Nex.js.

If you haven't worked with it before, Nex.js is basically the system Codex will use to build the website. If you don't understand what this means yet, just include this line. Then you need to define the purpose of the landing page and what it's for. For example, here we're creating a landing page for an app called Beacon, which is a podcast analytics platform. After that, we define what the platform is going to do based on which it generates the actual content for the landing page.

Then we have the most important part. What is the actual function of the landing page? Here the function of the landing page is to get users to click and join the weight list. This is the most important line in the prompt. Some landing pages are for products that have already been built. You'll usually see a sign up button on those landing pages, but here we just want people to join our weight list. So, Codex knows exactly what to build.

Now, Codeex can build a website from a single prompt, but it only knows what you've told it inside that conversation. So, when you start a new thread or move on to another section, it can start making different decisions about the same project. If you haven't used an agents.md file before, it's basically the instruction file C codeex reads before it works on your project. It gives Codex the context it needs about what you're building.

So instead of repeating the same instructions in every prompt, every new task starts with the same information. So in order to generate an agents.md file, you don't have to actually write all of this down. There is a custom command built into codeex that you can use. You just have to type a forward slash and it's going to give you a bunch of options. We're going to cover the important options in this video, so you don't need to start thinking about all of them right now.

Down here, you'll see that we have the init option. Once you select it and press enter, it's going to give CEX this prompt. Using this, Codex will create an agents.md file and include all the context that we gave it in the initial prompt. If you want to view the file, you can open it up. You'll see that we have a lot of files here. That's because the project has already been built. But don't worry, we'll guide you through all the stages one by one.

If we open the agents.m MD file, you can see that it contains some basic information about how codeex needs to work along with important details such as the project structure and folder organization. Codex has basically listed all of our important information in the appropriate places. For example, it has written here that this folder contains the next.js landing page for the beacon website. Further down in the file, it has listed all the other details as well.

One other important thing is that you need to tell Codex to add an instruction at the top stating that whenever Codex can perform an action itself, it should do so. This includes starting the app and verifying that it was built correctly. We'll come back to this later, but the reason for this is that these Codeex models have one flaw. Although it has improved a lot with the release of the latest models, they tend to ask you to do things for them even though they can do them themselves.

So adding this instruction at the top of the agents.mmd file really helps Codeex work autonomously. So you don't have to continuously monitor it. Now that [snorts] Codeex knows what we're building, the second stage is giving it a reusable set of design instructions. If you haven't used skills before, they're basically instruction files that Codex reads whenever it's doing a specific type of work. So instead of explaining the same web design rules in every prompt, you save them inside a skill and Codeex loads them before it starts designing.

This matters because a better model doesn't automatically give you a unique design. Even without additional instructions, the model can generate a pretty good website from a short prompt. The problem only becomes obvious after you've generated enough of them. The content changes, but the same design language keeps appearing. And because thousands of people are generating websites with the same models, that design language starts appearing everywhere.

This is what people mean by AI slop. A website might look good on its own, but it still feels like it came from the same template as every other AI generated website. The original front-end design skill from Anthropic was created to prevent the older AI design defaults, but newer models already avoid many of those choices and have developed a different visual style that the original skill doesn't account for. So, for this website, we're using the GPT taste design skill.

It gives Codeex updated rules for the entire visual system and pushes it away from the patterns newer models now repeat. Now, the GPT taste skill comes from this set of 13 skills. While there are lots of skills, the one that's best for use with the GPT models is the GPT taste skill. If you're using any other model, you can experiment with the rest as well. Adding it to Codex is pretty easy. You just have this install command, copy it, go back into Codex, and tell it to install it for you.

You can see that it installed all the skills first. Now, before you can use them, you have to quit codeex and come back to this chat again. Since this is a thread, everything is going to be saved and you won't lose any of your work. After that, you need to reference the GPT taste skill in codeex. Type the /ash command and write out the name of the command. Once you press enter, it's going to be inserted into your prompt and C codeex will basically read everything that's inside the skill.

Now, you can see that after we added the skill, we told it to start the build and specifically told it not to use the site skill. If you haven't used the site skill before, it's OpenAI's replacement for Anthropic's front-end design skill, and it copies a lot of the same concepts. But we've experimented with it, and it doesn't really produce good outputs. So, we would advise you to stay away from it and specifically tell Codeex not to use it because it will default to using it if you don't mention it.

You can also ask it to write in the agents.md file that it should never use this skill for designing. We're specifically saying for designing because there is one other use for this skill that we'll look at later in the video. After that, it's basically going to build the whole website. You can see that it worked for 17 minutes and built the entire site. Once the site was built, it gave us this link. If you haven't worked with a local website before, local host means the link only works on your computer.

If you share it with someone else, they won't be able to open the website you just built. But don't worry, we'll come to that later in the video. To preview the site, you don't actually need to leave codeex. You can open the side panel and here you'll see that you have a browser. Just enter this link there and you can see the site that it generated for us. So this is the site that it generated and honestly it looks really really great.

The animations are properly done and they're not janky. There are some small issues that we're going to fix in the later stages such as the stock images, a few animations being too janky, and one other issue that we'll bring up later. But one thing we want to mention is that because we clearly defined what this site was for, it accurately set up the user journey. First, it gave us the product showcase. If we had an actual product, it could showcase that here as well.

Then it gave us these smaller graphics, which again look really amazing. And finally, because we clearly specified that this was a weightless landing page, it created a CTA asking users to sign up early. [snorts] The third stage is browser verification. A website can run correctly and still have visual problems because working code doesn't mean the finished design looks right. Browser verification gives Codeex the actual website as feedback, so it can catch problems that only become visible once the page is on screen.

This is also one of Codeex's strongest areas. If you haven't heard the term computer use before, it's basically the model's ability to understand and interact with what's on screen. GPT models are the strongest models for computer use. So, in our testing, Codex's browser verification has been much more reliable than what we've seen from other coding agents. Now, we didn't have to manually ask it to verify that everything on the landing page looked correct.

This is because in the agents.md file, we already told it that it should perform the verification itself. That's why it didn't ask us to do anything. If we scroll down, you can see that it used the browser multiple times to inspect the website. It didn't find any errors, which is why it didn't edit any files during the browser verification. It did edit some files here, but those were code related changes that you don't need to worry about.

Another thing it does during browser verification is check responsiveness. If you don't already know, responsiveness is basically how the website adjusts to different screen sizes. For example, if we stretch it out, which is how it's going to appear on a desktop, you can see that it looks great. And if we make it narrow, which is how it's going to look on a mobile device, you can see that codeex has automatically taken care of that.

Normally, you had to tell models to make the website responsive. You don't need to do that anymore because they automatically handle it. But as a quick test, you should still drag the window and make sure everything is responsive. If any element isn't responsive, you can just take a screenshot and give it to the model. There is a tool called the annotate tool, but we found that it's really janky and not very reliable, especially when you've zoomed in.

So, we just use the screenshot method, and we'd say it's the better option at the time of recording. Maybe later on this feature will improve and you can start using it. And if you're enjoying the video so far, subscribe to the channel and hit the like button. This small gesture of support goes a long way for us. The fourth stage fixes the other problem we mentioned earlier. Even after using the GPT taste skill, the website still falls back to the same kinds of colors that GPT models use across other designs.

The skill improves the model's general design decisions, but it doesn't give this specific brand its own visual identity. So, if everyone uses the same model with the same skill, the results can still start looking similar. This is where design.md comes in. If you haven't come across it before, Google introduced the design. MD format through Stitch which is its AI design tool. A design.md file is basically an instruction file containing the complete visual system for one brand.

It gives the model specific design direction to follow instead of letting it choose from its usual defaults. So the GPT taste skill teaches codeex how to make better design decisions in general while design. MD tells it what this particular website should look like. So here's an example of the problems we're facing here. You already know that the design skill made this website, but without the design skill, GPT 5.6 was able to achieve this.

Now, again, it's a pretty good website even without all that flare. But you can clearly see that a lot of the elements have been reused, especially the color scheme. This green color and this purple color are reused quite a bit. The design skill used the purple color a little less, but it still used it. This is why design.md files are so important. Now, the question is, where do you get these design files? There are lots of resources out there.

One of them is called getdesign.md and it has loads of designs from different people. You can get the design systems of Claude, Cursor, Discord and other well-known companies as well. But we really like this design.md collection from Aurabuild which is actually a website builder. But they also have this free design.md library. You can scroll down, click on the popular ones, and you'll find these amazing design systems.

It's not like this will change the layout or style of your website. Instead, it applies things like spacing, colors, and other design details that give your site a completely different look. That's why we downloaded this design.md file. You can just click this button, and it'll download it to your downloads folder. After that, go into CEX, click this button, and attach any files or folders that you want. You can see that this is the file we downloaded.

After attaching the file, we told Codeex that it needed to create a design.md file in the project, copy the contents of this file into it, and then revamp the site according to that design.md. We specifically told it that the structure, layout, and animations should not change. Because one important thing is that the GPT taste skill we installed is really good at animations. You don't really need to do anything else in terms of the overall page animations.

It handles most of them on its own. And you can clearly see that they look really good. And you can see that after it finished, it told us that it had created the design.md file and applied the visual system to our beacon platform. Now you can see that the layout and the structure are still the same and it hasn't changed those, but it has completely changed the color scheme and the site looks completely different. If you compare it to the original greenish design, it doesn't look like it was generated by one of the GPT models.

This is why having a design.md file is really important. One more thing before we continue to the next stage. Whenever we're building landing pages or even full apps, we always use phosphor icons and we always add that to the agents.md file so that whenever CEX has to create anything new, it can use those icons. This is our favorite icon set because it's really minimal and looks great. Even though it's mostly used in small places such as the arrows, it's still in our opinion the best icon set out there.

But before we move to the fifth stage, let's have a word by our sponsor. Let's talk about how I launched an e-commerce store ready to take real orders in just minutes without spending weeks on setup. I pasted one link into Copify and minutes later I had a completely live Shopify store. Product descriptions, copy, design, everything AI generated and ready to convert visitors into buyers. Real storefront, fully stocked and professionally designed.

That's the actual win. Not just having a store, but having a business ready store that makes money before your first sale. Here's exactly how it happened. I clicked connect to Shopify straight from store AI and it pushed everything live instantly. Then I added more products to the same store and built a second complete store from a totally different link in just minutes. There is no manual setup or design work required.

But here's what makes this genuinely powerful. AI Chat hands you proven marketing angles for every single product and Creative AI generates the actual ad creatives to sell them. Everything you need to run a profitable converting store is already built in and ready. Head to the link in the pinned comment and launch your store. Now, the fifth stage fixes another problem we pointed out earlier, which is the stock images.

The design file has given the website its own visual system, but the stock images still don't belong to that system. They can fill the empty space, but they rarely match the exact brand. This is another reason AI generated websites can feel assembled instead of designed. This is where original GPT images come in. Codex already understands the product through the agents.md file and it understands the visual direction through design.md.

So it can use that context to generate original brand imagery with the GPT image model and add those files directly to the website. So what you need to do is give it a prompt telling it to create an assets folder and link it in the agents.md file as well. This folder will contain any assets that the GPT models generate or anything that we want to add to the landing page ourselves. For example, if we want to use our own custom images.

After that, we told it that it needed to replace all the stock images on the landing page. Here are the important things that you need to mention. You need to tell it that the images should match the design and the content they're meant to represent. That way, it doesn't just generate random visuals. It generates visuals that are actually relevant. Here, we asked it to generate illustrations for us since there was a higher chance of it making mistakes on this task.

And especially if you're on the $20 plan where image generation might be limited, we highly recommend turning on plan mode first. If you haven't used plan mode before, it lets Codeex work out what it needs to do before it changes the project. You don't need to mention it inside the prompt. Just click this button. After that, it's not going to touch any code or make changes to the website. Instead, it's going to come up with a plan first and then generate the images.

We went through the plan, told it that everything looked good, and then asked it to implement it. After that, it generated these images and you can see that they match the design of the website really well. If you're wondering why some of these images are different from the previous ones, you'll find out when you see where they were placed. It also added instructions to the agents.md file about where the image files should be placed.

If you look inside the app folder under the public folder, you'll find the assets folder. Whenever you need to add images, just put them in there and tell Codeex what to do with them, and it'll add them to your site. As for the final result, this is what we got. And you can see that these illustrations look really amazing. It's not just that they match the design of the website. They also match the descriptions written below the cards.

That's the advantage of using these custom models to generate images. Other than that, you can see that it also placed these images in this animated section. If you're wondering why the last three images were different, it's because it generated these avatars for the testimonials. Honestly, they look really, really good. The sixth [snorts] stage is improving the layout with visual inspiration. At this point, the website has its own design system and original images, but Codex still decided where everything should go using the layout patterns it already knows.

So, the colors and images can feel original while the structure still feels like a standard AI generated landing page. This is most noticeable in the hero section because it's the first thing people see. Layout is also difficult to explain through text alone. So, giving Codex a visual reference shows it the type of composition we want. The goal isn't to copy another website. It's to use the layout as inspiration while keeping our own brand and content.

So, where do you get inspiration? One of the most common places is Pinterest where you can find a lot of inspiration for whatever you're building. For example, we searched for hero sections for SAS apps because that's what we're building and we've got lots of different designs here. This one is really interesting and you can see that we've got layouts similar to this as well. So, this is a really great place to get inspiration.

Other than that, we have awards which showcases some really amazing websites. If you go into their directory, you can find some really awesome looking designs. These are some of the best places to get inspiration if you're not satisfied with the layout that the model has generated. In our case, as you already saw, most of the hero sections we found on Pinterest for SAS apps looked very similar. We're honestly satisfied with this one, so we're not going to change it, especially this section here.

It looks really great and clearly showcases all the features that the app has. But if you're not satisfied, you can always give the model a screenshot of another design and ask it to recreate it. The seventh and final stage is improving the individual parts of the website. If you haven't worked with components before, a component is basically one reusable part of the page, such as a button. At this point, the overall design is already in place, but some of these smaller parts can still feel generic.

Instead of asking codeex to redesign the entire website, we can replace only those parts with components made by other designers. This gives us more control over the smaller details without changing the design direction we've already created. So to get these individual components, there are lots of sites. One of them is 21.dev and it has both free and paid components. Other than that, there's godly and fancy components.

All of them give you components for specific parts of your app. For example, we have this navigation switcher with liquid glass, this background for a hero section, and this navigation expander with a fluid animation. There's lots of stuff and whatever you feel would improve your application, you can just add it. For example, we only felt that we could improve the landing page in one way, which was by improving the background of the hero section.

So on 21.dev, we found these backgrounds called shaders. And we really like this one. It looked really good to us. All you need to do is copy the prompt. It contains all the information needed to apply it. Give CEX the prompt and tell it to apply it to the hero section. We specifically asked it not to use the skills because it would use an optimization skill that we're going to talk about later. After that, it applied the change and then we asked it to tweak the colors a little.

This is the final result that we got and honestly it looks really amazing. It's a huge improvement over what we had before. Now, you can see one thing when we navigate around the app, it feels really slow. That's because of how many heavy animations it has. It's not that you need to remove these animations. You just need to optimize your site so that it loads quickly. In order to do that, you just need to ask the model to optimize the site and that alone can fix most of your problems.

But we've made a custom skill for optimizing animationheavy landing pages. Since it's a skill, you can activate it using the slash command. After that, it took quite a long time and you can see the metrics showing how it reduced a lot of the latency in the website and made it much faster. Now, this is part of our AI labs design system which we use when building our own products and working on client projects. You can see that the optimized skill is right here.

And we have lots of other skills that we use throughout our design process. This custom skill along with other resources can be found in AIABS Pro, which is our community. That's where you'll get the resources, the starter packs, and more along with a place to interact with a bunch of like-minded people, including our team. So, if you found value in what we do and want to support the channel, this is the best way to do it.

The links in the description. Now before we move on to deploying this so that anyone on the internet can see it, we just wanted to give you a small tip. If you haven't used git before, it lets you create local commits which are basically checkpoints for your project. You don't need to sign up for anything to use them on your computer. For example, here you can see that we asked codecs to make a local commit. It created the commit and gave it a name.

What this does is create checkpoints that you can revert to if anything goes wrong. You can see that we built this entire website and we've been using these checkpoints to go back and show you the different stages of the project. Right now, we're at the final commit where the website is complete. So, you just have to ask codeex to make local commits and it'll know exactly what to do. It'll also give you the name of each commit.

You can even ask it to list all the commits if you've forgotten their names. And then you can easily go back to any of them if Codeex messes something up. The website [snorts] is finished, but right now it only works through localhost, which means it can only be opened on your computer. If you haven't deployed a website before, deployment is basically the process of putting it online so anyone can visit it through a normal link.

Previously, deploying a website meant creating a Versal account and connecting the project through GitHub. The process worked, but it involved several separate steps. Codex now makes this much easier through the site skill we mentioned earlier. We didn't use it for designing the website, but we can use it to publish the finished project directly from Codeex. So, all you need to do is click on this plus button, add the site skill, and ask it to deploy the site for you.

It's going to take some time and after that it'll deploy it. Now, before you actually visit the site, you can see this separate site section in the sidebar. Open that and this is where you'll find all the sites that you've published through chat GPT. For example, this is the old site that we designed using the site skill. This is why we were asking you not to use it because the design is so basic and we just weren't satisfied with it at all.

This is our second site. If you click on the share button, it'll initially be set to just me. Change it to anyone on the internet and then publish it. After that, you can copy the link and send it to anyone and they'll be able to open the site and visit it. Since it's now deployed, you can visit it yourself as well. If you want to use your own custom domain, just go to settings and there you can add a custom domain. It'll guide you through the whole process and you can deploy a landing page for yourself or for a client all through the Codeex app in just a few simple steps.

That brings us to the end of this video. If you'd like to support the channel and help us keep making videos like this, you can do so by using the super thanks button below. As always, thank you for watching and I'll see you in the next one.