Why AI can't copy a design from a screenshot

Pasting a screenshot into Cursor, Codex or Claude Code is the first thing everyone tries, and it does something: you get roughly the right layout. Then you look closer and the type is off, the spacing is off, and the page feels like an impression of the original.

The Space Jam test

The best write-up of this comes from Jonah Glover, who asked Claude Code to recreate the 1996 Space Jam site from a screenshot and its asset folder, with a logging proxy to watch what happened. It's about as easy as this gets: a static page where the images are already provided.

It didn't get there, even after he built it grid overlays, colour comparisons, a side-by-side viewer and a zoomed reference. It kept describing its work as precise when its own checks said otherwise, and he ended the post without a fix. He tested one model, and we haven't seen an equally careful test of the others, so don't read this as a problem with one product.

His explanations are worth reading, and he's careful to call them theories. Images are split into fixed patches before the model sees them, so fine spatial detail may simply be lost. And the model may treat its own earlier output as correct, so each round confirms the mistake.

What a screenshot leaves out

Most of what makes a design feel considered sits in the rows marked no. That's why the copy looks familiar and still feels wrong.

Do pixel-diff loops help?

Some developers have the agent build, compare against the target with a tool like pixelmatch, and fix what differs. It gets closer, especially on a single simple component. Others say that it burns time and tokens for less and less, and the Space Jam run suggests a model can get stuck even with good checks. It also can't tell you about anything that isn't on screen in that one picture.

When a screenshot is the right input

• You're sketching a rough layout and will design the details anyway.
• All you have is a picture: a Dribbble shot, a mockup, a page that no longer exists.
• You want the idea, not the numbers.

If the page is live, read the page

A live page has already got the answers. The browser knows the exact font, the computed size of every element, the colours as rendered and the transitions. Give your agent those and nothing needs estimating. You can do it by hand in devtools, with a free extractor, or from inside your agent with a tool like plagio, which is ours.

It won't be perfect either. Canvas and WebGL have no DOM to read, and some sites refuse automated browsers. But for an ordinary website, measuring beats looking.