Frontend - Reference

Give the model a complete interface to reproduce and the podium changes completely. GPT-5.6-Sol takes gold because this job rewards the exact combination it is built around - strong vision, general reasoning, relentless implementation, and very little tolerance for leaving the last 10% unfinished.

The reference is doing more work than most people realise. It removes the blank-canvas taste test and replaces it with a concrete system the model can inspect: hierarchy, spacing, typography, component boundaries, responsive intent. Once those decisions exist, the best frontend model is the one that can read them accurately and carry them into robust code.

The Least Bad Benchmarks

Our benchmarks of choice here are Design Arena and Arena’s WebDev leaderboard. Neither behaves like a conventional deterministic test - they use real 1v1 outputs and human preference to produce Elo-style rankings. Whilst imperfect, that is a better fit for frontend work because humans can judge fidelity, polish and taste in a way a fixed assertion cannot.

Treat them as evidence, not scripture. The prompt mix, harness and voting population all matter, and the rankings will never capture every product constraint. Frontend quality remains unavoidably vibes-based; these arenas simply turn the vibes into repeated blind comparisons rather than whoever posted the nicest screenshot on X.

Why Sol Takes Gold

Sol is exceptional at reasoning over an interface rather than merely describing it. It can infer the layout system behind the pixels, identify repeated components, connect visual details to interaction states, and then grind through the implementation until the rendered result matches. That last bit matters. Reference work is full of tiny, cumulative errors - the wrong line-height here, a loose container there, a mobile breakpoint that technically works but loses the rhythm.

Its usual design weakness matters far less because the reference has already made the aesthetic decisions. Sol still needs a tight instruction not to ‘improve’ the source, but once fidelity is the acceptance criterion its literalism becomes useful in the same way it does for a finished engineering spec.

Give it a proper reference. A complete desktop and mobile UI is ideal; one full page is still useful. A Pinterest-style pile of type, colours and unrelated screenshots leaves the model to invent the connective tissue - which puts you straight back in the no-reference category, only with muddier instructions.

The Runners-Up

Gemini-3.6-Flash takes silver because visual input is native to the job, and speed matters once the work becomes an inspect-render-correct loop. It is a strong choice for turning a clear screen into a clean first pass, then moving quickly through the obvious fidelity misses. It loses to Sol on the harder part: reasoning from a visual result into the implementation structure that will survive beyond the screenshot.

Kimi K3 remains excellent here. Its frontend taste means it catches design intent that a more literal model can flatten, and it is the best bronze on this board by some distance. It ranks below the other two because reference implementation rewards fidelity over invention - K3’s defining advantage is partly neutralised when the answer is already visible.

Claude models narrowly miss this podium. They remain superb when a screenshot needs interpretation or the product logic is underspecified, but this slot assumes the direction is settled. At that point Sol’s implementation quality and Gemini’s visual iteration speed are the stronger tools.

The Reference Has To Be Usable

A screenshot is evidence, not a specification. Pair it with the viewport size, the target stack, any available interaction states, and a short list of things which must remain exact. If mobile is absent, tell the model what should collapse rather than inviting it to guess. If an element is decorative, say so before it spends half the run rebuilding it as a reusable system.

Then inspect the render, not the source. Compare at the same viewport, check the awkward widths between desktop and mobile, use the keyboard, and make Sol explain any deliberate departure from the reference. Fidelity comes from a correction loop - one heroic prompt rarely survives contact with the browser.