distill

Overview of distill skill

What distill does

The distill skill is a UI simplification workflow for stripping a design down to its essential job. It is meant for moments when an interface feels busy, noisy, over-decorated, over-featured, or hard to scan. Instead of brainstorming more UI, distill pushes in the opposite direction: remove, combine, hide, and clarify until the main user goal is unmistakable.

Best fit for distill for UI Design

Use distill for UI Design when you already have a screen, component, or flow and want to make it cleaner without losing utility. It fits designers, frontend engineers, and product builders who are dealing with:

• cluttered dashboards
• forms with too many choices
• competing CTAs
• weak visual hierarchy
• excessive colors, styles, or surface treatments
• feature creep that hides the main task

The real job-to-be-done

The practical job of the distill skill is not “make it prettier.” It is to identify the single primary goal of a UI, then reduce everything that distracts from that goal. In practice, that means deciding what to remove entirely, what to collapse behind progressive disclosure, what to merge, and what to emphasize.

What makes distill different from a generic prompt

A generic “simplify this UI” prompt often produces vague advice. distill is more usable because it frames simplification as a deliberate audit:

1. assess where complexity comes from
2. find the essential task
3. remove unnecessary elements and variation
4. preserve usefulness while increasing clarity

That structure is the main reason to install it instead of relying on ad hoc prompting.

Key adoption caution

The biggest constraint is that distill is not standalone. Its own instructions require you to invoke /frontend-design first, and if design context does not yet exist, to run /teach-impeccable before proceeding. If you want a drop-in skill that works in isolation, this dependency chain is the main adoption blocker to know up front.

How to Use distill skill

Install context for distill

This skill lives in pbakaus/impeccable under .agents/skills/distill. A common install pattern is:

npx skills add pbakaus/impeccable --skill distill

Because the repository excerpt only exposes SKILL.md, treat that file as the authoritative usage source and expect the skill to rely on companion skills in the same repo.

Read this file first

Start with:

• SKILL.md

For distill usage, this file matters more than a README because it contains the actual invocation contract, workflow, and prerequisite steps.

Respect the required dependency chain

Before you use distill, do this in order:

1. invoke /frontend-design
2. follow its context-gathering protocol
3. if there is no design context yet, run /teach-impeccable
4. only then run distill

This is not optional polish. The skill explicitly depends on prior design context, so skipping this step increases the chance of shallow or arbitrary simplification.

What input distill needs

The distill skill works best when you provide a concrete target plus enough context to judge what is essential. Strong inputs usually include:

• the specific screen, component, or flow
• the primary user task
• current pain points such as clutter, too many actions, weak hierarchy, or visual noise
• constraints such as required fields, legal copy, platform limits, or existing design system rules

Minimal target examples:

• distill checkout sidebar
• distill onboarding modal
• distill analytics dashboard header

Turn a rough goal into a strong distill prompt

Weak prompt:

• “Simplify this page.”

Stronger distill guide style prompt:

• “Use distill on the settings screen. The main goal is helping users change notification preferences quickly. Current issues: too many card sections, repeated labels, three competing save actions, and decorative borders everywhere. Keep required compliance copy and email/SMS toggles. Recommend what to remove, combine, hide, or restyle.”

Why this works:

• names one primary goal
• exposes likely complexity sources
• marks what cannot be removed
• asks for actionable simplification decisions, not generic critique

What distill is looking for

From the source, distill actively audits for:

• too many elements
• excessive variation in styles
• information overload
• visual noise
• confusing hierarchy
• feature creep

If you already know which of these applies, say so. The skill becomes more decisive when it does not have to infer everything from limited context.

Suggested distill workflow in practice

A good real-world workflow is:

1. gather screen context with /frontend-design
2. state the one primary user goal
3. run distill on a specific target
4. review its removal and consolidation suggestions
5. ask for a revised layout rationale or implementation plan
6. test whether the simplified version still supports required edge cases

This matters because simplification is easy to overdo. The best use of distill is usually one pass to remove noise, then one pass to verify that essential tasks still survive.

What outputs to expect

You should expect recommendations around:

• what to remove entirely
• what to hide behind progressive disclosure
• what to merge into one control or section
• which visual treatments to reduce
• how to strengthen hierarchy around the main action

Do not expect pixel-perfect implementation details from the skill alone unless you explicitly ask follow-up questions.

Practical tips that change output quality

For better distill usage:

• give one screen at a time, not an entire product
• name the main task in one sentence
• separate required elements from optional ones
• mention business-critical actions that must stay visible
• include screenshots, component lists, or code structure when possible

