Agent skill

design-critique

Evaluate designs for usability, visual hierarchy, consistency, and adherence to design principles. Trigger with "what do you think of this design", "give me feedback on", "critique this", "review this mockup", or when the user shares a design and asks for opinions.

Stars 163
Forks 31

Install this agent skill to your Project

npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/other/other/design-critique

SKILL.md

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

Expand your agent's capabilities with these related and highly-rated skills.

Didn't find tool you were looking for?

Be as detailed as possible for better results