Impeccable /distill 设计去冗指南：把界面减到只剩必要

设计的终点不是"还能加什么"，而是"还能减去什么"。当 AI 生成的界面充斥着多余的按钮、无意义的边框、层层嵌套的卡片和重复的信息时，单靠一句"帮我简化一点"很难得到理想结果。本文要讲解的是 Impeccable 设计技能体系中专门用于"减法"的命令 —— /impeccable distill，其完整方法论定义在 .grok/skills/impeccable/reference/distill.md（下文简称"distill 参考文档"）。读完本文，你将掌握一套可操作的去冗检查清单，能独立把任何过度设计的界面蒸馏到只剩"必须存在"的元素，并判断哪些复杂度该保留、哪些该移交给其他命令收尾。

distill 是 Impeccable 23 个共享设计命令之一，归类在 Refine（精炼） 之下，与 bolder（放大平庸设计）、quieter（压低过度刺激设计）并列，专门负责"剥离到本质"。命令元数据对其触发场景的描述很清晰：当用户提出 simplify、declutter、reduce noise、remove elements、make a UI cleaner and more focused 等诉求时，就应该走 skill/reference/distill.md 定义的这个流程。

一、distill 在 Impeccable 命令体系中的位置

distill 不是一次性脚本，而是技能中一条可路由的指令。在技能主文档 skill/SKILL.src.md 的命令表中，它的定位是：

项	值
完整命令	/impeccable distill [target]
分类	Refine（精炼）
职责	Strip to essence, remove complexity（剥离到本质、移除复杂度）
参考文档	reference/distill.md

触发语法沿用统一入口 /impeccable <command> <target>，target 是可选参数，用于把命令聚焦到某个具体区域（某个页面、区块或组件），例如 /impeccable distill the dashboard header。安装方式见仓库 README.md：在项目根目录运行 npx impeccable install 后，即可在 AI 编码工具里通过 /impeccable 触发；若某个命令使用频繁，还可以用 /impeccable pin distill 将其固定成独立的 /distill 快捷指令。

运行前的项目上下文由 skills 的 Setup 阶段保证：每会话先执行 node <skill-base-dir>/scripts/context.mjs 加载 PRODUCT.md、DESIGN.md 等设计事实，distill 需要据此判断"这个界面到底在为用户达成什么目标"——因为不知道本质，就无法判断什么可以被减去。

二、第一步：评估现状（Assess Current State）

distill 参考文档把整个过程分成五个阶段，第一步不是动手删东西，而是先冷静分析"是什么让这个设计显得复杂或杂乱"。不要凭感觉直接砍，先对复杂度来源做系统归类，六大来源如下：

1. 元素过多（Too many elements）：互相竞争的按钮、冗余的信息、视觉上的杂乱堆砌；
2. 过度变化（Excessive variation）：颜色、字体、字号、样式数量超出用途所需，却讲不出各自的职责；
3. 信息过载（Information overload）：所有内容同时可见，没有任何渐进披露（progressive disclosure）机制；
4. 视觉噪声（Visual noise）：无必要的边框、阴影、背景和装饰；
5. 层级混乱（Confusing hierarchy）：看不清到底什么最重要；
6. 功能蔓延（Feature creep）：可选操作、行为路径或前进方向太多。

找到本质（Find the essence）

完成来源识别后，追问四个问题来定位"本质"：

• 用户的首要目标是什么？（答案应当只有一个）
• 什么是真正必需的，什么是"有则更好"？
• 什么可以被删除、隐藏或合并？
• 哪 20% 交付了 80% 的价值？

distill 参考文档对"不猜测"原则做了硬性要求：如果上述问题无法从代码库中得到明确答案，必须停下来调用 AskUserQuestion 工具向用户澄清，而不是擅自替用户做取舍。这保证了减法建立在事实之上，而不是 Agent 的臆测。

文档同时给出一个关键定义，值得原样记住：

CRITICAL：简洁不是移除功能，而是移除横亘在用户与其目标之间的障碍。每个元素都必须为它的存在辩护。

三、第二步：规划简化方案（Plan Simplification）

评估完成、本质明确后，进入第二阶段：制定一套"不留情面的编辑策略"。规划环节围绕四个问题展开：

