这是一套用于提升界面质感的设计工程原则，适合在构建或审查前端界面代码时参考。
用途：把界面从“能用”打磨到“精致”，方法是关注一组可叠加的细微细节，而不是单一改动。
主要能力（按主题分组）： 排版：标题使用 text-wrap: balance，正文使用 text-wrap: pretty 避免孤字；macOS 根布局加 -webkit-font-smoothing: antialiased；动态数字使用 font-variant-numeric: tabular-nums 防止抖动。 表面：嵌套圆角采用同心圆角，外圆角 = 内圆角 + 内边距；图标按视觉而非几何居中；用多层半透明 box-shadow 代替实线边框；图片加低透明度 1px 描边；交互元素点击区域至少 40×40px，可用伪元素扩展，且两个元素热区不得重叠。 动画：交互状态变化用 CSS transition 以支持中途打断，keyframes 仅用于一次性的分阶段序列；入场动画拆分语义块并以约 100ms 交错；退场用小幅固定 translateY，比入场更柔和；按钮点击用 scale(0.96)，不要低于 0.95；图标切换用 opacity、scale 0.25→1、blur 4px→0px 做交叉淡入淡出；用 AnimatePresence 的 initial={false} 避免首屏播放入场动画。 性能：禁止 transition: all，明确指定属性；will-change 仅用于 transform、opacity、filter。
使用方式：按快速参考定位到具体主题，对照核心原则修改代码，并用清单自查常见错误（如父子圆角不一致、图标偏心、实线边框、首屏误播动画、数字抖动、过小热区等）。
限制：原则中给出的具体数值（如 100ms、0.96、scale 0.25→1 等）属该清单的规定值，应遵循；不同项目是否引入 motion 库取决于其 package.json，未安装时用 CSS 交叉淡入方案。该资料未提供更多适配平台、框架或收费信息。