Design Critique

What This Skill Does

This skill provides structured feedback on designs across multiple dimensions. It assesses first impressions, usability, visual hierarchy, consistency, and accessibility. It's designed for designers, product managers, and anyone involved in the design process who wants to improve the quality of their designs.

When to Use

During design reviews with stakeholdersWhen seeking feedback on a new design conceptTo identify areas for improvement in an existing designWhen training junior designersEvaluating design proposals

Key Features

Provides feedback on first impression, usability, and visual hierarchyChecks for consistency with design systemsAssesses accessibility considerationsGives specific and actionable feedbackSuggests alternatives and explains reasoningAcknowledges what works well in the design

If you see unfamiliar placeholders or need to check which tools are connected, see 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

Design Critique: [Design Name]

Overall Impression

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

Usability

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

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

[Most impactful change] — [Why and how] [Second priority] — [Why and how] [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

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

If you see unfamiliar placeholders or need to check which tools are connected, see CONNECTORS.md.

Get structured design feedback across multiple dimensions.