WhichBuildWon

Claude Code vs Codex: Which Is Better at Front-End Design?

Codex wins with medium confidence on this one redesign: stronger overall composition and a more distinctive desktop experience, with Claude clearly better on mobile usability and product-story fidelity.

The task

Read the exact prompt
Improve the design and usability of this page.
Preserve its existing content, purpose, and functionality. Do not replace it with a different product or concept.
Use your own judgment about layout, typography, hierarchy, spacing, responsive behavior, visual treatment, and interaction details.
Make it substantially better on both desktop and mobile.
Do not explain what you plan to do. Make the changes, verify that the page still works, and stop.
Desktop screenshot of the frozen Trace baseline, a competent but visually plain AI code-review product page with a text-only hero, basic benefit cards, review rows, testimonial, and final CTA.
Baseline — desktopFrozen starting page · 1440px viewportOpen full capture
Desktop screenshot of Claude Code's Trace redesign, with a restrained blue hero, realistic inline code-review mockup, icon-led benefit cards, review list, testimonial card, and dark blue CTA.
Claude Code — desktopClaude Opus 5 · HighOpen full capture
Desktop screenshot of Codex's Trace redesign, with a grid-textured split hero, detailed review dashboard mockup, trust strip, numbered benefits, dark navy recent-reviews section, testimonial, and blue CTA.
Codex — desktopGPT-5.6 Sol · HighOpen full capture
Mobile screenshot of the frozen Trace baseline with stacked hero actions, single-column benefit cards, stacked review rows, testimonial, and final CTA.
Baseline — mobileFrozen starting page · 390px viewportOpen full capture
Mobile screenshot of Claude Code's Trace redesign showing its mobile header, stacked hero and review mockup, readable benefit cards and review rows, testimonial, CTA, and footer.
Claude Code — mobileResponsive 390px captureOpen full capture
Mobile screenshot of Codex's Trace redesign showing its stacked hero and product preview, benefits, dark recent-reviews section, testimonial, full-width blue CTA, and footer.
Codex — mobileResponsive 390px captureOpen full capture

What happened

Codex wins with medium confidence. It produced the stronger complete-page composition and more distinctive desktop experience, using stronger section contrast, typography, and visual rhythm.

Claude was more restrained and more faithful to the product story. Its concrete code diff and review finding communicated Trace more credibly than Codex's abstract score, and its mobile layout preserved section navigation through a menu.

Both untouched submissions passed 19/19 automated checks with no browser console errors. Manual visual review found one notable mobile regression in Codex: the desktop section navigation disappears without a mobile replacement.

Codex also introduced a 94/100 product score that was absent from the supplied content. Because the prompt required preserving the page's content, purpose, and functionality, this is a minor prompt-compliance failure even though it does not overturn the overall result.

The two outputs show different frontend judgment rather than a simple correctness gap: Codex emphasized art direction and desktop presentation, while Claude emphasized product credibility, restraint, and responsive usability.

Meaningful differences

DifferenceObserved
Overall resultCodex wins, medium confidence, on the strength of its complete-page composition and more distinctive desktop presentation.
Hero and hierarchyCodex used more expressive headline treatment, background composition, and section contrast. Claude's hero was more conventional but its code-review mockup was more credible.
CompositionCodex created stronger rhythm with full-width transitions and a dark reviews section; Claude's mostly light, contained middle sections felt more repetitive.
Product communicationClaude's concrete diff and explanatory finding made Trace easier to understand without implying an unsupported quality metric.
Mobile usabilityClaude preserved section navigation and readable review content. Codex removed section navigation at mobile width and truncated review titles.
Prompt fidelityCodex invented a 94/100 product score not present in the supplied content; Claude stayed closer to the existing product story.
Automated validationBoth passed the same 19/19 automated checks with no browser console errors; those checks did not detect Codex's missing mobile navigation.

What this tells us

In this single controlled redesign, Codex produced the stronger overall visual composition and more distinctive desktop experience, while Claude was more restrained, more faithful to the product story, and clearly better on mobile usability. Codex's win comes with two meaningful flaws: it invented a 94/100 product score and removed mobile section navigation.

Evidence & setup

Setup
{
  "participants": [
    "Claude Code using claude-opus-5 at high effort; auxiliary claude-haiku-4-5-20251001 usage reported",
    "Codex using gpt-5.6-sol at high effort"
  ],
  "baseline_identifier": "cc04259bf2e3a98b1381a824fe80f68a417418bc",
  "prompt_sha256": "75de23abd486485187b0ef3331b9bd47924257e6ebb13a70327362bfb4279356",
  "held_constant": [
    "identical frozen Trace baseline",
    "identical contestant prompt",
    "isolated clean contestant workspaces",
    "one contestant run each",
    "no feedback or post-run repair",
    "same automated validation procedure",
    "matched 1440px desktop and 390px mobile captures"
  ],
  "treatment_variable": "Claude Code versus Codex as complete agent systems",
  "automated_validation": "Both passed 19/19 with no browser console errors",
  "post_run_repairs": 0,
  "cross_contamination": false
}
Supporting evidence
{
  "publication_quality_gate": "Standard case study: PASS",
  "result": "Codex wins",
  "confidence": "medium",
  "automated_checks": {
    "claude": "19/19 passed; no browser console errors",
    "codex": "19/19 passed; no browser console errors"
  },
  "manual_regressions": [
    "Codex removes mobile section navigation without a replacement."
  ],
  "prompt_compliance_findings": [
    "Codex introduced a fabricated 94/100 product score absent from the supplied content."
  ],
  "fairness": "Identical baseline and prompt, isolated workspaces, one contestant run each, no post-run repairs, no cross-contamination, matched captures."
}
Provenance
{
  "source_run": "runs/20260830T190525Z",
  "source_results": "runs/20260830T190525Z/results.json",
  "source_publication_analysis": "runs/20260830T190525Z/publication.json",
  "source_results_sha256": "9dadf0d8f1cf53d347e6509921febacd843f151a27df7718654652e8a7782f85"
}
Documented limitations · 6
  • This was one existing webpage and one contestant run per agent, so it supports a scoped observation about this run rather than a general ranking of Claude Code and Codex.
  • This is a systems comparison between Claude Code and Codex, not a pure isolated-model benchmark. Claude Code reported Claude Opus 5 plus auxiliary claude-haiku-4-5-20251001 usage.
  • The visual result was reviewed qualitatively; the publication does not claim an objective numerical design-quality score.
  • The 19 automated checks covered build, type checking, required content, CTAs, overflow, screenshots, and browser errors, but did not test whether mobile section navigation remained available.
  • Codex's runtime model identifier was not exposed by the CLI; gpt-5.6-sol is the explicitly configured model.
  • The earlier Claude authentication failure occurred before model inference and is preserved as infrastructure evidence; the completed comparison used one successful contestant run per agent.

See more experiments. Claude vs Codex on case-study design →