Semi Design 上手指南：字节开源企业级设计系统，主题与换肤能力最强

Semi Design 是字节跳动（抖音）前端团队开源的企业级设计系统。它最出彩的不是组件数量，而是主题能力：主题商店、运行时动态换肤、多主题共存，这些在很多库里要自己造轮子。

它解决什么问题

做 B 端产品常遇到一个需求：同一套界面要换好几套品牌皮肤，甚至让客户在后台自己挑主题。多数组件库做到这步就很费力，Semi 把这套能力做进了设计系统。

但它生态与社区规模比 Ant Design 小，第三方模板、教程、招人面上的成熟度要打个折扣；重业务模板的场景还是 AntD 更省心。

核心能力

主题能力为什么是卖点

很多组件库的主题只是改主色，再深就要重写 CSS 变量甚至改组件。Semi 把主题抽象成一套 Design Token，并配主题商店，可以可视化调、运行时下发、多套并存。

这对一套代码卖给多个客户、各自换肤的 SaaS 很实用：你不必为每套皮肤维护分支，切换在配置层完成。代价是学习它的 Token 体系，前期有一定概念成本。

同类工具怎么选

谁适合用

• 做 B 端 / 中后台、需要强主题与换肤能力的团队
• 产品要支持多品牌、多客户自定义外观的 SaaS
• 设计与开发希望用 Design Token 对齐的人

怎么开始

1. 用 npm install @douyinfe/semi-ui 安装组件库。
2. 用 SemiProvider 或 Theme 配置 Design Token，改主色与圆角等。
3. 需要换肤就接官方主题工具或主题商店，运行时动态切换。
4. 设计侧装官方 Figma 插件，让稿子与代码组件对照。
5. 多语言场景按文档引入 locale，无障碍属性已内置。

常见问题

免费可商用吗？
是，MIT 授权，主题商店与动态换肤都是免费能力。

和 Ant Design 区别？
Semi 主题与 Token 能力更强；AntD 生态与模板更全更成熟。

谁在用它？
字节内部大量项目使用，设计系统经真实业务验证。

支持 Vue 吗？
主推 React；生态以 React 为主，Vue 侧不如 AntD 完整。

授权与合规

Semi Design 以 MIT 授权发布，可免费商用；字节内部大量项目验证过，主题商店与动态换肤均为免费能力。 官网：semi.design。