I Let OpenAI Codex Build My Website From One Prompt: 5 Minutes 23 Seconds, 12/12 Checks

I gave OpenAI's Codex one prompt, an empty folder and a hard 15-minute limit to build a real personal website for my YouTube channel. It finished in 5 minutes 23 seconds. Then I tested it properly: 12 checks, in a real browser, on desktop and on a phone.

It even hit an error on its own and fixed it without help.

No sponsor, and no manual changes to the website's code. This is one recorded run, not a guarantee that every attempt gives the same result.

The challenge

Codex got exactly one prompt:

• Build a personal website for my YouTube channel, starting from an empty folder
• Next.js + TypeScript + Tailwind, App Router
• Five sections, in order: hero, latest videos, skills, about, contact form
• Dark mode that remembers your choice
• A layout that works on a phone, accessible forms, and a build that passes
• My six real video titles, and use only the facts in the prompt, so no invented numbers about me

How I kept it fair

• One prompt, and nobody answers its questions
• A hard stop at 15 minutes
• The 12-point checklist was locked before Codex started
• The test script was locked one minute in, before I looked at any output, with a SHA-256 fingerprint of each file saved, so nobody (me or Codex) could change the test after seeing the result

Setup: Codex CLI 0.147.0 · GPT-5.6-Sol · medium effort · standard speed (fast mode off) · my normal ChatGPT plan.

Watching Codex work (real timestamps)

• 0:13: makes a plan. Its first idea is to generate an image for the hero.
• 0:24: notices I'd switched image generation off, and changes plan without asking: it will draw the artwork with code instead. It didn't get stuck.
• 0:29–0:36: checks the Node version and the newest Next.js (16.3.5) and Tailwind (4.3.3) on npm.
• 0:36–3:40: nothing in the log for over three minutes while it thinks and writes.
• 3:40: eleven files appear at once: page, styles, layout, header, contact form and config. It never ran create-next-app. It wrote package.json and every config file by hand.
• 3:57: starts checking its own work: install, build, lint.
• 4:37: exit code 1. The build passed, but lint failed with one error in the header.
• 4:53: reads the error and edits four files.
• 5:07: build and lint again: exit code 0.
• 5:23: writes its summary and stops, with nine and a half minutes to spare.

Totals: 12 files, about 500 lines of code. It read about 560K tokens (93% from cache) and wrote about 13K. It cost nothing extra beyond my ChatGPT plan.

Something I liked: my prompt only asked for the build to pass. Running lint was Codex's own idea.

The 12-point test

In a real browser, using the production build, untouched:

1. Production build passes ✅
2. Zero console errors ✅
3. All five sections exist, in order ✅
4. Navigation links to all five and stays visible on scroll ✅
5. Name, tagline and a Watch on YouTube button to my channel ✅
6. All six video titles with their lengths, spelled exactly (even the long ones with special characters) ✅
7. Every video card links to the right page ✅
8. All seven skills ✅
9. Empty form → an error under each field ✅
10. An email without ".com" → "please enter a valid email", then a valid submit → a success message ✅
11. Dark mode survives a page reload ✅
12. At phone width, no sideways scrolling, and every section is visible ✅

Final score: 12/12.

Being honest about the score

The first time I ran my test script, it said 10/12. Both failures were my test's fault: the script looked for headings literally named "Skills" and "About", but Codex wrote creative headings like "Tools I build with". The checklist only requires the sections to exist in order, and they do. I fixed the script, logged every change and why, and kept the original 10/12 result in the logs. I never touched the website's code.

Inside the code: 3 ideas worth stealing

1. Dark mode with no white flash

A tiny script in the layout runs before the page appears and reads the saved theme. The idea looks like this:

try {
  const saved = localStorage.getItem("theme");
  const dark = saved ? saved === "dark"
                     : matchMedia("(prefers-color-scheme: dark)").matches;
  document.documentElement.classList.toggle("dark", dark);
} catch {}

