Distill

Remove unnecessary complexity from designs, revealing the essential elements and creating clarity through ruthless simplification.

MANDATORY PREPARATION

Invoke /impeccable — it contains design principles, anti-patterns, and the Context Gathering Protocol. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first.

---

Assess Current State

Analyze what makes the design feel complex or cluttered:

1. Identify complexity sources:

   • Too many elements: Competing buttons, redundant information, visual clutter
   • Excessive variation: Too many colors, fonts, sizes, styles without purpose
   • Information overload: Everything visible at once, no progressive disclosure
   • Visual noise: Unnecessary borders, shadows, backgrounds, decorations
   • Confusing hierarchy: Unclear what matters most
   • Feature creep: Too many options, actions, or paths forward

2. Find the essence:

   • What's the primary user goal? (There should be ONE)
   • What's actually necessary vs nice-to-have?
   • What can be removed, hidden, or combined?
   • What's the 20% that delivers 80% of value?

If any of these are unclear from the codebase, ask the user directly to clarify what you cannot infer.

CRITICAL: Simplicity is not about removing features - it's about removing obstacles between users and their goals. Every element should justify its existence.

Plan Simplification

Create a ruthless editing strategy:

• Core purpose: What's the ONE thing this should accomplish?
• Essential elements: What's truly necessary to achieve that purpose?
• Progressive disclosure: What can be hidden until needed?
• Consolidation opportunities: What can be combined or integrated?

IMPORTANT: Simplification is hard. It requires saying no to good ideas to make room for great execution. Be ruthless.

Simplify the Design

Systematically remove complexity across these dimensions:

Information Architecture

• Reduce scope: Remove secondary actions, optional features, redundant information
• Progressive disclosure: Hide complexity behind clear entry points (accordions, modals, step-through flows)
• Combine related actions: Merge similar buttons, consolidate forms, group related content
• Clear hierarchy: ONE primary action, few secondary actions, everything else tertiary or hidden
• Remove redundancy: If it's said elsewhere, don't repeat it here

Visual Simplification

• Reduce color palette: Use 1-2 colors plus neutrals, not 5-7 colors
• Limit typography: One font family, 3-4 sizes maximum, 2-3 weights
• Remove decorations: Eliminate borders, shadows, backgrounds that don't serve hierarchy or function
• Flatten structure: Reduce nesting, remove unnecessary containers—never nest cards inside cards
• Remove unnecessary cards: Cards aren't needed for basic layout; use spacing and alignment instead
• Consistent spacing: Use one spacing scale, remove arbitrary gaps

Layout Simplification

• Linear flow: Replace complex grids with simple vertical flow where possible
• Remove sidebars: Move secondary content inline or hide it
• Full-width: Use available space generously instead of complex multi-column layouts
• Consistent alignment: Pick left or center, stick with it
• Generous white space: Let content breathe, don't pack everything tight