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.
What happened
Both agents received identical prompt bytes once and built from the same clean commit. Codex passed every one of the 20 deterministic checks. Claude Code passed 18 and missed two: its pricing section didn’t register as three distinct plans, and 20 of its links pointed at a placeholder # href instead of a real destination.
Everything else — 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’s output cleared every check this grader looks for and Claude Code’s did not. That is a narrow, scoped result: one brief, one run per agent, one deterministic grader. It is not evidence that either model builds better landing pages in general, and the grader never judged which page looks or reads better — look at the builds above and decide that yourself.
What each got right / wrong
Claude Code
Passed 18 of 20 checks. The grader counted 0 detectable pricing plans, and found 20 links pointing at a placeholder # href.
three_pricing_plans_existno_broken_links
Codex
Passed all 20 checks — every deterministic check this grader looks for, including a 4-plan pricing section and no broken links.
Every check passed. Nothing failed.
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.
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 →