Skip to content
ExamsLibraryFor agentsConnect your agent
anti-patternsAnti-patterns·7/8

Screenshot critique

Critique the render, never your own code — single-purpose passes over screenshots at three widths, a fixed write-up per round, a fix order where later items cannot rescue earlier ones, and a three-round stop. Subtraction that leaves a page thin loses.

Raw markdown On GitHub

An agent that critiques the page it just wrote reads its own intentions back: the class names say "hero", so it sees a hero. Critique the render instead: screenshots at 1440, 768 and 390, first screen and full page, opened before the code. unslop-pass says what to strip and what to put back. This node is how to look, how to write it down, and when to stop.

Passes, one at a time

Make each pass on its own; blending them is how a page gets "looks good overall".

  1. One second, then five. Glance away: there should be exactly one answer (a word, an image, an object), not "a website". Then five seconds as a stranger: what is this, who is it for, what do I do next? (page-frame)
  2. Squint, then cover the logo — the two passes in unslop-pass. Then scroll: does the idea reach the pricing and the footer, or turn into stock blocks after the first screen?
  3. Edges. Follow the left edge of every text block down the page and count the distinct x positions. Two or three, reused on purpose, is a composition; six means things were placed one at a time.
  4. Frame. Equal margins, no half-empty section, no stretch of nothing taller than half a screen (page-frame).
  5. Sameness. Write one word per section's layout (split, list, grid, full-bleed, statement). The same word twice in a row, or three times on the page, is the template showing.
  6. Phone. Is the 390 screen its own composition, with its own crop and line breaks, or the desktop squeezed?
  7. Fullness and substance. Is each screen composed, or a narrow column of small text in dead ground? Does every section the brief asked for deliver its information completely, at a readable size?
  8. Collisions. Anything over a headline or a button at any scroll position; anything off the phone's edge.

Write it down, every round

ROUND n
Seen in one second: …
Idea (one sentence): …
Layout words by section: hero=… / …=… / …
Top three problems, most visible first — screenshot, finding, fix:

Name findings the way a designer would to a colleague: "the supporting paragraph starts 40 px left of the headline's edge", "the testimonials are the third split in a row". "Could be more polished" is not a finding.

Fix in order, stop at three

Fix idea → hierarchy → composition → type → imagery → colour → detail → motion. Later items cannot rescue earlier ones: no amount of kerning saves a page with no idea. Run at most three rounds: critique, fix the top three, re-shoot, critique. Stop early when a round finds nothing a stranger would notice, and if the last round still falls short, report the remaining problems plainly instead of rounding up.

Gotcha

Subtraction can overshoot. In taste-skill's blind tests a richer page full of template devices beat a cleaner page that was thin, every time, and its own skill lost to the no-skill baseline on average across five rounds (6.6–7.7 against 7.5–8.0). Removing tells is half the job. Passes 7–8 are where you check the page kept its substance; when a deletion leaves a gap, enlarge what remains or close the gap, and never refill it with an ornament.

Sources

  • Leonxlnx, taste-skill v2.1.1 (MIT, HEAD a9c73c3): skills/taste-skill/references/critique.md §1, §4–6 (the passes, the round write-up, the fix order, the three-round stop) and references/research.md §11 (five rounds, 16 briefs, one model juror per brief, so single scores carry about half a point of noise). Its Awwwards-weighted scores and caps encode its house style and are not adopted.
  • Related: unslop-pass, page-frame, ai-default-tells, review-format.

anti-patternsreviewcritiquescreenshotsproceduremarketing