# Design Critique

> Get structured feedback on a design — UI, layout, visual hierarchy, interaction patterns, and usability. TRIGGER when: user says "critique this design", "review my design", "feedback on this UI", "what do you think of this layout", or shares a screenshot/mockup for review.

- Skill: `ashutoshsrivastava17/design-critique` (Agent Skill)
- Install (CLI): `npx skillmds@latest add ashutoshsrivastava17/design-critique`
- Raw SKILL.md: https://api.skillmd.com/api/skills/ashutoshsrivastava17/design-critique/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: ashutoshsrivastava17 (https://skillmd.com/u/ashutoshsrivastava17)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/ashutoshsrivastava17/design-critique

---


# Design Critique

Provide structured, actionable design feedback using established design principles. Balances praise with constructive criticism — always explain *why* something works or doesn't.

## Critique Framework

Evaluate designs across these dimensions, in priority order:

### 1. Usability & Clarity

- **Can the user accomplish their goal?** Is the primary action obvious?
- **Information hierarchy**: Is the most important content the most prominent?
- **Cognitive load**: How many decisions does the user need to make? Can any be removed?
- **Learnability**: Would a first-time user understand this without instructions?
- **Error prevention**: Does the design prevent mistakes before they happen?
- **Feedback**: Does the UI communicate state changes (loading, success, error)?

### 2. Visual Hierarchy & Layout

- **F-pattern / Z-pattern**: Does the layout follow natural scanning patterns?
- **Spacing & proximity**: Are related elements grouped? Is there enough whitespace?
- **Alignment**: Are elements aligned to a consistent grid?
- **Contrast & emphasis**: Do size, weight, and color guide the eye correctly?
- **Consistency**: Are similar elements styled the same way?

### 3. Typography

- **Readability**: Is body text 16px+ on web? Line height 1.4-1.6x? Line length 50-75 characters?
- **Hierarchy**: Are there clear distinctions between heading levels?
- **Font pairing**: Do the typefaces complement each other (max 2-3 fonts)?
- **Weight distribution**: Is bold used sparingly and purposefully?

### 4. Color & Contrast

- **Palette coherence**: Is the color palette limited and intentional?
- **Semantic color**: Do colors convey meaning consistently (red=error, green=success)?
- **Contrast ratios**: Does text meet WCAG AA (4.5:1 for normal, 3:1 for large)?
- **Dark mode consideration**: Does the palette translate to dark mode?

### 5. Interaction Design

- **Affordance**: Do interactive elements look clickable/tappable?
- **Feedback loops**: Hover states, active states, focus states — are they all defined?
- **Transitions**: Are state changes smooth and meaningful (not decorative)?
- **Touch targets**: Are targets at least 44x44px with adequate spacing?
- **Progressive disclosure**: Is complexity revealed gradually?

### 6. Responsiveness & Adaptability

- **Breakpoint behavior**: How does the layout adapt at mobile/tablet/desktop?
- **Content reflow**: Does content stack sensibly on narrow viewports?
- **Image scaling**: Do images resize without distortion or overflow?
- **Navigation patterns**: Does navigation adapt appropriately (hamburger, tab bar)?

## Critique Process

### Phase 1 — Understand Context

Before critiquing, establish:

1. **What is this?** (landing page, dashboard, form, modal, flow?)
2. **Who is the user?** (new user, power user, admin?)
3. **What is the goal?** (convert, inform, complete a task?)
4. If `$ARGUMENTS` provides a file, read/view it. Ask for context if insufficient.

### Phase 2 — Evaluate

Walk through each dimension above. Not every dimension applies to every design — focus on what's relevant.

### Phase 3 — Report

Structure feedback using this format:

```
## Design Critique — {design name or description}

### Context
- **Type**: {landing page / dashboard / form / modal / flow}
- **Target user**: {who}
- **Primary goal**: {what the user should accomplish}

### What Works Well
- {Specific praise with reasoning — "The CTA placement is strong because..."}
- {At least 2-3 positives}

### Needs Improvement

#### High Impact
- **{Issue}**: {what's wrong and why it matters}
  - **Suggestion**: {specific, actionable fix}

#### Medium Impact
- **{Issue}**: {description}
  - **Suggestion**: {fix}

#### Low Impact / Polish
- **{Issue}**: {description}
  - **Suggestion**: {fix}

### Design Principles Applied
- {Which principles inform the critique — Fitts's Law, Hick's Law, Gestalt, etc.}

### Overall Assessment
{1-2 sentences: overall quality and single most impactful change to make}
```

## Tone Guidelines

- **Be specific**: "The 12px gray text on white background is hard to read" not "the text is hard to read"
- **Explain why**: Ground every critique in a principle, heuristic, or user impact
- **Be constructive**: Always pair problems with solutions
- **Prioritize**: Don't list 30 issues — focus on the 5-8 that matter most
- **Respect intent**: Understand what the designer was trying to achieve before suggesting changes
- **No subjective preferences**: "I don't like blue" is not valid feedback. "Blue connotes trust — consider whether that aligns with your brand" is.

## Reference: Design Heuristics

Use these when grounding feedback:

| Heuristic | Summary |
|---|---|
| Nielsen's #1 | Visibility of system status |
| Nielsen's #2 | Match between system and real world |
| Nielsen's #4 | Consistency and standards |
| Nielsen's #6 | Recognition rather than recall |
| Nielsen's #8 | Aesthetic and minimalist design |
| Fitts's Law | Important targets should be large and close to the user's cursor |
| Hick's Law | More choices = slower decisions. Reduce options. |
| Gestalt Proximity | Elements close together are perceived as related |
| Gestalt Similarity | Elements that look alike are perceived as related |
| Miller's Law | Working memory holds ~7 items. Chunk information. |

## Quality Checklist

- [ ] Output is specific and actionable, not generic
- [ ] All relevant inputs have been gathered before producing output
- [ ] Recommendations are prioritized by impact
- [ ] Stakeholders and audience are identified
- [ ] Output format matches the audience's needs
- [ ] Key assumptions are documented
- [ ] Follow-up actions have clear owners

## Edge Cases

- If input data is incomplete, state assumptions explicitly and flag gaps
- For time-sensitive situations, prioritize speed over comprehensiveness
- If multiple stakeholders have conflicting needs, document the tradeoffs
- For first-time use, start with a simplified version and iterate
- Adapt the depth and detail to the audience's expertise level