distill

Overview

What is distill?

distill is a UI design skill focused on stripping interfaces down to their essential elements. By removing unnecessary complexity, visual clutter, and redundant features, distill helps create clean, powerful, and user-focused designs. This skill is especially useful when you need to simplify, declutter, reduce noise, or make a UI more intuitive and visually appealing.

Who Should Use distill?

• UI/UX designers aiming for minimal, effective interfaces
• Developers seeking to improve usability and clarity
• Product teams wanting to reduce feature creep and focus on core value

Problems Solved

• Overly complex layouts
• Visual noise from excessive styling
• Information overload
• Confusing hierarchy and navigation

How to Use

Installation Steps

1. Install distill using the Agent Skills CLI:

   npx skills add https://github.com/pbakaus/impeccable --skill distill
   

2. Start by reviewing the SKILL.md file for workflow details and guidance.
3. For full context, also check README.md, AGENTS.md, and metadata.json if available.

Workflow Overview

• Mandatory Preparation:
  • Invoke /frontend-design to gather design principles and context.
  • If no design context exists, run /teach-impeccable first.
• Assess Current State:
  • Identify sources of complexity: too many elements, excessive variation, information overload, visual noise, confusing hierarchy, feature creep.
  • Clarify the primary user goal and determine what is essential.
• Plan Simplification:
  • Decide what to remove, hide, or combine.
  • Focus on the 20% of features that deliver 80% of value.
• Apply distill:
  • Remove unnecessary UI elements and styles.
  • Ensure the hierarchy is clear and the design is focused.

File Structure

• Start with SKILL.md for step-by-step guidance.
• Explore supporting files and folders for additional context and resources.

FAQ

Is distill suitable for all UI projects?

distill is best used when the goal is to simplify and clarify an interface. It may not be ideal for highly feature-rich applications where complexity is required.

What should I review first after installation?

Begin with the SKILL.md file, which contains the main workflow and preparation steps. Use the Files tab to explore additional references and scripts.

How does distill handle missing design context?

If design context is missing, distill requires you to run /teach-impeccable or use the AskUserQuestion tool to clarify user goals before proceeding.

Can distill be customized for different repositories?

Yes, adapt the distill workflow to fit your specific tools, repository structure, and operating constraints. The skill provides a flexible framework for UI simplification.