Claude Code vs Codex
We gave Claude Code and Codex the exact same SaaS landing-page brief from the same starting point. Here is what each one built.
The task
Read the exact prompt (669 characters, sent to both agents once)
Prompt SHA-256 d11649015ec2eca55b07693eaeb5733a572b7036bc79d0ab539c8b81a7d8aca9.
Build a polished responsive SaaS landing page for an imaginary product called Relay, an AI operations assistant for small teams. Requirements: * Next.js * TypeScript * responsive desktop and mobile layout * navigation * hero section with headline, subheadline, and primary CTA * social proof section * three distinct feature sections * simple interactive ROI calculator * pricing section with three plans * FAQ section * footer * no broken links * no browser console errors * accessible buttons and form controls * visually coherent spacing and typography * production build must succeed Do not ask questions. Make reasonable product and design decisions yourself.
What happened
Both agents received identical prompt bytes once and built from the same clean commit. When we checked both builds against the same 20 requirements, Codex passed all 20. Claude Code passed 18 and missed two: our checks did not register its pricing section as three distinct plans, and we found 20 links pointing at a placeholder # href instead of a real destination.
Everything else, including the production build, TypeScript, navigation, hero, CTA, social proof, feature sections, a working ROI calculator, the FAQ, the footer, accessible controls, and clean rendering on desktop and mobile, passed for both.
What this tells us
On this specific brief, in this one run, Codex cleared every check we ran and Claude Code did not. That is a narrow, scoped result: one brief, one run per agent, one set of deterministic checks. It is not evidence that either model builds better landing pages in general, and we did not score which page looks or reads better. Look at the builds above and decide that yourself.
If you run Codex yourself, you can check your own 5-hour and weekly usage limits with our free Codex Usage Dashboard, no ChatGPT settings required.
What each got right / wrong
Claude Code
Passed 18 of 20 checks. Our checks found 0 detectable pricing plans and 20 links pointing at a placeholder # href.
three_pricing_plans_existno_broken_links
Codex
Passed all 20 checks, including a 4-plan pricing section and no broken links.
Every check passed. Nothing failed.
Evidence & setup
Models, settings, and timing
Complete deterministic check table · 20 checks
| Deterministic check | Claude Code | Codex |
|---|---|---|
| Accessible Buttons And Form Controls | PASS [] | PASS [] |
| Desktop Renders | PASS screenshots/desktop.png | PASS screenshots/desktop.png |
| Faq Exists | PASS true | PASS true |
| Footer Exists | PASS true | PASS true |
| Hero Exists | PASS {"h1":"Run your team's ops on autopilot","subheadline_exists":true,"primary_cta_count":2,"primary_cta_name":"Start Free Trial"} | PASS {"h1":"Less busywork.More momentum.","subheadline_exists":true,"primary_cta_count":4,"primary_cta_name":"Start building for free"} |
| Mobile No Material Horizontal Overflow | PASS {"viewport_width":390,"document_width":390,"overflow_px":0} | PASS {"viewport_width":390,"document_width":390,"overflow_px":0} |
| Mobile Renders | PASS screenshots/mobile.png | PASS screenshots/mobile.png |
| Navigation Exists | PASS {"exists":true,"link_count":7} | PASS {"exists":true,"link_count":7} |
| No Broken Links | FAIL ["#","#","#","#","#","#","#","#","#","#","#","#","#","#","#","#","#","#","#","#"] | PASS [] |
| No Browser Console Errors | PASS [] | PASS [] |
| Page Loads | PASS 200 | PASS 200 |
| Pricing Section Exists | PASS true | PASS true |
| Primary Cta Exists | PASS {"h1":"Run your team's ops on autopilot","subheadline_exists":true,"primary_cta_count":2,"primary_cta_name":"Start Free Trial"} | PASS {"h1":"Less busywork.More momentum.","subheadline_exists":true,"primary_cta_count":4,"primary_cta_name":"Start building for free"} |
| Production Build Success | PASS 0 | PASS 0 |
| Roi Calculator Changes Output | PASS {"attempted":true,"changed":true,"before_value":"12","after_value":"37"} | PASS {"attempted":true,"changed":true,"before_value":"6","after_value":"13"} |
| Roi Calculator Exists | PASS {"exists":true,"control_count":2} | PASS {"exists":true,"control_count":2} |
| Social Proof Exists | PASS true | PASS true |
| Three Feature Sections Exist | PASS 3 | PASS 4 |
| Three Pricing Plans Exist | FAIL 0 | PASS 4 |
| Typescript Success | PASS 0 | PASS 0 |
Mobile captures, 390px
Methodology
One neutral committed Next.js TypeScript starter was checked out sequentially into two clean worktrees. Each CLI received the same prompt bytes in a fresh noninteractive invocation. The same build, TypeScript, DOM, interaction, console, overflow, and Playwright screenshot checks graded both outputs. No visual winner was selected.
An initial Codex CLI argument-parsing failure occurred before any model invocation. Its evidence was preserved and the valid run followed.
Documented limitations · 8
- This was one one-shot task, not evidence that either model is universally better.
- Visual quality was not automatically judged.
- DOM checks use deterministic structural and text heuristics and may miss semantically valid unconventional markup.
- The contestant processes were not isolated with separate macOS accounts; worktrees were created sequentially, no other contestant path was provided, and cross-workspace access must be checked from recorded transcripts.
- The authenticated Claude account listed account-level connectors. The Claude invocation used --strict-mcp-config with an explicit empty MCP config to exclude them; the account-level listing remains recorded as a transparency limitation.
- The recorded standard git diff excludes Claude's untracked app/components files; final-git-status.txt proves they existed, the grader and screenshots were captured before cleanup, and claude/rendered-page-snapshot.html preserves the rendered response. The source files themselves were not recoverable after worktree cleanup. Future runs append untracked-file diffs.
- Unavailable model, usage, token, or cost metadata remains null.
- The recorded standard git diff excludes Claude's untracked app/components files; final-git-status.txt proves they existed, the grader and screenshots were captured before cleanup, and claude/rendered-page-snapshot.html preserves the rendered response. The source files themselves were not recoverable after worktree cleanup. Future runs append untracked-file diffs.
Two more experiments are published. See the CLAUDE.md test →