用途：这是一份设计工程原则清单，用于在构建或审查 UI 组件、前端代码、动画与悬停效果时，让界面显得更精致。核心思路是：好界面来自大量小细节的叠加。
主要能力与原则： 排版方面，标题用 text-wrap: balance，正文用 text-wrap: pretty 避免孤行；macOS 根布局加 -webkit-font-smoothing: antialiased；动态数字用 font-variant-numeric: tabular-nums 防止布局抖动。 表面方面，嵌套圆角遵循外半径=内半径+内边距；几何居中看起来偏时改为视觉对齐；用多层半透明 box-shadow 代替硬边框；图片加 1px 低透明度描边，浅色模式用 rgba(0,0,0,0.1)，深色模式用 rgba(255,255,255,0.1)，不要用带色调的中性色。 动画方面，交互状态变化用可中断的 CSS transition，关键帧留给一次性序列；入场动画拆分语义块并以约 100ms 错开；退场用小幅固定 translateY，比入场更柔和；图标切换用透明度、缩放和模糊过渡，缩放 0.25→1、透明度 0→1、模糊 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)，不要低于 0.95；AnimatePresence 用 initial={false} 避免首屏播放动画。 性能方面，禁止 transition: all，只写具体属性；will-change 仅用于 transform、opacity、filter，且只在出现首帧卡顿时添加。 可用性方面，交互元素命中区域至少 40×40px，可用伪元素扩展，且两个元素的命中区域不得重叠。
使用方式：按清单逐项检查代码，审查结果以 Markdown 表格呈现，含 Before 与 After 两列，按原则分组加标题，每行只聚焦一处改动，并注明具体文件与属性；无需改动的原则省略表格。
限制：资料未提供安装命令、依赖要求、收费或平台信息。