7 Rules for Codex Design

This is a very small summary of what is to come.

Build Websites in Codex That Don't Look AI-Made (7 Stages)

A better model won't save you from generic design. Codex can build a site from one prompt, but it'll look like every other AI site. Here are the 7 stages we use to make Codex build sites that feel like a real brand instead of a vibe coded template.

We build software, both our own products and client sites, so we've put Codex through a lot of real website work. The pattern that kept surfacing is that the model isn't the problem. A short prompt gets you a decent-looking page every time. The trouble shows up after the tenth one. The content changes, but the design language stays the same. And since thousands of people run the same models, that language ends up everywhere. That's what "AI slop" actually means: a site that looks fine on its own but clearly came from the same template as every other AI build.

These are the seven stages that fix it. Whether you're new to Codex or not, there's something here. Skip the setup if you've used it before.

Setup (skip if you're already in Codex): Codex now lives as a mode inside the ChatGPT app, with no terminal, no VS Code, no IDE. The free tier is too limited to build with, but the $20 Plus plan is enough to start. Two settings to get right immediately. Keep effort between light and high, never above (higher just burns usage for no gain), and keep speed on standard (Codex models are already fast, and "fast" costs extra usage). Watch your weekly usage meter.

Stage 1: Tell it the job of the page before anything else

Codex only knows what you told it in the conversation. "Build a landing page for an AI community" gives it a topic but leaves it guessing who the page is for and what action it should drive. So it can build something that looks good and solves the wrong problem.

Your opening prompt needs four things: the framework (say Next.js, the system Codex builds with), the purpose, what the product does, and, most important, the page's actual function. Is it a waitlist join or a sign-up for a live product? That one line changes what gets built.

Then lock it in with an agents.md file, the instruction file Codex reads before every task, so you're not re-explaining the project in each prompt. You don't write it by hand. Type / and pick init, and Codex generates it from your initial prompt (structure, folders, what the project is). Add one line at the top: whenever Codex can do something itself, like starting the app and verifying the build, it should. These models tend to ask you to do things they can do themselves, and this makes it work autonomously.

Takeaway: The most important line in your prompt is the page's function. Bake project context into agents.md so every new thread starts from the same place.

Stage 2: Load a design skill so it doesn't default to slop

Skills are instruction files Codex reads when doing a specific kind of work, so you save your web-design rules once instead of repeating them.

Anthropic's original front-end design skill was built to prevent older AI defaults, but newer models have moved on to a new set of repeated patterns it doesn't account for. We use the GPT taste design skill (from a set of 13, where GPT taste is the one for GPT models). Run the install command, paste it into Codex, let it install, then quit and reopen the thread (your work is saved) and reference it with /.

One trap: tell Codex not to use the "site" skill for design. It's OpenAI's replacement for the front-end skill and Codex defaults to it, but the output is weak. You can write "never use the site skill for designing" into agents.md. (We'll use it later, but only for deployment.)

Takeaway: A better model gives you a good site. A design skill stops every good site from looking identical.

Stage 3: Let it verify its own work in the browser

Working code doesn't mean the finished design looks right. Browser verification feeds Codex the actual rendered page so it catches problems only visible on screen, and this is one of its strongest areas. GPT models lead on computer use (the model interacting with what's on screen), so Codex's browser checks have been more reliable than other agents in our testing.

Because you already told agents.md to self-verify, it does this without being asked, inspecting the page and checking responsiveness across desktop and mobile. Newer models handle responsiveness automatically now, but still drag the window to confirm. If something breaks, screenshot it and hand it over. (Skip the built-in annotate tool. It's janky, especially zoomed in, and screenshots are more reliable.)

Stage 4: Give the brand its own identity with design.md

The GPT taste skill teaches Codex good general taste, but the site still falls back to the same GPT color palettes (that recurring green and purple). The skill improves decisions. It doesn't give this brand its own identity.

That's what a design.md file does. It's a single instruction file holding the complete visual system for one brand (spacing, colors, details), introduced via Google's Stitch tool. Grab one from getdesign.md (which has systems from Claude, Cursor, Discord and others) or the free design.md library from Aurabuild. Attach the file and tell Codex to create a design.md in the project, copy the contents in, and revamp the site to match, without changing structure, layout, or animations (the GPT taste skill already nails animations, so leave them).

The result is the same layout with a completely different look, and it stops reading as a GPT-generated site.

Takeaway: The GPT taste skill teaches how to design well. A design.md defines what this specific brand looks like. You need both.

One habit: we always use Phosphor icons and note that in agents.md so Codex reaches for them on anything new. Minimal, clean, best set out there.

Stage 5: Replace stock images with original brand images

Stock images fill space but rarely match the brand, another reason AI sites feel assembled rather than designed. Since Codex already knows the product (agents.md) and the visual direction (design.md), it can generate original imagery with the GPT image model that actually fits.

Tell it to create an assets folder, link it in agents.md, and replace all stock images, specifying that images must match the design and the content they represent so you don't get random visuals. For illustrations (which have a higher chance of mistakes) and especially on the $20 plan where image generation is limited, turn on plan mode first (just click the button, no need to mention it in the prompt). It works out a plan before touching anything. Approve it, then let it generate. It'll even produce matching testimonial avatars.

Stage 6: Fix the layout with real visual inspiration

Now the colors and images are original, but Codex still placed everything using layout patterns it already knows. This is most obvious in the hero section, the first thing people see. Layout is hard to describe in words, so give it a reference.

Pull inspiration from Pinterest (search the exact thing, for example "hero sections for SaaS apps") or Awwwards for high-end work. The goal isn't to copy. It's composition inspiration while keeping your brand and content. Not satisfied with a section? Screenshot a design you like and ask Codex to recreate that layout.

Stage 7: Swap generic parts for designer components, then optimize

The overall design is set, but small parts can still feel generic. Rather than redesigning the whole site, replace just those parts with components made by other designers, which gives you more control over details without disturbing the direction. Sources: 21st.dev, godly, and fancy components (navigation switchers, hero backgrounds, animated effects, and so on). Copy the component's prompt, hand it to Codex, and tell it where to apply it.

Heavy animations will make the site feel slow. Don't strip them, optimize. Asking Codex to "optimize the site" alone fixes most of it, and we also run a custom skill built for animation-heavy landing pages, which cut our latency measurably.

Takeaway: Polish the pieces, then optimize for speed. Beautiful and slow still loses.

Ship it: checkpoints + deployment

• Git commits as checkpoints. Ask Codex to make a local commit at each good state, no signup needed. If it later breaks something, revert to a named checkpoint. Ask it to list commits if you forget the names.
• Deploy with the site skill. The site skill was bad for design, but it's the easy path to publish, with no separate Vercel and GitHub setup. Add the site skill, ask it to deploy, then open the Site section in the sidebar, hit share, switch from "just me" to anyone on the internet, and publish. Add a custom domain in settings if you want. Client-ready, all inside Codex.

FAQ

Do I need the $200 plan to build with Codex? No. The $20 Plus plan is enough to start. Upgrade only if you're building at higher volume.

What effort and speed settings should I use? Effort between light and high, never above. Speed on standard. Anything higher mostly just burns usage.

Why does my Codex site look like every other AI site? You're relying on the model alone. Layer a design skill (general taste), a design.md (brand identity), and original images to break the default look.

Should I ever use the "site" skill? Not for design, since its output is weak and Codex defaults to it, so tell it not to. Do use it for deployment.

How do I stop Codex asking me to do things it can do itself? Add a line at the top of agents.md telling it to perform actions itself, like starting the app and verifying the build, so it runs autonomously.

Resource prompt

Paste this into Codex as your opening prompt for a new site. It front-loads the decisions that matter most:

Build a landing page using Next.js.

PURPOSE: [what the product/brand is]

WHAT IT DOES: [1-2 sentences on the product]

PAGE FUNCTION (most important): [the single action this page should drive, e.g. "get visitors to join the waitlist"]

Rules:

- Do not use the "site" skill for designing.

- Use Phosphor icons for any iconography.

- Whenever you can perform an action yourself (starting the app, verifying the build in the browser, checking responsiveness), do it instead of asking me.

- After building, verify the page in the browser and confirm it's responsive on desktop and mobile.

First, run /init to generate an agents.md capturing this context, then start the build.

The GPT taste skill setup, our animation-optimization skill, and the full AI Labs design system we use on client builds live inside https://ailabspro.io/ .