Semi Design 简介
Semi Design 是由抖音前端与 UED 团队维护的现代化设计系统，致力于连接设计师与开发者，提供易于定制的能力，帮助双方打造高质量产品。该系统已稳定迭代 5 年以上，服务超过 10 万用户，并由字节跳动相关团队持续开发与维护。
主要功能
先进的开发者体验
设计稿转代码 ：提供高效的 design to code 能力，3–5 秒一键从 Figma 设计稿生成真实代码。A11y 无障碍友好 ：遵循 W3C 标准，为所有组件提供键盘交互、焦点管理和语义化支持。国际化与多语言 ：提供完备的多语言、多时区、RTL 支持，轻松打造全球化应用。Live Code 组件 ：允许使用在线代码编辑器即时演示 UI 组件。稳定的质量保障 ：使用单元测试、E2E 测试、视觉对比测试等，测试覆盖率达 90%。支持 SSR ：组件库支持在 Next.js、Gatsby 和 Remix 等框架的 SSR 场景中使用。易于贡献的 FA 架构 ：主逻辑抽象为 Foundation 包，源码清晰易读，易于迁移到其他框架。轻松兼容 Web Components ：提供完整适配方案，所有组件在 shadow DOM 中均可正常工作，适合构建 SDK、浏览器插件等需 DOM 隔离的场景。
百变主题
提供 3000+ Design Token，可快速克隆或深度定制，灵活调配符合品牌调性的设计风格。内置包括 Semi Design 默认、飞书 Universe Design 主题、抖音创作服务主题、剪映主题、火山引擎主题等。
设计系统管理
强大的主题编辑器 ：实时生效，设计工具一键同步。主题商店 ：让设计与代码同源，使用真实组件设计，前端代码一键转。
用户与生态
提供基于 React 的在线调试组件库（面向开发者）以及基于 Figma 构建、与代码对齐的设计资源（面向设计师）。
包含 Semi UI、Semi D2C、Semi DSM、Semi Template、Semi x Figma 等模块，以及 Figma UIKit、Iconset 和 Plugin。
适用场景
中后台企业应用开发 ：设计师可使用 Figma UIKit 设计出色应用，开发者基于组件库高效构建。品牌定制化产品 ：通过主题编辑器和 Design Token 深度定制符合品牌调性的界面。全球化应用 ：利用国际化、多语言、RTL 支持打造面向多地区用户的产品。需要 DOM 隔离的项目 ：如 SDK、浏览器插件，可借助 Web Components 适配方案。AI 辅助开发 ：支持使用 MCP & Skills 让 AI 对 Semi 了如指掌，提升开发效率。
用户评价
来自字节跳动的前端、设计及产品同学反馈：“接入简单易上手；Semi UI 样式美观，主题统一；API 丰富全面”“组件挺全的，覆盖比较广泛”“设计资源对提效有明显帮助”“统一的样式，高保真的原型便于与前端同学进行沟通”等。
开始使用