The skill’s core logic is “what can be removed without harming the main goal,” so ambiguity around required elements is the fastest way to get weak recommendations.

When distill is especially effective

The distill skill is strongest on UIs that already work but feel crowded. It is particularly useful for:

• internal tools with years of accumulated controls
• enterprise screens with too much visible data
• mobile views where density breaks scannability
• redesign passes where the product scope is fixed but clarity is poor

distill skill FAQ

Is distill good for beginners?

Yes, if you already have something concrete to simplify. The skill gives a clearer simplification lens than an open-ended design critique. The main beginner challenge is the prerequisite workflow: you need to follow the repo’s design-context setup rather than treating distill as a one-line magic command.

Is distill only for visual cleanup?

No. The distill skill also targets structural complexity: too many actions, too much information visible at once, unclear priority, and feature overload. It is as much about interaction and hierarchy as surface styling.

When should I not use distill?

Do not use distill when the main problem is missing capability, unclear requirements, or poor task flow definition. Simplifying a UI before you know the real user goal can remove the wrong things. It is also a poor fit if you need broad ideation rather than reduction.

distill vs ordinary prompting

The advantage of distill over a normal “make this cleaner” prompt is its narrower decision model. It explicitly asks what is necessary, what is nice-to-have, and what can be removed, hidden, or combined. That makes it better for decluttering decisions than for freeform visual exploration.

Does distill work without the rest of impeccable?

Not cleanly. Based on the source, distill expects /frontend-design and sometimes /teach-impeccable to run first. If your environment cannot invoke those companion skills, you can still imitate the workflow manually, but you lose some of the intended context setup.

Is distill suitable for code-first teams?

Yes. The distill install decision makes sense for frontend-heavy teams because simplification often depends on understanding what is truly required in the code and product logic. It is especially helpful when design debt shows up as too many controls, states, and visual treatments in shipped UI.

How to Improve distill skill

Give distill a single primary goal

The highest-leverage improvement is to state one main task for the target UI. The source itself emphasizes that there should be ONE primary user goal. If you provide multiple equal goals, the distill skill cannot simplify decisively because everything starts to look essential.

Mark removables, must-keeps, and unknowns

A strong prompt for distill separates:

• must keep
• safe to remove
• uncertain or negotiable

That framing prevents two common failure modes: timid output that removes nothing, or aggressive output that cuts necessary elements.

Name the actual complexity sources

Do not just say “it feels cluttered.” Tell distill whether the clutter comes from:

• too many buttons
• repeated information
• too many visual styles
• unnecessary borders or shadows
• poor grouping
• too many visible options

This improves recommendation precision because the skill already reasons in those categories.

Ask for removal decisions, not generic critique

A better prompt is:

• “Use distill and list what should be removed, combined, hidden, or visually softened.”

A weaker prompt is:

• “Thoughts on this design?”

The first creates useful output you can implement. The second invites broad commentary and lowers the value of the distill guide workflow.

Use one iteration to simplify and one to validate

After the first pass, ask:

• what usability risks the simplification introduces
• what edge cases may now be hidden too deeply
• whether the main CTA is clearer
• whether critical secondary actions remain discoverable

This second pass improves distill usage because simplification quality is not just about reduction; it is about preserving the right capability.

Provide artifacts, not just descriptions

If possible, supply:

• a screenshot
• a wireframe
• a component inventory
• the current information hierarchy
• relevant code snippets for conditional UI

The more concrete the target, the more confidently distill can identify what is decorative, redundant, or structurally unnecessary.

Watch for the common failure modes

Typical weak results happen when:

• the screen’s main purpose is unclear
• every stakeholder request is treated as equally important
• required constraints are omitted
• you ask to simplify an entire product at once
• context gathering from /frontend-design was skipped

If distill feels generic, the usual cause is not the skill but under-specified input.

Ask distill to explain tradeoffs

One of the best ways to improve trust in the output is to ask:

• what user benefit is gained by each removal
• what discoverability cost comes with hiding features
• why a merged control is better than separate controls

This turns the distill skill from a cleanup tool into a decision-support tool, which is more valuable for adoption inside teams.

Pair distill with implementation follow-up

Once distill identifies the simplification direction, follow with a second request for:

• revised layout structure
• design-system-aligned component choices
• frontend implementation notes
• acceptance criteria for the simplified screen

That handoff is often where the skill becomes practically useful instead of just conceptually correct.