home/coding/ch04-screenshot-loop-2

Ch04 Screenshot Loop

GPTClaudeDeepSeek··▲ 1,360 copies·updated 2026-07-14

ch04-screenshot-loop-2.prompt

# Chapter 4 — Fix the Ugly (the Screenshot Verification Loop)

> **Hours 9-14.** The book's signature workflow, and eighteen prompts around it.

**The premise:** Claude does not have eyes. "It processes text. Code is text. HTML
is text. CSS is text. Claude can write pixel-perfect CSS for a button, but it
cannot look at the button and tell you whether it's ugly." (ch04:11)

When Claude says "I've reviewed the code and the layout appears correct," it is not
lying. The code *is* correct. The code produces something that looks like garbage.
Claude can't tell the difference because it never sees the output.

**The fix is not a better description.** "Visual design is spatial: spacing, font
weight, contrast, hierarchy, all taken in at once when you look at a page. Text
describes them one at a time. Claude gets the words. It doesn't get the picture."
(ch04:17)

---

## ⭐ The Screenshot Verification Loop — the four steps

**ch04:23-61** · See [`docs/screenshot-loop.md`](../docs/screenshot-loop.md) for the diagram.

### Step 1 — Claude writes the code

when to use it

Community prompt sourced from the open-source GitHub repo regardo911/claude-code-beginners (MIT). A "Ch04 Screenshot Loop" style prompt — adapt the placeholders and specifics to your task. Imported as-is and not independently retested here, so check the output before relying on it.