Image to HTML

An image carries no structure whatsoever. A PSD at least has named layers with coordinates and a Figma file has explicit layout rules, but a flat image is a grid of pixels. Every single thing a converter needs — where one element ends and the next begins, which text is a heading, what the exact hex value is under compression, how much padding is intentional — has to be inferred from appearance alone.

Vision models have become genuinely good at that inference, and this is the area where AI changed the picture most. Give a current model a screenshot and it will identify the regions, read the text accurately in most cases, approximate the colours closely, and produce clean, modern, readable CSS. Five years ago this did not work at all. It is worth being clear that this part is now impressive.

What it cannot do is recover information the image never contained. Text rendered at 15.8px after JPEG compression might be 15px or 16px, and the model picks one. A colour sampled from a compressed screenshot is near your brand value but not equal to it. Anything below the fold does not exist. Hover and focus states do not exist. And the responsive behaviour, again, was never in the file — so any breakpoints in the output are invented.

The compounding problem is that these small inventions are individually invisible and collectively obvious. A spacing scale that is 15, 23, 31 and 46 pixels instead of 16, 24, 32 and 48 looks fine in isolation and looks subtly wrong as a page — and it is unusable as a system, because nothing lines up with anything. Cleaning that up afterwards is slower than measuring it correctly once.

So the way we work from images is to treat the generated pass as a draft and the measurement as the actual job. A developer establishes the real scale — the grid, the type ramp, the spacing steps, the true brand colours if you can tell us them — and builds against that. Where the image genuinely does not say, we ask you rather than guess, and we list every assumption we made in the handover so nothing is silently invented.

That is the same arrangement described on our AI-assisted development page, and it is why we can take screenshot work at a sensible price rather than pricing it as forensic reconstruction. If you do have a layered source file, say so — a PSD converts better than a flat export, and a Figma file better still.

Send whatever you have. We will tell you what can be read from it reliably, what will need a decision from you, and what it costs — before you commit to anything.