📸 The screenshot loop

In module 5.1, you saw why an agent’s front end comes out “generic”: it writes the code by looking only at the code, never at the result. It’s like painting a picture blindfolded — you know you moved the brush, but you don’t know whether you got the color, stroke, or proportions right. The code can be syntactically perfect and, even so, the rendered page (what actually appears on screen when the browser draws the HTML/CSS) can look bad, be broken, or miss what you asked for.

New here? Render is the process of the browser turning code (HTML, CSS, JavaScript) into pixels on the screen — it's the difference between "reading the recipe" and "tasting the finished dish." An agent that only reads the recipe never knows whether the dish turned out well.

The screenshot loop solves exactly this: it gives the agent a way to “taste the dish.” It writes the code, looks at the rendered result through a screenshot, compares it with what was requested, and makes corrections. Without this loop, the agent delivers on the first try and hopes for the best. With it, the agent iterates—repeats the cycle several times—until the result meets the goal. This is, by itself, the biggest lever for visual quality in this course.

The loop has five stages that repeat in a circle — it’s not a straight line that ends, it’s a wheel that keeps turning until the result is good. Each complete turn is a iteration (a repetition of the same process, trying to improve a little each time).

Caption: the loop always runs in the same order — write, start the server, capture, compare, fix — and returns to the beginning (cyan arrow) until the “did it meet the goal?” question in the center gets a yes. Each complete cycle is an iteration.

On the first pass through the loop, the agent usually gets the overall structure right — the blocks are in the right places, the text is there — but misses details that only show up visually: tight spacing, poor contrast, elements "stuck" together. This is exactly the kind of mistake that goes unnoticed when reading only the code, but jumps out in a screenshot.

On the second and third passes, the agent is already fixing refinements: button alignment, font size on mobile (what changes when the screen is smaller — called responsive, when the layout adapts to the screen size), hover color (the visual effect when the mouse moves over a button). This incremental polish—small fixes, repeated—is what separates a “generic” result from an “almost professional” one.

In practice, you don't need to "teach" Claude Code to start a server and take a screenshot — it already has that capability when you ask. Your job is to make the request in a way that drives the full loop: give it the visual goal (the reference), explicitly ask it to run the server, capture, compare, and fix — and repeat until it matches.

Caption: the same sequence as the circular diagram, now shown as a timeline — the cyan arc at the top shows the cycle returning to stage 1.

Crie a página <nome-da-pagina.html> com <descrição do que ela deve ter — seções, textos, botões>.

Depois de escrever o código:
1. Suba um servidor local nesta pasta (ex.: porta <3000>).
2. Abra a página e tire um screenshot da tela cheia.
3. Compare o screenshot com este objetivo: <descreva o visual esperado,
   ou aponte a referência/imagem/marca a seguir>.
4. Se houver diferença (cor, espaçamento, alinhamento, texto cortado),
   corrija o código.
5. Tire um novo screenshot e repita os passos 3-4 até o resultado bater
   com o objetivo. Não pare na primeira tentativa.

Ao final, me mostre o último screenshot e liste o que foi corrigido em cada volta.

The screenshot loop only works if you feed it the right information. The most common mistakes aren’t technical— they’re about how you make your request. Here are the two that come up most often.

Before considering any agent page “ready,” go through the checklist below. It summarizes the five stages of the loop as a practical check.