构建信号SIGNAL TO BUILDEnglish站主登录 ↗
← 知识整理
独立开发 ／ 知识整理 · 中文

Codex + Figma 工具链(装 Figma skill/MCP·生成图表组件库幻灯片·原型转Figma·SVG图标自动替换 的步骤与 skill)

Will（will-ai-note）整理的「用 Codex 这个 Agent 经 Figma MCP 直接往 Figma 画布写真实设计」的完整操作手册。覆盖三件事:① 环境搭建——给 Codex 装 Figma 远程/桌面 MCP server（让 Codex 拿到操作 Figma 的权限）+ 装/管理官方 Figma Skill；② 七个核心 skill 的用途+提示词——figma-use（直接改画布:建 Frame/组件/变量/Auto Layout）、figma-use-slides（生成 PPT 内页）、figma-generate-diagram（文字→可编辑流程图/时序图/ER 图）、figma-generate-design（代码/HTML→Figma UI）、figma-generate-library（代码库→设计系统 Library）、prototype-to-figma（运行中的原型→逐帧 Figma 状态稿）、Community skills；③ 组合工作流——代码原型↔Figma 双向同步、底图截图直出界面、交互框架→新界面、扫本地 SVG 图标自动语义匹配替换。每节给 Why/何时用/可复用提示词/坑（如 figma-use 需付费 Full/Dev seat、Dev seat 只能在 drafts、prototype-to-figma 间距有 bug 但能逐帧拆页）。与 [[newtype-ai-coding]] 的分工:那篇讲 AI Coding 工具栈选型与心法,本篇讲「设计/原型工程化」这一段具体到 skill 和提示词的落地。

资料来源：AI 产品与辅助设计 · 本站发布：2026-09-26 · 笔记更新：2026-06-03

Figma原型设计AI工具

Will 的「用 Codex(一个 AI Agent)通过 Figma MCP 直接往 Figma 画布写真实设计」操作手册。核心不是"让 AI 给你出图片"，而是 让 AI 像设计师一样在 Figma 里建可编辑的 Frame、组件、变量、Auto Layout——产出物是能继续改、能检查、能交付的真设计稿，不是一张拍平的截图。

何时打开:

  • 你想让 Codex / Claude Code / Cursor 直接操作 Figma，但不知道怎么连 MCP、装哪个 skill
  • 你 vibe coding 出了产品，想反向补出 Figma 设计稿 / 设计系统
  • 你想用一句话提示词在 Figma 里画流程图、生成 PPT 内页、批量替换图标
  • 你分不清 figma-use / figma-generate-design / prototype-to-figma 各干嘛

与 newtype · AI Coding 实战与工具栈演化 的分工: 那篇是"AI Coding 工具栈怎么选、vibe coding 心法"的全景;本篇只聚焦 "设计/原型工程化"这一段——具体到每个 Figma skill 的用途、提示词、坑。重叠处(Codex 在 newtype 栈里的角色)交叉引用,不重复。

0. 一句话心智模型(Why 这套值得学)

把整套链路想成 "给 AI 装上能动手的设计师之手":

  • Agent(Codex / Claude Code / Cursor)= AI 的大脑,会主动完成目标(写代码、规划、操作界面),不是只会答话的聊天机器人。
  • MCP(Model Context Protocol,模型上下文协议)= 给大脑装的"接口/手"。AI 本身碰不到 Figma,MCP 让它能去 操作 Figma:代码↔设计双向打通。
  • Skill(技能)= 把"你每次都要重复说的一长串话"存成模板的纯文本文件。例:"打开设计系统 → 按组件规则生成页面 → 用 Auto Layout 排版"封一个 skill,以后一句 /figma-use 就触发。Figma 出了官方 skill 可直接拿来用。

EN gist: An Agent (Codex) is the brain that acts on goals; MCP is the hands that let it reach into Figma; a Skill is a reusable text template that packages a repetitive multi-step instruction. The payoff: AI writes real, editable Figma layers (frames, components, variables, auto-layout) using your design system as source of truth — not a flattened screenshot.

反 pattern(最关键的一条坑): 别用"浏览器截图/HTML 转图片"那类工具把界面导进 Figma——产出是一张 没有图层、没有设计系统组件、没有标注的拍平图片,正好是这套工作流要消灭的东西(见 prototype-to-figma 的 Rule 0)。

