Critiquing Design with Claude Code
1. The input determines what you can review
You can give Claude Code screenshots, Figma links, or source code to request a design review.
- Screenshots: Useful for quickly checking a screen's visual hierarchy, usability, and accessibility.
- Figma links: Allow a review informed by detailed design information from a file or a specific frame.
- Source code: Lets Claude run a local preview and examine the actual interface alongside its product context. This is the approach the author finds most useful.
2. Five reviews to choose from based on your goal
Specifying what you want to improve makes it easier to turn feedback into concrete changes.
- UI review: Identify the five most important issues in visual hierarchy, spacing, typography, color, and consistency, ranked by impact.
- UX review: Find unclear interactions, unnecessary friction, and places where users might hesitate or make mistakes.
- Conversion review: Examine a landing page's value proposition, CTA visibility, trust signals, cognitive load, and other potential barriers to conversion.
- Onboarding review: Look for unnecessary steps, premature information requests, and insufficient guidance or feedback to identify opportunities to shorten the time until users experience their first value.
- Reference comparison: Compare hierarchy, layout, typography, spacing, and other qualities against a reference. Focus on identifying weaknesses in the current design rather than copying the reference.
3. Check the scope of the default critique
The default `/design:design-critique` focuses on overall impression, usability, visual hierarchy, and accessibility.
- In the author's experiment, a request for a conversion-focused critique still returned a general design review.
- For a specific goal such as conversion or onboarding, it helps to start with a separate prompt that states the evaluation criteria rather than adding the request to the default skill.
