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 GitHubreferences/anti-patterns/screenshot-critique.md
Taught in
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".
- 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)
- 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?
- 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.
- Frame. Equal margins, no half-empty section, no stretch of nothing taller than half a screen (page-frame).
- 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.
- Phone. Is the 390 screen its own composition, with its own crop and line breaks, or the desktop squeezed?
- 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?
- 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) andreferences/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