• 核心目的（Core purpose）：这东西要达成的"唯一一件事"是什么？
• 必要元素（Essential elements）：为达成该目的，哪些元素真正不可或缺？
• 渐进披露（Progressive disclosure）：什么内容可以先隐藏、到需要时再呈现？
• 合并机会（Consolidation opportunities）：什么内容可以合并或整合？

这一阶段的基调同样在文档中被反复强调：

IMPORTANT：简化是困难的。它要求你对"还不错的主意"说"不"，从而为好执行的方案腾出空间。要无情（Be ruthless）。

四、第三步：六个维度的系统性简化

规划落定后进入核心执行阶段，distill 把复杂度拆解成六个正交维度逐一清理。这是整套方法论中最值得逐条对照的检查清单。

4.1 信息架构（Information Architecture）

• 缩小范围（Reduce scope）：移除次要操作、可选功能、冗余信息；
• 渐进披露（Progressive disclosure）：把复杂度藏到明确的入口之后（手风琴、模态框、分步流程）；
• 合并相关操作（Combine related actions）：合并相似按钮、整合表单、分组相关内容；
• 清晰的层级（Clear hierarchy）：一个主要操作、少量次要操作、其余一律三级或隐藏；
• 去除冗余（Remove redundancy）：同一信息如果别处已经表达过，这里就不要重复。

4.2 视觉简化（Visual Simplification）

• 压缩配色（Reduce color palette）：用 1～2 个主色加中性色，而不是 5～7 个颜色；
• 限制字体（Limit typography）：一个字体家族、最多 3～4 个字号、2～3 个字重；
• 移除装饰（Remove decorations）：删除不为层级或功能服务的边框、阴影、背景；
• 压扁结构（Flatten structure）：减少嵌套、移除多余容器，永远不要在卡片里再套卡片；
• 移除多余卡片（Remove unnecessary cards）：基础布局根本不需要卡片，用间距和对齐即可；
• 统一间距（Consistent spacing）：使用一套间距刻度，删除随意出现的空隙。

4.3 布局简化（Layout Simplification）

• 线性流（Linear flow）：能用简单纵向流就别用复杂网格；
• 移除侧边栏（Remove sidebars）：把次要内容内联或隐藏；
• 充分利用宽度（Full-width）：慷慨地利用可用空间，别用复杂的多栏布局；
• 统一对齐（Consistent alignment）：选左对齐或居中，然后坚持到底；
• 充足的留白（Generous white space）：让内容有呼吸感，别把所有东西挤在一起。

4.4 交互简化（Interaction Simplification）

• 减少选择（Reduce choices）：更少的按钮、更少的选项、更清晰的前进路径——"选择悖论（paradox of choice）"是真实存在的；
• 智能默认值（Smart defaults）：把常见选择自动化，只在必要时才询问；
• 内联操作（Inline actions）：能用内联编辑就别用模态流程；
• 删除步骤（Remove steps）：这个流程能不能少一步？
• 清晰的下一步（Clear next action）：一个显而易见的下一步，而不是五个互相竞争的按钮。

4.5 内容简化（Content Simplification）

• 更短的文案（Shorter copy）：把每个句子砍半，然后再砍一次；
• 主动语态（Active voice）：写 "Save changes"，不写 "Changes will be saved"；
• 去除行话（Remove jargon）：平实的语言永远胜出；
• 可扫读的结构（Scannable structure）：短段落、项目符号、清晰的标题；
• 只留必要信息（Essential information only）：删掉营销套话、法律辞令和含糊其辞的修饰；
• 去除重复文案（Remove redundant copy）：不要让标题复述引言，不要重复解释，同一件事只说一次。

4.6 代码简化（Code Simplification）

• 清理未用代码（Remove unused code）：死掉的 CSS、未被引用的组件、孤儿文件；
• 压扁组件树（Flatten component trees）：降低嵌套深度；
• 整合样式（Consolidate styles）：合并相近样式，一致地使用工具类/设计令牌；
• 削减变体（Reduce variants）：这个组件真的需要 12 种变体吗？3 种也许就能覆盖 90% 的场景？

四个维度的"绝对禁止"

distill 参考文档为整个执行阶段划出了不可逾越的红线，越线即意味着"简化"已经变质：

