北京
分享至
Figma里画好的按钮和代码里实现的按钮，往往活在两个世界。设计师改一个圆角，前端就得对照着改一遍样式；开发重构了状态逻辑，设计稿又不一定同步更新。这种拉扯由来已久。
现在又多了一个变量——AI开始介入生成设计。如果AI从Figma取样式、向代码仓库推组件，两边稍有偏差，它就会把错误放大。文章提出的解法是把组件真正“搬出来”：用JSON或YAML文件作为设计系统唯一的定义源。
这份契约文件不偏向任何一方工具，它记录的是组件最底层的规则——名称、属性、变体、状态，以及它们在不同平台下的表现。Figma可以读取它来生成图层和组件库，代码端同样能据此渲染出一致的界面。两者从此不再依赖人工对齐，而是遵循同一份机器可读的约定。
当AI加入工作流时，这种机制更显示出价值。给模型一个组件契约，它就能同时产出匹配的设计稿和可用代码片段，而不是在不同工具间来回猜测。组件既不在Figma，也不在代码里——它活在那份明确描述“这个组件是什么”的契约中。
特别声明：以上内容(如有图片或视频亦包括在内)为自媒体平台“网易号”用户上传并发布，本平台仅提供信息存储服务。
Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.
