用途
design-polish 用于在交付前进行细致的最终质量打磨，捕捉区分“好”与“优秀”的所有小细节。该技能会实际执行修改，而 /design-audit 和 /design-critique 仅输出报告。打磨是最后一步，不是第一步——不要打磨功能尚未完成的工作。
检测器和自动化 QA 输出仅作为缺陷证据。脚本结果干净永远不能证明设计优秀；需要收集浏览器证据并检查真实交互路径。
准备工作
- 阅读 ~/.claude/skills/minoan-frontend-design/SKILL.md 了解美学原则。检查 .design-context.md 获取项目上下文。
- 开始前确认工作功能完整。若不完整，告知用户并建议先完成功能。
- 可选引入先前评审：若对同一目标运行过 /design-critique，读取 .design-critique/ 中最新快照，将其 P0/P1 项纳入打磨清单。评审只是众多输入之一，无论如何都要自行检查。
- 分类外观问题与功能问题：将每个问题归类为外观（看起来不对但不阻碍用户）或功能（破坏、阻塞或混淆体验）。时间紧张时功能问题优先交付，外观问题可后续跟进。质量应保持一致——不要完美一个角落却留下另一个粗糙。
设计系统发现
将功能对齐设计系统不是可选项。没有对齐的打磨只是漂移之上的装饰。
- 寻找设计系统：搜索设计系统文档、组件库、样式指南或令牌定义。研究核心模式：颜色令牌、间距尺度、排版样式、组件 API、动效约定。
- 记录约定：共享组件如何导入？使用什么间距尺度？哪些颜色来自令牌而非硬编码？可比操作使用什么流程形态（模态 vs 整页，内联 vs 路由）？
- 识别漂移并命名根因：对每个偏差，归类为缺失令牌（值应存在但不存在）、一次性实现（共享组件存在但未使用）或概念错位（功能的流程/信息架构/层级与相邻功能不匹配）。修复方式因类别而异。
- 若存在设计系统，打磨必须使功能与之对齐。若不存在，则对照代码库中可见的约定进行打磨。
系统性打磨
按以下维度有条理地处理：
视觉对齐与间距
- 一切对齐到网格。没有随机的 13px 间隙——所有间距使用尺度。
- 光学对齐：margin-left: 0 的文本看起来缩进——使用 -0.05em 负边距。播放图标向右偏移。
- 嵌套元素使用同心边框圆角（outerRadius = innerRadius + padding）。
- 响应式一致性：间距和对齐在所有断点保持。
信息架构与流程
对畸形流程做视觉打磨是浪费工作。让体验形态匹配系统，而不仅是表面。
- 渐进披露：与相邻功能相比，何时揭示多少内容要匹配。
- 既定用户流程：多步操作遵循与可比流程相同的形态（模态 vs 整页，内联编辑 vs 独立路由，失焦保存 vs 显式提交）。
- 层级与复杂度：相同概念权重获得相同视觉权重。主要操作不会在一个角落变成三级。
- 命名与心智模型：功能使用与系统其余部分相同的名词和动词。
排版
- 相同元素全程使用相同字号/字重。
- 正文行宽上限 45-75ch。
- 无孤行或寡行——使用 text-wrap: balance（标题）和 text-wrap: pretty（正文）。
- 字体加载：无 FOUT/FOIT 闪烁。font-display: swap 配合 size-adjust 回退。
- 字体平滑：根布局使用 antialiased（macOS 不加会渲染更重）。
- 动态数字使用 tabular-nums 防止布局偏移。
颜色与对比
- 所有文本满足 WCAG 对比度（普通 4.5:1，大号 3:1）。
- 无硬编码颜色——全部使用设计令牌。
- 带色调的中性色：无纯灰或纯黑。添加 0.01 品牌色相彩度。
- 绝不在彩色背景上使用灰色文本——使用该颜色的更深色调。
- 焦点指示器可见且对比度充足。
交互状态
每个交互元素需要全部 8 种状态：
默认、悬停（细微缩放/颜色/阴影）、焦点（键盘指示器——绝不移除）、激活（点击反馈）、禁用（明确不可交互）、加载（异步反馈）、错误（验证状态）、成功（完成）
缺失状态会造成困惑。检查每个按钮、链接、输入框、开关。
- 按下缩放：按钮在 :active 获得 scale(0.96) 触觉反馈。始终 0.96——绝不低于 0.95（感觉夸张）。使用 CSS 过渡保证可中断性。Tailwind：active:scale-[0.96] transition-transform duration-150 ease-out。添加静态 prop 在动效会分散注意力时禁用。Framer Motion：whileTap={{ scale: 0.96 }}。
- 命中区域扩展：交互元素需要最小 40-44px 命中区域。若可见元素更小（如 20px 图标），用伪元素扩展：&::after { content: ""; position: absolute; inset: 50%; transform: translate(-50%, -50%); width: 40px; height: 40px; }。绝不让两个命中区域重叠。
过渡与动效
- 所有状态变化动画 150-300ms。
- 缓动：cubic-bezier(0.25, 1, 0.5, 1)（ease-out-quart）或类似。绝不使用弹跳或弹性。
- 仅动画 transform 和 opacity。高度用 grid-template-rows: 0fr → 1fr。
- 尊重 prefers-reduced-motion。
- 交互状态变化使用 CSS 过渡（可中断）；关键帧仅用于一次性序列。
- 绝不 transition: all——指定确切属性。
- 进入动画拆分并错开（每组约 100ms）；退出更短更细微。
- 页面加载时已处于默认状态的元素不做进入动画。
内容与文案
- 术语一致：相同事物使用相同名称。
- 大小写一致：标题式 vs 句子式统一应用。
- 无错别字。标点一致（句子用句号，标签不用）。
表面与深度
- 卡片/按钮使用阴影而非边框——分层透明 box-shadow 适应任何背景。
- 图像轮廓：细微 1px 内嵌轮廓（浅色 outline-black/10，深色 outline-white/10）——绝不使用带色调中性色。
- 图标交叉淡入：两个图标都保留在 DOM 中（一个绝对定位），用 CSS 过渡交叉淡入。
边界情况
- 加载状态：所有异步操作有反馈。
- 空状态：有帮助信息 + 明确下一步操作，而非空白。
- 错误状态：清晰信息与恢复路径。
- 长内容：优雅处理超长名称、描述（截断、换行）。
响应式
- 触摸设备最小触摸目标 44x44px。用伪元素命中区域扩展小元素。
- 移动端无小于 14px 的文本。
- 无水平滚动。
- 内容逻辑适应，而非仅缩小。
性能
- 加载时无布局偏移（CLS）。为图像/视频设置尺寸。
- 首屏以下图像懒加载。
- 无控制台错误或警告。
- will-change 仅用于 GPU 可合成属性（transform、opacity、filter），且仅在观察到首帧卡顿时使用。
代码质量
- 移除 console.log、注释掉的代码、未使用的导入。
- 命名一致。无 TypeScript any 或忽略的错误。
- 正确的 ARIA 标签和语义 HTML。
验证清单
标记完成前：
- 视觉对齐在所有断点完美
- 间距一致使用设计令牌
- 排版层级一致
- 所有交互状态已实现
- 所有过渡平滑（60fps）
- 文案一致且精炼
- 所有表单正确标注和验证
- 错误状态有帮助
- 加载状态清晰
- 空状态友好
- 触摸目标最小 44px
- 对比度满足 WCAG AA
- 键盘导航可用
- 焦点指示器可见
- 无控制台错误或警告
- 加载时无布局偏移
- 尊重减少动效偏好
- 代码干净（无 TODO、console.log、注释代码）
- 嵌套圆角元素使用同心边框圆角
- 无 transition: all——仅特定属性
- 动态数字使用 tabular-nums
- 图像有细微内嵌轮廓增加深度
- 按钮按下缩放（0.96）
清理
打磨后确保代码质量：
- 替换自定义实现：若设计系统提供了你重新实现的组件，切换到共享版本。
- 移除孤立代码：删除因打磨而过时的未使用样式、组件或文件。
- 整合令牌：若引入了新值，检查是否应成为令牌。
参考
实现细节（代码示例、具体 CSS 值、Tailwind 模式）：references/interface-craft-techniques.md。
打磨到感觉轻松、看起来有意、运行无瑕。