Semi Design

Semi Design 是由抖音前端团队维护的 React 企业组件库，官网同时提供 Figma UI Kit、Design to Code、主题定制与组件文档。它强调设计稿和代码对齐，并覆盖多语言、多时区、RTL 与大量 Design Token；React 19 项目需注意独立包与专门适配说明。

Figma 到代码需要共享命名

Semi 的 D2C 能力适合将规范化 Figma 结构转换为代码起点，但图层、Variant、Auto Layout 和组件命名必须先符合团队约定。生成结果进入仓库后仍要经过代码审查、响应式处理和业务数据接入，不能把几秒生成等同于可直接上线。

React 版本决定安装包

升级 React 时同时迁移组件包和工程配置。

主题是可发布的设计资产

Semi 提供大量 Design Token 和主题包机制。品牌定制应从语义颜色、字体、圆角、间距和密度建立映射，生成可版本化的主题产物；设计端 Figma 变量与代码 token 使用相同名称，避免每次交付靠人工对照色值。

全球化覆盖三个独立问题

• 语言：组件文案、业务术语和文本长度；
• 地区：日期、数字、货币与周起始日；
• 方向：RTL 下的布局、图标、动画和键盘顺序。

多时区产品还要明确存储时区、展示时区与用户切换规则。

企业组件要验证内容压力

使用 Table、Tree、Form、Select 和复杂弹层时，测试长中文、英文、阿拉伯文、缺失数据和超大数据量。组件默认样式适合作为基线，真实产品仍要决定列优先级、错误位置、权限状态与移动端降级。

Next.js 接入关注 CSS 处理

官方快速开始对 Next.js 的 CSS 引入和插件处理有单独说明，并指出全量样式场景。结合项目使用的路由架构、SSR 和构建版本验证，避免开发环境可见、服务端渲染或生产拆包后出现样式缺失与顺序差异。

质量闭环连接设计与回归

为核心组件建立 Figma 组件、代码 Story、视觉截图和交互测试的对应关系。升级 Semi、React 或主题包时，先比较 token 与 API 变化，再回归表单、弹层、时区、RTL 和可访问性；D2C 提高同步速度，不能替代质量门禁。