Screenshot loops

Build-along · ~12 min at your own keyboard

Building anything visual? Give Claude a target image and have it screenshot its own output, compare, and iterate. Each round usually closes some of the gap faster than you could nudge it by hand. But a screenshot only checks how it looks. It can't tell you whether links work, whether it reads on a phone, whether the words are right, or whether someone using a keyboard can get around. So the loop has two parts: the look, and a short list of checks you do yourself on the real thing.

The long version: Screenshot loops ↗

Mac: Mac: Cmd-Shift-4 takes a screenshot of a region.

Windows: Windows: Win+Shift+S takes a screenshot of a region.

Do this

0/4

Checkpoints

▸You should now see a first version and a list of 3 differences from your target.
▸You should now see a shorter, more trivial list after Claude fixes its own list.
▸You should now see your 3 function checks marked pass or fail on the real output.

The three ways this goes wrong

Claude says it cannot take screenshots. — Use a setup that can: run the page locally and ask Claude to use a browser tool, or paste a screenshot of the result yourself each round.
The differences list does not shrink. — Make Claude name the exact element and value for each difference, not general impressions.
The target image is low quality. — Use a clear full-size screenshot of the target and say which parts matter.

Share what happened

Paste the round-1 differences list, the final list, and your 3 function checks with pass/fail for each.

Strip API keys, passwords, and tokens before you paste. Swap them for [KEY].

🔒 Don't paste confidential, personal-health, or payment info.