design-critique

Name: design-critique
Author: anthropics

3.3kinstalls2.7kforks

How to install design-critique?

anthropics/knowledge-work-plugins/design-critique

$npx -y skills add anthropics/knowledge-work-plugins --skill design-critique

Installs into the current project.

Summary

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.

Files · 1

View on GitHub

SKILL.md

1	# /design-critique
2
3	> If you see unfamiliar placeholders or need to check which tools are connected, see [CONNECTORS.md](../../CONNECTORS.md).
4
5	Get structured design feedback across multiple dimensions.
6
7	## Usage
8
9	```
10	/design-critique $ARGUMENTS
11	```
12
13	Review the design: @$1
14
15	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.
16
17	## What I Need From You
18
19	- The design: Figma URL, screenshot, or detailed description
20	- Context: What is this? Who is it for? What stage (exploration, refinement, final)?
21	- Focus (optional): "Focus on mobile" or "Focus on the onboarding flow"
22
23	## Critique Framework
24
25	### 1. First Impression (2 seconds)
26	- What draws the eye first? Is that correct?
27	- What's the emotional reaction?
28	- Is the purpose immediately clear?
29
30	### 2. Usability
31	- Can the user accomplish their goal?
32	- Is the navigation intuitive?
33	- Are interactive elements obvious?
34	- Are there unnecessary steps?
35
36	### 3. Visual Hierarchy
37	- Is there a clear reading order?
38	- Are the right elements emphasized?
39	- Is whitespace used effectively?
40	- Is typography creating the right hierarchy?
41
42	### 4. Consistency
43	- Does it follow the design system?
44	- Are spacing, colors, and typography consistent?
45	- Do similar elements behave similarly?
46
47	### 5. Accessibility
48	- Color contrast ratios
49	- Touch target sizes
50	- Text readability
51	- Alternative text for images
52
53	## How to Give Feedback
54
55	- Be specific: "The CTA competes with the navigation" not "the layout is confusing"
56	- Explain why: Connect feedback to design principles or user needs
57	- Suggest alternatives: Don't just identify problems, propose solutions
58	- Acknowledge what works: Good feedback includes positive observations
59	- Match the stage: Early exploration gets different feedback than final polish
60
61	## Output
62
63	```markdown
64	## Design Critique: [Design Name]
65
66	### Overall Impression
67	[1-2 sentence first reaction — what works, what's the biggest opportunity]
68
69	### Usability
70	\| Finding \| Severity \| Recommendation \|
71	\|---------\|----------\|----------------\|
72	\| [Issue] \| 🔴 Critical / 🟡 Moderate / 🟢 Minor \| [Fix] \|
73
74	### Visual Hierarchy
75	- What draws the eye first: [Element] — [Is this correct?]
76	- Reading flow: [How does the eye move through the layout?]
77	- Emphasis: [Are the right things emphasized?]
78
79	### Consistency
80	\| Element \| Issue \| Recommendation \|
81	\|---------\|-------\|----------------\|
82	\| [Typography/spacing/color] \| [Inconsistency] \| [Fix] \|
83
84	### Accessibility
85	- Color contrast: [Pass/fail for key text]
86	- Touch targets: [Adequate size?]
87	- Text readability: [Font size, line height]
88
89	### What Works Well
90	- [Positive observation 1]
91	- [Positive observation 2]
92
93	### Priority Recommendations
94	1. [Most impactful change] — [Why and how]
95	2. [Second priority] — [Why and how]
96	3. [Third priority] — [Why and how]
97	```
98
99	## If Connectors Available
100
101	If ~~design tool is connected:
102	- Pull the design directly from Figma and inspect components, tokens, and layers
103	- Compare against the existing design system for consistency
104
105	If ~~user feedback is connected:
106	- Cross-reference design decisions with recent user feedback and support tickets
107
108	## Tips
109
110	1. Share the context — "This is a checkout flow for a B2B SaaS" helps me give relevant feedback.
111	2. Specify your stage — Early exploration gets different feedback than final polish.
112	3. Ask me to focus — "Just look at the navigation" gives you more depth on one area.

