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.