用途：这是一个面向界面打磨与完成度的参考技能，帮助在实现前端/UI 组件和做 UI 设计评审时补齐容易被 AI 忽略的小细节，目标是把“通用”界面提升为“精致”界面。使用前需先识别项目既有的样式体系（设计令牌、间距刻度、动效库），所有打磨建议都在既有体系内扩展，不引入第二套样式系统。
主要能力：几何与对齐方面要求嵌套元素遵循外半径 = 内半径 + 内边距的同心圆角规则，非对称图形（图标按钮、播放三角）在几何居中看起来偏时改为视觉对齐。层级方面：深度/悬浮用半透明分层阴影，边框用于结构、分隔与选中/聚焦状态，不用实心边框表达高度。动效方面：进入用缓出（ease-out）、退出用缓入（ease-in），交互动效用可中断的 CSS transition 而非 keyframes，分阶段入场约每段 100ms 且仅用于低频场景，点击反馈统一 scale(0.96)，首屏渲染跳过进入动画（如 initial={false}），高频交互不加自定义动画，且动效不能是唯一反馈通道。缓动取值：有动效库时用 transition: { type: "spring", duration: 0.3, bounce: 0 }；纯 CSS 用 cubic-bezier(0.2, 0, 0, 1)；不使用 transition: all，始终写明具体属性。无障碍与性能：每个非装饰性动画都要有 prefers-reduced-motion: reduce 分支，且应移除位移或改为透明度交叉淡入，而非仅缩短时长；动效只动 transform 与 opacity，避免 width/height/top/left/margin/padding 造成逐帧重排。排版：macOS 目标加 -webkit-font-smoothing: antialiased；动态数字用 font-variant-numeric: tabular-nums；标题用 text-wrap: balance，正文用 text-wrap: pretty。图像：加 1px 低透明度描边，浅色用 oklch(0 0 0 / 0.1)，深色用 oklch(1 0 0 / 0.1)。交互：触控命中区域至少 44×44px，密集桌面至少 40×40px，命中区域不得重叠；悬停样式只在 @media (hover: hover) and (pointer: fine) 下生效，且有指针设备上每个可点击面需有约 100–200ms 的悬停反馈。图标：描边粗细与相邻文字字重匹配，同一界面只用一套图标，状态用 currentColor 由颜色/透明度驱动而非独立资源文件，默认用描边变体、填充变体表示激活。
使用方式：可作为实现或评审检查清单使用；评审有 quick 与 full 两种模式，quick 覆盖主用户路径与高流量状态、只报 HIGH/MEDIUM 且最多 5 条，full 覆盖排版、表面、动效、图标、交互全部类别、最多 15 条。严重度分 HIGH/MEDIUM/LOW；结论为：仍存 HIGH 则 Block，仅剩 MEDIUM/LOW 则 Needs changes，无问题则 Approve。对既有代码库审计可加载 references/design-audit.md，动效原理细节在 references/motion-principles.md，均为按需加载。
适用场景：前端/UI 组件实现（tdd 或 ddd 流程）、/moai review 的 UI 设计评审、既有代码库的界面审计。
限制：资料未提供安装命令、价格、平台支持范围或版本信息；效果取决于项目既有样式体系，需在其内部扩展。