benchrAll capabilities Building software
One screenshot in, a working page out
Hand a model a picture of a screen and get markup and styles back that reproduce the layout, spacing and copy closely enough to edit.
DocsDocumented in partTestNot tested by benchr
Claude CodeClaude APIclaude.ai and the Claude appsClaude Opus 5+3
Overview
- Reads the image as visual tokens rather than pixels, so dense interface detail survives up to the model's resolution tier.
- Returns the structure it infers - sections, hierarchy, states - not a description of the picture.
- Accepts follow-up images in later turns, so you correct the result by showing it what is wrong instead of describing it.
How it works
- 01Export the screen at a size that survives downscaling. Anthropic's high-resolution tier caps the long edge at 2576 px on Claude 4.7 and later models; the standard tier caps it at 1568 px, and anything larger is resized before the model sees it.
- 02Put the image first in the message and the instruction after it - the vision guide states images placed before text perform best.
- 03Ask for one artefact, not a critique: a single file, a named framework, and the exact tokens or class names you want used.
- 04Screenshot your own render, send both images back labelled Image 1 and Image 2, and ask only for the differences.
Prompt
Here is a screenshot of one screen. Rebuild it as a single self-contained HTML file with inline CSS. Match the layout, the vertical rhythm and the exact copy. Use CSS custom properties for colour. Do not invent content that is not visible in the image. Where something is ambiguous, choose the simpler reading and add an HTML comment saying what you assumed.Written to force one artefact and an explicit assumption list, so the correction turn has something concrete to argue with.
Limits
- Coordinate and localisation output is documented as approximate. Pixel-exact placement is not a guarantee the vendor makes.
- Counting many small repeated elements is documented as unreliable.
- Images under about 200 px, rotated images, and heavily compressed images are named as failure cases in the vendor's own limitations list.
- Twenty or more images in one request triggers a stricter per-image dimension cap on every image in that request.
Verification
benchr test runs
benchr has not run this capability. No test has been published. 1 self-reported run awaiting independent review.
benchr test runs →
Evidence
Sources
- Anthropic - Vision: limits, resolution tiers and documented failure cases Tier 1 · September 1, 2026
Not stated by the source
- Any accuracy figure for how closely generated code matches an original design
- Whether one model does this better than another - no vendor publishes a benchmark for it
Source-check history
- September 1, 2026DocsDocumented in partFirst logged. Vendor documentation confirms screenshot reading and its limits; no vendor documents the code-generation result, so this is recorded as documented in part rather than fully documented.
Changes
Provider changes affecting this
- August 31, 2026Claude Sonnet 5Pricing changed
- July 3, 2026Claude Sonnet 5Pricing changed
- July 1, 2026Claude Sonnet 5Model released