抛光
概述
在 token、结构和反草稿设计之后，应用微观工艺，使 UI 在渲染表面上感觉恰当。除非某项标准或项目 token 另有规定，否则此处列举的数字配方均为启发式规则。
何时使用
- 完成
/ui构建（在anti-slop-design之后） /polish/ “微调细节” / “感觉不对劲”- 悬停、按压、进入/退出、图标切换等微交互
何时跳过
- 结构性网格/间距/层级 →
design-foundations - 比较渲染方向 / 强调所有状态 →
prototype - 嵌套圆角 / 高度语言 →
design-surfaces - 类型角色、换行、截断 →
design-typography - 合规性（对比度、名称、键盘） →
accessibility - 动效系统 / 命名系列 →
motion - 纯文案 / “AI 写作” / 空状态措辞 →
content-design - “整理代码” / 生成式实现 →
anti-slop-code - 仅后端修改，无渲染 UI 变化
MUST 规则
| 规则 | 详情 |
|---|---|
| 渲染证实 | 根据渲染后的 UI 判断换行、对齐、按压和圆角，而非仅看源码 |
| Token 优先 | 使用 --radius、间距和类型 token；当存在 token 时，不要发明一次性值 |
| 分类配方 | 将 0.96、交错毫秒等类似数字标记为启发式规则 |
| 最便宜的有效修复 | 删除装饰样式 → 原生 CSS → 复用项目 token → 最后添加抽象层 |
| 移动端工艺 | 小于 768px 时全宽主 CTA；粘性栏使用安全区域；操作按钮需拇指可及 |
禁止 transition: all | 命名属性；跳过 Tailwind 的裸 transition |
| 控制组件几何证明 | 在验收光学对齐前，渲染完整的控制组件矩阵，包括待机/加载状态以及适用的 LTR/RTL |
工艺（着手点）
| 关注点 | 着手点 | 分类 | 移交至 |
|---|---|---|---|
| 嵌套圆角 | 当曲线共享中心时，外侧 ≈ 内侧 + 内边距 | 启发式 | design-surfaces |
| 控件中的图标 | 在几何中心基础上进行光学微调 | 建议 | — |
| 模块深度 | 项目的边框/高度语言 | 项目默认 | design-surfaces |
| 悬停/切换 | 可打断的 CSS 过渡 | 建议 | 如有编排则移交 motion |
| 按压 | 需要按压反馈时使用 scale(0.96) | 启发式 | — |
| 动态数字 | tabular-nums | 建议 | design-typography |
| 短标题 | text-wrap: balance | 建议 | design-typography |
| 点击区域 | 触摸 44×44 / 密集桌面 ≥40 | 建议 | 如需 WCAG 2.5.8（24px）则移交 accessibility |
例外情况：药丸形/圆形按钮、密集工具栏（禁用按压缩放）、减少动效、非同心品牌语言、不需要轮廓的图像。
控制组件几何
- 渲染后的光学变体矩阵：纯文本、前导图标、尾随图标、仅图标以及待机/加载。
几何居中（inline-flex / items-center / justify-center）是必要的但不是证明。不存在通用的像素偏移量：先比较渲染后的矩阵，然后在固定图标槽或字形内应用最小的补偿。
判断组合图标-标签内容组及其感知视觉重量是否在不同变体和状态下平衡且居中。单独评估标签基线/大写字母高度与图标的关系；在图标+文本变体中，标签本身不必占据控件中心。一起验证图标视觉重量、token 间距、对称 token 内边距、焦点、点击区域、禁用、待机和加载状态，确保没有意外的内容组或控件宽度变化。当产品支持 RTL 时，应包括 LTR 和 RTL。
稳定待机几何是默认情况。对于明确的测量变形异常（references/component-patterns.md），检查两个端点及其目标播放，确认相邻操作保持稳定，并附上证据报告该异常。有意的变形不能成为意外位移或缺失无障碍名称的借口。
工作流程
- 界定范围 — 命名表面；跳过结构性或 token 系统工作。
- 扫描 — 1x/2x 渲染、亮/暗主题、悬停/按压/焦点、移动宽度。
- 控制组件矩阵 — 在渲染尺寸下比较纯文本、前导/尾随图标、仅图标、待机/加载以及适用的 LTR/RTL。
- 修复 — 最便宜的有效更改；将值映射到 token；将光学补偿保持在图标槽内。
- 报告 — 按原则分组的 Before/After 表格；将未检查的状态标记为
Not verified。
界限
- 可决定： 光学微调、命名过渡、tabular-nums、换行辅助、当项目没有按压反馈时添加上。
- 不可做： 将
0.96、弹跳0或同心圆角视为普遍法则；在有问题的布局上抛光；替换品牌字体。
检查清单
- 嵌套圆角已光学验证（或移交至
design-surfaces） - 图标在看起来不对的地方已光学居中
- 已检查完整渲染的控制组件矩阵：纯文本、前导/尾随图标、仅图标、待机/加载以及适用的 LTR/RTL
- 组合图标-标签组/感知视觉质量已居中；标签基线/大写字母高度关系、图标视觉重量、token 间距/内边距已验证
- 焦点、点击区域、禁用和加载状态保持几何形状，无标签或宽度变化
- 无
transition: all；悬停/按压可打断 - 动态数字使用
tabular-nums以避免抖动 - 标题使用
text-balance；短文案在有用时使用text-pretty - 点击区域满足 44/40 指导要求且无重叠
- 移动端工艺：小于 768px 时全宽主按钮、安全区域、拇指区域
- 启发式规则已标注；未测试状态标记为
Not verified
深度
完整示例：references/polish.md。
相关模块：design-surfaces、design-foundations、design-typography、motion、accessibility、references/evidence-policy.md。