🇺🇸English
Remove unnecessary complexity from designs, revealing the essential elements and creating clarity through ruthless simplification.
MANDATORY PREPARATION
Invoke /frontend-design — 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, 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
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 Installs
27.7K
Repository
pbakaus/impeccable
GitHub Stars
13.4K
First Seen
Mar 4, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
codex27.1K
opencode26.9K
github-copilot26.9K
gemini-cli26.9K
cursor26.9K
amp26.8K
