distill

Overview of distill skill

What distill does

The distill skill is a focused UI design simplification workflow for stripping a screen down to its essential job. It is meant for moments when an interface feels busy, noisy, over-decorated, or overloaded with options and you want a cleaner, stronger direction rather than more features.

Best fit for distill for UI Design

Use distill for UI Design when you already have a screen, flow, or component and need to make it calmer and clearer. It fits designers, frontend engineers, product teams, and AI agents working on:

• decluttering dashboards, forms, settings, and detail pages
• reducing competing actions
• simplifying visual hierarchy
• removing decorative noise
• turning “feature-rich” layouts into task-first layouts

The real job to be done

Users do not install the distill skill just to get “simpler design.” They install it to answer harder questions:

• What should stay?
• What should go?
• What should be hidden, merged, or deferred?
• What is the one primary user goal on this screen?

That makes distill more useful than a generic “make this cleaner” prompt. Its value is in forcing prioritization before redesign.

Key differentiators

The main differentiator is that distill is not a standalone style prompt. The skill explicitly depends on upstream design context:

• run /frontend-design first
• if there is no design context yet, run /teach-impeccable first
• stop and ask clarifying questions if the primary goal or constraints are unclear

That dependency is important for adoption decisions: distill is stronger inside the broader impeccable design system than as an isolated one-off prompt.

What to know before installing

This is a lightweight skill with one main file, SKILL.md, and no bundled scripts, examples, or reference assets. That keeps it easy to inspect, but it also means output quality depends heavily on the context you provide. If you want a self-contained, heavily scaffolded distill guide, this repository path is more principle-driven than tool-driven.

How to Use distill skill

distill install context

The upstream SKILL.md does not include an install command, so use your normal Claude Skills installation flow for the repository and target the distill skill within pbakaus/impeccable. If you install from the repo, the relevant path is:

https://github.com/pbakaus/impeccable/tree/main/.claude/skills/distill

Because this skill is user-invocable and takes an argument hint of [target], the practical usage pattern is to invoke distill against a specific screen, flow, or component rather than a vague product-wide request.

Read this file first

Start with:

• SKILL.md

There are no companion README.md, metadata.json, rules/, or references/ files in this skill folder, so nearly all useful behavior is defined in that single file. For install evaluation, this is good news: you can assess the whole distill skill quickly.

Mandatory dependency most users will miss

Before using distill, the skill says to invoke /frontend-design. That upstream step contains design principles, anti-patterns, and the “Context Gathering Protocol.” If no design context exists yet, you are expected to run /teach-impeccable first.

This matters because weak results usually come from skipping this setup. If you call distill directly on a screenshot or rough complaint, the model may remove the wrong things.

What input distill needs

Strong distill usage starts with a concrete target plus enough context to identify the main job of the UI. Good inputs include:

• the exact screen or component
• the primary user task
• current problems, such as too many actions or weak hierarchy
• hard constraints, such as compliance, must-keep controls, or engineering limits
• whether simplification should remove, merge, hide, or progressively disclose content

A weak input:

• “Simplify this page.”

A stronger input:

• “Use distill on our analytics dashboard. The primary user goal is to spot traffic changes in under 10 seconds. Keep the date range picker and export action. We can remove secondary filters from the default view if needed. Current issues: too many cards, repeated metrics, heavy borders, and three competing CTAs.”

How to turn a rough goal into a complete prompt

A practical distill guide prompt structure:

1. Name the target.
2. State the one primary user goal.
3. List must-keep elements.
4. List likely candidates for removal or hiding.
5. Name what feels cluttered.
6. Ask for a simplification plan before final redesign.

Example:

“Apply distill to the onboarding modal for first-time team admins. The one goal is helping them invite teammates. Must keep: email entry, role selector, skip option. Nice-to-have elements that can be deferred: tips carousel, template preview, feature badges. The current design feels crowded because it mixes setup, education, and marketing. First identify complexity sources, then propose what to remove, combine, or hide.”

Recommended workflow

A high-signal workflow for distill usage:

1. Gather context via /frontend-design.
2. Confirm the primary user goal is singular.
3. Run distill on one screen, not the whole product.
4. Review what it recommends removing, combining, or hiding.
5. Check whether any “removed” element is actually required by policy, support, or business logic.
6. Iterate with sharper constraints.
7. Only then move into visual refinement or implementation.

This order matters because distill is mainly a prioritization tool, not a final polish pass.

What distill is likely to analyze

From the skill text, distill looks for:

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

