Skill Tracer
Skills › Knowledge Work Plugins › design-critique

design-critique

skill · 118 lines · Apache-2.0 · design/skills/design-critique/SKILL.md

The facts

Its description

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.

The description the agent reads to decide when to use it.

From its settingsline 3

When it starts

Someone shares a design artifact — a Figma link, a screenshot, or a written description — and asks for feedback on it, at any stage from early exploration to final polish. The agent picks it when the ask is to review or critique a screen or mockup rather than to build, hand off, or audit it for compliance.

Things a person might say (the model's guesses)

  • “Here's the Figma link to our new checkout flow — what do you think?”
  • “Can you critique this mockup of the onboarding screen?”
  • “Review this design and tell me what isn't working.”

A model's summary of when it is used.

A model's reading

What it takes when started

<Figma URL, screenshot, or description>

What to type after its name when you start it.

From its settingsline 4

Stops for a person

1 line stops to ask a person

Lines that stop and wait for a person before going on. Found by matching words, so treat them as pointers.

Found by matching wordsline 21

What it leads to

Other skills this one hands off to, calls, requires or offers instead, as a model read them.

A model's reading

Licence

Apache-2.0, from LICENSE

The terms its author shares it under, which let it be shown here.

From the repositorylicence text

The text

Open on GitHub

Most marks come from matching words in the file, so treat them as pointers.

1---
2name: design-critique
3description: 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-critique
8
9> If you see unfamiliar placeholders or need to check which tools are connected, see [CONNECTORS.md](../../CONNECTORS.md).
11Get structured design feedback across multiple dimensions.

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

Raw lines 1 to 12
13## Usage
15```
16/design-critique $ARGUMENTS
17```
19Review the design: @$1
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.

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.

Raw lines 13 to 22
Involves a person ask the user :21
23## What I Need From You
25- **The design**: Figma URL, screenshot, or detailed description
26- **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"

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"
Raw lines 23 to 28
29## Critique Framework

Critique Framework

Raw lines 29 to 30
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?

1. First Impression (2 seconds)

  • What draws the eye first? Is that correct?
  • What's the emotional reaction?
  • Is the purpose immediately clear?
Raw lines 31 to 35
36### 2. Usability
37- Can the user accomplish their goal?
38- Is the navigation intuitive?
39- Are interactive elements obvious?
40- Are there unnecessary steps?

2. Usability

  • Can the user accomplish their goal?
  • Is the navigation intuitive?
  • Are interactive elements obvious?
  • Are there unnecessary steps?
Raw lines 36 to 41
42### 3. Visual Hierarchy
43- Is there a clear reading order?
44- Are the right elements emphasized?
45- Is whitespace used effectively?
46- Is typography creating the right hierarchy?

3. Visual Hierarchy

  • Is there a clear reading order?
  • Are the right elements emphasized?
  • Is whitespace used effectively?
  • Is typography creating the right hierarchy?
Raw lines 42 to 47
48### 4. Consistency
49- Does it follow the design system?
50- Are spacing, colors, and typography consistent?
51- Do similar elements behave similarly?

4. Consistency

  • Does it follow the design system?
  • Are spacing, colors, and typography consistent?
  • Do similar elements behave similarly?
Raw lines 48 to 52
54- Color contrast ratios
55- Touch target sizes
56- Text readability
57- Alternative text for images

5. Accessibility

  • Color contrast ratios
  • Touch target sizes
  • Text readability
  • Alternative text for images
Raw lines 53 to 58
Names a skill accessibility-review :53
59## How to Give Feedback
61- **Be specific**: "The CTA competes with the navigation" not "the layout is confusing"
62- **Explain why**: Connect feedback to design principles or user needs
63- **Suggest alternatives**: Don't just identify problems, propose solutions
64- **Acknowledge what works**: Good feedback includes positive observations
65- **Match the stage**: Early exploration gets different feedback than final polish

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
Raw lines 59 to 66
67## Output
69```markdown
70## Design Critique: [Design Name]
72### Overall Impression
73[1-2 sentence first reaction — what works, what's the biggest opportunity]
75### Usability
76| Finding | Severity | Recommendation |
77|---------|----------|----------------|
78| [Issue] | 🔴 Critical / 🟡 Moderate / 🟢 Minor | [Fix] |
80### Visual Hierarchy
81- **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?]
85### Consistency
86| Element | Issue | Recommendation |
87|---------|-------|----------------|
88| [Typography/spacing/color] | [Inconsistency] | [Fix] |
90### Accessibility
91- **Color contrast**: [Pass/fail for key text]
92- **Touch targets**: [Adequate size?]
93- **Text readability**: [Font size, line height]
95### What Works Well
96- [Positive observation 1]
97- [Positive observation 2]
99### Priority Recommendations
1001. **[Most impactful change]** — [Why and how]
1012. **[Second priority]** — [Why and how]
1023. **[Third priority]** — [Why and how]
103```

Output

## 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]
Raw lines 67 to 104
105## If Connectors Available
107If **~~design tool** is connected:
108- Pull the design directly from Figma and inspect components, tokens, and layers
109- Compare against the existing design system for consistency
111If **~~user feedback** is connected:
112- Cross-reference design decisions with recent user feedback and support tickets

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
Raw lines 105 to 113
Uses an outside tool ~~design :107
Uses an outside tool ~~user :111
114## Tips
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.

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.
Raw lines 114 to 118

From anthropics/knowledge-work-plugins at 2574e29, 2026-10-27. Skills read by DeepSeek V4.1 Flash on 2026-11-04. Summary and techniques by Claude Opus 5.5 on 2026-11-06.