Design Critique Reviewer
Structured design feedback across usability, visual hierarchy, and consistency
You finished a design and need feedback, but your team just says 'looks good' or gives vague opinions. You need structured critique — is the hierarchy clear? Is it accessible? Is it consistent? — not compliments.
Who it's for: solo designers without a team to review their work, junior designers wanting to level up, design leads doing review passes, product teams evaluating UI changes, anyone who needs honest design feedback before shipping
Example
"Critique this dashboard design" → Structured feedback across 5 dimensions: first impression, usability issues, visual hierarchy problems, consistency gaps, and accessibility violations — with severity ratings and specific fix suggestions
CLAUDE.md Template
New here? 3-minute setup guide → | Already set up? Copy the template below.
npx ccplaybooks add design-critique-reviewer# Design Critique Reviewer
## Your Role
You are a senior design reviewer providing structured feedback on designs across multiple dimensions: usability, visual hierarchy, consistency, and accessibility. You adapt your feedback depth to the design stage (exploration, refinement, or final polish).
## What I Need From You
- **The design**: Screenshot, Figma export, or detailed description
- **Context**: What is this? Who is it for? What stage (exploration, refinement, final)?
- **Focus** (optional): "Focus on mobile" or "Focus on the onboarding flow"
## Critique FrameworkGet new playbooks like this one
One email a week with new Claude Code workflows. Free, like everything here.
No spam. Unsubscribe anytime.
What This Does
Provides structured, professional design feedback across five key dimensions: first impression, usability, visual hierarchy, consistency, and accessibility. The assistant adapts its critique depth based on the design stage -- giving broad directional feedback for early explorations and detailed, specific fixes for final polish reviews.
Quick Start
Step 1: Download the Template
Click Download above to get the CLAUDE.md file.
Step 2: Set Up Your Project
Create a project folder and place the template inside:
mkdir -p ~/Projects/design-critique
mv ~/Downloads/CLAUDE.md ~/Projects/design-critique/
Add your design screenshots, Figma exports, or mockup images to the same folder.
Step 3: Start Working
cd ~/Projects/design-critique
claude
Say: "Review this design and give me structured feedback"
Critique Framework
The review follows a structured framework covering five areas:
- First Impression (2 seconds) -- What draws the eye first? Is the purpose immediately clear?
- Usability -- Can users accomplish their goal? Are interactive elements obvious?
- Visual Hierarchy -- Is there a clear reading order? Are the right elements emphasized?
- Consistency -- Does it follow the design system? Are spacing, colors, and typography consistent?
- Accessibility -- Color contrast, touch target sizes, text readability
Tips
- Share the context -- Saying "This is a checkout flow for a B2B SaaS" produces far more relevant feedback than a bare screenshot.
- Specify your stage -- Early exploration gets broad directional feedback. Final polish gets pixel-level detail.
- Ask for focus -- Requesting "Just look at the navigation" gives you deeper analysis on one area rather than surface-level coverage of everything.
- Acknowledge feedback is specific, not prescriptive -- The suggestions are starting points for design decisions, not mandates.
Example Prompts
"Review this mockup and give me structured design feedback"
"Critique this mobile onboarding flow -- focus on usability"
"What's the visual hierarchy like on this landing page? What draws the eye first?"
"This is a final polish review for our settings page. Check consistency and accessibility."
"Compare these two design options and tell me which is stronger for conversion"