Design Critique

1---2name: design-critique3description: Get structured design feedback on usability, hierarchy, and consistency. Trigger with "review this design", "critique this mockup", "what do you think of this screen?", or when sharing a Figma link or screenshot for feedback at any stage from exploration to final polish.4argument-hint: "<Figma URL, screenshot, or description>"5---6 7# /design-critique8 9> If you see unfamiliar placeholders or need to check which tools are connected, see [CONNECTORS.md](../../CONNECTORS.md).10 11Get structured design feedback across multiple dimensions.12 13## Usage14 15```16/design-critique $ARGUMENTS17```18 19Review the design: @$120 21If a Figma URL is provided, pull the design from Figma. If a file is referenced, read it. Otherwise, ask the user to describe or share their design.22 23## What I Need From You24 25- **The design**: Figma URL, screenshot, or detailed description26- **Context**: What is this? Who is it for? What stage (exploration, refinement, final)?27- **Focus** (optional): "Focus on mobile" or "Focus on the onboarding flow"28 29## Critique Framework30 31### 1. First Impression (2 seconds)32- What draws the eye first? Is that correct?33- What's the emotional reaction?34- Is the purpose immediately clear?35 36### 2. Usability37- Can the user accomplish their goal?38- Is the navigation intuitive?39- Are interactive elements obvious?40- Are there unnecessary steps?41 42### 3. Visual Hierarchy43- Is there a clear reading order?44- Are the right elements emphasized?45- Is whitespace used effectively?46- Is typography creating the right hierarchy?47 48### 4. Consistency49- Does it follow the design system?50- Are spacing, colors, and typography consistent?51- Do similar elements behave similarly?52 53### 5. Accessibility54- Color contrast ratios55- Touch target sizes56- Text readability57- Alternative text for images58 59## How to Give Feedback60 61- **Be specific**: "The CTA competes with the navigation" not "the layout is confusing"62- **Explain why**: Connect feedback to design principles or user needs63- **Suggest alternatives**: Don't just identify problems, propose solutions64- **Acknowledge what works**: Good feedback includes positive observations65- **Match the stage**: Early exploration gets different feedback than final polish66 67## Output68 69```markdown70## Design Critique: [Design Name]71 72### Overall Impression73[1-2 sentence first reaction — what works, what's the biggest opportunity]74 75### Usability76| Finding | Severity | Recommendation |77|---------|----------|----------------|78| [Issue] | 🔴 Critical / 🟡 Moderate / 🟢 Minor | [Fix] |79 80### Visual Hierarchy81- **What draws the eye first**: [Element] — [Is this correct?]82- **Reading flow**: [How does the eye move through the layout?]83- **Emphasis**: [Are the right things emphasized?]84 85### Consistency86| Element | Issue | Recommendation |87|---------|-------|----------------|88| [Typography/spacing/color] | [Inconsistency] | [Fix] |89 90### Accessibility91- **Color contrast**: [Pass/fail for key text]92- **Touch targets**: [Adequate size?]93- **Text readability**: [Font size, line height]94 95### What Works Well96- [Positive observation 1]97- [Positive observation 2]98 99### Priority Recommendations1001. **[Most impactful change]** — [Why and how]1012. **[Second priority]** — [Why and how]1023. **[Third priority]** — [Why and how]103```104 105## If Connectors Available106 107If **~~design tool** is connected:108- Pull the design directly from Figma and inspect components, tokens, and layers109- Compare against the existing design system for consistency110 111If **~~user feedback** is connected:112- Cross-reference design decisions with recent user feedback and support tickets113 114## Tips115 1161. **Share the context** — "This is a checkout flow for a B2B SaaS" helps me give relevant feedback.1172. **Specify your stage** — Early exploration gets different feedback than final polish.1183. **Ask me to focus** — "Just look at the navigation" gives you more depth on one area.