| name | design-critique |
| description | 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.
|
| argument-hint | [file path or description of design] |
| user-invocable | true |
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:
- What is this? (landing page, dashboard, form, modal, flow?)
- Who is the user? (new user, power user, admin?)
- What is the goal? (convert, inform, complete a task?)
- 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
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