People who liked this also viewed

6 picks

Type

design-critique

3.3kinstalls2.7kforks

View on GitHub

How to install design-critique?

anthropics/knowledge-work-plugins/design-critique

$npx -y skills add anthropics/knowledge-work-plugins --skill design-critique

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# /design-critique
2
3	> If you see unfamiliar placeholders or need to check which tools are connected, see [CONNECTORS.md](../../CONNECTORS.md).
4
5	Get structured design feedback across multiple dimensions.
6
7	## Usage
8
9	```
10	/design-critique $ARGUMENTS
11	```
12
13	Review the design: @$1
14
15	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.
16
17	## What I Need From You
18
19	- The design: Figma URL, screenshot, or detailed description
20	- Context: What is this? Who is it for? What stage (exploration, refinement, final)?
21	- Focus (optional): "Focus on mobile" or "Focus on the onboarding flow"
22
23	## Critique Framework
24
25	### 1. First Impression (2 seconds)
26	- What draws the eye first? Is that correct?
27	- What's the emotional reaction?
28	- Is the purpose immediately clear?
29
30	### 2. Usability
31	- Can the user accomplish their goal?
32	- Is the navigation intuitive?
33	- Are interactive elements obvious?
34	- Are there unnecessary steps?
35
36	### 3. Visual Hierarchy
37	- Is there a clear reading order?
38	- Are the right elements emphasized?
39	- Is whitespace used effectively?
40	- Is typography creating the right hierarchy?
41
42	### 4. Consistency
43	- Does it follow the design system?
44	- Are spacing, colors, and typography consistent?
45	- Do similar elements behave similarly?
46
47	### 5. Accessibility
48	- Color contrast ratios
49	- Touch target sizes
50	- Text readability
51	- Alternative text for images
52
53	## How to Give Feedback
54
55	- Be specific: "The CTA competes with the navigation" not "the layout is confusing"
56	- Explain why: Connect feedback to design principles or user needs
57	- Suggest alternatives: Don't just identify problems, propose solutions
58	- Acknowledge what works: Good feedback includes positive observations
59	- Match the stage: Early exploration gets different feedback than final polish
60
61	## Output
62
63	```markdown
64	## Design Critique: [Design Name]
65
66	### Overall Impression
67	[1-2 sentence first reaction — what works, what's the biggest opportunity]
68
69	### Usability
70	\| Finding \| Severity \| Recommendation \|
71	\|---------\|----------\|----------------\|
72	\| [Issue] \| 🔴 Critical / 🟡 Moderate / 🟢 Minor \| [Fix] \|
73
74	### Visual Hierarchy
75	- What draws the eye first: [Element] — [Is this correct?]
76	- Reading flow: [How does the eye move through the layout?]
77	- Emphasis: [Are the right things emphasized?]
78
79	### Consistency
80	\| Element \| Issue \| Recommendation \|
81	\|---------\|-------\|----------------\|
82	\| [Typography/spacing/color] \| [Inconsistency] \| [Fix] \|
83
84	### Accessibility
85	- Color contrast: [Pass/fail for key text]
86	- Touch targets: [Adequate size?]
87	- Text readability: [Font size, line height]
88
89	### What Works Well
90	- [Positive observation 1]
91	- [Positive observation 2]
92
93	### Priority Recommendations
94	1. [Most impactful change] — [Why and how]
95	2. [Second priority] — [Why and how]
96	3. [Third priority] — [Why and how]
97	```
98
99	## If Connectors Available
100
101	If ~~design tool is connected:
102	- Pull the design directly from Figma and inspect components, tokens, and layers
103	- Compare against the existing design system for consistency
104
105	If ~~user feedback is connected:
106	- Cross-reference design decisions with recent user feedback and support tickets
107
108	## Tips
109
110	1. Share the context — "This is a checkout flow for a B2B SaaS" helps me give relevant feedback.
111	2. Specify your stage — Early exploration gets different feedback than final polish.
112	3. Ask me to focus — "Just look at the navigation" gives you more depth on one area.

People who liked this also viewed

6 picks

Type