Design Critique

# /design-critique

> If you see unfamiliar placeholders or need to check which tools are connected, see [CONNECTORS.md](../../CONNECTORS.md).

Get structured design feedback across multiple dimensions.

## Usage

``` /design-critique $ARGUMENTS ```

Review the design: @$1

If 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.

## What I Need From You

- **The design**: Figma URL, screenshot, 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 Framework

### 1. First Impression (2 seconds) - What draws the eye first? Is that correct? - What's the emotional reaction? - Is the purpose immediately clear?

### 2. Usability - Can the user accomplish their goal? - Is the navigation intuitive? - Are interactive elements obvious? - Are there unnecessary steps?

### 3. Visual Hierarchy - Is there a clear reading order? - Are the right elements emphasized? - Is whitespace used effectively? - Is typography creating the right hierarchy?

### 4. Consistency - Does it follow the design system? - Are spacing, colors, and typography consistent? - Do similar elements behave similarly?

### 5. Accessibility - Color contrast ratios - Touch target sizes - Text readability - Alternative text for images

## How to Give Feedback

- **Be specific**: "The CTA competes with the navigation" not "the layout is confusing" - **Explain why**: Connect feedback to design principles or user needs - **Suggest alternatives**: Don't just identify problems, propose solutions - **Acknowledge what works**: Good feedback includes positive observations - **Match the stage**: Early exploration gets different feedback than final polish

## Output

```markdown ## Design Critique: [Design Name]

### Overall Impression [1-2 sentence first reaction — what works, what's the biggest opportunity]

### Usability | Finding | Severity | Recommendation | |---------|----------|----------------| | [Issue] | 🔴 Critical / 🟡 Moderate / 🟢 Minor | [Fix] |

### Visual Hierarchy - **What draws the eye first**: [Element] — [Is this correct?] - **Reading flow**: [How does the eye move through the layout?] - **Emphasis**: [Are the right things emphasized?]

### Consistency | Element | Issue | Recommendation | |---------|-------|----------------| | [Typography/spacing/color] | [Inconsistency] | [Fix] |

### Accessibility - **Color contrast**: [Pass/fail for key text] - **Touch targets**: [Adequate size?] - **Text readability**: [Font size, line height]

### What Works Well - [Positive observation 1] - [Positive observation 2]

### Priority Recommendations 1. **[Most impactful change]** — [Why and how] 2. **[Second priority]** — [Why and how] 3. **[Third priority]** — [Why and how] ```

## If Connectors Available

If **~~design tool** is connected: - Pull the design directly from Figma and inspect components, tokens, and layers - Compare against the existing design system for consistency

If **~~user feedback** is connected: - Cross-reference design decisions with recent user feedback and support tickets

## Tips

1. **Share the context** — "This is a checkout flow for a B2B SaaS" helps me give relevant feedback. 2. **Specify your stage** — Early exploration gets different feedback than final polish. 3. **Ask me to focus** — "Just look at the navigation" gives you more depth on one area.