从生图到能改的 Figma 图层 skill 分享

过去一年，AI 生图工具的进步是真的。我经常把一句话丢进去，很快得到一张构图讲究、配色舒服的稿子，第一眼完全够格当设计稿。但每次到了“接下来怎么办”这一步，我就卡住了。

想改一个按钮的文案，重画。想调一处间距，重画。想把它交给前端，前端只能对着像素临摹。最要命的是，这张图和团队的设计资产没有任何关系——字号进不了样式库，颜色挂不上变量，Logo 是 AI 随手画的，我甚至不知道它用的是哪款字体。

难在哪，我是试过几次之后才真正明白的。第一是能改：位图里的任何改动都是重画，而团队每次迭代都要从重画开始。第二是字体：AI 用了什么字体我根本管不住，它可能在稿子里显示得挺好，但我的机器上没有，一打开就全乱了。第三是资产：Logo 该从哪来、透明底怎么做、图标用什么体系，这些在“生一张图”里根本没被回答。

我不是嫌 AI 画得不够好。我是发现：生图解决的是“像不像设计稿”，而设计交付要的是“能继续改、能进团队流程”。 这两件事之间，差着整整一套东西。

于是我写了一个 Skill，叫 AItoFigma，跑在 Codex 里（Codex 的 Skill 规范见官方文档）。它的目标很简单：把“AI 生成一张看起来像设计稿的图”，变成“经过约束、验收并写入 Figma 的可编辑原生图层”。仓库在 https://github.com/Niall-Young/AItoFigma 。

三种使用方式

同一个管道，三种入口。

从一句话开始（自主规划）。 你只给一个 Brief，比如“设计一个 1440 宽的数据分析落地页”，AI 从空白开始搭结构、定排版、选视觉。这是我最先验证的一条链路。

照着截图还原（高保真复刻）。 你给一张参考图，比如一张 iOS AI 助手欢迎屏截图，AI 尽量把它还原成图层——连 44px 状态栏、34px 的 Home 条都会作为语义化节点建出来，而不是画个近似。

借鉴画板风格（风格参考）。 你给一个 Figma 节点链接，AI 提取它的视觉语言——配色、字重、间距节奏、图标风格——但重新规划信息架构。

三种入口的终点一样：Figma 里可编辑的原生图层。

先想清楚，再让 AI 动手

这套方法最反直觉的地方是：前四步，一行代码都不写。

传统做法是“让 AI 直接生成”。我反着来——先把该想的事想清楚，全部过关，才允许它动手。完整流程是一张九步的状态机：解析意图 → 目标门 → 脚手架 → 字体门 → 资产门 → 构建 → 本地验收 → 写前重验 → 捕获与回读。我挑几个关键概念讲。

目标门：动手之前，先回答“写到哪里”

开工前必须解析 Figma 交付目标：写进已有文件，还是新建一个。目标没解析清楚，连工作目录都不允许创建。这一步很小，但 AI 最常见的翻车之一，就是把东西写进了错误的位置。

目标定了之后，脚手架这一步只做一件事：建好 design.md 和资产目录，明确不建 HTML。这套方法的缩影就藏在这里——先立契约，再谈实现。

字体门：只用你电脑上已经有的字体

AI 生成的稿子用了一款你没装过的字体，打开就变豆腐块。这个流程的规则是：只允许用本机已安装的字体，默认 PingFang SC，不下载、不远程加载、不用 @font-face。如果某款展示字体本机没有，它会明确记录“换成了什么、为什么换”，而不是悄悄替代。

资产决策表：页面上的每个元素，都要有交代

开工前，AI 会把页面上每一个非文本视觉元素都盘一遍，放进一张决策表，一行一个元素。它长这样：

每个元素都要回答：它是什么、起什么作用、从哪来、要不要透明底、怎么处理。任何一行没到 ready，流程就在 HTML 生成之前停下来，明确告诉你缺什么。这张表就是一份设计契约，也是后来回溯“当初为什么这么决定”的唯一凭据。