1. 环境搭建:给 Codex 装 Figma 的"手"(MCP)+ "技能"(Skill)

整套用之前必须先弄懂三个物料,否则后面全在基本概念上跑偏:Skill(做什么)、Figma link(对谁做)、附件(Html / PRD / DRD / image,给资料)。

1.1 连 Figma MCP(给 Codex 操作 Figma 的权限)

两种装法,远程版优先:

▸ 远程 Figma MCP server(推荐)

  1. 打开 Codex 应用左上角 Plugins
  2. 点 Figma 旁边的 + → Install Figma
  3. 进授权流程,点 Allow access 让 ChatGPT 连你的 Figma 账号
  4. 回到 Codex,看到 Figma plugin 已连接即可用

▸ 桌面 Figma MCP server(本地版)

  1. 在 Figma 桌面端开启 MCP server
  2. 在 Codex 里配 MCP server: Name = figma,URL = http://127.0.0.1:3845/mcp,Save

其他客户端(VS Code / Cursor / Claude Code / Gemini CLI)连法见官方 guide:统一是加一个 HTTP MCP server,URL https://mcp.figma.com/mcp。Claude Code 一行 claude plugin install figma@claude-plugins-official(装官方 plugin 带 MCP 配置 + skills);手动则 claude mcp add --transport http figma https://mcp.figma.com/mcp。

Why 两种都给: 远程版省心(云端授权即用),桌面版适合你要本地把 Figma 选区转代码、不想走云。

关键坑(权限/seat 限制): 「写画布」(Write to canvas)这类真正能动手改 Figma 的能力,仅付费计划的 Full seat / Dev seat 可用;而且 Dev seat 只能在 drafts(草稿)里写。读数据的工具对 Starter / View seat 有每月 6 次调用的硬限。换句话说:想让 AI 真往正式文件写设计,得是付费 Full seat。

EN gist: Prefer the remote MCP (Plugins → + → Install Figma → Allow access). Desktop alternative: enable MCP in Figma desktop, then add http://127.0.0.1:3845/mcp in Codex. Write-to-canvas needs a paid Full/Dev seat; Dev seat is drafts-only.

1.2 装 / 管理 Figma Skill

▸ 批量装(一个 zip 里多个 skill)

  1. 解压 zip,在 Codex 中选中该文件夹
  2. 提示词:「请帮我看一下这个文件夹里所有的 Skill。已安装的不用管,没装的帮我装一下。」

▸ 单独装(一个 .md 文件)

  1. 新建 Codex 对话,点 +,选中 Skill(.md 文件)
  2. 提示词:「请帮我安装一下这个 Skill。」

▸ 管理: Codex 桌面客户端 → 左边栏 Plugin → 顶 Tab Skills。

Community skills(第三方扩展): 官方 skill 之外的能力在 figma.com/community/skills,可按需取。

Why skill 而非每次手打: skill 把一段固定 SOP(扫设计系统→按组件规则建页→Auto Layout 排版)封成可复用模板,触发时 AI 严格按流程走,稳定性来自"清晰的元数据"而非临场发挥——和 newtype · AI Coding 实战与工具栈演化 §6.4 "让模型可靠靠元数据约束" 同理。

2. 准备提示词的三件物料 + 选作用对象(Figma link)

每条让 Codex 动 Figma 的提示词,本质都在拼三种属性:

属性 是什么 怎么给
作用对象 对哪个页面/图层动手 Figma link(见下)
要做的工作 干什么 /Skill 或自然语言
附件资料 拿什么参照 Html / PRD / DRD / image 等

怎么拿 Figma link(决定 AI 作用在哪):

  • 选图层/Frame: 在 Figma 选中任意 Frame 或图层 → 右键 Copy link → 粘进 Codex 对话框。用途:让 Codex 改这个界面、或参考这个界面的 UI 设计系统。
  • 选 Page: 选中任意 Page → 右键 Copy link → 粘进对话框。用途:让 Codex 改整体界面、或把生成的设计 输出到固定位置(指定它画在哪一页)。

Why 必须给 link: AI 客户端打不开这个 URL,但能从中 抽出 node-id——MCP 靠这个 id 才知道操作哪个对象。没 link,AI 不知道对谁动手。

一个完整提示词长什么样(背景:已做完小红书"个人账户页",新需求要"企业账户个人页"):

