前言¶
做前端或全棧時，經常會遇到同一件事：設計師在 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/
