从零搭建设计系统的决策树何时自研、何时用 Ant Design、何时混合一、引子又一个团队在要不要自己造轮子上吵了三个月几乎每个前端团队的初期都会陷入这个争论我们应该用 Ant Design或 Element/Material快速启动还是花时间自研设计系统技术负责人倾向自研——有控制权、有品牌感、有技术沉淀。业务负责人倾向用现成的——上线快、成本低、生态好。这是一个没有正确答案的问题只有适合当前阶段的答案。而且这个答案会随着团队规模和产品成熟度的变化而变化。二、先用四个问题把讨论落到事实上设计系统不是一个选型题而是一笔持续投入。开会前先把下面四项写下来通常比争论“哪套组件库更先进”有效。产品需要哪些非标准交互把未来两个版本的页面列出来。若只是表格、筛选、审批和权限管理成熟组件库已覆盖大部分需求若核心体验依赖拖拽编排、复杂编辑器或行业专用控件才需要为这些组件单独投入。视觉差异能否带来业务回报品牌色、排版和插画可以先通过主题解决。只有用户会因为界面质感、独有操作方式而选择或留在产品里才值得把差异化组件列为长期资产。谁负责维护组件一旦进入业务修复兼容性、无障碍问题和升级依赖都需要有人接手。没有明确维护人时“自研”往往只是把风险推给后续项目。能否接受迁移成本先在一两个高频页面试行新方案记录开发时长、缺陷和设计返工次数。试点结果比凭经验估算更可靠。一个实用的判断方式是若业务团队还在频繁调整产品方向优先买时间若业务已经稳定、重复页面持续增加再买一致性。前者选择成熟库后者才有条件建设自己的组件与规范。三、四种方案的适用边界方案一纯用 Ant Design适用条件团队 5 人没有专属设计师产品是内部管理系统或 B 端工具视觉差异化需求低长得像 Ant Design 无所谓上线时间紧迫成本零开发成本但品牌感缺失产品看起来像又一个用 Ant Design 的管理后台。方案二Ant Design 自定义主题适用条件需要保持品牌色、字体、圆角的一致性但不需要定制组件交互行为团队有 1 名设计师 2-3 名前端技术方案// ConfigProvider 自定义主题 import { ConfigProvider } from antd; const theme { token: { colorPrimary: #1E88E5, // 品牌色 borderRadius: 8, // 圆角 fontFamily: Inter, sans-serif, fontSize: 14, colorBgContainer: #FFFFFF, }, };成本2-4 周配置 持续的视觉一致性维护。Ant Design 5.x 的 Token 体系已经很成熟定制性好于之前的版本。方案三混合模式Headless UI 设计系统适用条件交互行为与标准组件差异大如特有的日期选择器、复杂表格操作需要完全自主的视觉风格团队 5 人且有设计系统维护能力技术方案用 Headless UI 库Radix UI、React Aria提供无障碍和交互逻辑自己写样式层Tailwind 设计 Token核心交互组件自研2-3 个通用组件用 Headless成本3-6 个月搭建基础长期维护成本中等。方案四完全自研设计系统适用条件品牌差异化是核心竞争力如 Apple、Airbnb 级别团队 10 人有专职设计系统团队多产品线需要统一设计语言有长期2 年维护意愿成本6-12 个月初始搭建需要至少 2 名全职设计系统工程师 1 名设计师。四、关键决策节点不要过早自研。在 PMFProduct-Market Fit验证完成之前任何自研设计系统的投入都是对业务资源的透支。用现成的 UI 库快速验证业务逻辑确认产品方向后再考虑差异化。不要在应该自研的时候继续用第三方。当产品用户量到百万级、品牌认知度建立后还使用默认的 Ant Design 风格会导致品牌感知弱化。这个转折点通常发生在 B 轮融资后。混合模式是最常见的演化路径。从用现成的MVP→ 定制主题成长期→ 关键组件自研成熟期→ 完全自主设计系统平台期。90% 的团队停在第三步。五、落地时别忽略 Token 和治理无论选哪条路都建议先建立一份很小的 Token 表颜色、字号、间距、圆角、阴影和断点即可。它不必一开始就做成复杂平台先放在代码仓库并由设计、前端共同维护。这样未来从 Ant Design 迁到自研组件时迁移的是组件实现而不是散落在页面里的视觉常量。组件也应有退出机制。新增组件前写清它解决的业务场景、负责人、API 边界和替代方案半年后仍没有第二个使用方的组件通常没有必要继续抽象。对内部系统尤其如此少数页面的特例用组合方式解决往往比往组件库里塞一个“万能属性”更省维护成本。六、结论 5 人 内部系统 → 纯用 Ant Design / Element Plus需要品牌色定制 → Ant Design 5.x ConfigProvider 主题系统交互行为差异化 视觉自主 → Radix UI/React Aria 自研样式层品牌即产品核心竞争力 → 全自研设计系统PMF 验证完成前不自研百万用户级后考虑差异化混合模式Headless 自研样式是最常见的实践路径决策的核心判断是当前阶段的业务收益是否值得覆盖后续维护成本