根据 PRD（小红书企业个人页）的需求，
使用 /Skill figma-use 在 [Figma Page link] 中生成小红书企业账户个人页面，
视觉风格与系统要求与 [Figma Frame link（小红书个人页）] 保持一致。

输出: Codex 在你指定的 Page 里画出 可编辑的设计稿。

3. Figma Skill 速查(七个核心能力)

下面每个 skill 给「作用 / 何时用 / 提示词模板 / 坑」。

3.1 figma-use — 直接往画布写真实内容(核心能力)

作用: 让 Codex 直接在 Figma 创建/编辑 Frame、Component、Variable、Auto Layout、布局结构。产出可编辑、可检查、可继续改。

何时用: 任何你想让 AI 直接动 Figma 的场景——新建页、搭页、改组件、改布局、建变量、改 token、批量规范化设计。

提示词模板:

  • 「用这个 Figma 文件 link,新建一个 page,基于现有组件做一个 settings 页面。」
  • 「用这个 selection link,增加一个符合当前 design system 的 empty state。」
  • 「用这个 Figma 文件 link,把这个 frame 里的原始颜色值全部转换成 variables。」(批量把硬编码色值收成变量,设计系统化的常用动作)

Why: 它是其他生成类 skill 的底座——"往画布写真东西"这件事本身,所有 skill 都依赖它。

3.2 figma-use-slides — 操作 Figma Slides,直接改真 PPT

作用: AI 直接改真实 PPT 内容——新增 slides、slide 分组、改文字/图形、套 theme、写 speaker notes(演讲备注)。

何时用: 把内容丢给 Codex,让它和 Figma Slides 互动直出 PPT 内页。

提示词模板:

  • 「参考图 Skill Link 在新页面上用 Skill 绘制参考图的内容,风格与模板保持一致。」
  • 「用这个 slide link,重做这页布局,让它和整套 deck 一致。」

何时不用这条而用别的: 想从零做有动效的网页版演示,走 frontend-slides skill;这条是专门"在 Figma Slides 里"动手。

3.3 figma-generate-diagram — 文字描述 → 可编辑图表

作用: 把系统描述 / 流程描述 / 代码 / PRD / schema 等任意结构化资料,直接变成 真实可编辑的 FigJam 图(不是图片):流程图 Flowchart、时序图 Sequence、数据库关系图 ER、状态图 State、甘特图 Gantt。

提示词模板:

  • 「PRD 附件 Skill Link 根据附件内容,创建一个用户流程图,放到 figma 对应画板里。」

Why 比画图工具强: 产出是可编辑的真图层,不是拍平 PNG;改一个节点直接在 Figma 改,不用回到画图软件重导。

3.4 figma-generate-design — 代码/HTML → 完整 Figma UI

作用: Code → Real Figma UI。喂给它 HTML、代码里的某个页面/某个 view、运行中的 web app、已有项目代码 → 转成 Figma UI。

何时用: 工程产品反向补设计稿、现有产品同步到 Figma、老项目补 UI source、Dev → Design workflow、快速重建设计页。

提示词模板:

  • 「Html Skill link 根据 Html,生成对应 Figma 页面。」

3.5 figma-generate-library — 代码库 → 设计系统 Library

作用: 从代码库(尤其 vibe coding 出来的产品)或现有 Figma 文件,反向生成/更新 Figma Design System Library。它会:① 扫代码库或现有 Figma → ② 生成 color variables / spacing tokens → ③ 自动搭标准设计系统结构(Cover / Getting Started / Foundations)→ ④ 生成 color docs / typography docs → ⑤ 创建组件 variants + auto layout → ⑥ 自检(Code Connect 映射、accessibility check)。每一步都会让你确认。

何时用: 你已有代码产品或大量 Figma 界面,想 反向沉淀出一套设计系统。

提示词模板:

  • 「Skill link 使用 Skill 生成所选 Page 的设计系统。」(过程需多次确认,最后一步是审查)

Why 这步重要: vibe coding 产物常常"能跑但没设计系统",放量后样式失控。先反向抽出 token/组件库,后续 AI 生成才有"源头真理"可遵循(承接 newtype · AI Coding 实战与工具栈演化 §9.3 "vibe coding 清洗"的隐患)。

3.6 prototype-to-figma — 运行中的原型 → 逐帧 Figma 状态稿

