Skip to content

devlog/model-bench/sonnet-5-and-gpt-56-sol-ship-the-same-react-component-1081.md

Model benchEN

Sonnet 5 and GPT-5.6 Sol Ship the Same React Component

Two Terminals, One Prompt: Running Sonnet 5 and GPT-5.6 Sol Against the Same Spec

The experiment is simple enough to set up before the coffee cools. I keep one terminal split into two panes, one running Claude Code and the other running Codex, and both get the same frontend task: a pricing table component with a monthly and annual toggle, a highlighted tier, keyboard reachable controls, and a mobile layout that does not break at 360 pixels. Nothing exotic, just the kind of component that shows up in every product roadmap and quietly accumulates technical debt.

Both editors are pointed at the same relay because I refuse to juggle provider keys mid task. Fluxo gives me one key and one base URL, https://api.fluxorelay.com, and that single endpoint fronts Claude, GPT, Gemini, DeepSeek, Kimi, GLM, Qwen, Grok and more, so swapping Claude Sonnet 5 for GPT-5.6 Sol is a one line model change rather than an afternoon of credential plumbing. Billing is per real token including cache reads and writes, there is no monthly fee, and the same key works with Claude Code, Codex, Gemini CLI and any OpenAI SDK.

For this run the two workhorses are Claude Sonnet 5 and GPT-5.6 Sol, with Claude Haiku 4.5 doing cheap reruns when I only need a diff explained. The surprising part is not that the models differ. It is how much they agree on the same wrong answer, and how predictable the failure list becomes once you watch ten components come out of both panes.

First Pass Mistakes Both Models Make in the Same Five Places

Give both models the prompt above and the first commit usually looks fine until you open the file. Sonnet 5 tends to be tidy and verbose in the right places, GPT-5.6 Sol tends to move fast and refactor early, and yet both trip over the same handful of problems. The list below is what I write on the whiteboard now before I start the run.

  • Both models invent local state that mirrors a prop and then forget to update it when the prop changes.
  • Both models accept an object prop with implicit types that widen into any the moment the file is imported elsewhere.
  • Both models render list items without stable keys when the data comes from a fetched plan array.
  • Both models hardcode spacing and color values instead of pulling from the existing design tokens.
  • Both models skip the loading and error branches because the happy path screenshot looked convincing.

The fix for all five is the same shape: give the model the surrounding files before it writes anything new. Paste the design token module, the prop types from the neighboring component, and the fetch wrapper into context, and both models stop inventing their own conventions. If your context budget is tight, ask for the component body first and the styles second, then feed the result back through Claude Haiku 4.5 for a cheap structural review before you accept anything.

State and Effects: The Toggle Bug Sonnet 5 Keeps Reintroducing

The monthly and annual toggle is where the two models diverge in character but converge in bugs. GPT-5.6 Sol will usually derive the display price from a single source of truth, which is what you want, then wrap that derivation in a state update that fires during render. Claude Sonnet 5 reaches for an effect to sync the toggle with a query parameter, and the effect runs on mount and again on every keystroke in the search input two components above it.

  • Ask both models to derive values from props and state instead of storing derived copies in their own state.
  • Ask both models to describe every effect they write and delete any effect that only mirrors another value.
  • Ask both models to keep the toggle state in one place and pass the resolved price down as a prop.
  • Ask both models to avoid effect driven synchronization with the URL and use a navigation handler instead.

A useful trick is to make the model justify each useState and each useEffect in a short comment before you accept the patch. Half the time it deletes its own state once it writes the comment out loud. The other half you get a clear audit trail for the reviewer. Do this every run and the toggle bug stops coming back after the third component.

Accessibility and Styling Regressions Hidden in Clean Diffs

Both models produce markup that looks correct and fails a keyboard pass within thirty seconds. The toggle becomes a pair of clickable divs, the highlighted tier announces nothing to a screen reader, and focus rings get stripped by a blanket outline rule at the top of the stylesheet. GPT-5.6 Sol is slightly better at using real buttons and fieldsets, Sonnet 5 is slightly better at respecting the token names you gave it, and both need the same nudge.

  • Require native interactive elements with explicit type attributes on every button in the component.
  • Require an accessible name and a pressed state on the billing toggle control.
  • Require visible focus styles that survive the global reset in the shared stylesheet.
  • Require responsive rules that keep the table readable at a three hundred sixty pixel viewport.
  • Require contrast values that pass AA against the existing background tokens rather than invented colors.

Paste your lint config and a passing component into the prompt and quality jumps immediately. Both models treat a real example as a contract, and they will copy the naming, the export style and the test layout without being told twice. When I only want a fast second opinion on the markup, Gemini 3.8 Flash is cheap enough to run over the whole file after every edit.

Tests, Cache Reads, and the Review Loop That Keeps Both Models Honest

The last mistake is the one I make, not the models: accepting a component with no tests and assuming the next run will add them. Both models will happily write tests if you ask before the implementation, and both will skip tests entirely if you ask afterwards. So I split the request into two prompts, tests first against an interface I sketched in a comment, then implementation to make those tests pass.

  • Ask for test cases before implementation so the component is built against a written contract.
  • Ask for a keyboard interaction test that exercises the toggle with real user events.
  • Ask for a layout snapshot or a viewport test that catches the mobile regression early.
  • Ask the second model to review the first model diff and list concrete violations only.

The review loop is cheap because Fluxo bills per real token including cache reads and writes, and there is no monthly fee sitting in the background while a run idles. Repeated context like the design tokens lands in cache and the follow up questions cost less than the first pass, which makes an honest two model review affordable on a component that will ship to production.

If you want to run this experiment in your own split terminal, create a Fluxo account and point both editors at one key and one base URL. You earn a referral share when people you invite pay, so the second half of the team can fund the first half of the review. And if anything in the run behaves strangely, leave a note on the contact page after signing in, because there is no support mailbox to write to.

Next in the buffer