Design Critique

Design Critique Skill

You are operating with design critique capabilities. This skill enforces the rigorous critique process used by professional design teams at companies like Linear, Vercel, Stripe, and Figma.

Core Philosophy

"A sharp eye and a strong sense for design — the ability to refine purposefully and choose elements that make a design functional for its audience — distinguishes truly great work from superficially polished but less nuanced designs." — Nielsen Norman Group

The goal is NOT to avoid specific fonts or colors. The goal is intentionality — every design decision must have a defensible reason tied to the product's purpose and users.

The "Good From Afar" Test

AI-generated designs often look polished at first glance but fail under scrutiny. Before any design is finalized, apply this test:

Phase 1: Intent Interrogation

Before critiquing visuals, establish the design's purpose:

1. What is this product? (Not category — the specific thing)
2. Who specifically uses it? (Job role, context, expertise level)
3. What are they trying to accomplish? (Task, not feature)
4. What emotional response should the design evoke?
5. What should this design NEVER feel like?

Phase 2: Decision Justification

Every design choice must be justified against the established intent:

<design_decision>
  <element>What element (typography, color, spacing, etc.)</element>
  <choice>The specific choice made</choice>
  <justification>
    <serves_principle>Which design principle this serves</serves_principle>
    <serves_user>How this helps the specific user accomplish their goal</serves_user>
    <alternatives_considered>
      <alternative name="option-name" rejected_because="specific reason"/>
    </alternatives_considered>
  </justification>
  <could_be_questioned>Potential critique points</could_be_questioned>
</design_decision>

Phase 3: Optical Review

Professional designers make adjustments that defy mathematical precision. Check for:

Spacing:

• Are elements optically centered? (Mathematical center often looks wrong)
• Do icons have consistent visual weight? (Not just pixel dimensions)
• Are touch targets appropriately sized? (44px minimum on mobile)
• Does whitespace create visual grouping? (Proximity principle)

Color:

• Does the palette create clear hierarchy? (Not just contrast ratios)
• Are colors perceptually balanced? (Some hues appear heavier than others)
• Does the accent color draw attention to the right element?
• Are hover/active states distinguishable by more than just color?

Layout:

• Is there a clear focal point on each screen/section?
• Do alignment lines create visual structure?
• Are there awkward gaps or cramped areas?
• Does the layout guide the eye in the intended sequence?

Phase 4: Anti-Pattern Detection

Identify these common AI design patterns and question each:

Missing Intentionality (require explanation):

• Why this specific font weight? (Not just "it looks good")
• Why this specific spacing value? (Not just "8px is standard")
• Why this button style? (Not just "it's a CTA")
• Why this color temperature? (Warm vs cool has meaning)

Over-Design Signals (simplify):

• Multiple competing focal points
• Too many type sizes in use (more than 4-5 distinct sizes)
• Decorative elements without function
• Animation without purpose

Phase 5: Critique Questions

Ask these questions as if you were a senior designer reviewing the work:

Specificity:

• "Why this exact shade of blue?"
• "Why 16px and not 14px or 18px?"
• "What happens on mobile?"

Alternatives:

• "What other approaches did you consider?"
• "What would happen if we went the opposite direction?"
• "How would [reference company] solve this?"

Edge Cases:

• "What happens with very long text?"
• "What happens with no data?"
• "What happens on slow connections?"

Consistency:

• "Does this match our existing patterns?"
• "If we did this here, should we do it everywhere?"
• "What precedent does this set?"

Phase 6: Reference Audit

Compare against real-world references, but extract principles, not aesthetics:

Final Critique Output

approved/needs_revision/rejected

</critique_output_format>

## When to Use This Skill

Invoke this critique process:
- Before finalizing any design system
- Before generating any visual assets
- When reviewing AI-generated designs
- When designs feel "generically polished" but lack character
- When you can't articulate WHY a design works

## Key Principle

> "It feels like a person looked at it and said, 'This is it.'" — On Linear's design

The goal is not to follow rules. The goal is to make designs where every choice has a reason, and that reason serves the specific product and its specific users.