一、Flex 弹性布局（组件化封装）
Flex 弹性布局在阿里（Ant Design）、腾讯（TDesign）或海外的 Shopify (Polaris) 等大厂规范中非常普遍。它本质上是 Flexbox 的声明式封装——将常见的布局模式抽象为可复用组件，而不是每次都手写 div + flex CSS。
之前部分代码参考：
之前设计稿参考（设计稿就按照组件的方式搭积木）：
颜色规范（杜绝五颜六色、全局乱色）
统一色板：
- 主色 / 辅助色 / 成功 / 警告 / 错误 / 置灰
- 白色分级、黑色分级（不要纯 #000 #fff 乱用）
文字排版规范（全局统一）
字号梯队固定一套：大标题 / 副标题 / 正文 / 辅助文字 / 备注小字
规范的好处
- AI 容易识别这种定好组件库的代码，生成代码质量更高
- 文字等不写具体的 px 大小，避免真机失真模糊
二、设计稿以 4px 为基准（4px 基线网格）
核心说明：4px 作为最小单位，是多数屏幕像素密度的公约数（适配 Retina 屏 2 倍/3 倍图等），可通过整数倍关系覆盖常见 UI 元素尺寸，确保视觉一致性、跨设备适配性。
核心要求：设计稿中所有尺寸、间距、圆角、行高均需为 4px 的整数倍，贴合移动端（RN/H5）、PC 端多端适配需求。
三、设计稿慎用高斯模糊（毛玻璃）效果
核心说明：毛玻璃效果（backdrop-filter: blur()）属于计算密集型操作，模糊半径越大、作用范围越广，GPU 计算压力越大。
规范要求：
- 尽量减少毛玻璃效果使用，避免全屏、大面积应用
- 若必须使用，模糊半径建议 ≤6px，且避免应用在动态元素（滚动、动画、缩放组件）上，防止卡顿、掉帧
四、小动画优先使用 Lottie 格式
核心说明：Lottie 是 JSON 格式的矢量动画，相比 MP4、GIF，具有体积小、矢量无损、多端兼容、可控性强的优势。
规范要求：简约装饰动效、图标动效、粒子动效等小动画，优先使用 Lottie 格式，替代 MP4、GIF，提升加载速度和性能，避免卡顿。
五、图标规范：SVG 组件化（而非简单导出 SVG）
核心说明：图标需进行 SVG 组件化处理，而非简单导出 SVG 文件，确保尺寸可控、透明通道正常，适配多端缩放不失真。
实操要求：
- 使用 SVGR 工具将 SVG 改写成 TSX 组件
- 组件内明确设置图标大小、透明通道，确保全局图标风格统一、缩放无模糊
