前言¶

很多团队已经习惯「设计稿 → 代码」这条链路：从 Figma 选中 Frame，借助 MCP 或 Code Connect 把组件映射到真实代码。反过来却常常卡住——产品或工程侧先改了页面结构，设计文件还停在旧版；或者落地页已经上线，却要重新在 Figma 里用矩形和色值手工搭一遍。结果是设计系统与代码各说各话，评审时只能对着截图猜间距。

figma-generate-design 要解决的就是这条反向路径：在已连接 Figma MCP、且目标文件里有（或能访问）已发布设计系统的前提下，把应用页面、视图或多区块布局，按设计系统组件实例与 Token 组装成可维护的 Figma 稿，而不是一堆写死 hex 的色块。

这是什么¶

figma-generate-design 是一套遵循通用 SKILL.md 格式的 Agent Skill，收录在 OpenAI 的 openai/skills 仓库的 .curated 目录中；Figma 也在 MCP 相关文档与 figma/mcp-server-guide 中提供同名能力说明与安装入口。它面向「把整屏/多区块视图写进 Figma」这类任务，必须与 figma-use 一起使用：后者约束 use_figma 的 Plugin API 写法（颜色 0–1、字体加载、增量调用等），本 Skill 则规定「发现设计系统 → 按区块组装 → 截图校验」的工作流。

一句话定位：从代码或描述出发，复用已发布设计系统，在 Figma 中创建或更新完整页面（以及模态、抽屉等多区块容器），而不是手动画原始图形。

官方边界也很清楚，避免和相邻 Skill 混用：

• 交付物是「由设计系统组件实例组成的 Figma 视图」时，用本 Skill。
• 要从 Figma 生成代码时，应改用 figma-implement-design。
• 要新建可复用组件/变体时，直接用 figma-use。
• 要写 Code Connect 映射时，改用 figma-code-connect（或 openai/skills 中对应的 figma-code-connect-components）。

核心功能与亮点¶

结合官方 SKILL.md（openai/skills 与 Figma 侧文档交叉一致的部分），能力可以概括为下面几块。

1、先找设计系统，再动手画
通过已有屏幕上的 INSTANCE 巡检、search_design_system（组件 / 变量 / 样式），以及 Figma 版流程中强调的 Code Connect 文件解析，拿到组件 key、颜色与间距变量、文字与效果样式。优先 importComponentSetByKeyAsync、importVariableByKeyAsync、importStyleByKeyAsync，用绑定 Token 代替硬编码色值和像素间距。

2、按区块增量组装
先创建页面外层 Frame（如竖直 Auto Layout 的 wrapper），再在每一次 use_figma 调用里只建一个主要区块（Header、Hero、内容区、页脚等），并把节点挂到 wrapper 上。官方明确禁止「先在页面根上散建再 appendChild 迁入」——跨调用搬迁会静默失败，留下孤儿 Frame。

3、与 generate_figma_design 并行（仅 Web）
对可在浏览器渲染的 Web 应用，推荐（有图片时甚至是必须）并行跑两条线：本 Skill 用设计系统实例搭结构；generate_figma_design 抓像素级截图作视觉参照。对齐后再删掉截图产物。非 Web（iOS/Android）或只做局部更新时，走标准流程即可。

4、可更新已有屏幕
用 get_metadata 看结构，定位要改的区块，做变体替换、文案/setProperties 覆盖、增删区块，再用 get_screenshot 分段验收，避免整页低分辨率截图掩盖裁切字、占位文案未改等问题。

5、错误可恢复
沿用 figma-use 约定：use_figma 失败是原子的，不会留下半成品；停下来读错误、必要时用 get_metadata / get_screenshot 看现状，修好脚本再重试。

安装与启用¶

使用前有两个硬前提（官方 Prerequisites）：

• 已连接 Figma MCP（远程服务器地址一般为 https://mcp.figma.com/mcp）。
• 目标 Figma 文件里有已发布设计系统组件，或能访问团队库；并提供文件 URL / fileKey，以及要还原的源码或描述。若还没有文件，需先创建（例如 /figma-create-new-file 或 create_new_file），再把返回的 fileKey 用于后续写入与截图。

推荐：用 Figma 插件一并带上 Skills¶

Figma 文档建议在支持的 Agent 里装官方插件，同时配置 MCP 与常见工作流 Skills（其中包含本 Skill 一类能力）。

Cursor（在 Agent 对话中）：

/add-plugin figma

Claude Code：

claude plugin install figma@claude-plugins-official

安装后按客户端提示完成 Figma OAuth，用 /mcp（Claude Code）等命令确认已连接。

Codex：可在 Codex App 的 Plugins 中安装 Figma 插件并授权；或用 CLI：

