polish

必须完成的准备工作

用户通过 /polish 启动此工作流。此技能激活后，加载 $frontend-design——其中包含设计原则、反模式和 Context Gathering Protocol。继续之前，遵循该协议——如果还没有设计上下文，必须先加载 $setup。此外还需了解质量标准（MVP 还是旗舰级）。

---

仔细进行最终检查，找出那些细节上的小问题；正是这些细节让优秀的作品更上一层楼。已交付与精益求精之间的差别。

优化应让现有层级和系统更加精准，而非用来装饰薄弱的基础。

如果需要为零数据界面本身设计方案，请参考 empty-state 技能。如果真正的问题在于更广泛的激活流程、关键顿悟时刻或首次运行策略，请使用 onboard。

优化前评估

了解当前状态和目标：

1. 检查完整性：

   • 功能是否完整？
   • 是否有需要保留的已知问题（用 TODO 标记）？
   • 质量标准是什么？（MVP 还是旗舰级功能？）
   • 何时发布？（有多少时间用于优化？）

2. 找出需要优化的方面：

   • 视觉不一致
   • 间距和对齐问题
   • 交互状态缺失
   • 文案不一致
   • 边界情况和错误状态
   • 加载和过渡是否流畅

关键：优化是最后一步，而非第一步。不要优化功能尚未完成的工作。

系统性地进行优化

有条理地检查以下各个维度：

如需进行灰度测试、操作层级以及标签和值的处理，请参考层级检查清单。 如需检查行长、行高、对齐、基线和标题克制度，请参考文本层级与易读性。 如需检查操作是否恰当地突出或弱化，请参考操作层级。 如需检查提醒、状态和着色语义界面，请参考语义色彩。 如需判断优化问题属于局部细节还是系统偏差，请参考设计系统一致性。 如果边框、卡片、阴影、重叠或背景变化显得杂乱或不一致，请参考界面层次区分。 如果截图、图标或媒体显得不协调、难以辨认或容纳不当，请参考图像处理。 如果默认 UI 元素、点缀或装饰性背景需要更有针对性的调整，请参考收尾细节。

视觉对齐与间距

• 像素级对齐：所有元素都与网格对齐
• 间距一致：所有间隔都采用间距比例（不要出现随意的 13px 间隔）
• 视觉对齐：根据视觉重量进行调整（图标可能需要偏移，才能在视觉上居中）
• 响应式一致性：在所有断点下，间距和对齐都应合理
• 遵循网格：元素与基线网格对齐
• 分组清晰：组与组之间的间距大于组内间距
• 界面层次区分：有目的地使用边框、阴影、卡片和背景变化，而非同时使用所有效果

检查：

• 启用网格叠加层并检查对齐
• 使用浏览器检查器检查间距
• 在多种视口尺寸下测试
• 留意视觉上“感觉”不对的元素

字体排版优化

• 层级一致性：相同元素在各处使用相同的字号和字重
• 行长：正文每行 45-75 个字符
• 行高：根据字号和上下文设置合适的行高
• 孤行与寡行：末行不应只剩一个词
• 断字：根据语言和栏宽合理断字
• 字距调整：按需调整字母间距（尤其是标题）
• 字体加载：不出现 FOUT/FOIT 闪烁
• 基线对齐：不同行字号的文本在同一行时，应对齐整齐
• 链接克制：次要链接的颜色不要过于醒目，以免与主要路径争抢注意力
• 数字对齐：需要比较时，数字列应右对齐
• 标题克制：分节标题应辅助内容，而非喧宾夺主

颜色与对比度

• 对比度：所有文本均符合 WCAG 标准
• 令牌使用一致：不使用硬编码颜色，统一使用设计令牌
• 主题一致性：适用于所有主题变体
• 颜色含义：相同颜色在各处表达相同含义
• 焦点状态易于识别：焦点指示器清晰可见，且对比度充足
• 带色调的中性色：不使用纯灰或纯黑，应加入细微色调（0.01 色度）
• 彩色背景上的灰色文本：切勿在彩色背景上使用灰色文本，应使用该颜色的某个色阶或透明度
• 调色板规范：表面和强调色使用定义好的色阶，不随意临时指定颜色

交互状态

每个交互元素都需要具备以下状态：

• 默认：静止状态
• 悬停：提供细微反馈（颜色、缩放、阴影）
• 焦点：键盘焦点指示器（除非有替代方案，否则绝不移除）
• 激活：点击／按下时的反馈
• 禁用：明确表示不可交互
• 加载中：异步操作的反馈
• 错误：验证或错误状态
• 成功：成功完成状态

缺少状态会造成困惑，并带来糟糕的使用体验。

确保操作层级在各种状态下保持不变：主要操作在悬停、焦点、激活、加载中和禁用状态下仍应显得最重要。

微交互与过渡效果

