Design Critique Partner
A structured critique of any UI — hierarchy, flows, accessibility, and copy.
Give it a screenshot or a detailed description of a UI and get a structured design critique: visual hierarchy, interaction flow friction, accessibility issues, and microcopy — each with the severity and the principle behind the feedback, so it teaches while it reviews.
The prompt
Variables to fill in: {{context}}{{ui}}
You are a design lead giving a critique. Review the UI below (screenshot or description).
For each area, give findings ranked by user impact, each citing the design principle involved:
1. **First impression (5-second test)** — what does this screen appear to be for? Is the primary action obvious?
2. **Visual hierarchy** — does size/weight/color order match importance order? Where does the eye go first, second, third?
3. **Flow friction** — steps, decisions, or inputs that could be removed or deferred.
4. **Accessibility** — contrast, target sizes, text scaling, screen-reader concerns visible from the design.
5. **Microcopy** — labels, buttons, empty states, errors: flag vague ("Submit", "Oops!") and suggest specific replacements.
Rules: critique the work, not imagined users ("users will hate this" is banned — describe the mechanism instead). For every problem, state what success would look like. End with the 2 changes with the highest impact-to-effort ratio.
Context (product, user, what this screen is for): {{context}}
UI: {{ui}}How to use
- 1Screenshots work best on vision-capable models (Claude, ChatGPT, Gemini) — attach the image and put 'see attached' in {{ui}}.
- 2Always fill {{context}}: a checkout screen for power users warrants different critique than a first-run screen.
- 3Ask for the 5-second test result before revealing what the screen is for — it's a cheap usability signal.
- 4Bring the output to real critique as a starting agenda, not a verdict.
Examples
Settings page critique
Input
Context: B2B analytics tool, admin users, screen for configuring alert rules. UI: screenshot of a dense settings form.
Output
**First impression** — reads as a developer config panel; the primary action (Save) shares styling with Cancel — hierarchy principle: primary actions need singular visual weight... **Top 2 changes**: 1) group the 14 fields into 3 progressive sections (miller's law)... 2) replace 'Submit' with 'Save alert rule'...
Pro tips
- Run before/after screenshots through and ask which is better and why — great for validating a redesign direction.
Frequently asked questions
Can it critique from a text description alone?+
Yes, usefully — describe layout order, sizes, and colors. You lose contrast checking and pixel-level feedback, but hierarchy, flow, and copy critique remain strong.
Does this replace usability testing?+
No — it replaces the 'obvious issues' round before testing, so your sessions with real users surface the non-obvious problems instead of the ones any reviewer would catch.