Screenshot Design Review

Screenshot Design Review is a free agent skill maintained by Scopeful. It teaches an AI coding agent such as Claude Code, Cursor, Windsurf or Codex how to drive this tool correctly, so you do not have to re-explain it every session. Every published Scopeful skill is free and the install command is public, with no sign-in required. Scopeful also tracks hand-verified USD pricing for 39 AI creative tools at https://www.scopeful.org/tools.

Get design feedback on a screenshot of your UI.

Tags: design, ui-review

Reference

name: screenshot-design-review description: Use this skill whenever the user shares a screenshot of a UI and wants design feedback. Triggers include "review this design", "why does this look off", "roast my landing page", "is this accessible", "design feedback", "what's wrong with this UI", or any screenshot of a website, app, dashboard, or landing page with a request for critique. Produces a prioritized fix list with concrete values, not vibes.

Screenshot Design Review

"Make it pop" is not feedback. This skill turns a screenshot into a ranked list of specific fixes with concrete values — the review a good design lead would leave.

Standards: WCAG 2.2 AA (current standard as of 2026; WCAG 3 is still draft). Platform targets: 44pt (iOS HIG) / 48dp (Material) / 24px absolute minimum (WCAG 2.5.8).

Workflow

1. Establish context first (ask only what the screenshot doesn't show): What is it (landing page / app / dashboard)? What's the ONE action users should take? Desktop or mobile?
2. Look systematically — run the seven lenses below in order. Zoom into regions; don't review from a squint.
3. Output the ranked fix list — worst problem first, every item concrete.

The seven lenses

1. Hierarchy — the 5-second test

Blur your eyes: what reads first, second, third? It should be: value proposition → primary action → supporting proof. If the logo or a decorative image wins, that's fix #1. One primary CTA per screen; competing same-weight buttons split conversion.

2. Typography

• More than 2 typefaces or ~4 sizes on screen = noise. Name which to cut.
• Body text: 16px minimum on web; line-height ~1.5; line length 45–75 characters. Flag walls of text over 90 chars/line.
• Hierarchy by size AND weight: if H2 and body are both regular-weight and 4px apart, say so with target values ("H2 → 24px/600").

3. Spacing and alignment

• Find the grid; flag everything off it (edges that almost align are worse than ones that clearly don't — name the exact elements).
• Spacing must follow a scale (4/8px steps). Flag arbitrary gaps: "card padding is 13px top, 19px bottom — use 16/16".
• Related items closer than unrelated ones (proximity). Labels must sit visibly closer to their own field than to the previous one.

4. Color and contrast

• Body text ≥ 4.5:1 contrast; large text (24px+/19px bold) ≥ 3:1; UI components/icons ≥ 3:1 (WCAG 2.2 AA). Estimate from the screenshot and flag "light grey on white" (#999 on #fff = 2.8:1 — fails).
• One accent color doing one job: if the CTA color also colors links, icons, and badges, the CTA stops popping.
• Never color alone for meaning (error states need an icon or text, not just red).

5. Interactive elements

• Touch targets: ≥ 44pt/48dp mobile, ≥ 24px anywhere. Flag icon buttons that look ~16px.
• Buttons look like buttons; links look like links. Flag ghost buttons on busy backgrounds and disabled-looking active buttons.
• Visible states: does anything indicate hover/focus/current page? Missing focus indicators fail WCAG 2.4.7.

6. Content

• Vague CTAs die: "Submit"/"Learn more" → verb + outcome ("Start free trial", "Get the report").
• Headlines: benefit, not category ("Ship videos 10× faster" beats "AI Video Platform").
• Flag lorem ipsum, orphan words in headlines, ALL-CAPS body text, and three different date/number formats.

7. Trust and polish

• Inconsistent corner radii, mixed icon styles (outline + filled), stretched images, fake-looking stock photos, misaligned favicons/logos — each small, together they read "unfinished". List them; these are the cheapest wins.

Output format

VERDICT: [one sentence — the single biggest problem]

FIX FIRST (conversion/usability blockers)
1. [element] — [problem] → [concrete fix with values]

FIX NEXT (polish)
...

WORKS — KEEP
- [2-3 things done right, so they don't get "fixed" away]

ACCESSIBILITY FLAGS
- [contrast/target-size/focus items with the failing values]

Every item names the element, the problem, and the exact fix. "Increase whitespace" is banned; "double the gap between hero and logos row to ~64px" is the standard.

Boundaries

Review only what's visible: static screenshots can't show performance, motion, or real responsive behavior — say so instead of guessing. If the screenshot is too low-res to read text, ask for a better one before reviewing.