Design Critique
Get structured, multi-dimension design critique on Figma links, screenshots, or descriptions before you ship confusing UI.
Overview
Design Critique is an agent skill most often used in Validate (also Build, Ship) that delivers structured feedback on usability, visual hierarchy, and consistency from Figma links or screenshots.
Install
npx skills add https://github.com/anthropics/knowledge-work-plugins --skill design-critiqueWhat is this skill?
- Five-dimension critique framework: first impression, usability, visual hierarchy, consistency, and polish
- Accepts Figma URLs, screenshots, or written descriptions with optional focus areas (mobile, onboarding)
- Context-aware review: product purpose, audience, and design stage from exploration to final polish
- Structured questions on navigation, interactive affordances, whitespace, and emotional first read
- Slash-style invocation with argument hint for design asset or link
- 5 critique dimensions including first-impression and usability
Adoption & trust: 2.2k installs on skills.sh; 19.6k GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You have a mockup or live screen but no consistent rubric to judge whether users will understand it or accomplish their goal.
Who is it for?
Solo builders reviewing onboarding, dashboards, or marketing pages at any fidelity from wireframe to near-final UI.
Skip if: Teams that already have a formal design-review ritual with assigned designers and signed-off specs—skip when you only need pixel-perfect implementation from an approved file.
When should I use this skill?
User says review this design, critique this mockup, what do you think of this screen, or shares a Figma link or screenshot for feedback.
What do I get? / Deliverables
You get dimension-by-dimension critique with prioritized issues so you can refine the design or ticket fixes before users hit confusion in production.
- Structured multi-section design critique
- Prioritized usability and hierarchy notes
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
Design critique fits earliest when you are still shaping flows and screens in exploration and refinement, before code is locked in. Prototype subphase is where mockups and screen flows get reviewed for usability and hierarchy before full build.
Where it fits
Critique an exploration mockup to see if the primary CTA and value prop read in two seconds.
Review a shipped-looking dashboard screenshot for hierarchy before you merge the PR.
Final polish pass on marketing or app shell screens before launch.
Focus critique on a landing hero and signup flow for clarity and friction.
How it compares
Structured design-review checklist in chat, not an automated Figma linter or accessibility scanner.
Common Questions / FAQ
Who is design-critique for?
Indie and solo product builders who design their own UI or work from Figma without a standing critique partner.
When should I use design-critique?
During Validate when refining prototypes, during Build while polishing frontend screens, or before Ship when doing a final UX pass—especially after sharing a Figma link or screenshot.
Is design-critique safe to install?
Treat it like any third-party skill: review the Security Audits panel on this Prism page and avoid pasting confidential customer data into shared critique sessions you do not control.
SKILL.md
READMESKILL.md - 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.