用途
UI Polish Pass 是 agentic-design-system(ADS)中的界面打磨技能,定位为“ADS 工艺负责人”。它用于在任务匹配与信息结构已经可靠之后,作为同一次构建或评审的一部分,对改动过的界面应用相关的工艺机制。小改动只做小检查;它不重新设计已选定的方向,也不把原型升级为生产级作品。若需要新方向,应由真实未决的决策触发,而不是一次打磨仪式。
核心视角
先提炼,再装饰:把屏幕剥离到本质结构,然后只加回值得保留的部分。如果一次打磨需要更多颜色、更多卡片和更多装饰,那大概不是打磨。技能提供两个方向性动作:/bolder 表示在不增加杂乱的前提下提升对比、层级或确定性;/quieter 表示去除噪声、降低强调,让正确的对象领先。
主要能力
- 视觉基础检查:优先使用产品既有 token;在缺乏一致基础时,先定义最小可用集合,包括字体角色、字号比例、行高与可读行宽,间距步进与分组节奏,表面、边框、文本、动作与语义颜色,圆角与高度规则,图标族与尺寸规则。既有 token 适用时不发明新 token;重复元素冲突时,先修复其所属基础组件,而非在微观细节上打补丁。
- 控件几何:在无控件尺寸体系时使用三种命名高度——compact 32px(仅密集桌面工具)、default 40px(常规桌面控件)、touch 48px(触屏优先与移动端主控件)。同一行控件共享高度;触控目标至少 48×48px,相邻目标至少间隔 8px,即使可见图形更小。常规控件内使用 18px Nucleo 界面图标,24px 图标留给更大的独立或编辑性场景。图标与标签间距、水平内边距、圆角与聚焦处理集中在控件基础组件中。下拉箭头至少 16px 边缘内缩,并为文本留出至少 44px 净空,这两个值放入共享的 select/menu-trigger 基础组件。
- 文本存活:默认允许内容换行,仅在产品约定明确要求单行时截断;被截断的值需要可靠方式展现完整内容(无障碍提示、展开或详情视图);为 flex 与 grid 文本子元素按需设置 min-width: 0;不把有意义的文本放入固定高度容器;验证长名称、本地化扩展、浏览器缩放与 200% 文本缩放;内联元数据挤压主文本时先堆叠或重排,再考虑缩小字号。
- 数据语法:文本列左对齐、数字列右对齐;变化的数字、比较、价格、百分比、计数与时间戳使用等宽数字;每种数据类型应用一种符合区域设置的格式,明确并统一小数精度、单位、符号、日期样式与时区;缺失、零、不适用与加载分别表示为不同状态,使用有意义的标签而非含糊的破折号;表头与表体行密度成对,除语义需要外不混用行高;密集表格给予所需页面宽度,不埋进模态、嵌套卡片或狭窄侧栏;窄屏下有意识地选择优先列、行详情、卡片或带提示的横向滚动策略。
- 交互状态体系:每个交互基础组件从同一 token 配方定义 enabled、hover、focus-visible、pressed、selected(如适用)、disabled 与 busy 状态;焦点指示器至少 2px 等效周长区域与 3:1 对比度变化,表面多变时优先双色环;hover 不能成为唯一可用操作或说明的入口;pressed 与 busy 立即确认输入且不移动周围布局;选择、状态与校验不能仅靠颜色表达;若禁用原因重要,需在附近持续文案说明;状态组合(如选中加悬停、选中加聚焦、忙碌加禁用)必须保持可读。
- 表面层级:除非产品证明需要更多,最多使用三层语义表面——base 用于页面画布,raised 用于常驻面板与分组工作区,overlay 用于菜单、浮层、对话框与瞬时层;每层拥有自己的背景、边框、圆角与高度配方;边框表达分组或状态,阴影表达真实高度;不为制造内边距而添加卡片;避免卡中卡,除非嵌套表面有独立的交互或状态角色。
- 表单结构:使用可见标签,占位文本只是示例或提示,绝不作为唯一标签;标签、控件、帮助文本、校验与状态保持可预测的组件结构;尽可能复用帮助文本位承载校验,避免错误引起大幅布局跳动;使用正确的输入类型、输入模式、自动完成 token 与原生语义;按预期答案设定字段尺寸,短值不应默认占满页面宽度;校验靠近字段,操作反馈靠近触发操作,提示条是次要确认,而非唯一的错误或成功通道。
- 异步稳定与恢复:骨架与加载占位与最终内容几何足够接近,防止布局偏移;等待期间保持触发控件可见,禁用它或改标签,并在操作点暴露进度;某一请求失败时保留可用的部分数据;乐观更新需要回滚路径,可逆的破坏性操作优先撤销,真正不可逆的操作使用确认;空状态与错误状态保留页面视觉主轴并包含下一步有用操作。
- 响应式转换与分层:每个复杂组件声明其小屏策略——重排、重序、展开、替代或有意识滚动;当任务变化时移动端是不同构图,不是统一缩小的桌面版;粘性头部、底部操作、对话框与聚焦控件尊重安全区域,不遮挡内容或键盘焦点;对基础内容、粘性元素、浮层、对话框与通知使用具名层级 token,不堆积任意 z-index;在用户合理预期返回时,保留滚动位置、选择、筛选与任务上下文。
- 图标规范:当项目没有既有图标体系且许可允许时,将 Nucleo 作为默认图标生态;产品界面与紧凑控件使用 Nucleo UI Outline 18,更大的产品、编辑或营销场景使用 Nucleo Core Outline 24;在项目明确批准迁移前保留既有连贯图标族;原生平台惯例、品牌体系、游戏等领域特定视觉语言可有意识例外;同一表面不混用图标族或描边体系;用共享的 Icon 或 InlineIcon 基础组件集中管理图标族、尺寸、描边、颜色、对齐、无障碍与视觉修正;文本旁图标对齐首行基线,flex 布局从基线对齐开始;方形按钮、工具栏、头像等固定容器内的独立图标保持几何居中;装饰性图标对辅助技术隐藏,纯图标控件需要无障碍名称;含义不普遍清晰的图标配可见标签。Nucleo 是许可依赖而非可分发的包,不得提交完整高级库或许可密钥,使用授权包访问、密钥存于秘密存储,并在发布前核对共享、开源、模板与图标数量条款。
- 工艺评审:同时检查相关维度——间距与构图、排版、对齐、颜色与对比度、交互手感、收尾(等宽数字、弹性换行、连贯图标、嵌套圆角、按属性过渡,不用 transition: all)。
使用方式
在任务匹配与信息结构成立后,将本技能用于改动过的界面,作为同一次构建或评审的一部分。可结合 /bolder 与 /quieter 做方向性调整。检查时需在最终尺寸与目标视口下查看渲染结果,与选定基线和相关参考对比,实际演练受影响的控件行为、长内容与响应式变化;以真实任务清晰度与参考还原度为准,而非某个流行产品是否会这样发布。
适用场景与限制
适用于已选定方向的界面精修、组件与基础原语打磨、界面工艺审查。限制包括:不重新设计已选方向;不把原型做成生产级;不豁免基础可用性;若工艺检查暴露结构性缺陷,应把该发现交回 ADS 判断环节,而不是开启新的重设计循环;打磨程度只需满足所请求产物的需要,一次性实验可以粗糙,有用的内部工具仍需可读性与可用控件。品牌字体、配色、密度个性与品牌表达由项目级决策,本技能的机械默认不用于替代这些选择。资料未提供具体收费、价格与平台信息。