AI 生成 Figma 页面总跑偏？把设计规则做成 Skill 才是正解

很多设计师都试过让 AI 生成设计稿：把现有 Figma 页面发给它，再给一份新页面的字段清单，指望它照葫芦画瓢。结果往往是生成一页要五十分钟，按钮高度忽大忽小，状态标签被画成普通文本框，看起来像，用起来全对不上。

问题出在哪？AI 每生成一个区域，都要重新推断间距、字体、颜色和组件关系。它看到的是页面的结果，却没有掌握页面背后的规则。每次都在重新学习同一套设计语言，自然又慢又不稳。

误区：必须先整理好组件库才能开始

不少人的第一反应是先把所有组件统一命名、配齐 Variant。听起来合理，现实中却很难执行——设计文件里往往混着「按钮」「切换」「Frame 6」这样的命名，中英文数字搅在一起。如果必须等组件库治理完美才能动手，AI 设计就会永远停留在准备阶段。

关键转折：建立业务语义与真实组件的映射

其实 AI 不要求组件名字多规范，真正重要的是把「业务语义」对应到「真实组件」上。比如主按钮、次按钮都映射到同一个按钮组件集，再用 Variant 属性区分样式；原型里的「合同名称」是单行输入，「审批进度」对应流程节点。组件原来叫什么不重要，只要能确认它的真实用途，就可以在规则里为它补一层语义。

把页面整理成 Skill，而不是继续喂页面

具体做法分四步：

1. 扫描 Figma 文件里的真实组件，记录组件集的 Key 和 Variant 属性。注意组件集的 Key 和某个具体样式的 Key 不是一回事，AI 应该先导入组件集再选样式，否则无法复用原组件。
2. 整理字段语义映射，让 AI 面对新字段时能判断它属于哪类输入，而不是去旧页面里找一模一样的内容。
3. 提取页面结构规则：页面宽度、卡片间距、主按钮位置、移动端用卡片还是表格，这些散落在各页面里的隐性规范统一写进规则。
4. 加上保护性限制：找不到真实组件时要明确报告而不是瞎猜，没有设计依据时不能自行创造新的视觉规范。

一个容易被忽略的坑：字体

本地能看到苹方，不代表 AI 的远程执行环境也能加载它。稳妥的做法是在规则里明确：已有页面的文字不动，AI 新建的文字统一用思源黑体并对应原字重，避免每次生成都在字体加载上卡壳。

跑通之后，流程就从「AI 看着页面模仿」变成了「AI 执行一套被明确描述的设计系统」：原型给出字段，规则匹配组件，AI 输出可编辑的页面，设计师只做最终审核。现有页面本身就是一套尚未书面化的设计系统，Skill 做的事，就是把这些隐性经验变成 AI 能反复执行的规则。