design-critique
npx machina-cli add skill anthropics/knowledge-work-plugins/design-critique --openclawFiles (1)
SKILL.md
1.5 KB
Design Critique
Provide structured, actionable design feedback.
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
Source
git clone https://github.com/anthropics/knowledge-work-plugins/blob/main/design/skills/design-critique/SKILL.mdView on GitHub Overview
Design Critique provides structured, actionable feedback on designs. It guides evaluating first impression, usability, visual hierarchy, consistency, and accessibility to improve user experience and align with design principles.
How This Skill Works
You assess a design across five areas—First Impression, Usability, Visual Hierarchy, Consistency, and Accessibility—and follow the guidance on how to give feedback: be specific, explain why, suggest alternatives, acknowledge what works, and match the feedback to the design stage. Feedback is framed with actionable recommendations tied to design principles and user needs.
When to Use It
- When a user asks for feedback on a design or mockup
- During a design critique session or peer review
- When evaluating a UI prototype for task completion and navigation
- When checking visual hierarchy and typography on a page or screen
- When auditing accessibility and consistency with the design system
Quick Start
- Step 1: Assess First Impression, Usability, and Visual Hierarchy quickly (2 seconds, 2-3 points).
- Step 2: Check Consistency and Accessibility, noting any violations or risks.
- Step 3: Deliver specific, actionable feedback with alternatives and positive observations.
Best Practices
- Be specific: name exact elements and interactions, e.g., 'CTA competes with the navigation'
- Explain why: connect feedback to user goals or design principles
- Suggest alternatives: offer concrete fixes or alternatives, not just problems
- Acknowledge what works: balance critique with positive observations
- Match the stage: tailor feedback for early exploration vs final polish
Example Use Cases
- A reviewer notes that the primary CTA competes with the top navigation and proposes moving the CTA to a separate, prominent area
- During a mockup critique, the evaluator points out ambiguous icons and suggests clearer labels and hover states
- The critique identifies inconsistent spacing across cards and recommends a single spacing scale from the design system
- Accessibility feedback highlights low color contrast and proposes a higher-contrast palette and larger touch targets
- A critique of a dashboard reviews component behavior for consistency and suggests unifying button styles across widgets
Frequently Asked Questions
Add this skill to your agents
