Impeccable /impeccable distill 命令详解：把前端 UI 剥离到本质的六维系统化精简工作流

Impeccable /impeccable distill 命令详解把前端 UI 剥离到本质的六维系统化精简工作流【免费下载链接】impeccableThe design language that makes your AI harness better at design.项目地址: https://gitcode.com/GitHub_Trending/im/impeccabledistill萃取/蒸馏是 Impeccable 设计技能中用于“做减法”的核心命令它把一套设计剥离到本质移除任何“不配占据位置”的元素——冗余控件、重复信息、装饰性噪音和无谓的表面复杂度。本文以 distill 参考文档 为主体完整继承其“评估现状 → 规划精简 → 六维执行 → 验证 → 文档化”五步工作流并结合仓库中的技能定义、命令元数据与配套命令说明拆解每一步的判断标准与执行边界帮助你在使用 AI 编码代理时可靠地驱动“简化 UI”这一类任务。1. distill 在 Impeccable 命令体系中的定位Impeccable 是一个面向 AI 编码代理的设计技能包安装后所有能力通过单一入口/impeccable command暴露见 README.md。在 SKILL.md 的 Commands 表中distill被归类为Refine精炼类命令与polish、bolder、quieter、harden等并列命令类别作用参考文档/impeccable distill [target]RefineStrip to essence, remove complexity剥离到本质移除复杂度reference/distill.md同一张表中可以清楚看到它的“姊妹命令”与分工bolder负责放大平淡设计quieter负责压制过度刺激的设计而distill负责移除复杂度——三者方向不同但互补。命令的触发语义记录在 command-metadata.json 中distill: { description: Strip designs to their essence by removing unnecessary complexity. Great design is simple, powerful, and clean. Use when the user asks to simplify, declutter, reduce noise, remove elements, or make a UI cleaner and more focused., argumentHint: [target] }从这份元数据可以确认两点实操事实触发条件当用户说“简化、去杂乱、降噪、移除元素、让 UI 更干净更聚焦”时代理应加载 distill 参考文档执行参数形态[target]为可选参数用于把精简范围限定到具体区域例如/impeccable distill settings对设置页做精简、/impeccable distill the checkout form。此外distill参考文档随仓库有三份发行路径内容与同一源同步分发.agent/skills/impeccable/reference/distill.mdAntigravity 等 harness 布局、skill/reference/distill.md构建源和 plugin/skills/impeccable/reference/distill.md插件包。2. 第一步Assess Current State评估现状文档开宗明义“Strip a design to its essence. Remove anything that doesnt earn its place”把设计剥离到本质移除任何不配占据位置的东西。但在动手之前必须先分析“是什么让这套设计显得复杂或杂乱”。2.1 识别复杂度的六大来源复杂度来源典型表现元素过多Too many elements互相竞争的按钮、冗余信息、视觉杂乱过度变化Excessive variation没有目的的颜色、字体、尺寸、样式堆叠信息过载Information overload所有东西一次性全部可见没有渐进披露视觉噪音Visual noise不必要的边框、阴影、背景、装饰层级混乱Confusing hierarchy看不出什么最重要功能蔓延Feature creep选项、动作、前进路径过多2.2 找到本质Find the essence对照四个问题定位“真正必要”的部分用户的首要目标是什么应该只有一个There should be ONE哪些是真正必要的哪些只是 nice-to-have什么可以被移除、隐藏或合并交付 80% 价值的那 20% 是什么2.3 “不确定就问不许猜”原则文档明确约束如果上述要点无法从代码库中推断清楚不要猜测直接问用户澄清无法推断的部分原文“If any of these are unclear from the codebase, do not guess. Ask the user directly to clarify what you cannot infer.”。这一点与 SKILL.md 中“Refinement preserves”的总体精神一致——distill属于精炼类任务必须保留既有身份、行为与文案不能借简化之名偷换设计。2.4 核心哲学简单 ≠ 删功能文档用加粗的 CRITICAL 标注了整篇最重要的一句话Simplicity is not about removing features. Its about removing obstacles between users and their goals. Every element should justify its existence.简单不是移除功能而是移除用户与其目标之间的障碍。每个元素都必须为自身的存在辩护。这是使用distill时防止“删过头”的第一道思想护栏。3. 第二步Plan Simplification规划精简评估完成后文档要求制定一份**“冷酷的编辑策略”ruthless editing strategy**围绕四个问题展开Core purpose核心目的这个东西唯一要完成的一件事是什么Essential elements必要元素达成该目的真正必要的是什么Progressive disclosure渐进披露什么可以等到需要时再显示Consolidation opportunities合并机会什么可以合并或整合文档同时给出了执行心态上的 IMPORTANT 提示Simplification is hard. It requires saying no to good ideas to make room for great execution. Be ruthless.简化很难。它要求你对好主意说不为卓越的执行腾出空间。要冷酷。也就是说规划阶段的产出应是一份明确的“删什么、藏什么、并什么”清单而不是模糊的“让它更简洁”。4. 第三步Simplify the Design执行六维精简这是原文档的主体沿六个维度系统化地移除复杂度。以下完整继承各维度清单并结合仓库佐证标注关键约束。4.1 信息架构Information Architecture收缩范围Reduce scope移除次要动作、可选功能、冗余信息渐进披露Progressive disclosure把复杂度藏到清晰的入口之后折叠面板、模态框、分步流程;合并相关动作Combine related actions合并相似按钮、整合表单、归组相关内容清晰层级Clear hierarchyONE 个主操作少量次操作其余全部降为三级或隐藏去冗余Remove redundancy别处说过的话这里不要再说一遍。4.2 视觉简化Visual Simplification收敛色板1–2 个颜色加中性色而不是 5–7 个颜色限制排版一个字体家族最多 3–4 个字号2–3 个字重移除装饰删掉不服务于层级或功能的边框、阴影、背景压平结构Flatten structure减少嵌套、移除不必要的容器卡片里绝不再套卡片never nest cards inside cards移除不必要的卡片基础布局不需要卡片用间距和对齐代替统一间距只用一套间距刻度spacing scale消除随手拍的间距值。其中“卡片嵌套”一条与 Impeccable 的整体反模式立场完全一致README.md 在 Anti-Patterns 一节明确列出“不要把所有东西都包进卡片不要在卡片里套卡片”而且该仓库带有 61 条确定性检测规则见 README 与npx impeccable detect说明部分规则会直接标记 AI 生成前端中常见的嵌套卡片、侧边条边框等“AI slop”构造。因此 distill 的视觉简化清单与检测器规则在语义上是互相咬合的——精简之后检测器报告的命中点理应减少。4.3 布局简化Layout Simplification线性流Linear flow可能时用简单纵向流替代复杂网格移除侧边栏Remove sidebars次级内容内联或隐藏全宽使用Full-width大方地使用可用空间而不是复杂的多栏布局对齐一致性Consistent alignment左对齐或居中选定一个就坚持慷慨留白Generous white space让内容呼吸不要把所有东西挤在一起。4.4 交互简化Interaction Simplification减少选择Reduce choices更少的按钮、更少的选项、更清晰的前进路径文档特别强调选择的悖论是真实存在的智能默认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移除营销腔、法务腔、模糊措辞hedging去重复文案Remove redundant copy不要有复述引言的标题、不要重复的解释一次说清楚say it once。4.6 代码简化Code Simplification简化不止发生在画面上文档要求同步下探到实现层移除无用代码死 CSS、未使用的组件、孤儿文件压平组件树Flatten component trees降低嵌套深度整合样式Consolidate styles合并相似样式一致地使用工具类减少变体Reduce variants那个组件真的需要 12 种变体吗3 种能不能覆盖 90% 的场景这一维度与仓库中的extract命令“Pull reusable tokens and components into design system”见 command-metadata.json形成配合distill负责删冗余变体extract负责把幸存的重复模式收敛为设计系统资产。5. 六条红线简化时 NEVER 做的事distill.md 用 NEVER 清单划定了简化的边界这六条是执行时最容易踩的坑不删必要功能——简单不等于功能缺失simplicity ≠ feature-less不为简单牺牲可访问性——清晰标签与 ARIA 依然必需不要简单到令人困惑——神秘感 ≠ 极简主义mystery ≠ minimalism不移除用户做决策所需的信息不彻底消灭层级——有些东西就应该更突出不盲目简化复杂领域——复杂度要与真实任务复杂度匹配match complexity to actual task complexity。这六条与第 2.4 节的 CRITICAL 原则构成同一护栏的两端既不许“不减”也不许“减穿”。6. 第四步Verify Simplification验证简化是否有效执行完后文档给出五个验证问题用于确认简化确实提升了可用性而不是只是看起来更“空”更快的任务完成用户能否更快达成目标更低的认知负荷是否更容易看懂该做什么仍然完整所有必要功能是否仍可访问更清晰的层级是否一眼看得出什么最重要更好的性能更简单的设计是否加载更快从仓库结构看这套验证可以借助 Impeccable 的确定性检测器补强npx impeccable detect可以在没有 LLM、没有 API key 的情况下扫描目录/文件/URL输出含 61 条规则的命中结果支持--json供 CI 使用见 README.md 的 CLI 一节。distill 完成后重跑 detect命中数下降可以作为“视觉噪音与反模式减少”的客观佐证——但正如 polish 参考文档 强调的“detector result is defect evidence, not proof of quality”检测器通过不等于设计变好人工走查交互路径仍是必要环节。7. 第五步Document Removed Complexity记录被移除的复杂度如果精简过程中移除了功能或选项文档要求做三件收尾工作记录为什么移除它们评估它们是否需要替代入口标记需要持续观察的用户反馈点。这一步把“删减决策”从一次性动作变成了可追溯的产品记录避免下个迭代或下一位工程师/代理把被有意移除的功能当缺陷加回来。8. 收尾衔接从 distill 交给 polishdistill.md 的最后一句定义了命令的交接语义When the cuts feel right, hand off to/impeccable polishfor the final pass. As Antoine de Saint-Exupéry put it: “Perfection is achieved not when there is nothing more to add, but when there is nothing left to take away.”即当删减到位时把最终打磨交给/impeccable polish。这与仓库中 polish 命令的自我定位严丝合缝——polish.md 开篇即声明“Polish is refinement, never concealed redesign”打磨是精炼绝不是暗藏的重设计distill 负责结构性做减法polish 负责在既定方向上做对齐、间距、一致性与细节收口两者职责不重叠。从工作流视角看distill处于 Impeccable 的“评估→精炼”链条中无参数调用/impeccable时代理会按 routing.md 的上下文感知逻辑推荐命令当信号显示某区域元素堆叠、反模式命中较多时distill、quieter、typeset等命令就是典型候选。而“先删后润”的顺序distill → polish也是文档明确推荐的路径。9. 实操如何调用与验证结合 README.md 的安装与使用说明完整实操路径如下适用前提已在支持的 AI 编码工具中安装 Impeccable 技能安装技能项目根目录执行一次npx impeccable install安装后按需重载 harness更新用npx impeccable update。执行 distill可带目标限定范围/impeccable distill # 对当前默认目标整体精简 /impeccable distill settings # 只精简设置页固定快捷键可选高频使用时用/impeccable pin distill生成独立/distill快捷命令SKILL.md 中 Pin/Unpin 机制。客观复核可选精简前后各跑一次确定性检测器对比命中npx impeccable detect src/ # 扫描目录 npx impeccable detect --json . # CI 友好的 JSON 输出检测默认遵循.impeccable/config.json/config.local.json中的detector.ignoreRules、ignoreFiles、ignoreValues等配置单文件豁免可用行内标记!-- impeccable-disable rule: reason --。收尾交接删减到位后执行/impeccable polish target做最终通过。10. 小结distill参考文档虽然不长但它把“简化”从一种审美偏好变成了可执行、可验证、有边界的工程流程评估先于动作六大复杂度来源 本质四问且“不确定就问”规划要求冷酷核心目的唯一、必要元素明确、渐进披露与合并机会成清单执行沿信息架构、视觉、布局、交互、内容、代码六个维度展开每一维都有可核对的条目红线明确六条 NEVER 防止简化走向功能缺失或可访问性倒退验证与记录闭环五个验证问题确认改善真实发生被移除的复杂度必须留痕交接清晰删减到位即交给polish做最终收口。对照仓库中的命令表、元数据与相邻命令bolder/quieter/extract/polish可以确认distill是 Impeccable 设计词汇表中负责“减法”的单一入口其文档与确定性检测器规则、精炼类工作流在语义上一致适合在“UI 越做越挤、信息越堆越多”的阶段作为第一个介入的命令。【免费下载链接】impeccableThe design language that makes your AI harness better at design.项目地址: https://gitcode.com/GitHub_Trending/im/impeccable创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考