anti-ui-slop 技能实战Distill 蒸馏法——在保留完整能力的前提下简化产品界面【免费下载链接】awesome-copilotCommunity-contributed instructions, agents, skills, and configurations to help you make the most of GitHub Copilot.项目地址: https://gitcode.com/GitHub_Trending/aw/awesome-copilot导读distill蒸馏是 anti-ui-slop 技能内置的六份设计 playbook 之一专门面向界面简化与信息瘦身场景当现有界面存在重复文案、冗余操作、装饰噪音或层级混乱时用本文提供的方法在不丢失任何必要能力的前提下移除用户与主任务之间的障碍。读完本文你将掌握一套可执行的“找冗余 → 保清晰 → 验证完整性”三步蒸馏流程并理解它如何在 GitHub Copilot、Claude Code、Codex 等编码 Agent 中被触发与落地。一、Distill 是什么简化 ≠ 删减distill的核心立场是一句话“Remove obstacles between the user and the main task without removing necessary capability.”移除用户与主任务之间的障碍但不移除必要能力。这句话定义了蒸馏与传统“砍功能”的本质区别蒸馏针对的是障碍——重复的文案、多余的点击、装饰性噪音、与分组无关的容器、无意义的视觉差异必要能力必须完整保留——标签、焦点态、无障碍语义、错误信息、恢复路径一样都不能少简化对象是界面表达而不是业务流程本身。在 SKILL.md 中distill.md与new-work.md新界面/重设计、operate.md产品与仪表盘、polish.md打磨精修、audit.md显式审计、ios.md原生 iOS并列构成六选一的 playbook 体系。SKILL.md 明确要求每次请求只加载一份 playbook蒸馏场景下即只遵循 reference/distill.md避免把简化做成“另一套设计语言的植入”。从 MANIFEST.json 可以看到这份设计栈由 UIZZE 维护版本 4.1.1其evidenceMode为concrete-need-only——即只有遇到具体、悬而未决的视觉问题时才使用外部参考证据日常蒸馏完全依赖产品自身内容与本地设计系统这正是蒸馏法“从产品出发、而非从风格出发”的机制保证。二、第一步找到冗余Find the excess蒸馏的第一步是定位过量。distill.md 给出了五条可操作准则1. 识别主目标与完成任务所需的信息。先回答两个问题这个界面最核心的任务是什么用户要完成它最少需要看到哪些信息以此为基准界面中凡是与主任务无关的元素都进入候选删除名单。2. 移除四类典型冗余。重复文案repeated copy同一信息在多处重复出现重复操作duplicate actions同一动作存在多条入口路径装饰噪音decorative noise不传递信息、纯粹装饰的图形与装饰性容器不澄清分组的容器containers that do not clarify grouping卡片、边框、背景色如果没有让信息分组更清晰就属于多余层级。3. 削减不必要的视觉变化。颜色、字号、按钮样式、间距、表面处理surface treatments如阴影、背景、描边上的变化应当服务于层级表达而不是装饰。同类元素用同一套样式差异只出现在“确实不同”的地方。4. 一个明显主操作 少量从属操作。在任一界面上应当只有一个最突出的主操作primary action以及少量清晰从属的操作。多个主操作并存会让用户无法判断优先级——这一点与 reference/operate.md 中“make the current location, primary task, and next action obvious”的要求完全一致。5. 渐进式披露progressive disclosure。高级的、不常用的控件放到次级层级如折叠、弹窗、更多菜单中但关键信息必须保持可见。渐进披露是蒸馏的有力工具它不删除能力只是把低频能力的视觉权重降下来。这与 reference/new-work.md 中“建立清晰阅读顺序定位 → 主内容 → 主操作 → 次级细节”的编排原则一脉相承。实战中如何落地以信息密度为准绳reference/operate.md 补充了一个重要的判断标尺信息密度匹配工作任务。对于需要快速操作和信任感的产品型界面密集的表格、紧凑的控件是恰当的但装饰性容器永远不是。蒸馏不是把一切压扁而是让每一像素都服务于任务分组优先用间距与对齐而非边框、卡片或背景“Use spacing and alignment for grouping before adding borders, cards, or backgrounds”整个界面保持单一组件词汇表one component vocabulary不混入两套按钮、两种输入框风格优先使用标准导航、表单、表格、标签页、菜单、对话框而不是“新颖的替代品”——熟悉本身就是可用性。三、第二步保持清晰Preserve clarity这是蒸馏法的“红线”部分。简化最容易犯的错误是为了视觉干净而牺牲理解与可用性。distill.md 用四条“Do not”划定了不可逾越的边界1. 不要把必需操作藏在神秘交互后面Do not hide required actions behind mystery interactions。悬停才出现的按钮、双击才触发的动作、没有提示的手势——这些“神秘交互”会阻断发现性。必需操作必须一目了然。2. 不要移除标签、焦点态、无障碍语义、错误信息与恢复路径Do not remove labels, focus states, accessibility semantics, error messages, or recovery paths。这是蒸馏与“阉割”的分水岭。即便界面再简洁每个控件必须有标签label而不是只靠占位符或图标猜测必须有可见的焦点态focus states键盘用户才能定位无障碍语义accessibility semantics不能被清掉错误信息与恢复路径recovery paths是用户犯错后回到正轨的唯一依靠简化过程中最容易误删。3. 不要过度扁平化真正复杂的信息Do not flatten genuinely complex information until it becomes harder to understand。蒸馏针对的是“不必要的复杂”而不是“本质的复杂”。如果信息本身结构丰富如多层级的对象模型、多状态的工作流强行压平只会让用户更难理解。此时正确的做法是保留层级、用间距和对齐理清关系而不是抹平差异。4. 间距与对齐优先于嵌套卡片平实语言优先于解释性文案Prefer spacing and alignment over nested cards; prefer plain language over explanatory copy。两个“优先”给出了具体的执行偏好表达信息关系时先考虑留白与对齐这类“零成本”手段卡片嵌套是最后手段文案直白说人话胜过包装成“解释性”的长句。四、验证简化后的界面必须支撑完整任务distill.md 的收尾要求是验证简化结果在相关屏幕尺寸下仍然完整支撑任务本身包括所有重要状态。这一验证步骤与技能整体的“Finish”机制吻合——SKILL.md 要求“当环境支持时渲染并检查一次修复可观察的破损裁切、重叠、变形的媒体、不可达的控件、无响应的交互”。蒸馏验证应重点检查状态完整性loading、empty、error、success、disabled、selected、expanded、recovery——这些 reference/operate.md 明确要求覆盖的状态在简化后是否依然存在且可用响应式结构简化不能只是“缩小桌面布局”而应结构性处理——导航折叠、分组重排、保留关键操作的访问性可观察证据验证依据的是渲染结果而非源码推演这与 reference/audit.md 中“只审查实现中可观察到的内容不凭空发明缺失需求、不把个人品味当缺陷”的原则一脉相承。五、蒸馏与相邻 playbook 的协作边界蒸馏不是孤立操作它与其他 playbook 构成完整的技能体系。了解边界有助于正确触发Playbook适用场景与蒸馏的关系reference/new-work.md全新界面或重大重设计蒸馏常用于其“验证一次”阶段的收尾清理reference/operate.md产品与仪表盘界面提供信息密度、状态覆盖等蒸馏判断标尺reference/polish.md精修既有界面蒸馏减负、抛光提质polish 明确“不进行投机式清理”蒸馏则应“不发明新系统”reference/audit.md显式审计蒸馏完成后可审计验证返回最多三条按用户影响排序的实质发现三个关键纪律贯穿始终从产品出发不从风格出发先读 brief、既有 UI、组件、设计 token 与约束见 SKILL.md 的 “Work from the product” 一节它们永远优先于本技能复用而非发明蒸馏是在既有设计系统内做减法reference/polish.md 同样强调“复用现有 token 与组件避免投机式清理”参考证据按需取用根据 references/uizze-reference-policy.md只有当某个具体的布局、状态、模式问题悬而未决、且可见证据可能改变实现时才使用find_ui_references检索无果则继续静默工作不编造缺失证据。六、在编码 Agent 中的实际触发方式作为 anti-ui-slop 技能的蒸馏分支它可被下列提示词自然触发anti-ui-slop、stop UI slop、ground this UI in real screens、run the UI finish gate。当你正在用 GitHub Copilot、Claude Code、Codex 或 Cursor 等 Agent 开发界面且需求是“把界面改简洁、去掉多余元素”时可以让 Agent 加载 reference/distill.md按以下顺序执行明确主任务与完成它所需的最小信息集逐一移除重复文案、重复操作、装饰噪音、无分组价值的容器统一视觉变体收敛为“一个主操作 少量从属操作”用渐进式披露收起低频控件同时保证关键信息可见核查标签、焦点态、无障碍语义、错误信息与恢复路径是否完好在桌面与移动尺寸下渲染验证确认所有重要状态仍被支撑。结语蒸馏的本质不是“删”而是重新对齐——把界面的视觉权重、信息层级与操作路径重新对齐到用户的主任务上。distill.md的价值在于它同时给出了“该减什么”的清单和“绝不能动什么”的红线前者保证简洁后者保证能力完整与可访问性。将这份 playbook 与 anti-ui-slop 的六份 playbook 体系配合使用即可让编码 Agent 产出的界面既克制、又不失完整——真正把“简化”做成一项可验证的工程动作而不是一场随意的删除。【免费下载链接】awesome-copilotCommunity-contributed instructions, agents, skills, and configurations to help you make the most of GitHub Copilot.项目地址: https://gitcode.com/GitHub_Trending/aw/awesome-copilot创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