• If you saved a choice, use it. If not, follow your system setting.
• try/catch, because some browsers block storage (private mode, for example). Then the site shows the default theme instead of crashing.
• It's injected with dangerouslySetInnerHTML. The name sounds scary, but it's safe here because the script is fixed and never comes from a visitor.

2. The lint error it fixed: "You Might Not Need an Effect"

The first header copied the theme into React state inside a useEffect. Lint flagged it:

Calling setState synchronously inside an effect can trigger cascading renders.

That causes an extra render right after the first one. The React docs have a whole page on this, You Might Not Need an Effect: if you can read a value directly, don't copy it into state in an effect.

Codex's fix was to delete the state completely. The toggle just flips a dark class on the page and saves the choice:

function toggleTheme() {
  const dark = document.documentElement.classList.toggle("dark");
  localStorage.setItem("theme", dark ? "dark" : "light");
}

CSS decides whether to show the sun or the moon icon. That localStorage line is exactly why dark mode survived the reload in check 11.

3. A friendly contact form

• The email is checked with a simple pattern: text, @, text, ., text. That's what caught my missing ".com".
• All errors are collected into one object and shown together, so you see every mistake at once.
• noValidate on the <form> turns off the browser's own popup bubbles, so the site shows clear messages under each field.
• After a valid submit, the form clears, so nobody sends the same message twice by accident.

Small details I liked

• The phone menu button has aria-expanded, so screen readers announce whether the menu is open.
• One list of menu links feeds both the desktop and phone menus, so you change it in one place.
• Tapping a phone menu link closes the menu, so it doesn't cover the section you jumped to.
• With reduced motion turned on in your OS settings, the smooth scrolling and animations switch off.

How to write a prompt like this

Five things made the difference:

1. Name the tools. Next.js, TypeScript, Tailwind, App Router. If you don't, the AI picks for you.
2. List the sections in order. Codex built exactly those five, with a menu link for each.
3. Give real content. I pasted my real video titles and said "use only this information", which is why nothing about me was invented.
4. Make every requirement testable. Not "looks good on mobile" but "no sideways scrolling at 375 px wide".
5. Set limits. I said don't use port 3000 and don't leave a server running. It followed both and suggested port 4173 instead.

Bonus: ask it to check its own work with a build, lint and tests. Codex ran lint here on its own, but asking makes sure it happens.

Try it yourself:

npm install -g @openai/codex

Sign in with your ChatGPT account, open an empty folder, and paste your prompt. Results vary by plan, version and settings.

My verdict

The good: 5 minutes 23 seconds, 12/12 checks, it fixed its own lint error, and it didn't invent anything about me. There are no fake subscriber counts and no made-up awards. For a personal site, that matters.

The not-so-good:

• I asked for Tailwind. It installed and imported Tailwind but styled everything with its own CSS classes. That works, but it's disappointing if you wanted to learn Tailwind from the code. My checklist didn't test it, so it isn't in the score.
• The form doesn't actually send anything, because I asked for no backend. To go live you'd connect an email service.
• There's no photo of me, just code-drawn art. That's fine for a demo, but a real portfolio needs your face.

Is it worth it? For a first version of a personal website, absolutely. But you still need to understand the code, to fix what it gets wrong and to add your own content. If you're a beginner, let it build, then read every file and ask why each line is there. If you already code, it saves you the boring setup, but you're still the reviewer. It's your name on the website, not the AI's.

Full recorded run with the logs, code and browser tests: https://youtu.be/Ef5Pf5XGzVc

Should I give Claude Code the exact same prompt and compare the two sites side by side? Tell me in the comments.

Reference: React docs, You Might Not Need an Effect (react.dev/learn/you-might-not-need-an-effect) · OpenAI Codex CLI (github.com/openai/codex)

Drafted with AI assistance. The code and numbers come from the recorded run. I make AI, coding and tech tutorials on RainyTech.