尧图网页设计 
Impeccable Distill 指南用减法把界面剥离到本质的 AI 设计简化方法论【免费下载链接】impeccableThe design language that makes your AI harness better at design.项目地址: https://gitcode.com/GitHub_Trending/im/impeccable在 Impeccable 这套面向 AI 的设计技能体系中distill是与bolder放大、quieter收敛、polish精修并列的 Refine细化类命令。它不做加法、不换视觉世界而是做减法把设计剥离到本质移除任何不配占据位置的东西——冗余元素、重复信息、装饰噪音、多余的复杂度。本指南以 distill 参考文档 为核心骨架结合仓库中的技能元数据、质量底线与反模式测试夹具完整讲解从评估当前状态到记录被移除复杂度的五段式简化工作流。读完你将掌握如何判断一个界面到底乱在哪里、如何找到那 20% 产生 80% 价值的本质、如何沿信息架构与视觉两个主轴系统性地做减法以及如何在简化后自证可用性并未受损并正确交接给最终精修。一、Distill 是什么先定位再动手在 SKILL.md 的命令总表中distill的定位非常明确类别为Refine细化用法是distill [target]一句话描述是Strip to essence, remove complexity剥离到本质移除复杂度。技能元数据文件 command-metadata.json 给出了更细的触发条件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.即当用户提出simplify、declutter、reduce noise、remove elements、make a UI cleaner and more focused简化、去杂乱、降噪、移除元素、让界面更干净更聚焦等诉求时就应加载 distill 参考。这一点与工作流中的路由机制一致——用户显式或隐含给出命令时加载对应参考文档执行无参数调用/impeccable时则走 routing.md 的上下文感知菜单推荐。distill 和兄弟命令有清晰的边界不能混用bolderbolder 参考处理过于安全、平庸的设计做的是放大与加码quieter处理过于激进、过度刺激的设计做的是收敛distill处理的是复杂与冗余做的是剥到本质polish则是不可隐藏的重设计的收尾distill 文档明确指出当剪裁到位后交由/impeccable polish做最后一轮打磨。二、第一阶段评估当前状态Assess Current State动手之前先回答一个问题这个设计为什么看起来复杂或杂乱文档给出两条评估主线。2.1 识别复杂性来源Identify Complexity Sources对照以下六类来源逐一检视界面每一类都对应着具体的视觉症状复杂性来源典型症状元素过多Too many elements互相竞争的按钮、重复的信息、视觉杂乱过度变化Excessive variation颜色、字体、字号、样式数量失控且没有用途支撑信息过载Information overload所有内容一次性平铺缺少渐进披露progressive disclosure视觉噪音Visual noise无意义的边框、阴影、背景、装饰层级混乱Confusing hierarchy看不出什么最重要功能蔓延Feature creep选项、动作、路径过多仓库的测试夹具库 tests/fixtures/antipatterns 正好为视觉噪音这一类提供了可运行的判别样本例如glow.html用蓝色、紫色、青色、多色光晕反复演示零偏移彩色光晕这类装饰性深度cramped-padding.html用 8px 内边距的对比说明呼吸感与拥挤的分界named-color-borders.html与modern-color-borders.html则展示了边框色彩选择不当造成的廉价感。在做 distill 评估时这些夹具可以用作自我对照的基准确认哪些图案属于应当移除的噪音。2.2 找到本质Find the Essence识别完乱在哪之后追问四个问题用户的首要目标是什么应当只有一个什么是真正必要的什么是有更好nice-to-have什么可以被移除、隐藏或合并哪 20% 交付了 80% 的价值文档同时给出一条重要的证据边界如果这些问题无法从代码库推断出来不要猜测直接向用户提问去澄清无法推断的部分。这也呼应了技能总纲里验证要有界、有穷而不是无限循环的原则——澄清的代价远低于在错误方向上做大量返工。2.3 记住简化不是删功能这一阶段的高亮红线CRITICAL是理解整个命令的关键Simplicity is not about removing features. Its about removing obstacles between users and their goals. Every element should justify its existence.简化的对象是用户与目标之间的障碍不是功能本身每个元素都必须为自身的存在给出理由。三、第二阶段制定简化计划Plan Simplification评估之后制定一份冷酷的编辑策略ruthless editing strategy回答四个问题核心目的Core purpose这件事应当完成的那一件事是什么必要元素Essential elements要实现该目的真正缺一不可的是什么渐进披露Progressive disclosure什么可以藏起来、到需要时再出现合并机会Consolidation opportunities什么可以合并或整合文档在此处同样给出红线IMPORTANT简化是困难的它要求你对好主意说不为出色的执行腾出空间。要无情Be ruthless。计划阶段产出的是一份候选删除/隐藏/合并清单而不是直接改代码——这保证下一步的执行是有依据的删减而非情绪化删减。四、第三阶段沿六个维度执行简化Simplify the Design这是命令的核心实操部分。文档将移除复杂度系统化为六个互相正交的维度任何界面都可以逐维过一遍。4.1 信息架构Information Architecture目标是让信息结构本身变薄缩小范围移除次要动作、可选功能、冗余信息渐进披露把复杂度藏进清晰的入口后面——手风琴accordion、模态框modal、分步流程step-through flows合并相关动作合并相似的按钮、整合表单、把相关内容归组清晰的层级一个主动作、少量次动作、其余全部降级为三级或隐藏消除冗余别处已经说过的内容这里不重复。4.2 视觉简化Visual Simplification针对眼睛累的减法文档给出非常具体的量化指导收敛色板用 1–2 个强调色加中性色而不是 5–7 个颜色限制字体一个字族最多 3–4 个字号2–3 个字重移除装饰去掉不服务于层级或功能的边框、阴影、背景扁平化结构减少嵌套、去掉不必要的容器绝不在卡片里再嵌套卡片移除多余的卡片基础布局不需要卡片用间距与对齐即可一致的间距只用一套间距刻度清除任意值缝隙。卡片是最懒的容器、嵌套卡片永远是错的这一判断在仓库的 craft-floor.mdcraft 质量底线中被进一步强化——底线文档把同尺寸的图标标题文本卡片作为页面结构列为页面脚手架的默认拒绝项并明确nested cards are always wrong嵌套卡片总是错误的。反模式夹具如 edge-flush-cards.html 与 flush-against-border.html 则记录了什么才算真正需要卡片卡片贴边/嵌套何时属于越界的通过/失败样本可作为视觉简化时的判决参考。4.3 布局简化Layout Simplification让版面回归线性呼吸线性流程能用简单纵向流就替换复杂网格移除侧栏把次要内容内联化或隐藏通栏Full-width大方使用可用宽度而不是复杂的多栏布局一致的对齐左对齐或居中选定后坚持到底慷慨的留白让内容透气别把一切都塞得很紧。4.4 交互简化Interaction Simplification针对选择瘫痪的减法文档明确引用了选择的悖论paradox of choice是真实存在的减少选择更少的按钮、更少的选项、更清晰的路径智能默认值让常见选择自动化只在必要时询问内联动作能用行内编辑就替换模态流程移除步骤这个流程能少一步吗清晰的下一个动作一个明确的下一步而不是五个互相竞争的按钮。4.5 内容简化Content Simplification文案copy同样是设计噪音的来源更短的文案把每句话砍半然后再砍一次主动语态写 Save changes不写 Changes will be saved去掉行话平实的语言永远胜出可扫读的结构短段落、项目符号、清晰的标题只留必要信息删掉营销废话、法律辞令与含糊其辞hedging去掉重复文案不要让标题复述引言、不要重复解释同一件事只说一次。内容简化与 clarify 参考改进 UX 文案与错误信息在对象上有交叉但角度不同clarify 负责把话说清楚distill 负责把话说到最少。4.6 代码简化Code Simplification视觉层的简化最终要在代码层落实否则只是截图上的假干净删除未使用的代码死 CSS、未使用的组件、孤儿文件扁平化组件树减少嵌套深度合并样式合并相近样式一致地使用工具类utilities收敛变体那个组件真的需要 12 个变体吗还是 3 个就能覆盖 90% 的场景这与 craft-floor 中把真正可复用的值提升为 token但不要为一个局部特例凭空造一套系统抽象的立场互补——代码简化的判断标准始终是系统归系统、例外归例外。4.7 NEVER 清单简化绝不能越过的五条线distill 的底线部分用醒目的NEVER明确哪些事不叫简化移除必要功能简化 ≠ 没有功能为简化牺牲可访问性清晰的标签与 ARIA 仍然必需把东西简化到让人看不懂神秘 ≠ 极简移除用户做决策所需的信息完全抹掉层级有些东西就该突出过度简化复杂领域复杂度要与任务真实复杂度匹配。五、第四阶段验证简化Verify Simplification简化必须可验证而不是看起来空了就算成功。文档给出五条验证标准更快的任务完成用户能更快达成目标吗更低的认知负荷更容易理解该做什么吗仍然完整所有必要功能仍然可达吗更清晰的层级什么最重要仍然一目了然吗更好的性能更简单的设计加载更快吗注意这五条全部是用户结果导向的判据——这正是第一阶段简化 移除目标障碍的闭环。要验证这些最直接的方式是把页面真正渲染出来走一遍真实路径技能体系本身也提供配套检测detect 规则引擎与 audit/critique 命令以及 audit 参考 作为技术质量核查手段用于在简化前后对比确认没有在减法的过程中引入可用性或可访问性回归。六、第五阶段记录被移除的复杂度Document Removed Complexity如果删除了功能或选项不要一删了之记录移除原因为什么它们被移除评估替代入口这些能力是否需要备用的访问点例如藏进更多菜单或设置页标注待观察的用户反馈留意哪些用户反馈需要持续监控防止误删用户真正依赖的行为。这份记录既是给用户的交付说明也是后续 polish/audit 阶段判断这是有意裁剪还是意外回归的依据避免未来的迭代又把剪掉的东西悄悄加回来。七、收尾交接让 /impeccable polish 做最后一轮distill 文档明确了自己的边界当删减感觉对了the cuts feel right时交给/impeccable polish做最终一轮。读 polish 参考 可知polish 与 distill 是天然衔接的两道工序distill 负责决定留什么、砍什么polish 负责在保留现有视觉世界、内容与行为不变的前提下把留下的东西打磨到统一精良。polish 的范畴缺失 token、一次性实现、概念错配、局部缺陷四类漂移的修复与设计系统/相邻流程的一致性核对正好覆盖 distill 完成结构性简化之后遗留的一致性细节。整套流程的哲学注脚是 distill 文档结尾引用的圣埃克苏佩里名言也应是衡量简化是否到位的最终判据Perfection is achieved not when there is nothing more to add, but when there is nothing left to take away.完美不是无可增添而是无可删减时方才达成。八、一图流总结distill 五段式工作流评估现状→ 识别六大复杂性来源 追问首要目标是什么无法从代码推断就问用户制定计划→ 明确唯一核心目的、必要元素、可隐藏项、可合并项做冷酷的编辑策略执行简化→ 沿信息架构 / 视觉 / 布局 / 交互 / 内容 / 代码六个维度删减守住 NEVER 五条底线验证效果→ 以更快完成、更少认知负荷、功能仍完整、层级更清晰、性能更好五条用户结果判据复核记录与交接→ 记录移除原因与替代入口交由/impeccable polish精修收尾。整条流程严格受控于技能总纲的纪律distill 是 Refine 中的一轮有界操作做完即停、验证即止不做无休止的自我美化。它交付的产物是少而准——少掉的是噪音留下的是那个唯一值得用户关注的目标以及服务于它的最少必要元素。【免费下载链接】impeccableThe design language that makes your AI harness better at design.项目地址: https://gitcode.com/GitHub_Trending/im/impeccable创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Impeccable Distill 指南：用“减法“把界面剥离到本质的 AI 设计简化方法论
Impeccable Distill 指南用减法把界面剥离到本质的 AI 设计简化方法论【免费下载链接】impeccableThe design language that makes your AI harness better at design.项目地址: https://gitcode.com/GitHub_Trending/im/impeccable在 Impeccable 这套面向 AI 的设计技能体系中distill是与bolder放大、quieter收敛、polish精修并列的 Refine细化类命令。它不做加法、不换视觉世界而是做减法把设计剥离到本质移除任何不配占据位置的东西——冗余元素、重复信息、装饰噪音、多余的复杂度。本指南以 distill 参考文档 为核心骨架结合仓库中的技能元数据、质量底线与反模式测试夹具完整讲解从评估当前状态到记录被移除复杂度的五段式简化工作流。读完你将掌握如何判断一个界面到底乱在哪里、如何找到那 20% 产生 80% 价值的本质、如何沿信息架构与视觉两个主轴系统性地做减法以及如何在简化后自证可用性并未受损并正确交接给最终精修。一、Distill 是什么先定位再动手在 SKILL.md 的命令总表中distill的定位非常明确类别为Refine细化用法是distill [target]一句话描述是Strip to essence, remove complexity剥离到本质移除复杂度。技能元数据文件 command-metadata.json 给出了更细的触发条件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.即当用户提出simplify、declutter、reduce noise、remove elements、make a UI cleaner and more focused简化、去杂乱、降噪、移除元素、让界面更干净更聚焦等诉求时就应加载 distill 参考。这一点与工作流中的路由机制一致——用户显式或隐含给出命令时加载对应参考文档执行无参数调用/impeccable时则走 routing.md 的上下文感知菜单推荐。distill 和兄弟命令有清晰的边界不能混用bolderbolder 参考处理过于安全、平庸的设计做的是放大与加码quieter处理过于激进、过度刺激的设计做的是收敛distill处理的是复杂与冗余做的是剥到本质polish则是不可隐藏的重设计的收尾distill 文档明确指出当剪裁到位后交由/impeccable polish做最后一轮打磨。二、第一阶段评估当前状态Assess Current State动手之前先回答一个问题这个设计为什么看起来复杂或杂乱文档给出两条评估主线。2.1 识别复杂性来源Identify Complexity Sources对照以下六类来源逐一检视界面每一类都对应着具体的视觉症状复杂性来源典型症状元素过多Too many elements互相竞争的按钮、重复的信息、视觉杂乱过度变化Excessive variation颜色、字体、字号、样式数量失控且没有用途支撑信息过载Information overload所有内容一次性平铺缺少渐进披露progressive disclosure视觉噪音Visual noise无意义的边框、阴影、背景、装饰层级混乱Confusing hierarchy看不出什么最重要功能蔓延Feature creep选项、动作、路径过多仓库的测试夹具库 tests/fixtures/antipatterns 正好为视觉噪音这一类提供了可运行的判别样本例如glow.html用蓝色、紫色、青色、多色光晕反复演示零偏移彩色光晕这类装饰性深度cramped-padding.html用 8px 内边距的对比说明呼吸感与拥挤的分界named-color-borders.html与modern-color-borders.html则展示了边框色彩选择不当造成的廉价感。在做 distill 评估时这些夹具可以用作自我对照的基准确认哪些图案属于应当移除的噪音。2.2 找到本质Find the Essence识别完乱在哪之后追问四个问题用户的首要目标是什么应当只有一个什么是真正必要的什么是有更好nice-to-have什么可以被移除、隐藏或合并哪 20% 交付了 80% 的价值文档同时给出一条重要的证据边界如果这些问题无法从代码库推断出来不要猜测直接向用户提问去澄清无法推断的部分。这也呼应了技能总纲里验证要有界、有穷而不是无限循环的原则——澄清的代价远低于在错误方向上做大量返工。2.3 记住简化不是删功能这一阶段的高亮红线CRITICAL是理解整个命令的关键Simplicity is not about removing features. Its about removing obstacles between users and their goals. Every element should justify its existence.简化的对象是用户与目标之间的障碍不是功能本身每个元素都必须为自身的存在给出理由。三、第二阶段制定简化计划Plan Simplification评估之后制定一份冷酷的编辑策略ruthless editing strategy回答四个问题核心目的Core purpose这件事应当完成的那一件事是什么必要元素Essential elements要实现该目的真正缺一不可的是什么渐进披露Progressive disclosure什么可以藏起来、到需要时再出现合并机会Consolidation opportunities什么可以合并或整合文档在此处同样给出红线IMPORTANT简化是困难的它要求你对好主意说不为出色的执行腾出空间。要无情Be ruthless。计划阶段产出的是一份候选删除/隐藏/合并清单而不是直接改代码——这保证下一步的执行是有依据的删减而非情绪化删减。四、第三阶段沿六个维度执行简化Simplify the Design这是命令的核心实操部分。文档将移除复杂度系统化为六个互相正交的维度任何界面都可以逐维过一遍。4.1 信息架构Information Architecture目标是让信息结构本身变薄缩小范围移除次要动作、可选功能、冗余信息渐进披露把复杂度藏进清晰的入口后面——手风琴accordion、模态框modal、分步流程step-through flows合并相关动作合并相似的按钮、整合表单、把相关内容归组清晰的层级一个主动作、少量次动作、其余全部降级为三级或隐藏消除冗余别处已经说过的内容这里不重复。4.2 视觉简化Visual Simplification针对眼睛累的减法文档给出非常具体的量化指导收敛色板用 1–2 个强调色加中性色而不是 5–7 个颜色限制字体一个字族最多 3–4 个字号2–3 个字重移除装饰去掉不服务于层级或功能的边框、阴影、背景扁平化结构减少嵌套、去掉不必要的容器绝不在卡片里再嵌套卡片移除多余的卡片基础布局不需要卡片用间距与对齐即可一致的间距只用一套间距刻度清除任意值缝隙。卡片是最懒的容器、嵌套卡片永远是错的这一判断在仓库的 craft-floor.mdcraft 质量底线中被进一步强化——底线文档把同尺寸的图标标题文本卡片作为页面结构列为页面脚手架的默认拒绝项并明确nested cards are always wrong嵌套卡片总是错误的。反模式夹具如 edge-flush-cards.html 与 flush-against-border.html 则记录了什么才算真正需要卡片卡片贴边/嵌套何时属于越界的通过/失败样本可作为视觉简化时的判决参考。4.3 布局简化Layout Simplification让版面回归线性呼吸线性流程能用简单纵向流就替换复杂网格移除侧栏把次要内容内联化或隐藏通栏Full-width大方使用可用宽度而不是复杂的多栏布局一致的对齐左对齐或居中选定后坚持到底慷慨的留白让内容透气别把一切都塞得很紧。4.4 交互简化Interaction Simplification针对选择瘫痪的减法文档明确引用了选择的悖论paradox of choice是真实存在的减少选择更少的按钮、更少的选项、更清晰的路径智能默认值让常见选择自动化只在必要时询问内联动作能用行内编辑就替换模态流程移除步骤这个流程能少一步吗清晰的下一个动作一个明确的下一步而不是五个互相竞争的按钮。4.5 内容简化Content Simplification文案copy同样是设计噪音的来源更短的文案把每句话砍半然后再砍一次主动语态写 Save changes不写 Changes will be saved去掉行话平实的语言永远胜出可扫读的结构短段落、项目符号、清晰的标题只留必要信息删掉营销废话、法律辞令与含糊其辞hedging去掉重复文案不要让标题复述引言、不要重复解释同一件事只说一次。内容简化与 clarify 参考改进 UX 文案与错误信息在对象上有交叉但角度不同clarify 负责把话说清楚distill 负责把话说到最少。4.6 代码简化Code Simplification视觉层的简化最终要在代码层落实否则只是截图上的假干净删除未使用的代码死 CSS、未使用的组件、孤儿文件扁平化组件树减少嵌套深度合并样式合并相近样式一致地使用工具类utilities收敛变体那个组件真的需要 12 个变体吗还是 3 个就能覆盖 90% 的场景这与 craft-floor 中把真正可复用的值提升为 token但不要为一个局部特例凭空造一套系统抽象的立场互补——代码简化的判断标准始终是系统归系统、例外归例外。4.7 NEVER 清单简化绝不能越过的五条线distill 的底线部分用醒目的NEVER明确哪些事不叫简化移除必要功能简化 ≠ 没有功能为简化牺牲可访问性清晰的标签与 ARIA 仍然必需把东西简化到让人看不懂神秘 ≠ 极简移除用户做决策所需的信息完全抹掉层级有些东西就该突出过度简化复杂领域复杂度要与任务真实复杂度匹配。五、第四阶段验证简化Verify Simplification简化必须可验证而不是看起来空了就算成功。文档给出五条验证标准更快的任务完成用户能更快达成目标吗更低的认知负荷更容易理解该做什么吗仍然完整所有必要功能仍然可达吗更清晰的层级什么最重要仍然一目了然吗更好的性能更简单的设计加载更快吗注意这五条全部是用户结果导向的判据——这正是第一阶段简化 移除目标障碍的闭环。要验证这些最直接的方式是把页面真正渲染出来走一遍真实路径技能体系本身也提供配套检测detect 规则引擎与 audit/critique 命令以及 audit 参考 作为技术质量核查手段用于在简化前后对比确认没有在减法的过程中引入可用性或可访问性回归。六、第五阶段记录被移除的复杂度Document Removed Complexity如果删除了功能或选项不要一删了之记录移除原因为什么它们被移除评估替代入口这些能力是否需要备用的访问点例如藏进更多菜单或设置页标注待观察的用户反馈留意哪些用户反馈需要持续监控防止误删用户真正依赖的行为。这份记录既是给用户的交付说明也是后续 polish/audit 阶段判断这是有意裁剪还是意外回归的依据避免未来的迭代又把剪掉的东西悄悄加回来。七、收尾交接让 /impeccable polish 做最后一轮distill 文档明确了自己的边界当删减感觉对了the cuts feel right时交给/impeccable polish做最终一轮。读 polish 参考 可知polish 与 distill 是天然衔接的两道工序distill 负责决定留什么、砍什么polish 负责在保留现有视觉世界、内容与行为不变的前提下把留下的东西打磨到统一精良。polish 的范畴缺失 token、一次性实现、概念错配、局部缺陷四类漂移的修复与设计系统/相邻流程的一致性核对正好覆盖 distill 完成结构性简化之后遗留的一致性细节。整套流程的哲学注脚是 distill 文档结尾引用的圣埃克苏佩里名言也应是衡量简化是否到位的最终判据Perfection is achieved not when there is nothing more to add, but when there is nothing left to take away.完美不是无可增添而是无可删减时方才达成。八、一图流总结distill 五段式工作流评估现状→ 识别六大复杂性来源 追问首要目标是什么无法从代码推断就问用户制定计划→ 明确唯一核心目的、必要元素、可隐藏项、可合并项做冷酷的编辑策略执行简化→ 沿信息架构 / 视觉 / 布局 / 交互 / 内容 / 代码六个维度删减守住 NEVER 五条底线验证效果→ 以更快完成、更少认知负荷、功能仍完整、层级更清晰、性能更好五条用户结果判据复核记录与交接→ 记录移除原因与替代入口交由/impeccable polish精修收尾。整条流程严格受控于技能总纲的纪律distill 是 Refine 中的一轮有界操作做完即停、验证即止不做无休止的自我美化。它交付的产物是少而准——少掉的是噪音留下的是那个唯一值得用户关注的目标以及服务于它的最少必要元素。【免费下载链接】impeccableThe design language that makes your AI harness better at design.项目地址: https://gitcode.com/GitHub_Trending/im/impeccable创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考