Paste a screenshot into an AI coding tool and you'll get HTML back in seconds. It usually looks close. Then you open it in a browser and every image is a grey placeholder, the fonts are the wrong ones, and the colors are approximations. The layout was never the hard part.

What screenshot-to-code is genuinely good at

Modern vision models read layout structure well. Given a clean screenshot, they'll reliably produce:

Section structure — header, hero, feature grid, testimonial row, footer, in roughly the right order.
Responsive scaffolding — flex and grid containers, sensible breakpoints, spacing that's in the right neighborhood.
Component boilerplate — buttons, cards, nav items, usually as Tailwind classes or plain CSS you can refactor.
A starting point you can edit — which, honestly, is the real value. Typing out a hero section from scratch is tedious.

If you're prototyping and don't care that the visuals are placeholders, that's often enough.

What it can't do — and won't, structurally

A screenshot is pixels. Code generation reads those pixels and writes markup. It does not, and cannot, hand you the underlying files, because those files don't exist in the image. Four things always come back missing:

Real images. The hero photo, product shots, logo, and icons are baked into the screenshot at whatever resolution the screenshot was. Generated code references paths that don't exist, or worse, hotlinks a stock photo that doesn't match.
Clean images. Even if you crop them out by hand, the hero has a headline typed across it, a button sitting on top, and a dark gradient over the top third. Usable at exactly one size, in exactly one layout.
Actual fonts. Models guess from rasterized letterforms and frequently default to a system stack. You need the real typeface — or the closest Google Font — with weights per text style.
Exact colors and copy. Sampled colors drift a few percent, which is visible on large fills. Copy gets paraphrased or truncated, which matters when the client wrote it.

The two-track workflow that actually ships

Stop asking one tool to do both jobs. Split them:

Track 1 — structure

Use whatever screenshot-to-code tool you like (or your own component library, or a template) to get the layout skeleton. Expect to rewrite some of it. That's fine — you're not shipping generated CSS, you're skipping the blank file.

Track 2 — assets

Run the same screenshot through Arturo. Draw a box around each asset you need and Arturo, in one pass:

Crops every region at the boundary you selected.
Erases overlaid text, buttons, and gradients, then reconstructs what was hidden underneath — so the image works at any crop.
Upscales each result to production resolution.
Cuts transparent PNGs for logos and icons, normalized to equal sizes when they sit in a row.
Returns the closest Google Font per text style with weights and an @import snippet, plus the palette as HEX/RGB with roles, plus every copy block grouped by section.

Then you drop the ZIP into the skeleton. Structure from track 1, real files from track 2, done in an afternoon instead of a week.

A concrete example

Say a client sends one flattened mockup of a five-section marketing page. Doing it entirely by hand:

Crop 12 assets, eyeballing boundaries — ~30 min
Clone-stamp text and buttons off 4 photos — ~60 min
Upscale and sharpen the low-res crops — ~20 min
Cut transparent logos and icons — ~30 min
Identify fonts, sample colors, transcribe copy — ~40 min

That's roughly three hours before a single line of layout code. The extraction pass replaces all of it, and the code-generation pass replaces the boilerplate. What's left is the part you're actually good at: interactions, real content, performance, and making it not look like a template.

When you shouldn't bother with either

If you have the source file with intact layers — a real Figma document with named exports, or a PSD — export from there. Extraction is for the (very common) case where you don't: an AI-generated mockup, a PDF from a client, a JPEG a stakeholder pasted into Slack, a screenshot of a site you're rebuilding. See extracting images from a Figma mockup for the in-between case where layers exist but aren't usable.

Related guides

Try it on a screenshot you already have

First 15 assets are free — no signup required. Bring the mockup your code generator choked on.

Try free — no signup See pricing

Screenshot to Code: What AI Actually Gets Right (and What It Can't)