前端 UI 细节打磨与评审时用：统一圆角、阴影、图标…

适用于前端项目在实现或评审阶段，用具体数值和规则打磨 UI 细节、动效与状态反馈，并产出按严重程度分组的验证报告。

适用场景

解决思路

1. 评审时放慢界面：以 10% 速度回放/观察，10% 速度下感觉不对的地方就是全速下微妙出错的地方。
2. 保持项目现有的组件库、tokens、密度和动效语言，只在下列规则明确指定精确交互时偏离。
3. 所有 duration、curve、scale、blur 都使用文中给出的精确值，不要近似：cubic-bezier(0.2, 0, 0, 1) 不等于 cubic-bezier(0.4, 0, 0.2, 1)，0.96 不等于 0.95。
4. 同心圆角：外层 radius = 内层 radius + padding；嵌套元素 radius 不匹配是最常见的界面别扭来源。具体 radius、shadow、outline 配方见 surfaces.md。
5. 视觉优先于几何对齐：当几何居中看起来偏时，改用视觉对齐；带图标的按钮、播放三角形、非对称图标都需要手动微调。
6. 阴影表达层级，边框表达结构：仅用于制造深度的边框优先改成多层透明 box-shadow；保留用于传达结构或状态的边框，如 dividers、separators、selected 或 focus 状态。
7. 可中断动画：交互状态变化使用 CSS transitions，因为它们可以在动画中途被中断；keyframes 只保留给运行一次的分阶段序列。
8. 拆分并错开入场动画：对不频繁、且顺序能表达层级的入场，把内容拆成语义块并以约 100ms 错开；只动画一个容器在同等成本下效果更差；高频交互不要错开。见 enter-exit.md。
9. 微妙的退场动画：使用小的固定 translateY，而不是完整高度；退场应比入场更柔和；两个方向都使用 ease-out。
10. 上下文图标动画：用 opacity、scale、blur 动画图标，而不是切换 visibility；精确值：scale 0.25 到 1，opacity 0 到 1，blur 4px 到 0px。
11. 有 motion 库时（package.json 中的 motion 或 framer-motion）：匹配该包的 import path；两者都存在时匹配附近 import。使用 transition: { type: "spring", duration: 0.3, bounce: 0 }；bounce 始终为 0。
12. 没有 motion 库时：把两个图标都保留在 DOM 中，其中一个绝对定位，用 cubic-bezier(0.2, 0, 0, 1) 交叉淡入淡出；这样无需依赖即可获得入场和退场。两套配方见 icon-transitions.md。
13. 图片描边：给图片 1px 低透明度 outline 以保持一致深度；浅色模式用纯黑 oklch(0 0 0 / 0.1)，深色模式用纯白 oklch(1 0 0 / 0.1)；绝不用 slate、zinc 之类近黑色，也绝不用带色调的中性色，因为带色调描边会吸收下方表面颜色，看起来像图片边缘有污渍。
14. 按下缩放：点击时 scale(0.96) 给按钮触觉反馈；始终用 0.96，低于 0.95 会显得夸张；在动效会分散注意力的地方加 static prop 关闭。CSS、Tailwind 和 Motion 配方见 animations.md#scale-on-press。
15. 跳过页面加载动画：在 AnimatePresence 上使用 initial={false}，让首次渲染不播放入场动画；同时检查它不会误伤有意的页面入场。
16. 主题切换时抑制过渡：主题翻转会同时改变几乎所有元素的 color、background、border、shadow，所有过渡一起触发会让切换发糊而不是瞬间切换；注入 `*,*::before,*::after{transition:none !important}`，强制 reflow，然后在下一帧移除。配方见 animations.md#suppress-transitions-on-theme-switch。
17. 只过渡会变化的内容：始终显式命名属性，如 transition-property: scale, opacity；Tailwind 的 transition-transform 覆盖 transform、translate、scale、rotate。
18. 谨慎使用 will-change：只用于 transform、opacity、filter 这些 GPU 可合成属性；绝不用 will-change: all；只在看到首帧卡顿时添加，不要提前加。见 performance.md。
19. 图标描边匹配文本字重：文本旁的图标应承载文本的视觉重量：regular (400) 文本旁用 1.5px 描边，semibold (600) 旁用 2px；每个图标集用一种描边宽度，每个 surface 用一个图标库。尺寸与 RTL 翻转见 icons.md。
20. 一个 SVG，按状态重新着色：图标使用 currentColor，并从 CSS color 和 opacity 获取 hover、selected、disabled 状态，绝不为状态使用单独资源；默认用 outline 变体，fill 表示 active 状态。
21. 动效克制：高频交互给即时反馈，或只使用 150ms 或更短的 opacity 和 color 过渡；在那里使用自定义动画会让每次触发都收取注意力成本；每个动画状态变化都还需要静态提示：color、图标或 label；动效绝不能是唯一反馈通道。
22. 完成前自检——图标看起来不居中：用 padding 做视觉微调，或修复 SVG。
23. 完成前自检——分阶段入场或退场突兀：对不频繁入场做错开，退场保持微妙。
24. 完成前自检——主题切换让整页交叉淡入淡出：切换时禁用过渡，强制 reflow，下一帧恢复。
25. 完成前自检——元素上有 transition: all：改成指定精确属性。
26. 完成前自检——首帧动画卡顿：添加 will-change: transform（谨慎使用）。
27. 完成前自检——粗体文本旁的 hairline 图标：让描边宽度匹配文本字重。
28. 报告严重级别：HIGH 破坏交互、让动效不可用，或状态变化只在动画运行时可见；MEDIUM 是 surfaces、icons 或 motion 中可见的不一致；LOW 是孤立的打磨问题。
29. 验证：无浏览器时，检查组件定义的每个状态，即 hover、focus、active、loading、empty，以及从代码读取的动效 duration 和 easing；有浏览器时，走查每个状态，并在浏览器的 Animations 面板以 10% 速度重放动效；把所有无法运行的检查报告为 Not verified。
30. 报告格式：按违反的原则分组，按严重程度排序，每个 root cause 一行，并列出它出现的所有 location；表格列为 Severity | Location | Before | After | Why；Location 写成 path/to/file:line；Why 写明原则和用户影响。
31. 报告结论：只要还有任何 HIGH 就用 Block；否则用 Approve，并把其余项留在表中作为待做工作；绝不 Approve 没有检查过的覆盖范围；没有可报告内容时，写 "No actionable UI-polish findings" 并报告验证情况。

适用边界 · 注意事项

• 不要用本技能处理文本换行、字体渲染、tabular numbers、文本间距；这些属于 better-typography。
• 不要用本技能处理点击区域、focus、键盘支持、ARIA、reduced motion；这些属于 better-accessibility。
• 不要用本技能处理分组、section spacing、breakpoints、spatial RTL；这些属于 better-layout。