技能介绍

要解决的具体问题

界面“看起来不对劲”通常不是因为缺少某个大组件，而是一批微小细节的叠加：标题落下孤行、数字跳动导致布局抖动、嵌套卡片圆角不匹配、按钮按下没有触觉反馈。这类问题很难在全速浏览时察觉，却会持续削弱产品的品质感。

核心打磨原则

在既有样式体系中工作：Tailwind 项目用 Tailwind，纯 CSS 项目用 CSS，CSS-in-JS 项目沿用现有方案；绝不为了某个修复而引入第二套样式体系。
放慢界面审查：在浏览器 Animations 面板中用 10% 速度回放动效，逐一遍历 hover、focus、active、loading、empty 等状态。在低速下感到违和的地方，全速下往往就是那个微妙的问题点。
按维度逐项检查：排版、表面、动画、图标与性能五类原则可作为审查清单使用。

关键实施细节

排版：标题使用 text-wrap: balance 避免孤行；段落、描述与卡片文本默认使用 text-wrap: pretty 防止末尾出现孤词；动态更新的数字、计数器、价格与表格列使用 tabular-nums，避免数值变化引起的布局偏移。
表面：嵌套圆角按同心公式计算，即外层半径等于内层半径加上间距；几何居中显偏时改用光学对齐，例如图标侧 padding 比文本侧小约 2px；有深度的卡片与容器优先用多层 box-shadow 替代实色边框，但分割线、表格边界与输入框轮廓仍使用边框。
交互细节：图片使用中性色 outline 保持视觉深度，避免拾取背景色；点击区域在触控场景不小于 44×44px，桌面密集界面至少 40×40px；交互状态切换优先使用可中断的 CSS transition，而非固定时间线的 keyframe animation。
动效节奏：分阶段入场可将语义块错峰约 100ms 并组合 opacity、blur 与 translateY；退场动画保持更短、更轻；按压缩放可提供直接的触觉反馈。

适用边界与注意点

text-wrap: balance 仅在 6 行（Chromium）或 10 行（Firefox）内生效；超过 10 行的长文本、代码块与预格式化内容不需要 pretty 或 balance。阴影方案只适用于深度表达，不适用于分割线；图片轮廓必须使用纯黑或纯白等中性色，不能匹配品牌主色。动效错峰适合首屏、空状态与一次性序列，不应滥用在常规 hover、按键或重复切换标签等高频交互上。