😝我怎么让设计师不再嫌弃 Antd，后台系统也能高端大气上档次

前言

如果一个团队计划开发一个面向 B 端的管理后台系统，既希望具备高效开发能力，又想要拥有好看的 UI，避免千篇一律的“土味”风格，而你作为前端主程参与开发，会怎么做？

本文将分享我在这一方向上的思考与实践。虽然目前所在公司的 B 端系统已经迭代许多内容，短期内没有设计师人力支持我推行这套方法，但我依然希望能将这套思路分享给有类似困扰的朋友。如果未来我有机会从零带队启动新项目，我依旧会沿用这一套方案。

当前的问题：前端与设计如何协作?

在开发 B 端系统时，大多数国内团队都会选用如 Umi、Ant Design、ProComponents、Semi Design 等成熟的 B 端技术栈和 UI 库。

这些库大大提升了开发效率，尤其是 Antd 提供的 Table、Form 等组件，功能丰富，使用便捷，非常值得肯定。

但问题也随之而来：因为太多后台项目使用 Antd，导致整体 UI 风格高度同质化，设计师逐渐产生审美疲劳。在尝试打破这种风格束缚时，设计师往往会自由发挥，或者采用非 Antd 的组件库来设计 Figma 稿。

这导致前端不得不花大量时间去覆写样式，以适配非标准组件，工作量激增，最终形成恶性循环：设计觉得前端“不还原设计”，前端觉得设计“在刁难人”，项目开发节奏也被 UI 卡住。

如何解决?

其实 Antd 本身提供了非常强的定制能力。借助 ConfigProvider 全局配置 和 主题编辑器，我们可以通过修改 CSS Token 来全局调整组件样式，做到“深度魔改”。

这在前端层面可以很好地解决样式定制的问题，但设计师要怎么参与？

答案是：使用的 Antd Figma 文件（这份是 figma 社区大佬维护的算是比较新的版本 5.20）。这个 Figma 文件已经全面绑定了 Antd 的 Design Token，设计师可以直接在 Figma 中打开，点击右侧的 Variables 面板，通过修改颜色、圆角、阴影等变量来完成 UI 风格定制。

由于每个组件都与 Design Token 强关联，设计师的修改可以精确反映到各个 UI 组件上，实现灵活定制。同时，也应记录这些变量的修改项，前端就可以据此配置对应的 JSON 文件，通过 ConfigProvider 注入到项目中，从而实现样式一致的组件系统。

最后，设计师可将修改后的组件库加入 Figma 的 Asset Libraries 中，供未来在设计稿中重复复用。这就等于团队共同维护了一套定制的 UI 体系。

结语

通过上述方法，前端与设计师可以真正做到“同源协作”：基于同一套设计变量开发和设计，避免不必要的重复劳动与沟通摩擦，释放更多精力专注在业务开发本身上。