distill

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

MANDATORY PREPARATION

Use the frontend-design skill — 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 teach-impeccable first.

Assess Current State

Analyze what makes the design feel complex or cluttered:

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

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, STOP and call the AskUserQuestion tool to clarify.

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

Interaction Simplification

• Reduce choices: Fewer buttons, fewer options, clearer path forward (paradox of choice is real)

• Smart defaults: Make common choices automatic, only ask when necessary

• Inline actions: Replace modal flows with inline editing where possible

• Remove steps: Can signup be one step instead of three? Can checkout be simplified?

• Clear CTAs: ONE obvious next step, not five competing actions

Content Simplification

• Shorter copy: Cut every sentence in half, then do it again

• Active voice: "Save changes" not "Changes will be saved"

• Remove jargon: Plain language always wins

• Scannable structure: Short paragraphs, bullet points, clear headings

• Essential information only: Remove marketing fluff, legalese, hedging

• Remove redundant copy: No headers restating intros, no repeated explanations, say it once

Code Simplification

• Remove unused code: Dead CSS, unused components, orphaned files

• Flatten component trees: Reduce nesting depth

• Consolidate styles: Merge similar styles, use utilities consistently

• Reduce variants: Does that component need 12 variations, or can 3 cover 90% of cases?

NEVER:

• Remove necessary functionality (simplicity ≠ feature-less)

• Sacrifice accessibility for simplicity (clear labels and ARIA still required)

• Make things so simple they're unclear (mystery ≠ minimalism)

• Remove information users need to make decisions

• Eliminate hierarchy completely (some things should stand out)

• Oversimplify complex domains (match complexity to actual task complexity)

Verify Simplification

Ensure simplification improves usability:

• Faster task completion: Can users accomplish goals more quickly?

• Reduced cognitive load: Is it easier to understand what to do?

• Still complete: Are all necessary features still accessible?

• Clearer hierarchy: Is it obvious what matters most?

• Better performance: Does simpler design load faster?

Document Removed Complexity

If you removed features or options:

• Document why they were removed

• Consider if they need alternative access points

• Note any user feedback to monitor

Remember: You have great taste and judgment. Simplification is an act of confidence - knowing what to keep and courage to remove the rest. As Antoine de Saint-Exupéry said: "Perfection is achieved not when there is nothing more to add, but when there is nothing left to take away." Weekly Installs17.6KRepositorypbakaus/impeccableGitHub Stars10.2KFirst Seen14 days agoSecurity AuditsGen Agent Trust HubPassSocketPassSnykPassInstalled oncodex17.4Kopencode17.3Kgithub-copilot17.2Kgemini-cli17.2Kcursor17.2Kamp17.2K