用途
该技能是一份“设计工程原则”指南，用于在构建 UI 组件或审查前端代码时，让界面整体感觉更精致、更打磨。它强调优秀界面来自大量小细节的叠加，而不是单一改动，因此主张在写代码或做代码审查时逐条对照应用这些原则。
主要能力
指南按五大类组织，并给出 19 条核心原则：
- 排版：字体平滑（在 macOS 根布局应用
-webkit-font-smoothing: antialiased）、等宽数字（动态变化的数字使用font-variant-numeric: tabular-nums防止布局抖动）、文本换行（标题用text-wrap: balance，正文用text-wrap: pretty避免孤行）。 - 表面：同心圆角（外层半径 = 内层半径 + 内边距）、光学对齐优先于几何对齐（带图标按钮、播放三角、非对称图标需手动调整）、用阴影表达层级而用边框表达结构（纯装饰性边框改为分层透明 box-shadow，保留表达结构或状态的边框）、图片描边（1px 低透明度描边，浅色模式必须为纯黑
oklch(0 0 0 / 0.1)，深色模式为纯白oklch(1 0 0 / 0.1)，不能用 slate、zinc 等带色中性色）、最小点击区域（触控/移动优先 44×44px，密集桌面界面至少 40×40px，可用伪元素扩展，且两个元素点击区域不得重叠）。 - 动画：可中断动画（交互状态变化用 CSS transition，关键帧仅用于一次性的分阶段序列）、错峰入场（不频繁的分阶段入场按约 100ms 错峰，高频交互不要错峰）、克制的退场动画（用小固定 translateY 而非完整高度，退场应比入场更柔和，进出均用 ease-out）、上下文图标动画（用 opacity、scale、blur 切换，指定 scale 0.25→1、opacity 0→1、blur 4px→0px；若项目装有 motion 或 framer-motion 则使用
transition: { type: "spring", duration: 0.3, bounce: 0 }，bounce 必须为 0；未安装则两个图标都保留在 DOM 中用 CSS 交叉淡入淡出，缓动cubic-bezier(0.2, 0, 0, 1)）、点击缩放（scale(0.96)，不得小于 0.95）、页面加载跳过动画（AnimatePresence 上用initial={false}）、动效克制（高频交互不加自定义动画，动画不能是唯一反馈渠道）。 - 图标：图标描边与文字字重匹配（常规 400 文字旁用 1.5px 描边，semibold 600 旁用 2px；同一图标集只用一种描边宽度，同一界面不混用图标库）、单个 SVG 按状态换色（使用 currentColor，状态由 CSS color 与 opacity 控制；轮廓为默认，填充标记激活态）。
- 性能：绝不用
transition: all（要指定具体属性，如transition-property: scale, opacity）、谨慎使用 will-change（仅用于 transform、opacity、filter，绝不用will-change: all，只在出现首帧卡顿时添加）。
指南还附有“常见错误与修复”对照表，涵盖父子圆角相同、图标偏中心、用边框伪装层级、数字抖动、macOS 文字过重、页面加载触发动画、transition: all、首帧卡顿、点击区域过小、粗体文字旁细线图标、按状态分离图标资源、到处用填充图标、每次悬停都播放入场动画等问题。
使用方式
在建议或编写修复前，先识别项目现有的样式体系，并在该体系内表达修改：Tailwind 项目用 Tailwind，CSS 项目用原生 CSS，或沿用既有的 CSS-in-JS 方案。不要为了应用打磨修复而引入第二套样式体系。
审查时建议“放慢界面”：在浏览器 Animations 面板中以 10% 速度回放动效，并走遍每个状态——hover、focus、active、loading、empty。在 10% 速度下感觉不对的地方，就是全速下微妙出错的地方。
指南还定义了审查输出格式：
- 模式与覆盖范围：quick 模式覆盖主用户路径和高流量状态，仅报告 HIGH 和 MEDIUM 问题，上限 5 条；full 模式覆盖所请求范围内的排版、表面、动画、图标、性能，上限 15 条。未提供模式时使用 full。需声明模式、确切范围、框架、样式约定和审查边界，并展示实际检查过的五大类内容，不得暗示未检查的表面已被审查。
- 发现：按原则分组，用 Markdown 表格列出 Severity、Location、Before、After、Why 五列，包含全部改动而非子集；不要用单独的 Before/After 行。Severity 分 HIGH（使交互无法访问、误导、不可读或反复干扰）、MEDIUM（明显的可用性或一致性问题）、LOW（孤立打磨项，仅在 full 模式出现）。Location 引用
path/to/file:line，无源文件时引用确切屏幕和组件。重复的系统性问题合并为一行并列出所有受影响位置；无发现的原则省略，不得为凑数填充。 - 已考虑但被否：quick 模式列 1–3 个真实候选，full 模式列 2–5 个，说明拒绝原因，不得编造填充内容。
- 验证与结论：列出运行的确切命令或交互及其观察结果，涉及动画时以 10% 速度检查；未运行的检查标注“Not verified”。结论分 Block（存在 HIGH）、Needs changes（仅剩 MEDIUM 或 LOW）、Approve（无可执行发现），并在结论旁列出所有未验证的检查。无发现时省略发现表格，说明“No actionable interface-polish findings”，报告验证与被否候选，以 Approve 结束。
适用场景
适用于构建 UI 组件、审查前端代码、实现动画、处理悬停等交互状态时；以及需要统一界面打磨标准、做结构化 UI 代码审查（含严重度分级与结论）的设计工程流程。
限制
指南明确要求先在项目既有样式体系内表达修改，不引入第二套样式系统；动效应克制，高频交互不加自定义动画；will-change 需谨慎；点击区域不得重叠；图标不得在同一界面混用多个图标库。此外，资料未提供该技能所支持的具体平台、收费与价格信息，也未给出除原则说明外的安装命令或代码示例之外的运行环境要求。