Figma里画好的按钮和代码里实现的按钮，往往活在两个世界。设计师改一个圆角，前端就得对照着改一遍样式；开发重构了状态逻辑，设计稿又不一定同步更新。这种拉扯由来已久。

现在又多了一个变量——AI开始介入生成设计。如果AI从Figma取样式、向代码仓库推组件，两边稍有偏差，它就会把错误放大。文章提出的解法是把组件真正“搬出来”：用JSON或YAML文件作为设计系统唯一的定义源。

打开网易新闻 查看精彩图片

这份契约文件不偏向任何一方工具，它记录的是组件最底层的规则——名称、属性、变体、状态，以及它们在不同平台下的表现。Figma可以读取它来生成图层和组件库，代码端同样能据此渲染出一致的界面。两者从此不再依赖人工对齐，而是遵循同一份机器可读的约定。

当AI加入工作流时，这种机制更显示出价值。给模型一个组件契约，它就能同时产出匹配的设计稿和可用代码片段，而不是在不同工具间来回猜测。组件既不在Figma，也不在代码里——它活在那份明确描述“这个组件是什么”的契约中。