用途：这是一套设计工程原则，用于在构建或审查 UI 代码时，通过一系列细小细节的叠加来提升界面的完成度与质感。
主要能力：
- 排版：标题用 text-wrap: balance，正文用 text-wrap: pretty 避免孤行；macOS 根布局加 -webkit-font-smoothing: antialiased；动态数字用 font-variant-numeric: tabular-nums 防止布局跳动。
- 表面与形状：嵌套圆角遵循外圆角 = 内圆角 + 内边距；居中看起来别扭时改用视觉对齐；用多层半透明 box-shadow 替代实心边框营造层次；图片加 1px 低透明度描边。
- 动画：交互状态变化用可中断的 CSS transition，关键帧留给只跑一次的编排序列；入场动画拆分为语义块并以约 100ms 交错；出场动画用固定小幅 translateY，比入场更柔和。图标切换用透明度、缩放与模糊动画：scale 从 0.25 到 1、opacity 从 0 到 1、blur 从 4px 到 0px。若项目已装 motion 或 framer-motion，用 transition: { type: "spring", duration: 0.3, bounce: 0 }，bounce 必须为 0；否则两个图标都保留在 DOM（一个绝对定位），用 cubic-bezier(0.2, 0, 0, 1) 交叉淡入淡出。按钮按下用固定的 scale(0.96)，并可用静态 prop 关闭。
- 性能：不用 transition: all，只写具体属性；will-change 仅用于 transform、opacity、filter 且仅在出现首帧卡顿时添加。
- 可用性：交互元素点击区域至少 40×40px，不足时用伪元素扩展，且两个元素的点击区域不得重叠。
使用方式：作为构建或评审 UI 时的检查清单使用。AnimatePresence 对默认状态元素加 initial={false}，避免首次渲染播放动画。
适用场景：前端组件开发、界面代码评审、动效与交互实现。
限制：具体依赖安装命令、版本要求及收费信息暂未提供。