Screenshot to UX Critique

1. 01

   Screenshot

   Full-page capture at 1x with real content

2. 02

   Context

   What it is, who uses it, what it should achieve

3. 03

   Six-lens critique

   Hierarchy, clarity, a11y, consistency, trust, action

4. 04

   Task list

   3 highest-impact fixes, specific and shippable

Why screenshots are underused

Designers look at interfaces every day. Competitor sites, inspiration, their own work, other teams’ dashboards. But most of the time, looking stays as looking.

The observation never becomes structured feedback. The screenshot sits in a folder, a Slack thread, or a Figma frame. Nobody turns it into something actionable.

AI changes that. You can take any screenshot, add context, and get a structured critique in 60 seconds. Not a vague “looks nice.” A specific breakdown of what works, what does not, and what to fix.

What you need

• A screenshot of any interface (your own work, a competitor, an app you are evaluating)
• Claude, ChatGPT, or any multimodal AI that accepts images
• 5 minutes

The critique is only as good as the context

If you drop a screenshot into Claude and say “critique this,” you will get generic feedback. The AI does not know who the users are, what the page is trying to achieve, or what matters most.

Good context turns vague feedback into useful feedback.

Always include:

• What the screen is. Login page, pricing page, dashboard, onboarding flow.
• Who uses it. Designers, developers, enterprise buyers, first-time visitors.
• What it should achieve. Get signups, explain a feature, build trust, reduce churn.
• What you care about most. Hierarchy, accessibility, conversion, visual polish, consistency.

The six-lens framework

Use these six lenses to structure your critique request. You do not need all six every time. Pick the ones that matter for your situation.

1. Hierarchy

Is the most important thing the most visible thing? Can a user tell in 3 seconds what this page is about and what to do next?

What to check:

• Is there a clear primary action?
• Does the visual weight match the content importance?
• Are secondary elements actually secondary?

2. Clarity

Can a new user understand what they are looking at without explanation?

What to check:

• Are labels clear and specific?
• Is the copy self-explanatory?
• Are icons meaningful or decorative?
• Is the navigation intuitive?

3. Accessibility

Can people with different abilities use this effectively?

What to check:

• Color contrast ratios
• Touch target sizes
• Text readability at different sizes
• Missing alt text or labels
• Keyboard navigation assumptions

4. Consistency

Does everything follow the same rules?

What to check:

• Are similar elements styled the same way?
• Do spacing and alignment follow a visible grid?
• Are button styles, font sizes, and colors consistent?
• Does it look like one designer made it or five?

5. Trust

Does the page feel credible and professional?

What to check:

• Is there social proof where it matters?
• Are error states handled gracefully?
• Does the design feel polished or rushed?
• Are there broken patterns that reduce confidence?

6. Action

Does the page make the next step obvious and easy?

What to check:

• Is the CTA visible and specific?
• Are there too many competing actions?
• Is the form or flow as short as possible?
• Does the page reduce friction or add it?

Prompt templates

Quick audit (2 minutes)

Look at this screenshot. It is a [type of page] for [audience].
The goal is [what the page should achieve].

Give me a quick UX audit covering:
1. What works well (2-3 things)
2. What does not work (3-5 specific issues)
3. One change that would have the biggest impact

Be specific. Reference exact elements in the screenshot.

Deep accessibility review

Review this screenshot for accessibility issues.

Check:
- Color contrast (estimate ratios where possible)
- Touch/click target sizes
- Text readability
- Missing labels or alt text
- Any elements that would fail WCAG 2.1 AA

For each issue, explain what is wrong, why it matters,
and what the fix should be.

Conversion critique

This is a [landing page / pricing page / signup flow] for [audience].
The goal is to get users to [desired action].

Evaluate it as a conversion tool:
1. Is the value proposition clear in the first viewport?
2. Are objections addressed before the CTA?
3. Is the CTA specific and visible?
4. Is there unnecessary friction?
5. What would you change to increase the conversion rate?

Consistency check

Review this screenshot against common design system patterns.

Check for:
- Inconsistent spacing or alignment
- Mixed button styles or typography
- Color usage that breaks a visible pattern
- Elements that look like they came from a different design

List each inconsistency with its location and what the
consistent version should look like.

What AI catches well

• Hierarchy problems (buried CTAs, weak headings, competing elements)
• Spacing inconsistencies (uneven padding, broken grid alignment)
• Accessibility surface issues (low contrast, small targets, missing labels)
• Copy issues (vague CTAs, unclear labels, generic headlines)
• Conversion friction (too many steps, too many choices, unclear next action)

What still needs human judgment

• Whether the design matches the brand intent
• Whether the interaction flow feels right in context
• Whether the visual direction is distinctive enough
• Cultural or audience-specific nuances
• Whether the design solves the right problem in the first place

AI gives you the audit. You provide the judgment.

Turning critique into tasks

A critique is only useful if it leads to action. After getting AI feedback, turn it into a task list:

1. Sort by impact. Which issues affect the most users or the core goal?
2. Group by effort. Quick fixes (copy, color, spacing) vs structural changes (layout, flow, navigation).
3. Prioritize ruthlessly. Fix 3 high-impact issues before touching 10 minor ones.
4. Be specific. “Fix the CTA” is not a task. “Change the CTA from ‘Submit’ to ‘Start free trial’ and increase button size to 48px height” is a task.

Repeat the loop weekly on your own work. Run it on competitors monthly. It takes 5 minutes and catches things you stop seeing after staring at the same screens for weeks.

Exercise

Run a six-lens critique on your own live page

20 min

1. Capture and critique with full context, not 'critique this'

   Take a full-page screenshot of a live page you own (your homepage, a pricing page, an onboarding screen). Paste the prompt and fill in the brackets with your real context. Attach the screenshot. Read the critique. Notice how specific it is compared to what you would get from “critique this page”.

   • Feedback is structured by the lenses you picked, not a generic bullet list
   • At least three issues reference specific elements (“the green CTA in the hero”, “the third column header”), not vague observations
   • The “one change” recommendation points at a structural issue, not a cosmetic one
   • At least one piece of feedback makes you mildly defensive. Defensiveness is usually a signal it is worth investigating.

   [attach full-page screenshot]
   
   Look at this screenshot. It is a [page type] for [audience].
   The goal is [what the page should achieve].
   The things I care about most right now are [pick 2 or 3 of: hierarchy, clarity, accessibility, consistency, trust, action].
   
   Give me a structured critique covering only those lenses. For each lens:
   - 2 things that work
   - 3 to 5 specific issues (reference exact elements in the screenshot)
   - 1 change that would have the biggest impact
   
   End with ONE single change that would most improve the page overall.

   Copy critique prompt

2. Turn the critique into three shipped fixes by end of day

   Pick the three highest-impact issues from the critique. Make each one specific (“change CTA from Submit to Start free trial and increase to 48px height”, not “fix the CTA”). Ship all three today. A critique that does not turn into shipped changes is just analysis. The exercise is only complete when the live page has changed.

   • Three fixes are live on the page within the session
   • Each fix is specific enough that someone else could have implemented it from your notes
   • You took a new screenshot of the updated page and compared it to the original
   • At least one of the fixes was something you had stopped seeing before the critique