Screenshot to code: what AI understands from an image

What does a vision model actually see?

A vision model processes the image in patches, not as a design file. According to Anthropic’s documentation, Claude processes images in 28×28-pixel patches, and each patch counts as one visual token. Every model has a maximum native resolution: anything larger is downscaled before processing. In the same documentation, a 1920×1080 screenshot is reduced to 1456×819 on the standard tier and is not resized on the high-resolution tier, which applies to Claude 4.7 and later models (up to 2,576 pixels on the long edge, against 1,568 on the standard tier). So whether small text survives depends on the model.

In practice, the model recognizes the general hierarchy well: a heading at the top, a list below it, a strong-colored button on the right. It struggles more with fine details: exact spacing, subtle shadows, one-pixel alignments and very small text. This distinction is key for a designer, because the details you care about most are often the ones an image does not convey clearly.

Which tools do it today?

Several tools accept an image as a starting point. This is what their official documentation says, checked in November 2026:

Features and plans change often. Before relying on a tool, check its documentation for what it accepts today. To see when each one fits while prototyping, read prototyping with AI.

Why does it matter to a designer?

Because a screenshot is a way to communicate your design that does not depend on the tool. It helps you prototype without Figma, show a reference from another app or compare what the AI built against what you wanted. But a screenshot has no structure: it does not know which layer is a button or which color is a variable.

That is why the Figma file, when you have it, gives more information. Figma’s MCP server can return a screenshot with get_screenshot, but also a layer outline with get_metadata, design context and code with get_design_context, and tokens with get_variable_defs. We cover this in Figma to code with MCP. The screenshot stays as a second reference.

How do you ask for a better result?

Some practices that follow Anthropic’s vision guidance and the tools’ own:

• Send the image before the text. Anthropic’s documentation says Claude works best when images come before text.
• Use clear images. The documentation warns that Claude can make mistakes with low-quality, rotated or very small images under 200 pixels.
• Crop to what matters. The documentation suggests considering cropping or resizing before sending. A cropped form keeps more detail per element than the full screen.
• Avoid compressing several times. Anthropic warns that lossy compression can introduce artifacts that hurt results, especially when applied more than once.
• State the framework and the rules. Ask for the framework and for reuse of existing components. A screenshot alone says nothing about your system.
• Ask for a list of assumptions. Say: “Before writing code, list what you assume about spacing, colors and text.” That way you review what the model could not see.
• If you use Figma Make, attach screen by screen. Figma recommends attaching complex designs frame by frame rather than all at once.

When should you NOT use screenshot to code?

• When you need exact measurements for a production handoff. The AI estimates; your specification should come from your tokens or the design file.
• When the screenshot shows an interface with sensitive data. Before uploading it, check what information is visible.
• When the screen has many identical elements, such as a table with a hundred rows. Counting can fail, and the model may invent rows that do not exist.
• When the design already exists as components in your system. It is healthier to reuse the component than to rebuild it from an image.

Example

Illustrative example: a designer has a 1920-pixel screenshot of a competitor’s checkout screen, with an order summary on the right. They ask an agent to generate a first version with the structure. The agent produces a two-column layout with the right headings, but the prices come out with a larger font size than the original and the spacing is too wide. The designer notes those differences, corrects them with the project’s tokens and asks for another version with the font size taken from the typography layer. The second attempt is closer, although the card icon is still a placeholder.

The lesson: the screenshot speeds up the first draft, but you decide the fidelity when you compare.

Common mistakes

• Accepting the first version because it “looks similar.” Visual fidelity is reviewed point by point.
• Sending a reduced screenshot where the text is no longer readable, then blaming the model.
• Asking for “exactly the same” without remembering that the model estimates measurements.
• Not separating the screenshot from the source of truth. If the design has tokens, the code must use them, not the values the model read.
• Uploading a screenshot when you have the Figma file and could attach the frames.
• Forgetting that the screenshot may contain personal or customer data.

Sources

• Anthropic: Claude vision documentation: formats, 28×28 patches, image downscaling, image before text, compression and localization and counting limits.
• Claude Code: common workflows, images section: drag, paste or give the path of an image and ask for CSS from a mockup.
• Figma Help: Create and edit a Figma Make file: frames versus images and the limits of images.
• Lovable: working with images in chat: screenshots, attached images and drawing on them.
• Lovable: quick start: images in the first prompt.
• v0: documentation: cloning pages with screenshots or Figma files.
• Figma Developers: tools and prompts: get_screenshot, get_metadata, get_design_context and get_variable_defs.