这张表还带着一层双向校验：表里登记了但 HTML 里没用上，说明漏了元素；HTML 里冒出来但表里没有，说明 AI 悄悄加戏了。两头都能被抓住。

生图在里面的位置很克制。它只是决策表里的一种处理方式，只允许用在“非身份关键、且确实缺失”的主视觉上。Logo 这种身份资产，永远不靠生图。即便生图，也有纪律——按主体明暗选键色背景、去底、alpha 四格校验，一次修正失败即停。

本地验收：先在自己机器上过一遍，再谈进 Figma

HTML 生成后，先在本地跑校验、起预览服务、做全页截图，人工过一遍。有错误，连请求捕获的资格都没有。这一步把“AI 生成 → 直接交付”，变成了“AI 生成 → 本地验收 → 受控写入”。

捕获与回读核验：写完不算完，要读回来确认

写进 Figma 用的是 Figma 官方的 code-to-canvas 能力（Figma MCP 的 generate_figma_design，见官方文档）。捕获 ID 我设计成一次性使用，捕获范围锁定在唯一根节点上。把范围锁死，是因为我踩过坑：不锁的话，AI 很容易把整个浏览器视口截进去，Figma 里就多出一层背景外框，设计师还得手动删。与其事后收拾，不如在机制上就不让它发生。写入之后必须读回顶层节点的元数据和截图，核对尺寸和层级。失败只允许一次有依据的修正，第二次再失败，就停下来报告——不反复试错、不静默降级。

代码只在“构建”那一步出现，而且是一条硬规则：HTML 必须是纯静态的——内联 CSS、无框架、无 CDN、无远程字体。

为什么要装这么多闸门

如果我只想要“AI 出一张好看的图”，这九步流程全是多余的。但我要的不是图，是交付物。

把这两件事分清楚，是我做这个 Skill 最大的收获。参考图只要“像”，交付物必须“能改”，还必须能在团队里被继续使用。

对设计师，拿到的是图层，不是死图。捕获的帧会变成标准的 Figma 设计图层——官方文档原话是 “Captured frames become standard Figma design layers”——文本是文本图层，形状是形状图层，图标是矢量。如果目标文件挂了变量库，Figma 还会把颜色、数值、字符串变量自动绑定到捕获的图层上（见 Figma MCP 文档）。这一点，单纯截图做不到。

对团队，设计决策有了审计轨迹。每次交付，design.md 记录完整的设计契约，validation-report.json 记录验收结果。这个字体为什么换、这个资产从哪来、当初为什么这么定，全部可回溯。这些记录不是给外人看的报告——我自己改下一轮稿的时候，经常要回头查“当时这个主视觉为什么定了去底”，没有这张表就只能靠猜。

对品牌，Logo 是一条红线。只接受原件或第一方资源，AI 不许生成、不许从截图里裁、不许近似仿制。找不到官方源，流程就停在资产门，明明白白告诉你“缺一个 Logo 原件”。

所以我在做的，不是“图片导入 Figma”。图片导入类工具搬运的是像素或 DOM，没有设计意图层。我的做法是先让 AI 把设计决策写下来——字体怎么定、资产怎么处理、元素怎么组织——再通过 HTML 这个受控中间层，翻译成 Figma 图层。design.md 是契约，HTML 是中间层，Figma 原生图层才是交付物。

结语

九步流程里，前四步什么都不生成，光在想；一个元素不 ready，就整个停下；写完还要读回来核对一遍。这套东西不酷，它刻意在跟 AI 的“一次性冲动”作对。

但我越来越确信，设计交付本来就不是一次性冲动。它是被人反复编辑、反复使用、反复交接到别人手里的东西。给 AI 的设计输出装上闸门，让结果从“一张图”变成“一版稿”，这就是我想做的事。