• 绝不能移除必要功能（简洁 ≠ 没有功能）；
• 绝不能为简化牺牲可访问性（清晰的标签和 ARIA 仍然必须保留）；
• 绝不能把东西简化到含义不明（故弄玄虚 ≠ 极简）；
• 绝不能移除用户做决策所需的信息；
• 绝不能完全消灭层级（总有些东西应该突出）；
• 绝不能过度简化复杂领域（复杂度应与实际任务复杂度相匹配）。

五、第四步：验证简化效果（Verify Simplification）

一轮删减之后，必须停下来自问简化是否真的改进了可用性，而不是"看着更空"。distill 给出的验证口径包括五个检查点：

• 任务完成更快：用户能更快达成目标了吗？
• 认知负荷降低：理解"该做什么"是否更容易了？
• 功能仍然完整：所有必要功能是否仍然可达？
• 层级更清晰：是否一眼就能看出什么最重要？
• 性能更好：更简洁的设计是否加载得更快？

从源码结构看，这条验证逻辑与 Impeccable 整体的"有限轮次验证"原则一致——技能主文档 skill/SKILL.src.md 明确要求用有界批次检查问题并一轮修复，而不是陷入无休止的自审循环，因为"开放式的自我 QA 是在烧用户的钱"。

六、第五步：记录被移除的复杂度（Document Removed Complexity）

distill 特别要求：如果你移除了功能或选项，不能删完就了事，需要留下痕迹：

• 记录移除原因：为什么这些被删掉了；
• 考虑替代入口：是否需要为它们提供替代的访问点；
• 留意后续反馈：记下需要持续观察的用户反馈信号。

这一步保证了减法可追溯：即便删对了，将来如果用户反馈"找不到那个功能"，团队仍然知道当初的决定是什么、以及在哪里可以找回替代路径。

七、收尾交接：让 polish 做最后一轮精修

distill 参考文档的结尾给出明确的交接指令：当删减"感觉对了"（When the cuts feel right），把成果移交给 /impeccable polish 做最终打磨。这体现了 Impeccable 命令之间的分工哲学：distill 负责"减"，reference/polish.md 负责把对齐、间距、一致性和微细节修到可发布状态——两者在 Refine 链路上前后衔接，构成从"去冗"到"出厂"的完整闭环。

作为这一哲学注脚，distill 参考文档引用了圣埃克苏佩里（Antoine de Saint-Exupéry）的名言，这句话同时也是整套方法论的题眼：

"Perfection is achieved not when there is nothing more to add, but when there is nothing left to take away."（完美不是无可增补，而是无可删减。）

八、实战速查：把 distill 应用到你的项目

综合上文，一次完整的 distill 调用可以浓缩为以下可执行流程：

1. 前置：确保项目已通过 npx impeccable install 完成技能安装，并在会话内运行过 context 脚本以加载 PRODUCT.md / DESIGN.md 中的设计事实；
2. 触发：向 AI 助手发出 /impeccable distill [target]，其中 target 可指向具体页面或组件（如 /impeccable distill the settings page）；
3. 评估：按六大复杂度来源逐项扫描目标，通过"首要目标 → 必要 vs 锦上添花 → 可删可隐可并 → 20/80"四个问题锁定本质；信息不足时停下来向用户提问，禁止猜测；
4. 规划：明确核心目的、必要元素、渐进披露点与合并机会，拟定删除方案；
5. 执行：按信息架构、视觉、布局、交互、内容、代码六个维度系统性删减，同时守住四条"绝不"红线；
6. 验证：用任务完成速度、认知负荷、功能完整性、层级清晰度、性能五项标准复核；
7. 记录与交接：记录被移除复杂度的原因与替代入口，然后把结果交给 /impeccable polish 收尾。

需要进一步阅读实现与测试细节的读者，可以从仓库的这几个位置继续深入：

• 方法论原文：skill/reference/distill.md、plugin/skills/impeccable/reference/distill.md；
• 命令路由与触发条件：技能主文档 skill/SKILL.src.md（Commands 表、Routing 段落）；
• 命令在技能内的元数据与意图描述：skill/scripts/command-metadata.json（distill 条目）；
• 安装、pin 快捷指令与其他命令用法：README.md；
• 命令清单：/impeccable 命令元数据 JSON：plugin/skills/impeccable/scripts/command-metadata.json。