mcpField
D
design-critique

design-critique

github.com/petekpDesign & UI4852 installsUpdated 3d ago
Repository

About design-critique

design-critique is a design-review skill for people evaluating interfaces. It guides direct, evidence-based feedback from issue identification through prioritized, actionable fixes.

Key features

  1. 01Structured interface critique process
  2. 02Checks clarity, interaction, accessibility, and craft
  3. 03Prioritizes issues from P0 to P3
  4. 04Requires specific fixes and user impact

Use cases

  1. 01Reviewing a screen or component before release
  2. 02Identifying accessibility and interaction gaps
  3. 03Turning design feedback into prioritized changes

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/petekp/claude-code-setup --skill design-critique

After installing, type/design-critiquein Claude Code to confirm it loaded.

Bundled filesCHECKLIST.mdPRINCIPLES.md

Details

From the project README

Design Critique

Honest, specific, actionable feedback on interface design.

The Critique Stance

  • Be direct. No soft language. No vibes-only feedback.
  • Point to specifics, not generalities.
  • Explain why, not just what.
  • Reference principles, not preferences.
  • Offer fixes, not just problems.

Process

  1. Identify what you're critiquing - Screen, component, flow, or interaction
  2. Gather context - Platform, users, constraints (if available)
  3. Apply the lens - Clarity, hierarchy, interaction, accessibility, craft
  4. Prioritize issues - P0 (blocking) through P3 (polish)
  5. Propose fixes - Specific, actionable changes

Quick Check (Use CHECKLIST.md for detailed pass)

Clarity

  • Can users predict outcomes before acting?
  • Is the hierarchy of information obvious?
  • Are interactive elements clearly distinguished?

Interaction

  • Do all states exist? (hover, focus, active, disabled, loading, error)
  • Is feedback immediate?
  • Can users recover from errors?

Accessibility

  • Focus visible and logical?
  • Contrast sufficient?
  • Touch targets adequate (44x44pt)?

Output Contract

Structure every critique as:

## Verdict
[1 sentence: ship/iterate/rethink]

## Issues

### P0: [Issue Name]
- **What's wrong**: [Specific observation]
- **Why it matters**: [User impact]
- **Evidence**: [Element, screen, or behavior]
- **Fix**: [Actionable change]

### P1: [Issue Name]
...

## Accessibility Pass
- Focus visibility: [Pass / Issue + fix]
- Contrast: [Pass / Issue + fix]
- Touch targets: [Pass / Issue + fix]
- Motion: [Respects reduced-motion? / Issue]

## What's Working
[2-3 things done well - critique includes praise]

## Next Steps
- [ ] [Verification action 1]
- [ ] [Verification action 2]

Severity Levels

LevelDescriptionAction
P0Blocks task, causes confusion, or data lossMust fix before ship
P1Frequent friction, misclicks, unclear recoveryShould fix
P2Polish, efficiency, minor annoyanceFix if time permits
P3Nice-to-have refinementConsider for later

The Questions Behind Everything

  • "What is the user trying to do here?"
  • "What's the most important thing on this screen?"
  • "What would happen if we removed this?"
  • "Would a new user understand this?"
  • "Are we proud of this?"

Common Critique Notes

"Too busy": Too many things competing for attention. Remove until important things breathe.

"Not discoverable": Hidden functionality, unlabeled icons, gestures without affordance.

"Inconsistent": Different patterns for similar actions. Pick one and commit.

"Feels off": Usually spacing, alignment, or timing. The eye knows before the mind articulates.

"Overdesigned": Every effect turned up. Decoration overwhelming function. Subtract until inevitable.

Deep Reference

For detailed heuristics, common failures, and platform-specific patterns:

Comments

Markdown supported