Claude Code Learning Hub
中文 Mingyu's Library

Hub / Tips / C · Design & assets

Screenshot-diff: let Claude judge its own UI

"Does it look right?" shouldn't be a question you answer by refreshing the page every round — give it the design, and let it screenshot itself, compare itself, and keep fixing until it matches.

The most human-draining part of UI work is verification: after every iteration you have to look with your own eyes. The official best-practices answer is to hand the "looking" to Claude too — a screenshot is a check it can run itself, on the same footing as tests and build exit codes. This page shows how to set that loop up.

One-line answer

Answer Paste the target design into the conversation and ask Claude, after implementing, to "screenshot the current result, compare it against the design, list the differences, and fix them" — looping until the differences hit zero.OfficialThis is the pattern given verbatim in the official best practices: "[paste screenshot] implement this design. take a screenshot of the result and compare it to the original. list differences and fix them"; the screenshot channel is Claude in Chrome for browsers and computer use for native apps.

Steps

  1. Prepare the target image. A Figma export, a competitor screenshot, even a hand-drawn wireframe — copy-paste or drag it straight into the prompt.OfficialThe docs confirm images can be copy/pasted or dragged & dropped into the conversation. Expect: Claude's reply accurately describes the layout in the image, which tells you it actually read it.
  2. Open the channel that lets it screenshot itself. Choose by target platform:Official
    TargetChannelPrerequisites
    Web pagesclaude --chrome with the Claude in Chrome extensionExtension ≥1.0.36; Pro/Max/Team/Enterprise subscription accounts, signed in via /login (not available under API-key auth)
    Native macOS appsEnable computer-use in /mcpmacOS research preview; Pro/Max; requires Accessibility and Screen Recording permissions
    iOS appsDesktop iOS Simulator pane / CLI via computer useSee Not done until it runs in the iOS Simulator
    Use /chrome to check the connection (you want to see Status: Enabled and Extension: Installed). The official capability list explicitly includes this scenario: build the UI from a Figma mock, then open the browser to verify it matches.
  3. Send the "implement → screenshot → compare → fix" loop prompt. Copy-paste version below. Expect: each round Claude posts a concrete difference list (e.g. "primary button corner radius too small", "card gap is 16px, should be 24px"), fixes the items, then screenshots and compares again — not a bare "implemented per the design".Our takeThe difference list is the soul of this method — forcing it to write each item out is what stops "looks about right" from slipping through.
  4. Demand evidence on disk.OfficialHave it save the final screenshot ("take a screenshot and save it to disk", requires v2.1.211+), or record the whole interaction flow as a GIF; reviewing evidence is faster than re-running the verification yourself, and it also works for sessions you weren't watching. Note that computer-use screenshots are automatically downsampled (e.g. 3456×2234 down to about 1372×887) — if interface text is too small, bump the in-app font size rather than changing the screen resolution.
  5. For unattended runs, make the comparison a hard gate.OfficialBest practices gives the escalation path: asking for the loop within the same prompt is the lightest; harder is making "no major differences between screenshot and design" a /goal condition (re-checked each round by an independent evaluator), or a Stop hook running a comparison script that blocks completion. For the general approach see Give it checks it can run itself.

Copy-paste prompt

[paste the target design here]
Implement the page from this design, and verify it with a screenshot-comparison loop:
1. First list the key specs you read from the design: layout structure, colors, type scale, spacing, corner radii — and confirm them with me.
2. After implementing, open the corresponding page on localhost:3000 and take a screenshot of the current result.
3. Compare the screenshot against the design item by item and output a difference list (location + current + expected). "Basically matches" is not acceptable.
4. Fix each item, then screenshot and compare again, until there are no visible differences; post the difference list every round.
5. At the end, save the final screenshot to the screenshots/ directory and report how many rounds it took and which unexplained differences remain.

Sources & last verified