Semi Design：字节开源的 React 组件库与设计系统

接一个中后台项目，从零画表格、表单、弹窗这些基础组件，一周就耗在重复劳动上。Semi Design 是字节跳动抖音前端团队开源的 React 组件库和设计系统，把这套基础件做全了：官方标注 8,000 多个组件变体、60 多个开箱组件，覆盖表格、表单、弹窗、导航到日历。截至 2026 年 11 月 1 日，仓库有 10,453 颗星，MIT 许可证，主要语言 TypeScript。它已经在服务字节内部产品，外部项目可以直接 npm install @douyinfe/semi-ui 起步。

核心功能

Semi 最有辨识度的一块是 DesignOps 与 DevOps 的打通。设计师在 Figma 里用官方 UIKit 摆界面，装上 Semi 的 Figma 插件后可以把设计稿一键转成真实的 React 代码，减少「设计稿一套、代码另一套」的偏差。代码侧则由 DSM（Design System Management）平台管理主题：2,700 多个 Design Token 集中在 DSM 里改颜色、圆角、字号，换品牌风格不用逐个改组件样式。上图就是 DSM 里调整 Token 的界面。

典型使用场景

组件按 W3C 标准做了键盘交互和焦点管理，全量组件支持 RTL（从右向左）布局，内置国际化方案覆盖 50 多种语言。做面向政企或海外用户的后台时，这些能力省下的是合规检查和逐页适配的时间。TypeScript 全程编写，类型定义完整，也支持服务端渲染——Next.js 项目里实测不需要额外的适配层。官网还提供全套设计文档：每个组件的 API、设计规范和无障碍说明在同一页，设计资源和代码文档用同一套词表，跨职能协作时少一层翻译。

快速上手

装依赖后引入组件即可：

npm install @douyinfe/semi-ui

import React from 'react';
import { Button } from '@douyinfe/semi-ui';

const App = () => <Button type="primary">你好</Button>;

官网 semi.design 有全部组件的文档和在线 Demo，每个组件页都能直接改参数看效果；Figma UIKit 在 Figma 社区搜 Semi Design 可以找到。NPM 周下载量在组件库里属第一梯队，遇到问题先查 GitHub Discussions。如果想看整套后台的成品排布，可以再对比 Shadcn Admin 那类界面集合——Semi 给的是组件与设计系统，Shadcn Admin 给的是可以直接抄的页面。

小结

Semi Design 适合接中后台项目、又不想在基础组件上重复花时间的 React 团队，尤其是设计稿和代码要同源维护的场景。要注意两点：它是字节主导的开源项目，issue 响应依赖社区；组件风格自带设计语言，深度定制前先评估 DSM 的 Token 能否覆盖你的品牌要求。仓库以 MIT 发布，GitHub 数据核验于 2026 年 11 月 1 日。