Distill
Ruthlessly simplify an existing UI or layout so the primary user goal is obvious and visual noise is gone.
Overview
Distill is an agent skill most often used in Build (also Validate and Ship) that removes unnecessary UI complexity so the essential user path and hierarchy stay clear.
Install
npx skills add https://github.com/pbakaus/impeccable --skill distillWhat is this skill?
- Mandatory prep via /impeccable and its Context Gathering Protocol before simplifying
- Assesses complexity sources: element overload, variation, progressive disclosure, and feature creep
- Centers on one primary user goal and separates necessary vs nice-to-have UI
- Targets visual noise: borders, shadows, backgrounds, and decorative clutter
- Pairs with impeccable design principles and anti-patterns to avoid over-stripping
- 6 assessed complexity-source categories in the assess-current-state checklist
Adoption & trust: 80.2k installs on skills.sh; 35.9k GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
Your interface has grown noisy with competing elements and unclear priorities, and users cannot tell what matters first.
Who is it for?
Solo builders refining an existing screen, component, or flow who already use Impeccable and want structured simplification instead of ad-hoc "make it minimal" chat.
Skip if: Greenfield concept exploration without any UI yet—run impeccable teach and broader Impeccable skills first; also skip if you need net-new features rather than reduction.
When should I use this skill?
User asks to simplify, declutter, reduce noise, remove elements, or make a UI cleaner and more focused.
What do I get? / Deliverables
You get a simpler, more focused layout with justified removals and a single dominant user goal—after impeccable context is established, not from guesswork.
- Simplification plan with remove/hide/combine recommendations
- Updated UI specification or component changes aligned to one primary goal
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
Distill is shelved under Build → frontend because it edits interface composition, hierarchy, and visual elements in the product you are shipping. Frontend is the canonical home for decluttering screens, reducing competing controls, and tightening hierarchy on live UI work.
Where it fits
Strip a noisy prototype down to the one validation action before user tests.
Remove redundant CTAs and decorative chrome from a settings screen.
Pre-release pass to cut feature creep and clarify hierarchy on a busy checkout flow.
Tighten a marketing landing hero so the single conversion path reads instantly.
How it compares
Use instead of one-off "declutter this" prompts when you want Impeccable-gated assessment of complexity sources and hierarchy, not arbitrary deletion.
Common Questions / FAQ
Who is distill for?
Indie builders and designers shipping web or mobile UI who want agent-guided simplification aligned with Impeccable principles.
When should I use distill?
Use in Build when polishing frontend UI; in Validate when a prototype feels overloaded before you commit; in Ship when review surfaces clutter before release—always after /impeccable (and teach if context is missing).
Is distill safe to install?
Treat it like any third-party agent skill: review the Security Audits panel on this Prism page and confirm you are comfortable with your agent reading and editing design files in your repo.
Workflow Chain
Requires first: impeccable
SKILL.md
READMESKILL.md - 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 ### 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**