distill

distill 技能概览

distill 是做什么的

distill 是一套用于精简 UI 的工作流，目标是把设计收束到最核心的任务上。当一个界面显得拥挤、嘈杂、装饰过多、功能堆叠，或者难以快速扫读时，它尤其适用。和“再加点 UI 想法”相反，distill 的思路是往回收：删掉、合并、隐藏、澄清，直到用户最主要的目标一眼就能看出来。

distill for UI Design 最适合什么场景

当你已经有一个现成的页面、组件或流程，希望在不牺牲可用性的前提下把它变得更干净时，就适合使用 distill for UI Design。它很适合设计师、前端工程师和产品构建者，尤其是在处理这些问题时：

• 仪表盘过于杂乱
• 表单选项太多
• 多个 CTA 相互竞争
• 视觉层级薄弱
• 颜色、样式或表面修饰过多
• 功能蔓延掩盖了主任务

它真正要解决的任务

distill skill 的实际目标不是“把界面做得更好看”，而是先识别一个 UI 的唯一主目标，再削减所有会分散注意力的内容。落到执行层面，就是判断哪些东西应该直接移除，哪些应该放进渐进式披露里，哪些可以合并，哪些需要被重点强调。

distill 和普通提示词有什么不同

一个泛泛的“帮我简化这个 UI”提示，通常只会得到模糊建议。distill 更好用，是因为它把简化当成一次有明确步骤的审查：

1. 判断复杂性来自哪里
2. 找出最核心的任务
3. 去掉不必要的元素和变化
4. 在保留可用性的同时提升清晰度

这套结构化方法，正是它值得安装、而不是临时随手写提示词替代的主要原因。

使用前最需要注意的限制

最大的限制是 distill 不是独立技能。它自己的说明要求你先调用 /frontend-design，如果当前还没有设计上下文，还要先运行 /teach-impeccable。如果你想找的是一个开箱即用、单独运行的技能，那么这条依赖链就是你在安装前最需要知道的门槛。

如何使用 distill 技能

distill 的安装上下文

这个技能位于 pbakaus/impeccable 仓库中的 .agents/skills/distill。常见安装方式是：

npx skills add pbakaus/impeccable --skill distill

由于当前仓库摘录里只暴露了 SKILL.md，建议把这个文件视为权威用法来源，同时默认它会依赖同仓库中的配套技能。

先读这个文件

从这里开始：

• SKILL.md

对于 distill 使用 来说，这个文件比 README 更重要，因为真正的调用约定、工作流和前置步骤都写在里面。

必须遵守的依赖链

在使用 distill 之前，请按这个顺序操作：

1. 调用 /frontend-design
2. 按它的上下文收集流程执行
3. 如果还没有设计上下文，先运行 /teach-impeccable
4. 然后再运行 distill

这不是可有可无的“锦上添花”。该技能明确依赖已有的设计上下文，跳过这一步，得到的简化建议更容易流于表面或显得武断。

distill 需要什么输入

当你提供了具体目标，并且给出足够上下文来判断什么才算“核心”时，distill skill 的效果最好。高质量输入通常包括：

• 具体是哪个页面、组件或流程
• 主要用户任务是什么
• 当前痛点，例如界面拥挤、操作过多、层级不清、视觉噪音重
• 约束条件，例如必填项、法务文案、平台限制，或现有设计系统规则

最小目标示例：

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

如何把模糊需求改写成高质量 distill 提示

弱提示：

• “Simplify this page.”

更强的 distill guide 风格提示：

• “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.”

为什么这种写法更有效：

• 明确了唯一的主目标
• 直接点出了可能的复杂性来源
• 标记了哪些内容不能删
• 要求的是可执行的简化决策，而不是泛泛的设计点评

distill 会重点检查什么

从源内容来看，distill 会主动审查这些问题：

• 元素过多
• 样式变化过多
• 信息过载
• 视觉噪音
• 层级混乱
• 功能蔓延

如果你已经知道具体是哪几类问题，最好直接说出来。这样技能就不必在有限上下文里自己推断，输出也会更果断。

实际工作中推荐的 distill 工作流

一套比较稳妥的真实工作流是：

1. 用 /frontend-design 收集页面上下文
2. 明确唯一的主要用户目标
3. 针对具体目标运行 distill
4. 审查它给出的删除和合并建议
5. 再要求它输出修订后的布局逻辑或实现计划
6. 测试简化后的版本是否仍覆盖必要的边缘场景

这一点很重要，因为“简化”很容易做过头。distill 的最佳用法，通常是先做一轮去噪，再做一轮验证，确认关键任务没有被一起削掉。

可以期待什么样的输出

你通常会得到这几类建议：

• 哪些内容应该直接删除
• 哪些内容适合藏到渐进式披露之后
• 哪些内容应该合并成一个控件或一个区块
• 哪些视觉处理需要收敛
• 如何围绕主操作强化视觉层级

除非你继续追问，否则不要预期它单独就能给出像素级、可直接落地的实现细节。

能明显提升输出质量的实用技巧

为了获得更好的 distill 使用 效果：

• 一次只给一个页面，不要把整个产品一起丢进去
• 用一句话说清主任务
• 把“必须保留”和“可选项”分开
• 明确说明哪些业务关键操作必须保持可见
• 能提供截图、组件清单或代码结构时尽量提供

