Semi Design 是由抖音前端团队，MED 产品设计团队设计、开发并维护的设计系统。它作为全面、易用、优质的现代企业级应用 UI 解决方案，从字节跳动各业务线的复杂场景提炼而来，支撑近千计平台产品，服务内外部 10 万+ 用户。
Semi 多用于前缀或词组中，表示「一半」 —— 正如同一个完整的企业应用，通常由业务逻辑与前端界面构成，Semi Design 希望成为这不可或缺的一半，为企业应用前端提供坚实且优质的基础。 我们相信，设计系统的真正价值在于降低前端的搭建成本，同时提供优秀的设计和工程化标准，充分解放设计师与开发者的生产力，从而不断孵化明星产品。
架构
Semi Design 采用了一套跨前端框架技术方案，F/A 分层设计，将每个组件的 Javascript 拆分为两部分：Foundation 和 Adapter，这使得我们可以通过仅重新实现适配器来跨框架重用 Foundation 代码，例如 React、Vue、Angular、Svelte 或者 WebComponent，快速打造不同平台上的通用组件库。
- Foundation 层 （semi-foundation）
Foundation 包含最能代表 Semi Design 组件交互的业务逻辑，包括 UI 行为触发后的各种计算、分支判断等逻辑，它并不直接操作或者引用 DOM，任意需要 DOM 操作，驱动组件渲染更新的部分会委派给 Adapter 执行。
- Adapter 层 (semi-ui)
Adapter 是一个接口，具有 Foundation 实现 Semi Design 业务逻辑所需的所有方法，并负责
组件 DOM 结构声明
负责所有跟 DOM 操作/更新相关的逻辑，通常会使用框架 API 进行
setState、getState、addEventListener、removeListener等操作 与常见 UI 库方案的对比 一般来说，会导致组件渲染发生变更的有两类事件：一是用户操作（UserOperation），即用户的交互操作 。二是组件生命周期事件（Component LifeCycle Change），由于事件流转或者 Props 更新等导致的组件的生命周期发生变化 在常见的 UI 组件库方案、F/A 方案中这两类事件的处理流程有所不同。
详细细节可以查看文章末尾的连接
我想说的话
Semi 和 Arco 什么区别？为何前后脚连着开源两个设计系统？都是为了 KPI 各自搞一套，不然架构组就没事做了，哈哈哈！
不过话说回来，如果要我在项目上使用，antd Design才是 YYDS，已经能够完全满足生产需求，其他新出的设计系统不过是尝尝鲜，使用到正式项目还需要再去学习组件 API，如果闲的蛋疼可以尝试使用到项目里。
更多资料
Semi Design - UI 组件库如何分层设计，使其具备适配多种 mvvm 框架能力