• 平滑过渡：所有状态变化都应使用合适的动画（150-300ms）
• 缓动一致：使用 ease-out-quart/quint/expo 实现自然减速。切勿使用弹跳或弹性效果，这些效果显得过时。
• 避免卡顿：动画保持 60fps，且只为 transform 和 opacity 添加动画
• 动效恰当：动效应服务于目的，而非仅作装饰
• 减少动态效果：遵循 prefers-reduced-motion

内容与文案

• 术语一致：同一事物在各处使用相同名称
• 大小写一致：统一使用标题式大小写或句子式大小写
• 语法与拼写：不得有拼写错误
• 长度恰当：不冗长，也不过于简短
• 标点一致：句子使用句号，标签不加句号（除非所有标签都加）

图标与图片

• 风格一致：所有图标来自同一图标系列或风格相匹配
• 尺寸恰当：图标尺寸应与使用场景相符且保持一致
• 对齐恰当：图标与相邻文本在视觉上对齐
• 替代文本：所有图片都应有描述性替代文本
• 加载状态：图片不应导致布局偏移，并应使用恰当的宽高比
• 视网膜屏支持：为高 DPI 屏幕提供 2x 资源
• 截图清晰易读：截图不应缩得过小，以致其结构无法辨认
• 图标尺寸规范：不要把微小图标放大成粗糙的色块，也不要把细节丰富的图标缩小到模糊不清

表单与输入

• 标签一致性：所有输入项都应有恰当的标签
• 必填指示：清晰且一致
• 错误消息：实用且一致
• Tab 顺序：键盘导航顺序合理
• 自动聚焦：使用恰当（不要过度使用）
• 验证时机：保持一致（失焦时验证或提交时验证）

边缘情况与错误状态

• 加载状态：所有异步操作都有加载反馈
• 空状态：提供有帮助的空状态，而不只是留白
• 错误状态：提供明确的错误消息和恢复途径
• 成功状态：确认操作成功
• 长内容：妥善处理超长名称、描述等内容
• 无内容：优雅地处理缺失数据
• 离线：妥善处理离线情况（如适用）
• 空状态层级：空状态应明确指出下一步操作，不要无谓地留下无法使用的控件

响应式布局

• 所有断点：测试窄屏、中等屏幕和宽屏布局
• 触控目标：触控设备上的最小尺寸为 44x44px
• 文本易读：紧凑布局中的文本不小于 14px
• 无水平滚动：内容应适应视口
• 合理重排：内容应有逻辑地适应布局

性能

• 快速初始加载：优化关键路径
• 无布局偏移：元素加载后不会跳动（CLS）
• 交互流畅：无延迟或卡顿
• 优化图像：使用合适的格式和尺寸
• 延迟加载：屏幕外的内容应延迟加载

代码质量

• 移除控制台日志：生产环境中不应有调试日志
• 移除注释掉的代码：清理无用代码
• 移除未使用的导入：清理未使用的依赖项
• 命名一致：变量和函数遵循命名约定
• 类型安全：不使用 TypeScript any，也不忽略错误
• 无障碍性：使用恰当的 ARIA 标签和语义化 HTML

润色检查清单

按步骤逐项检查：

• 所有断点下的视觉对齐都精准无误
• 始终一致地使用间距设计令牌
• 字体排印层级保持一致
• 已实现所有交互状态
• 所有过渡效果都流畅（60fps）
• 文案一致且经过润色
• 图标保持一致且尺寸恰当
• 所有表单都正确标注并经过验证
• 错误状态能提供帮助
• 加载状态清晰明确
• 空状态友好易懂
• 触控目标的最小尺寸为 44x44px
• 对比度符合 WCAG AA 标准
• 键盘导航可正常使用
• 焦点指示器清晰可见
• 无控制台错误或警告
• 加载时无布局偏移
• 支持所有目标浏览器
• 尊重减少动态效果的偏好设置
• 代码整洁（无 TODO、console.logs 或注释掉的代码）

重要：润色关乎细节。放大查看，眯起眼睛仔细看，亲自使用。点滴细节累积起来，效果显著。

切勿：

• 在功能尚未完成前就开始润色
• 如果 30 分钟后就要发布，还花上数小时润色（应先确定优先级）
• 润色时引入错误（要彻底测试）
• 忽略系统性问题（如果各处间距都不对，就修复整个系统）
• 把一处打磨到完美，却让其他地方显得粗糙（保持一致的质量水准）
• 用边框、阴影或色彩装饰来掩盖尚未解决的层级问题
• 在更克制的分隔方式效果更好时，使用鲜艳的链接颜色、杂乱的边框或装饰性重叠

最终验证

标记为完成之前：

• 亲自使用：实际操作该功能
• 在真实设备上测试：不要只依赖浏览器 DevTools
• 请其他人审核：新的视角能发现问题
• 与设计稿对照：确保符合预期设计
• 检查所有状态：不要只测试顺利流程

请记住：你拥有无可挑剔的细节把控能力和出众的审美。持续打磨，直到使用起来毫不费力、视觉上恰到好处、运行时毫无瑕疵。关注细节——它们至关重要。