distill

Simplify UI designs by removing unnecessary complexity across layout, content, and code.

1|Updated Oct 20, 2024
One-click install
npx skills add https://github.com/SteveChandler/quiver --skill distill-stevechandler
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: distill
Source: https://github.com/SteveChandler/quiver/tree/main/.agents/skills/distill
Command: npx skills add https://github.com/SteveChandler/quiver --skill distill-stevechandler

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Designs often accumulate clutter—competing buttons, excessive colors, redundant copy, and nested components—that slows users down and obscures the primary goal. This Skill provides a structured workflow to strip designs to their essence while preserving necessary functionality and accessibility. ## Core Features & Use Cases - Complexity Assessment: Identifies sources of clutter such as visual noise, information overload, confusing hierarchy, and feature creep before editing. - Multi-Dimension Simplification: Systematically reduces complexity across information architecture, visual styling, layout, interaction flows, copy, and code structure. - Verification & Documentation: Confirms simplification improves task completion and cognitive load, and documents removed features with rationale. - Use Case: A settings page has five competing CTAs, seven colors, and cards nested inside cards. Use this Skill to consolidate to one primary action, a two-color palette, and a flat linear layout with progressive disclosure for advanced options. ## Quick Start Ask the AI to distill the current page or component design by removing unnecessary complexity while keeping all essential functionality intact.

Frequently Asked Questions about distill

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I simplify a cluttered UI design?▼

Start by identifying complexity sources like competing buttons, excessive colors, and information overload. Then reduce scope, apply progressive disclosure, consolidate related actions, and enforce one clear primary action per view.

How to reduce visual complexity in web design?▼

Limit the palette to 1-2 colors plus neutrals, use one font family with 3-4 sizes, remove decorative borders and shadows, and flatten nested containers. Consistent spacing and generous white space replace unnecessary cards and dividers.

Does simplifying a design mean removing features?▼

No. Simplification removes obstacles between users and their goals, not necessary functionality. Features can be hidden behind progressive disclosure patterns like accordions or modals rather than deleted, and accessibility must never be sacrificed.

When should I not simplify a design further?▼

Stop when simplification would remove information users need for decisions, eliminate necessary hierarchy, or oversimplify genuinely complex domains. Mystery is not minimalism—clarity always takes priority over reduction.

What is progressive disclosure in UI design?▼

Progressive disclosure hides secondary or advanced options behind clear entry points like accordions, modals, or step-through flows. It keeps the default view focused on the primary task while keeping full functionality accessible.