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:

1. **Zoom to 25%**: Does the visual hierarchy still read clearly? 2. **Zoom to 400%**: Do spacing relationships hold up? Are there awkward gaps? 3. **Squint test**: Can you identify the primary action/focus? 4. **Remove color**: Does the design work in grayscale? 5. **Read aloud**: Do labels and copy feel natural or generic?

Phase 1: Intent Interrogation

Before critiquing visuals, establish the design's purpose:

Ask and answer these questions BEFORE any visual work:

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?

```xml What is being designed Why it exists Market category for reference only Who they are specifically When/where they use this Their technical/domain knowledge What they're trying to accomplish Professional, fast, precise, etc. Playful, casual, overwhelming, etc. Explanation of why this matters for THIS product ... ... ```

Phase 2: Decision Justification

Every design choice must be justified against the established intent:

For EACH significant design decision, document:

<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:

**Typography:** - [ ] Are headlines optically balanced? (Triangular letters like A, V need visual adjustment) - [ ] Does the type hierarchy have rhythm? (Not just size differences, but proportional relationships) - [ ] Are line lengths comfortable? (45-75 characters for body text) - [ ] Is vertical rhythm maintained? (Baseline grid or consistent spacing multiples)

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:

**Generic Choices (flag and justify or change):** - Default border-radius values (rounded-lg, rounded-xl without reason) - Card-based layouts without content justification - Gradient backgrounds without purpose - Shadow depths that don't match visual hierarchy - Symmetric layouts where asymmetry would create better hierarchy

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:

**Purpose:** - "What problem does this solve that the previous version didn't?" - "If I removed this element, what would break?" - "Who asked for this? Why?"

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:

```xml Specific technique or principle Analysis of why this is effective for their users How we might apply this principle (not copy the execution) Why we shouldn't directly copy this ```

Final Critique Output

```xml true/false List of principles high/medium/low What's wrong How to fix Where this appears Keep with justification OR revise - What's working well - Critical changes needed - Nice-to-have refinements

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.