EDM 组件库是 e 签宝移动端设计系统的重要视觉和代码资产，是其移动端产品的视觉锚点。如果说 EDW 这套 Web 端组件库传达的是 e 签宝的专业和安全，那么 EDM 的移动端设计组件库则传达出e 签宝亲和、友好的视觉意象。但随着 AI 时代的到来，这套组件库面临着诸多问题丞待解决。
现状分析
现在的 EDM 组件库并没有引入 Figma 变量体系，而是使用基础的颜色样式，且只有梯度色板可用，这是 EDM 组件库的一个跟不上时代的重要因素。
此外，EDM 组件库组件全部没有组件化，且没有自动布局，完全依靠复制粘贴搭配拖拽进行“看起来”布局，这极大的降低了设计实际使用的效率，成为了一种累赘。
最重要的还是 EDM 组件的缺失和冗余问题严重，例如按钮组件大量出现完全没有被使用的属性和样式，但是部分基础组件却完全缺失，例如步进器、步骤条。
升级挑战
主要的挑战在于兼容问题。
版本兼容问题
现有的 EDM 开发版本已经使用了数年，与大量项目深度解耦，我们没有办法像 0-1 项目一样完全脱离现有的组件库基础另起炉灶，也就是说必须要考虑到向下兼容问题。这就为 EDM 的升级带来了巨大的设计难度。
技术兼容问题
由于 AI 业务的出现，因此在 web 端和移动端均出现了一套基于现有 EDW 和 EDM 开发的 AI 组件库，这套组件库是对现有组件库的样式二次开发，但是实际使用的过程中遇到了样式污染问题。因此设计侧需要在这次 EDM 升级时，尽力和 AI 组件库的布局结构通用，共用一套框架和布局，只在视觉样式主体上进行改动。
设计统一度兼容问题
EDM 组件库由于诞生相较于移动端业务的出现要晚不少，这就导致 EDM 组件库虽然没有名义上的迭代，但是实际使用上存在诸多视觉样式和版本，甚至出现了 EDW 和 EDM 样式混用的情况，这就导致 EDM 必须要和 EDW 在一定程度上做到兼容和妥协。
设计执行
全局样式
变量语义化
我查看了 EDM 现有的 less变量代码，整理出了现有的变量体系，然后在现有的梯度色板基础上，叠加一层语义化色板。
colors
├── text
├── icon
├── link
├── border
├── background
├── overlay
├── interaction
├── skeleton
├── elevation
└── shadow使用这种方式，我可以让变量更加的规范，让设计不再过度“自由发挥”，与此同时，也可以避免后续的变量改动影响到底层梯度色板，只要这套骨架存在，无论怎么变换颜色都不会有“牵一发而动全身”的超大工作量迭代问题。
增加段落字体样式
为了应对 AI 场景下的 Markdown 样式问题，这次 EDM 增加了段落字体样式，将传统的行高（字号+8）变为字号*2，默认依然保持字号+8 标准，彻底与 EDW 统一。
流程化工程
一整套全局样式要花费一天多的时间才能完成创建和规范说明文档，这实在是个让人痛苦并且不经济的事情，正因如此，我只做了 Magic foundations 插件来解决这个问题。https://www.figma.com/community/plugin/1635127742021494315/magic-foundations
组件迭代
组件库的迭代主要是为了解决上述的现状问题以及翻新视觉，总体可以概括为：增加缺少组件，精简现有组件属性，规范设计元素。
增加缺少组件
现有组件库中，缺少的组件包括chip，stepper 还有 steps，在本次组件库是升级中，全部都进行了补充。
精简属性
以 Button 组件为例，这次精简了大量属性，让设计师在实际使用的时候更加有规范性，而不是“凭感觉”。这次我们去掉了小圆角风格按钮，并且移除了部分 Button 组件的尺寸（为了满足迭代需求，开发并不会移除，只是后续设计侧不会再使用这些属性的组件变体）。
规范设计元素
本次更新之际，正好在 Figma 更新了 Slot 功能后，并且对自动布局的部分功能进行了调整，因此本次会完全规范化制作设计组件库，增加 Slot 以提升组件灵活性，并且更接近开发实际的组件形态。
但是，直接空白 slot 对设计来说是一种不负责任的体现，我们使用了预制 slot 内容的方式来提升效率，考虑到对设计来说，大多数插槽主要是插入图标，只有少数情况才会插入其他内容，因此我们规定：
如果是只会使用图标的插槽，依然使用 Figma 的 swap instance 来实现；
如果多数场景使用 icon，但存在特殊情况插入其他内容，则使用 slot，但是默认内置一个该组件的常见 icon方便设计师快速启动。
此外，为了规范和更好让 AI 理解设计图层，组件库的明明高度与开发对齐，例如 Label、Container、Children 等词汇被使用用于命名。
增强 AI 友好性
本次 EDM 升级也是属于 AI 基建升级的一次尝试，在此过程中，除了利用 AI 工具打造专属的 Figma 提速外，设计侧还构建了其他内容来帮助开发和实际场景中提速。
利用 Figma MCP 搭配 Codex的 Figma plugin，我提供了一个专门方便部分小项目进行利用 EDM 组件库直接 Vibe coding 的 design.md，同时也可以让开发在实际进行业务开发时，将该 design.md作为基础进行开发，提高还原度。
该文档规范了如下内容：
基础的全局变量及其注释用法；
组件的各类属性样式内容；
明确边界告知 AI 不允许自建主体和变量，组件只能调用不能做样式覆盖。
在实际利用 EDM 2.0 启动了一个新的移动端 VUE2 项目后，我进行了测试，发现在实际的纯 Vibe coding 场景中，design.md 能够很有效的方式 AI 跑偏，出现完全看不出与 EDM 相关的问题。如下图，作图为使用了 design.md做的番茄钟 App，右图为完全不使用但是完全一样的项目的对比实验。
这套方案并没有止步于此，我们还同时制作了 EDW 的对应 design.md，也已经交付到开发，可以直接获取。
项目总结
借助 AI 工具，本次 EDM 升级仅用了 2 个月不到就完成了验收。整个项目的核心我认为是以下两点：
实际业务的组件库升级并不是飞机稿项目，会牵一发而动全身，如何稳定升级是非常重大的课题；
利用 design.md和开发对应的 API skill 联动，让还原设计稿的效率可以进一步提升。
现在 Harness agent 已经逐渐成为主流 agent 架构工程，其特点是高度系统化和工程化。我认为在未来的 AI 时代，其余的内容亦是如此，更早的工程化，做到人易用、AI 易读的一套基建设施将是每一个企业和团队的必备课题。
83 次点赞
今天可以点赞一次
