上一篇我们聊过了 Figma × Codex 的工作流：用 get_design_context 把设计稿上下文喂给 Agent 生成代码，再用 generate_figma_design 把跑起来的界面送回画布。

我当时说，这套往返流程”真正释放了 Figma MCP server 的核心价值”。

但这句话说完，我自己心里其实还一个问题没得到答案：

Agent 读到了设计系统，然后呢？

它真的”用”了吗？

答案是：没有。

它只是把你的设计稿作为参考信息喂进了上下文，生成的代码是代码，和你 Figma 里的组件库、变量、Auto Layout 规范没有任何结构上的关联。

其实，在最近三周里，我也看到了国外的Design Engineer已经手搓出了通过Claude操控Figma反向prompt出设计规范并输出到Figma画布。我也手动的实操复现了这个方法。

但没想到，仅仅两周后，就在上周 Figma 发了一个更新，把这个缺口补上了。

新的一步：Agent 现在可以写入画布

Figma MCP Server 新增了一个工具：use_figma。和之前的工具对比一下，就能看清楚这次变化的性质：

工具方向能力说明典型用途
get_design_contextFigma → Agent读取 Figma 设计稿中的页面结构、组件关系、样式信息与设计语境，作为 Agent 理解界面和生成代码的上下文基础让 AI 根据现有设计稿生成更高还原度的前端代码，理解组件层级和设计意图
generate_figma_design运行中的 UI → Figma将已经运行的 UI 界面或截图反向转换为 Figma 中可编辑的设计图层把开发完成的页面回收进 Figma，便于设计复盘、二次编辑和设计资产沉淀
use_figma（新）Agent → Figma允许 Agent 直接在 Figma 画布中创建、修改和管理设计内容，而不只是读取信息让 AI 直接参与设计生产，例如生成页面、调整布局、补充组件、修改文案与视觉资产

前两个工具，Agent 是”看”Figma。新工具，Agent 是”在”Figma 里工作。

支持的 MCP 客户端包括：Claude Code、Cursor、Codex、Copilot in VS Code、Augment、Warp 等。配置方式跟上篇讲的 Figma MCP Server 一样，在你的 MCP 配置文件里接入即可，文档在 help.figma.com。

光有写入权限不够：Skills 是关键

把画布写入权限开放给 Agent，这件事本身并不难。难的是：Agent 怎么知道在你的 Figma 里该怎么正确地工作？

你的设计系统里 Button 有几种 variant？间距用的是 8px 体系还是 4px？Primary color 的变量名叫什么？Auto Layout 里的 padding 规范是什么？

Agent 不知道这些。没有这些上下文，它写进画布的东西，跟你团队积累的那套规范就是两回事。

这就是 Skills 要解决的问题。

Skills 是放在项目目录里的 Markdown 文件，专门写给 Agent 读的。它告诉 Agent：

在 Figma 里该走哪些操作步骤用哪些组件、变量名、间距规范遇到不确定的情况怎么处理什么叫”符合这个团队的设计标准”

你可以把它理解成：一份 Agent 会真正执行的设计规范，而不是贴在 Confluence 上没人看的那种。

写 Skills 不需要写插件代码，就是 Markdown。团队里任何人都可以写，可以共享、迭代、用 Git 管理版本。

目前可以直接用的 Skills

Figma 官方和社区已经发布了 9 个，放在 figma.com/community/skills，可以直接拿来改：

/figma-generate-library：从代码库反向在 Figma 里生成组件/figma-generate-design：调用已有组件和变量创建新设计/apply-design-system：把散装设计关联到设计系统的正式组件（Edenspiekermann 出品）/sync-figma-token：代码与 Figma 变量之间 Token 同步，自带偏移检测（Firebender 出品）/rad-spacing：层级间距自动化，支持变量和 fallback（Rad Collab 出品）/create-voice：从 UI 规范生成无障碍阅读器标注，VoiceOver / TalkBack / ARIA（Uber 出品）/cc-figma-component：从结构化 JSON 合约生成 Figma 组件（One North 出品）/edit-figma-design：通过 Warp 编排 Figma 工作流/multi-agent：并行工作流 + 在 Augment 里实现设计

所有 Skills 都建立在官方基础 Skill /figma-use 之上，建议先读这个再做定制。

如何上手

第一步：确认你的客户端

Claude Code 和 Cursor 都在支持列表里，直接用。

第二步：确认 Figma MCP Server 已配置

上篇已经讲过配置方式，如果还没接，参考 help.figma.com。

第三步：下载 Skills 文件

从 figma.com/community/skills 拿官方的 /figma-use 基础 Skill，放进项目根目录。这是其他所有 Skills 的基础。

第四步：在 Agent 里直接用自然语言描述任务

比如在 Claude Code 或 Cursor 里这样说：

根据设计系统里的 Button 组件，帮我创建一套Primary / Secondary / Ghost 三种状态的按钮变体，放在当前 Figma 文件的 Components 页里。

Agent 会通过 use_figma 工具操作你的 Figma 文件，按照 Skills 里定义的规范来执行。

第五步：让 Agent 自己验证

生成之后，Agent 会自动截图，对不符合预期的地方进行迭代修正——因为操作的是真实的组件、变量和 Auto Layout 结构，调整会联动整个设计系统，不是改一个像素那种表面操作。

这件事对我意味着什么

我做 MCP 工具链这段时间，一直有个感受：代码侧的 Agent 能力在快速跑通，但设计侧是空的。

Agent 可以读 Figma、生成代码，但它不知道你的设计决策是什么、你的规范为什么这样定。结果就是，代码能跑，但设计和团队积累的那套东西越来越割裂。

use_figma + Skills 这套组合，本质上是在做一件事：把设计决策的知识，从文档变成 Agent 可以执行的规则。

这跟我理解的 Context Engineering 方向完全一致——不是给 AI 一个 Prompt，而是给它一套有结构的上下文，让它在正确的约束里工作。Skills 就是设计侧的 Context Engineering 载体。

一个值得注意的变化

这件事有一个隐含的逻辑转变，我觉得值得说清楚：

以前”设计系统”是设计团队内部的资产，开发拿它做参考。

现在这套资产，变成了 Agent 的行为规则——谁的设计系统越完整、Skills 写得越精细，Agent 的输出质量就越高。这意味着设计系统的建设质量，直接决定了 AI 辅助设计的天花板。

不是工具用得熟不熟，而是规范梳理得好不好。

Beta 阶段现在免费，未来会转为付费 API。

延伸资源

Figma MCP Server 使用文档：help.figma.com

Skills 开发者文档：developers.figma.com/docs/figma-mcp-server/create-skills

社区 Skills 示例库：figma.com/community/skills