| 1 | Strip a design to its essence. Remove anything that doesn't earn its place: redundant elements, repeated information, decorative noise, cosmetic complexity. |
| 2 | |
| 3 | |
| 4 | --- |
| 5 | |
| 6 | ## Assess Current State |
| 7 | |
| 8 | Analyze what makes the design feel complex or cluttered: |
| 9 | |
| 10 | 1. **Identify complexity sources**: |
| 11 | - **Too many elements**: Competing buttons, redundant information, visual clutter |
| 12 | - **Excessive variation**: Too many colors, fonts, sizes, styles without purpose |
| 13 | - **Information overload**: Everything visible at once, no progressive disclosure |
| 14 | - **Visual noise**: Unnecessary borders, shadows, backgrounds, decorations |
| 15 | - **Confusing hierarchy**: Unclear what matters most |
| 16 | - **Feature creep**: Too many options, actions, or paths forward |
| 17 | |
| 18 | 2. **Find the essence**: |
| 19 | - What's the primary user goal? (There should be ONE) |
| 20 | - What's actually necessary vs nice-to-have? |
| 21 | - What can be removed, hidden, or combined? |
| 22 | - What's the 20% that delivers 80% of value? |
| 23 | |
| 24 | If any of these are unclear from the codebase, STOP and use Codex's structured user-input/question tool when available; if unavailable, ask directly in chat to clarify what you cannot infer. |
| 25 | |
| 26 | **CRITICAL**: Simplicity is not about removing features. It's about removing obstacles between users and their goals. Every element should justify its existence. |
| 27 | |
| 28 | ## Plan Simplification |
| 29 | |
| 30 | Create a ruthless editing strategy: |
| 31 | |
| 32 | - **Core purpose**: What's the ONE thing this should accomplish? |
| 33 | - **Essential elements**: What's truly necessary to achieve that purpose? |
| 34 | - **Progressive disclosure**: What can be hidden until needed? |
| 35 | - **Consolidation opportunities**: What can be combined or integrated? |
| 36 | |
| 37 | **IMPORTANT**: Simplification is hard. It requires saying no to good ideas to make room for great execution. Be ruthless. |
| 38 | |
| 39 | ## Simplify the Design |
| 40 | |
| 41 | Systematically remove complexity across these dimensions: |
| 42 | |
| 43 | ### Information Architecture |
| 44 | - **Reduce scope**: Remove secondary actions, optional features, redundant information |
| 45 | - **Progressive disclosure**: Hide complexity behind clear entry points (accordions, modals, step-through flows) |
| 46 | - **Combine related actions**: Merge similar buttons, consolidate forms, group related content |
| 47 | - **Clear hierarchy**: ONE primary action, few secondary actions, everything else tertiary or hidden |
| 48 | - **Remove redundancy**: If it's said elsewhere, don't repeat it here |
| 49 | |
| 50 | ### Visual Simplification |
| 51 | - **Reduce color palette**: Use 1-2 colors plus neutrals, not 5-7 colors |
| 52 | - **Limit typography**: One font family, 3-4 sizes maximum, 2-3 weights |
| 53 | - **Remove decorations**: Eliminate borders, shadows, backgrounds that don't serve hierarchy or function |
| 54 | - **Flatten structure**: Reduce nesting, remove unnecessary containers; never nest cards inside cards |
| 55 | - **Remove unnecessary cards**: Cards aren't needed for basic layout; use spacing and alignment instead |
| 56 | - **Consistent spacing**: Use one spacing scale, remove arbitrary gaps |
| 57 | |
| 58 | ### Layout Simplification |
| 59 | - **Linear flow**: Replace complex grids with simple vertical flow where possible |
| 60 | - **Remove sidebars**: Move secondary content inline or hide it |
| 61 | - **Full-width**: Use available space generously instead of complex multi-column layouts |
| 62 | - **Consistent alignment**: Pick left or center, stick with it |
| 63 | - **Generous white space**: Let content breathe, don't pack everything tight |
| 64 | |
| 65 | ### Interaction Simplification |
| 66 | - **Reduce choices**: Fewer buttons, fewer options, clearer path forward (paradox of choice is real) |
| 67 | - **Smart defaults**: Make common choices automatic, only ask when necessary |
| 68 | - **Inline actions**: Replace modal flows with inline editing where possible |
| 69 | - **Remove steps**: Can signup be one step instead of three? Can checkout be simplified? |
| 70 | - **Clear CTAs**: ONE obvious next step, not five competing actions |
| 71 | |
| 72 | ### Content Simplification |
| 73 | - **Shorter copy**: Cut every sentence in half, then do it again |
| 74 | - **Active voice**: "Save changes" not "Changes will be saved" |
| 75 | - **Remove jargon**: Plain language always wins |
| 76 | - **Scannable structure**: Short paragraphs, bullet points, clear headings |
| 77 | - **Essential information only**: Remove marketing fluff, legalese, hedging |
| 78 | - **Remove redundant copy**: No headers restating intros, no repeated explanations, say it once |
| 79 | |
| 80 | ### Code Simplification |
| 81 | - **Remove unused code**: Dead CSS, unused components, orphaned files |
| 82 | - **Flatten component trees**: Reduce nesting depth |
| 83 | - **Consolidate styles**: Merge similar styles, use utilities consistently |
| 84 | - **Reduce variants**: Does that component need 12 variations, or can 3 cover 90% of cases? |
| 85 | |
| 86 | **NEVER**: |
| 87 | - Remove necessary functionality (simplicity ≠ feature-less) |
| 88 | - Sacrifice accessibility for simplicity (clear labels and ARIA still required) |
| 89 | - Make things so simple they're unclear (mystery ≠ minimalism) |
| 90 | - Remove information users need to make decisions |
| 91 | - Eliminate hierarchy completely (some things should stand out) |
| 92 | - Oversimplify complex domains (match complexity to actual task complexity) |
| 93 | |
| 94 | ## Verify Simplification |
| 95 | |
| 96 | Ensure simplification improves usability: |
| 97 | |
| 98 | - **Faster task completion**: Can users accomplish goals more quickly? |
| 99 | - **Reduced cognitive load**: Is it easier to understand what to do? |
| 100 | - **Still complete**: Are all necessary features still accessible? |
| 101 | - **Clearer hierarchy**: Is it obvious what matters most? |
| 102 | - **Better performance**: Does simpler design load faster? |
| 103 | |
| 104 | ## Document Removed Complexity |
| 105 | |
| 106 | If you removed features or options: |
| 107 | - Document why they were removed |
| 108 | - Consider if they need alternative access points |
| 109 | - Note any user feedback to monitor |
| 110 | |
| 111 | When the cuts feel right, hand off to `$impeccable polish` for the final pass. As Antoine de Saint-Exupéry put it: "Perfection is achieved not when there is nothing more to add, but when there is nothing left to take away." |
| 112 |