这个技能的核心判断逻辑是“哪些内容可以删掉而不伤害主目标”，所以只要“哪些必须保留”说得不清楚，建议就很容易变弱。

distill 在哪些场景下尤其有效

distill skill 最擅长处理的是“其实能用，但就是太挤”的 UI。尤其适合：

• 积累多年控件的内部工具
• 可见数据过多的企业级页面
• 信息密度过高、导致难以扫读的移动端视图
• 产品范围已经固定，但清晰度不足的改版阶段

distill 技能 FAQ

distill 适合新手吗？

适合，前提是你已经有一个明确、具体、需要被简化的对象。相比开放式设计点评，这个技能提供的是更清晰的“简化视角”。对新手来说，最大的难点不在技能本身，而在前置工作流：你需要按仓库规定先完成设计上下文准备，而不能把 distill 当成一条魔法命令直接用。

distill 只是做视觉清理吗？

不是。distill skill 也会处理结构层面的复杂性：操作过多、信息一次性暴露太多、优先级不清、功能堆叠等问题。它关注的不只是表面样式，也包括交互结构和信息层级。

什么情况下不该用 distill？

如果你的核心问题是能力缺失、需求不明确，或者任务流程本身定义得不好，那就不该用 distill。在还没搞清真实用户目标之前就先去简化 UI，很容易删错东西。如果你需要的是大范围发散思考，而不是做减法，它也不适合。

distill 和普通提示词相比怎样？

distill 相比普通“把这个弄干净一点”的提示词，优势在于它的决策模型更聚焦。它会明确追问：什么是必要的，什么只是锦上添花，什么可以删除、隐藏或合并。对于“去杂乱”这类判断，它比自由发挥式的视觉探索更可靠。

不依赖 impeccable 其他部分，distill 能单独工作吗？

不太行。根据源内容，distill 预期你先运行 /frontend-design，有时还要先跑 /teach-impeccable。如果你的环境无法调用这些配套技能，你仍然可以手动模仿这套流程，但会失去一部分原本设计好的上下文准备能力。

distill 适合以代码为主的团队吗？

适合。对于前端占比高的团队来说，distill install 是说得通的，因为界面是否该简化，往往取决于你是否真正理解代码和产品逻辑里哪些东西是“必须存在”的。尤其当设计债已经体现在上线 UI 里控件过多、状态过多、视觉处理过多时，它会很有帮助。

如何提升 distill 技能的使用效果

给 distill 一个唯一的主目标

最高杠杆的改进方式，就是先明确目标 UI 只有一个主任务。源内容本身就强调，必须存在 ONE primary user goal。如果你一次给出多个并列目标，distill skill 就很难果断简化，因为所有东西都会看起来“像是必须的”。

标记哪些可删、哪些必留、哪些待定

一个高质量的 distill 提示，应当明确区分：

• must keep
• safe to remove
• uncertain or negotiable

这种写法能避免两个常见失败模式：一种是什么都不敢删、输出过于保守；另一种是删得太猛，把必要元素一起砍掉。

直接说出复杂性的真实来源

不要只说“看起来很乱”。要告诉 distill，混乱到底来自：

• 按钮太多
• 信息重复
• 视觉样式太多
• 不必要的边框或阴影
• 分组不合理
• 同时可见的选项太多

这样能显著提升建议精度，因为该技能本来就是按这些类别来推理的。

要它给出删改决策，不要只做泛泛点评

更好的提示方式是：

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

更弱的提示方式是：

• “Thoughts on this design?”

前者会产出真正可执行的结果，后者则更容易引向泛泛而谈，从而拉低 distill guide 工作流的实际价值。

一轮做简化，一轮做验证

第一轮之后，再继续追问：

• 这次简化引入了哪些可用性风险
• 哪些边缘场景现在可能被藏得太深
• 主 CTA 是否更清晰了
• 关键次级操作是否仍然容易被发现

这个第二轮验证会明显提升 distill 使用 质量，因为好的简化不只是“删得多”，更关键的是保住该保留的能力。

尽量给产物，不要只给描述

如果可以，尽量提供：

• 截图
• 线框图
• 组件清单
• 当前的信息层级
• 与条件式 UI 相关的代码片段

目标越具体，distill 就越能有把握地区分哪些是装饰性的、哪些是重复的、哪些是结构上不必要的。

留意这些常见失败模式

结果发虚、发泛，通常出现在这些情况下：

• 页面主目的不清楚
• 每个利益相关方的诉求都被当成同等重要
• 必要约束没有说明
• 你试图一次性简化整个产品
• 跳过了 /frontend-design 的上下文收集

如果你觉得 distill 给得很泛，通常问题不在技能本身，而在于输入定义得不够清晰。

让 distill 解释取舍逻辑

提升输出可信度的最好办法之一，就是要求它说明：

• 每一次删除带来了什么用户收益
• 隐藏功能会付出什么可发现性代价
• 为什么合并控件优于分开保留

这样一来，distill skill 就不只是一个“清理工具”，而会变成一个“辅助决策工具”，这对团队内部推广更有价值。

让 distill 后接实现层跟进

当 distill 已经识别出简化方向后，再发起第二次请求，让它补充：

• 修订后的布局结构
• 符合设计系统的组件选择
• 前端实现注意事项
• 简化后页面的验收标准

很多时候，真正让这个技能变得“可落地”，而不只是“理念上说得对”，靠的就是这一步衔接。