作用: 把 运行中的代码原型 直接转成 Figma 可编辑界面流——把一个可交互原型 拆成一帧一帧的状态稿,并尽量映射设计系统组件。开源地址 github.com/alima-max/prototype-to-figma-skill。

何时用: vibe coding 后已有可运行页面,想进 Figma 做设计优化 / 评审 / 交付;或想让非技术干系人 异步评审一个原型。

提示词模板:

  • 「Html 或 vibecoding 产品 link Skill/prototype-to-figma Figma page link 运行 Skill,将现有项目代码转为可编辑的 Figma UI,并尽量映射 Design System 组件。」
  • 「Skill/prototype-to-figma Player DS link 基于现有 Player DS 设计系统,为新功能「功能描述」设计页面,放到 Figma page link。」

这个 skill 的内部逻辑(读 SKILL.md 提炼,值得借鉴的工程化原则):

  • Rule 0 — 绝不用浏览器截图/HTML 转图片: 必须读源码(CSS modules / Tailwind / inline styles / React 组件树),用 use_figma 程序化建帧;截图只会得到无图层、无组件、无标注的拍平图。
  • Rule 1 — 绝不新建 Figma 组件: 没有 DS 匹配的元素,用 primitive(frame/rectangle/text)拼,并打一条 "DS Drift"标注说明缺了什么,而不是污染设计系统。
  • Rule 2 — 不漏任何可见元素: 每个可见元素都要在 Figma 出现(DS 实例或 primitive)。"找不到 DS 匹配就跳过"是产出不完整的头号原因。
  • Rule 3 — 标注挂在节点上、且只标流程关键: 用 node.annotations=[...] 挂在真图层(在 Dev Mode 显示在对的元素上),不要做浮动文本框;只标 Interaction(蓝,状态转移/主 CTA/分组控件)和 DS Drift(橙,缺组件/缺变体/未绑变量),每帧 2–4 条,让评审 30 秒读完就懂整条流程。
  • 完整 6 阶段流程: Phase 0 定文件+探能力 → 1a 读原型源码(组件清单/交互流/布局/CSS 量值)→ 1b 报范围让你选(≤2 个 flow 跳过)→ 2 把组件映射到设计系统 → 3 规划页结构 → 4 在 Figma 建帧+绑变量+标注 → 5 加流程总览帧 → 6 自检+交付。
  • 能力分档: 客户端按 Inspect/Write/Code Connect 能力分 Full / Write / Inspect-only / None 四档;无 Write 能力时降级产出一份 markdown 规格文档而非 Figma 文件。

坑(Will 实测): 间距上有 bug,但 不是大问题——最大价值是它能把 vibe coding 的 每一个页面都提取出来生成 Figma UI,逐帧拆状态。

3.7 Community skills — 第三方扩展

官方 skill 之外的能力,在 figma.com/community/skills 按需取。

4. 组合工作流(把多个 skill 串起来用)

单个 skill 之外,真正的生产力在"组合"。以下五条是把上面 skill 串成端到端流程的实战配方。

4.1 Code → Figma:把运行中的原型变成可编辑设计稿

场景: vibe coding 后有可运行页面,想进 Figma 做优化/评审/交付。 步骤: ① 本地启动 prototype(localhost 可访问)→ ② Codex 输入 /prototype-to-figma → ③ 让 Agent 抓你的 localhost → ④ 打开 Figma 按 flow 顺序生成页面,等整条 flow 转成 design frame → ⑤ 在 Figma 直接改设计 → ⑥ 让 Agent 按改后的 Figma 回写代码(update prototype based on this Figma design)。 Why: 设计↔代码闭环,改设计不用手动同步代码。

4.2 Code Design System ↔ Figma:设计系统双向同步

场景: 你有真实设计系统(dark mode / token / component),希望 AI 生成的代码 严格遵循它,而不是瞎生成。 步骤: ① 代码设计导入 Figma(/figma-generate-design)→ ② 设计 token 导入 Figma(/figma-generate-library)→ ③ 在 Figma 里调变量(主色 / dark mode 色板 / 文本对比度 / spacing,不用改代码)→ ④ 推回代码,Agent 更新代码设计系统。 Why: 把"改设计系统"从改代码变成改 Figma 变量,设计师可独立操作,改完一键回写。

4.3 在 Figma 里让 AI 输出 UI 方案(基于现有设计探索多方案)