codex mcp add figma --url https://mcp.figma.com/mcp

单独安装该 Skill¶

若工具已接好 MCP、只需补 Skill 目录，skills.sh 给出的安装方式为：

npx skills add https://github.com/openai/skills --skill figma-generate-design

也可按需一并安装依赖的 figma-use。openai/skills 仓库对 Codex 还曾提供 $skill-installer 按名安装 curated Skill 的方式；该仓库 README 已提示整体迁移方向，新环境更建议以 Figma 官方插件/文档为准，Skill 原文仍可从上述 GitHub 路径阅读。

通用 SKILL.md 格式下，Cursor、Codex CLI、Claude Code 等只要支持 Agent Skills，都能发现并加载；各工具的插件目录与启用命令以各自文档为准，未核实的路径不要硬套。

典型用法示例¶

触发话术在 Skill 描述里写得很直白，例如：「把这个页面写进 Figma」「按代码更新 Figma 屏幕」「用设计系统搭一个落地页」。下面按官方 Required Workflow 压缩成可复现的步骤。

1、先理解屏幕再碰画布
读页面源码，列出大区块（Header、Hero、内容、FAQ、Footer 等）及用到的按钮、卡片、导航等组件；若来自代码，注意组件默认 props（例如未写 variant 时默认是 primary）。

2、发现组件 / 变量 / 样式
优先扫已有屏幕上的 INSTANCE，得到权威的组件 map；没有现成屏幕再用 search_design_system，关键词要广（button、nav、card、accordion 等）。变量搜索注意：仅靠 figma.variables.getLocalVariableCollectionsAsync() 为空，不能断定没有变量——远程库变量要用 search_design_system 且 includeVariables: true。

3、先建 wrapper，再按区块写入
单独一次 use_figma 建外层 Frame，返回 wrapperId。之后每次调用开头用 ID 取回 wrapper，在内部建区块并 appendChild，layoutSizingHorizontal = "FILL" 等要在挂到父级之后再设。调用时带上日志参数，例如：

// 调用 use_figma 时传入（仅用于日志，不影响执行）
// skillNames: "figma-generate-design"
// 若经 MCP resource 加载，需写成 "resource:figma-generate-design"

区块内导入组件集、绑定变量、用 setProperties 覆盖实例文案（比直接改 characters 更稳），每建完一块就 get_screenshot 看裁切与重叠。

4、Web 场景可并行截图校准
同一 fileKey 上并行 generate_figma_design，用像素稿校正间距与视觉，确认后删除截图层。源码含图片时，Figma 侧文档强调：use_figma 不能直接拉外链图，需从截图节点复制 imageHash。

5、更新已有稿
对指定按钮实例 swapComponent 到新变体、改文案、增删区块，局部修而非整页重做。

一个最小的「用户侧」提示词示例：

请加载 figma-use 与 figma-generate-design。
目标文件：https://www.figma.com/design/<fileKey>/...
把仓库里 pages/Home 的落地页按现有设计系统组件写到 Figma：
先建 Homepage wrapper，再按 Header / Hero / Pricing / Footer 分段写入，
每段截图校验；若本地能跑起页面，并行用 generate_figma_design 作视觉参照。

适用场景与注意事项¶

适合：

• 设计系统已在 Figma 发布，代码侧组件大体对齐，需要把新页面或改版结果同步回设计文件。
• 产品/前端先出可运行页面，设计要基于真实组件实例做评审，而不是看静态截图。
• 维护同一文件里的多屏，要求命名、尺寸、布局习惯与已有屏幕一致。

注意：

• 没有设计系统（或无法访问团队库）时，本 Skill 的价值会大打折扣——它刻意反对用硬编码色值「画」一屏。
• 必须同时遵守 figma-use 规则；跳过会在颜色范围、字体、FILL 顺序等问题上反复踩坑。
• 一次 use_figma 只做一个大区块；贪多最容易出布局与孤儿节点问题。
• 全页缩小截图不可靠，要对各 section 按节点 ID 截图。
• openai/skills 与 Figma mcp-server-guide 中的文案会略有迭代（例如 Figma 版更强调 Code Connect、图片并行捕获）；以你实际加载到的那份 SKILL.md 为准。

小结¶

figma-generate-design 把「代码/描述 → Figma」收成可重复的 Agent 工作流：连接 MCP、复用设计系统、按区块写入并用截图闭环。对已经吃过「设计稿和线上页对不上」的团队，它补的是和 figma-implement-design 相反的那半边。

官方地址：
https://github.com/openai/skills/tree/main/skills/.curated/figma-generate-design

Figma MCP 与安装说明可参考：
https://developers.figma.com/docs/figma-mcp-server/remote-server-installation/
https://github.com/figma/mcp-server-guide