distill

概述

什么是 distill？

distill 是一款专注于将界面简化到核心元素的 UI 设计技能。通过去除不必要的复杂性、视觉杂乱和冗余功能，distill 帮助打造干净、有力且以用户为中心的设计。该技能特别适合需要简化、清理、减少噪音或让界面更直观、美观的场景。

谁适合使用 distill？

• 追求极简且高效界面的 UI/UX 设计师
• 希望提升可用性和清晰度的开发者
• 希望减少功能膨胀、聚焦核心价值的产品团队

解决的问题

• 过于复杂的布局
• 过度样式导致的视觉噪音
• 信息过载
• 混乱的层级结构和导航

使用方法

安装步骤

1. 使用 Agent Skills CLI 安装 distill：

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

2. 首先查看 SKILL.md 文件，了解工作流程和使用指导。
3. 如有，建议同时查阅 README.md、AGENTS.md 和 metadata.json 以获取完整背景。

工作流程概览

• 必备准备：
  • 调用 /frontend-design 获取设计原则和上下文。
  • 如果没有设计上下文，先运行 /teach-impeccable。
• 评估当前状态：
  • 识别复杂来源：元素过多、变化过大、信息过载、视觉噪音、层级混乱、功能膨胀。
  • 明确主要用户目标，确定核心要素。
• 规划简化方案：
  • 决定哪些内容需要移除、隐藏或合并。
  • 聚焦于带来80%价值的20%关键功能。
• 应用 distill：
  • 移除不必要的 UI 元素和样式。
  • 确保层级清晰，设计聚焦。

文件结构

• 从 SKILL.md 开始，按照步骤指导操作。
• 探索其他支持文件和文件夹，获取更多背景和资源。

常见问题

distill 适合所有 UI 项目吗？

distill 最适合用于简化和理清界面的场景。对于功能极其丰富、复杂性必需的应用，可能不太适用。

安装后我应该先查看什么？

建议先阅读 SKILL.md，其中包含主要工作流程和准备步骤。通过文件标签页探索更多参考资料和脚本。

distill 如何处理缺失的设计上下文？

如果缺少设计上下文，distill 需要先运行 /teach-impeccable 或使用 AskUserQuestion 工具，明确用户目标后再继续。

distill 可以针对不同仓库定制吗？

可以，您可以根据具体工具、仓库结构和操作限制调整 distill 工作流程。该技能提供了灵活的 UI 简化框架。