用途
这套原则用于在构建或审查 UI 代码时，让界面从「能用」提升到「精致」。核心理念是：好的界面很少来自单一元素，而是许多细节叠加出的体验。文档按排版、表面（圆角、对齐、阴影、描边、点击区）、动画、性能等类别组织，供实现和评审时对照使用。
主要能力（核心原则）
- 同心圆角：外层半径 = 内层半径 + 内边距，修复嵌套元素圆角不匹配这一最常见问题。
- 视觉对齐优先于几何居中：带图标的按钮、播放三角、非对称图标需手动微调。
- 用阴影代替边框：叠加多个透明 box-shadow 制造自然层次，阴影能适配任意背景，实心边框不能。
- 可中断动画：交互状态变化用 CSS transition（可被中途打断），keyframes 仅用于只执行一次的编排序列。
- 入场动画拆分并错开：不要给单个容器做动画，按语义拆分内容，每段约 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) 的 CSS transition 交叉淡入淡出，从而无需依赖即可获得进出场动画。
- 字体平滑：在 macOS 的根布局应用 -webkit-font-smoothing: antialiased，使文字更清晰。
- 等宽数字：任何动态更新的数字使用 font-variant-numeric: tabular-nums，防止布局抖动。
- 文本换行：标题使用 text-wrap: balance，正文使用 text-wrap: pretty 避免孤行。
- 图片描边：给图片加低透明度 1px 描边，颜色在浅色模式下必须为纯黑 rgba(0, 0, 0, 0.1)，深色模式下为纯白 rgba(255, 255, 255, 0.1)，不得使用 slate、zinc 等带色中性色，否则会吸收底色显得像脏边。
- 按压缩放：点击时用 scale(0.96) 提供触感反馈，始终用 0.96，不得低于 0.95；提供静态开关在动效会造成干扰时关闭。
- 跳过首屏动画：用 AnimatePresence 的 initial={false} 防止首次渲染播放入场动画，并确认不影响有意的入场动画。
- 禁用 transition: all：始终指定确切属性，如 transition-property: scale, opacity；Tailwind 的 transition-transform 覆盖 transform、translate、scale、rotate。
- 谨慎使用 will-change：仅用于 transform、opacity、filter 等 GPU 可合成属性，绝不用 will-change: all，只在察觉首帧卡顿时添加。
- 最小点击区域：交互元素至少 40×40px，可见元素较小时用伪元素扩展，且两个元素的点击区域不得重叠。
使用方式
文档提供按类别（排版、表面、动画、性能）的快速索引，以及常见错误与修复对照表（如同半径、图标偏位、硬边框、生硬出入场、数字抖动、macOS 文字发虚、加载即播放动画、transition: all、首帧卡顿、点击区过小）。评审时可使用其审查清单逐项核对。审查输出须以 Markdown 表格呈现，含 Before 与 After 两列，列出全部改动，按原则用标题分组，每行只聚焦一处差异；若某原则检查后无需改动则省略该表。示例中给出了同心圆角、等宽数字、按压缩放的 before/after 写法。
适用场景
构建 UI 组件、审查前端代码、实现动画与悬停交互、检查嵌套圆角与点击区域等细节时使用。
限制
文档为设计工程原则清单，未提供安装命令、依赖要求或平台支持说明；其中提及 motion 与 framer-motion 的用法仅作条件性建议。具体项目集成方式暂未提供。