场景: 已有设计稿,想快速探索多个方向,不想从零开始。 步骤: ① 输入设计问题(如某模块转化差)、用户调研、约束、期望方向(配合 AI 辅助 UX·体验/UI 设计阶段(用 AI 生成美观UI·设计系统·配色·交互状态·微文案·UI转代码Figma·响应式 的提示词与流程) 的 Discover/Define/Ideate 方法)→ ② Codex 输入 /figma-use(用你现有的 components / variables / styles)→ ③ Agent 直接在 Figma 出优化方案 → ④ 设计师人工 refinement。

4.4 交互框架 / 产品原型 → 新系统 UI 界面

场景: 基于交互框架或原型,直接生成新的设计需求页;做多方案尝试。 步骤: ① 输入交互框架(自绘或参考图)→ ② Codex 输入 /figma-use /figma-generate-design,提示词如「将参考图的交互框架、文字和功能内容,结合 Figma link 的 UI 视觉体系,设计一个新界面。保留左侧栏,只生成右侧仪表盘内容。不参考参考图的颜色、圆角等视觉样式。」→ ③ Agent 直接在 Figma 出新方案 → ④ 人工 refinement。 Why 提示词要写"不参考颜色/圆角": 让 AI 只取参考图的 结构/信息架构,视觉走你指定的设计系统——避免它把参考图的视觉风格也抄过来。

4.5 底图截图 → 直出界面初稿

场景: 手里有一张底图/截图,想在它上面生成界面。 步骤: ① 准备好要生成的界面图,上传 Codex 对话框 → ② 输入 /figma-use /figma-generate-design,如「将底图(图2)上加入 HMI 车载界面模块与交互设计(图1),设计语言用毛玻璃半透明效果,输出在 page link」→ ③ Agent 先扫参考图,再在 Figma 制作界面 → ④ 设计师人工 refinement(替换图标、替换 PNG 实物图)。 备注: 也可以根据 image2 出的界面直出 Figma 稿。

4.6 扫本地 SVG 图标,自动语义匹配并替换 UI 里的图标

场景(高频痛点): AI 已生成 Figma 稿,但 图标质量差、完成度低。 步骤: ① 准备好本地 Icon 文件夹(内部全是 SVG)→ ② 新建对话,在下方文件夹选择器里选目标文件夹 → ③ 输入 /figma-use /figma-generate-design,如「在文件夹的所有图标中找到 符合语义 的图标,将 Page link 这个 UI 里的所有图标做替换。」→ ④ Agent 先扫文件夹数据,再在 Figma 替换 → ⑤ 人工 refinement。 备注: 不只 icon——同理可换 真实文案、真实图片、头像,把 AI 生成的"占位级"内容批量升级成真内容。 Why: AI 生成 UI 最掉链子的就是图标/占位内容;让它在你的真实素材库里按语义匹配替换,一步把完成度拉满。

5. 反 pattern 总结

❌ ✅
用浏览器截图/HTML 转图片把界面导进 Figma 读源码程序化建帧,产出带图层/组件/标注的真设计
没匹配到 DS 组件就新建组件 用 primitive 拼 + 打 DS Drift 标注,不污染设计系统
找不到 DS 匹配就跳过该元素 每个可见元素都要出现(实例或 primitive)
标注做成浮动文本框 node.annotations 挂真节点,每帧 2–4 条只标流程关键
让 AI 自由发挥视觉 提示词显式"只取结构、不参考参考图颜色/圆角"
用 Starter/View seat 想写画布 写画布需付费 Full/Dev seat,Dev seat 仅 drafts
vibe coding 产物不抽设计系统就放量 先 figma-generate-library 反向沉淀 token/组件库
容忍 AI 生成的劣质占位图标 扫本地 SVG 库按语义自动替换(§4.6)

引用与延伸

主要引用: sources/reference/will-ai-note/Codex + Figma/ 全 16 个 leaf .md + 父 intro + 两个 skill bundle(prototype-to-figma-skill 的 SKILL.md / mcp-server-guide 的 README.md)。

配套 wiki:

History

  • 2026-06-03 v1.0 创建 — ingest Codex + Figma 区全 16 leaf md + 父 intro,解压 2 个 skill bundle 读 SKILL.md/README.md。5 节:心智模型 / 环境搭建(MCP+Skill)/ 七个核心 skill 速查 / 六条组合工作流 / 反 pattern。双语。

来源与关联资料