前言¶
做前端或全栈时，经常会遇到同一件事：设计师在 Figma 里改完稿，开发这边还得对照标注、切图、对色值、估间距。截一张图丢给 AI 也能“看着写”，但模型看不到节点结构、变量和组件映射，出来的代码往往只能当草稿。Figma 后来提供了 MCP 服务器，能把设计上下文直接交给 Agent；OpenAI 在 curated Skills 里又放了一个叫 figma 的 Skill，专门约束「怎么调 MCP、按什么顺序取数、怎么落到你项目的约定里」。本文就围绕这个 Skill，说明它是什么、怎么装、怎么用。
这是什么¶
figma 是 OpenAI 在 openai/skills 仓库 skills/.curated/figma 下维护的一个 Agent Skill。它的定位很明确：通过 Figma MCP 服务器 获取设计上下文、截图、变量与资源，并把 Figma 节点翻译成可落地的生产代码。
触发场景在 Skill 的 description 里写得很清楚——任务涉及 Figma URL、node ID、design-to-code 实现，或 Figma MCP 的安装与排错时，就该启用它。
需要分清两层关系：
- Figma MCP：真正连上 Figma、提供
get_design_context等工具的服务端（远程地址为https://mcp.figma.com/mcp）。 - figma Skill：告诉 Agent「必须先取上下文再截图再实现」的流程与约束，避免跳步瞎猜。
Skill 基于通用的 SKILL.md 格式，在 Codex、Cursor、Claude Code 等支持 Agent Skills 的工具里都可以复用；MCP 本身也需要在对应客户端里单独配置并完成 OAuth。
核心功能与亮点¶
根据官方 SKILL.md 与 references/figma-tools-and-prompts.md，这个 Skill 主要把下面几类能力串成固定工作流：
- 取结构化设计上下文：优先调用
get_design_context，拿到节点的结构化表示；默认输出偏 React + Tailwind，但应视为设计/行为的中间表示，而不是最终代码风格。 - 大节点降级策略：响应过大或被截断时，先用
get_metadata看高层节点图，再按需对子节点重新调用get_design_context。 - 视觉对照：用
get_screenshot拿到当前节点/变体的截图，作为实现过程中的视觉参照。 - 变量与样式：
get_variable_defs可列出选区里用到的颜色、间距、字体等变量，方便对齐设计 token。 - 资源处理：通过 MCP 的 assets 端点拿图片/SVG；若返回的是 localhost 地址，应直接使用，不要另引图标包，也不要随便造占位图。
- Code Connect：
get_code_connect_map/add_code_connect_map用于把 Figma 节点映射到仓库里已有组件，减少“重新造一套 Button”。 - 链接驱动：远程 MCP 是 link-based——复制 frame/layer 链接交给客户端，客户端从 URL 里解析 node ID，并不会去“打开网页浏览”。
Skill 还强调一条实现原则：MCP 吐出来的 Tailwind/React 要翻译成当前项目的组件、色板、排版与路由约定；冲突时优先复用设计系统 token，再微调间距尺寸去贴视觉。
安装与启用¶
1. 安装 figma Skill¶
在 Codex 里，curated Skill 可用内置安装器按名称安装（官方 README 示例）：
$skill-installer figma
也可以用 skills.sh 一类的安装入口（需本机已装 Node）：
npx skills add https://github.com/openai/skills --skill figma
安装后若未自动出现，重启 Codex（或对应 Agent）再试。
其他支持 SKILL.md 的工具，可把整个 figma 目录（含 SKILL.md 与 references/）放到对应 Skills 目录，例如：
- Codex / 通用：
~/.agents/skills/figma/或仓库内.agents/skills/figma/ - Cursor：
~/.cursor/skills/figma/或项目内.cursor/skills/figma/ - Claude Code：
~/.claude/skills/figma/或项目内.claude/skills/figma/
具体扫描路径以各工具官方文档为准；目录里必须有带 name、description 的 SKILL.md。
2. 配置 Figma MCP（Skill 依赖的基础设施）¶
Skill 的配置说明写在 references/figma-mcp-config.md。在 Codex 的 ~/.codex/config.toml 中可注册远程 MCP：
[mcp_servers.figma]
url = "https://mcp.figma.com/mcp"
bearer_token_env_var = "FIGMA_OAUTH_TOKEN"
http_headers = { "X-Figma-Region" = "us-east-1" }
要点：
- 环境变量
FIGMA_OAUTH_TOKEN要在启动 Codex 的同一环境里可用。 X-Figma-Region需与你所在组织的 Figma 区域一致。- Streamable HTTP 上的 OAuth 需要开启 RMCP client：在
config.toml顶层设置[features].rmcp_client = true（旧版本可能是experimental_use_rmcp_client = true）。 - 改完配置和 token 后重启客户端；可让 Agent 列出 Figma 相关工具，确认服务可达。
Figma 官方也提供各客户端的推荐接法（远程 MCP 地址同样是 https://mcp.figma.com/mcp），例如：
- Cursor：聊天里执行
/add-plugin figma，或按官方 deep link 安装并完成 Connect/OAuth。 - Claude Code：
claude plugin install figma@claude-plugins-official，或claude mcp add --transport http figma https://mcp.figma.com/mcp。 - Codex：应用内安装 Figma 插件，或 CLI：
codex mcp add figma --url https://mcp.figma.com/mcp。
Skill 管流程，MCP 管连通；两边都就绪后，链接驱动的 design-to-code 才完整。
典型用法示例¶
官方要求的流程不要跳步：
get_design_context—— 先拿精确节点的结构化表示- 若过大/截断 →
get_metadata，再对必要子节点重取get_design_context get_screenshot—— 视觉参照- 下载所需 assets，再开始写代码
- 把默认 React + Tailwind 表示翻译成项目约定
- 对照 Figma（尤其是截图）做 1:1 观感与行为校验
提示词示例¶
把具体 frame/layer 链接贴进对话，例如：
请根据这个 Figma 链接实现界面：
https://www.figma.com/design/<fileKey>/<fileName>?node-id=1-2
先按 figma Skill 的流程取 design context 和 screenshot，
再映射到本仓库 src/components/ui 里的现有组件，样式用项目已有 token，不要直接照搬默认 Tailwind 输出。
换框架或组件库时，可按官方 prompt patterns 明确约束：
generate my Figma selection in Vue
generate my Figma selection using components from src/components/ui and style with Tailwind
查变量：
what color and spacing variables are used in my Figma selection?
查 Code Connect 映射：
show the code connect map for this selection
链接必须指向你真正要做的那个节点或变体；客户端只解析 URL 里的 node ID，指错图层就会实现错对象。
适用场景与注意事项¶
比较适合：
- 已有设计系统/组件库，希望 AI 按 Figma 节点落地，而不是从零生成一套 UI。
- 需要同时拿到结构数据与截图，做较严的视觉对齐。
- 团队已在用 Code Connect，想把 Figma 组件和仓库组件绑在一起。
- 排查「Agent 乱猜设计」时，用 Skill 把取数顺序固定下来。
使用时注意：
- 没有可用的 Figma MCP 连接与鉴权，Skill alone 无法拉设计。
- 默认 React + Tailwind 只是表示，硬贴进非 React 项目会水土；要在提示词和项目规则里写清目标栈。
- 大页面容易截断，记得走
get_metadata再拆节点。 - Token、区域头、RMCP client 配错是常见连不上原因；token 不要带多余引号。
- openai/skills 仓库 README 已提示仓库整体在向 Plugins 体系迁移；本地仍可通过
$skill-installer/ 目录拷贝使用当前 curated 内容，但后续分发入口可能变化，以 OpenAI 最新文档为准。
小结¶
figma Skill 把「设计到代码」从截图猜写，收成一套可重复的 MCP 取数与落地规则：先上下文、再截图、再资源、最后按项目约定实现。它出自 OpenAI curated Skills，和 Figma 官方 MCP（https://mcp.figma.com/mcp）配套使用。若你正在用 Codex、Cursor 或 Claude Code 做 UI 实现，装上 Skill、接好 MCP，再丢一条精确的 frame 链接，通常比只贴截图靠谱得多。
官方入口：
- Skill 目录：https://github.com/openai/skills/tree/main/skills/.curated/figma
- Figma MCP 远程安装说明：https://developers.figma.com/docs/figma-mcp-server/remote-server-installation/
- Figma MCP 工具与提示：https://developers.figma.com/docs/figma-mcp-server/tools-and-prompts/