It also explicitly pushes toward identifying the “20% that delivers 80% of value.” If your team struggles to cut scope, that framing is one of the more useful reasons to use this skill.

When to stop and clarify instead of pushing ahead

The source guidance says to stop and ask questions if the codebase or prompt does not make these clear:

• the primary user goal
• what is necessary vs nice-to-have
• what can be removed, hidden, or combined

That is a meaningful boundary. If your team cannot agree on the core task of the screen, distill will surface that product ambiguity rather than magically solve it.

Best targets for first-time distill usage

Good first targets:

• a crowded settings page
• a dashboard with too many cards
• a form with too many optional fields shown at once
• a modal doing multiple jobs
• a landing section with several competing CTAs

Poor first targets:

• highly regulated workflows where removals are tightly constrained
• design systems work with no concrete screen
• screens that are already minimal but suffer from interaction problems instead

What to expect from the output

Expect the distill skill to be most helpful when it produces:

• a diagnosis of complexity sources
• a clearer content and action hierarchy
• recommendations for removal, merging, or progressive disclosure
• a more focused user path

Do not expect code transforms, automated audits, or implementation-ready component diffs from this skill alone.

distill skill FAQ

Is distill better than a normal simplification prompt

Usually yes, if you need structured simplification rather than generic cleanup. The skill gives a repeatable lens for finding complexity sources and forces a single primary goal. A normal prompt can say “make it cleaner,” but distill is more likely to ask what should actually disappear.

Is distill beginner-friendly

Yes, but with a caveat. The language is straightforward, and the repo is easy to inspect because it is mostly one file. The harder part is not installation; it is having enough UI context to use the skill well. Beginners should start with a single screen and explicit constraints.

Do I need the rest of the impeccable repository

You do not need to read the whole repo before trying distill install, but you should respect the documented dependency on /frontend-design and, if needed, /teach-impeccable. This skill is designed to sit inside that ecosystem, not fully replace it.

When should I not use distill

Skip distill when the main problem is:

• broken interaction logic rather than clutter
• missing user research
• unclear product strategy across many screens
• accessibility or compliance issues that require additive fixes, not subtraction

In those cases, simplification alone can be misleading.

Does distill work for non-UI tasks

The repository evidence points to UI and frontend design use. The wording, dependency on /frontend-design, and analysis categories all center interface simplification. If you want to simplify copy, systems, or architecture, treat this as inspiration rather than a guaranteed fit.

How to Improve distill skill

Give distill one screen and one goal

The fastest way to improve distill output is to narrow scope. “Simplify our app” is too broad. “Distill the billing settings page so users can update payment method faster” is actionable. The skill works best when the target has a single dominant task.

Separate must-keep from negotiable elements

A strong prompt should distinguish:

• required content or actions
• optional items that can be hidden or removed
• decorative elements that can be stripped first

Without this, distill may recommend cutting something politically or functionally non-negotiable, which wastes a review cycle.

Tell distill what kind of simplification you want

Not all simplification is removal. Better results come when you specify the preferred levers:

• remove
• combine
• hide behind progressive disclosure
• downgrade visual emphasis
• sequence across steps instead of showing everything at once

This turns distill usage from “make it simpler” into a sharper design operation.

Include real complexity symptoms

Do not just say the screen feels cluttered. Name the clutter:

• five buttons above the fold
• duplicate metrics
• three text styles with no meaning
• cards with shadows, borders, and tinted backgrounds all at once
• secondary settings visible before primary completion

Concrete symptoms help the model map to the skill’s own complexity categories.

Watch for the main failure mode

The biggest failure mode in distill for UI Design is oversimplifying the wrong thing. A screen can become visually cleaner while becoming less usable if critical context, trust signals, or edge-case controls disappear. After the first pass, review every proposed removal against real user tasks.

Ask for a staged response

A stronger prompt asks for output in stages:

1. identify complexity sources
2. define the essential task
3. list removals, merges, and hidden items
4. propose the simplified structure

That staged approach makes the distill guide more auditable and easier to refine than asking for an immediate redesign.

Iterate with constraints after the first pass

If the first output is too aggressive or too conservative, refine with specifics:

• “Keep all legal disclosures visible.”
• “Do not add more steps.”
• “We can hide advanced filters behind an accordion.”
• “The primary CTA must remain above the fold.”

This is the most practical way to improve distill skill results without rewriting the whole brief.

Pair distill with implementation review

Once distill identifies what to cut or downplay, pass the result through your normal frontend and product review. The skill is best at decision framing. Your team still needs to validate state handling, accessibility, content clarity, and edge cases before shipping.