design-critique

# /design-critique 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.