Screenshot loop: the harder case
Build-along · ~12 min at your own keyboard
You ran the screenshot loop in B5. This time, no step-by-step: run it yourself on a harder target, and add what the screenshot misses. Pick a target with content that changes shape — a pricing table, a form, a page with a long list — and check your version at phone width as well as desktop. Before you start, write your own stop rule and your own function checks. The new skill is deciding, without prompts, when the look is close enough and what else has to be true.
The long version: Design from a screenshot ↗
Mac: Mac: Shift+Command+4 drags a screenshot to your Desktop.
Windows: Windows: Windows key+Shift+S drags a screenshot to the clipboard. Paste it into Paint and save as png.
Do this
0/4Checkpoints
- ▸You should now see your stop rule and function checks written before the build.
- ▸You should now see the gap list shrink across your rounds.
- ▸You should now see your checks run at desktop and phone width.
- ▸You should now see one line on what this target needed that the first one didn't.
The three ways this goes wrong
- Claude says it cannot read the image. — Check the file type is png or jpg and the size is under about 4MB. Re-save a smaller copy.
- It matches the screenshot at desktop size and breaks at phone width. — That's the point of this lesson. Ask what should happen on a small screen (stack, scroll, hide a column), decide, then rebuild.
- You keep going round after round. — Go back to the stop rule you wrote. If the remaining gaps don't break it, stop.
Share what happened
Paste your stop rule, your function checks with pass/fail at both widths, the first and last gap lists, and your one-line comparison with the B5 attempt.
Strip API keys, passwords, and tokens before you paste. Swap them for [KEY].
🔒 Don't paste confidential, personal-health, or payment info.