Design Critique

Run a structured design critique session using a framework that covers usability, visual design, accessibility, and consistency.

When to Use

  • During design reviews before handoff to engineering
  • When evaluating a new component or feature design
  • For self-critique when working solo without a team review
  • When comparing multiple design options

The Prompt

Run a structured design critique on the following design. Act as a senior product designer with 15 years of experience.

Evaluate across these dimensions:

1. **Purpose & clarity** — Is it immediately clear what this is and what the user should do? Rate 1-5.
2. **Visual hierarchy** — Does the layout guide the eye in the right order? Are primary actions prominent? Rate 1-5.
3. **Consistency** — Does it follow the design system? Are spacing, colors, typography, and components used correctly? Rate 1-5.
4. **Usability** — Can users complete the task efficiently? Are there unnecessary steps or confusion points? Rate 1-5.
5. **Accessibility** — Are contrast, touch targets, focus states, and content structure sufficient? Rate 1-5.
6. **Edge cases** — What happens with long text, empty states, error states, loading states, and mobile viewports? Rate 1-5.

For each dimension:
- Give a score (1-5)
- Explain what works well
- Explain what needs improvement
- Provide one specific, actionable suggestion

End with:
- Overall score (average)
- Top 3 priorities to fix before shipping
- One thing that should NOT be changed

Here's the design:
[paste a screenshot URL, describe the design, or paste the code]

Example Output

## Design Critique: Settings Page

| Dimension         | Score | Summary                                      |
|-------------------|-------|----------------------------------------------|
| Purpose & Clarity | 4/5   | Clear layout, but section labels are generic  |
| Visual Hierarchy  | 3/5   | Save button competes with secondary actions    |
| Consistency       | 4/5   | Follows token system, one rogue font-size      |
| Usability         | 4/5   | Good flow, but no confirmation after save      |
| Accessibility     | 3/5   | Missing focus ring on toggle switches           |
| Edge Cases        | 2/5   | No loading state, long names break layout       |

**Overall: 3.3 / 5**

### Top 3 Priorities
1. Add loading + success states for the save action
2. Fix focus rings on all toggle switches
3. Handle long-name overflow with truncation + tooltip

### Do Not Change
The section grouping and card layout is well-organized and scannable.