YT YouTube2Text

YouTube2Text → Transcripts → How To Use Codex To Build Insanely Beautiful Websites Using GPT 5.6 Sol

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

by AI LABS · 5,480 words · 789 segments · language en · Watch on YouTube

Open in transcriber Summarize with AI Download SRT/VTT

Full transcript

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

About this transcript

This page contains the full transcript of How To Use Codex To Build Insanely Beautiful Websites Using GPT 5.6 Sol by AI LABS, generated from the public captions YouTube serves with the video. The transcript has 5,480 words across 789 segments, with the original timestamps preserved so you can click any line to jump to that moment in the embedded player.

What you can do with it

Use the transcript to take notes, quote the speaker, build a study guide, generate a summary with ChatGPT or Claude via the YouTube Summary tool, or export it as a timed subtitle file with YouTube to SRT. You can also re-open it in the transcriber to translate the transcript into 100+ languages.

Free YouTube transcript tool

YouTube2Text is a free YouTube transcript generator — no signup, no daily limit. Paste any YouTube link and get the full transcript instantly, with timestamps, click-to-jump, translation to 100+ languages, AI prompts for ChatGPT, Claude, and Gemini, and exports to TXT, SRT, VTT, or Markdown.