前言¶
Design-to-Code（設計到代碼）是 AI 編程裏熱度很高的方向：設計師在 Figma 裏定稿，開發者在 IDE 裏對照截圖「猜」間距、字號和顏色，來回改幾輪是常態。Figma 官方 MCP 服務器已經能把設計結構、變量和截圖直接餵給 AI Agent，但「拿到數據之後怎麼寫代碼、怎麼對齊項目規範、怎麼驗收像素級還原」，仍然缺少一套穩定流程。
OpenAI 在 openai/skills 倉庫的 .curated 目錄裏維護了 figma-implement-design Skill，專門解決「從 Figma 節點到倉庫裏可交付 UI 代碼」這一環。它不負責在 Figma 畫布上改稿（那是 figma-use 的事），而是把 MCP 讀到的設計上下文，按步驟翻譯成符合你項目技術棧與 Design System 的實現，並強調 1:1 視覺還原。
本文基於 官方 SKILL.md 與 Figma MCP 文檔 整理，供在 Cursor、Codex CLI、Claude Code 等支持 Agent Skill 的工具中使用。
這是什麼¶
figma-implement-design 是 OpenAI 出品的 curated Agent Skill，核心定位是：將 Figma 設計稿翻譯爲生產級應用代碼，追求與稿面一致的視覺還原（官方表述爲 pixel-perfect / 1:1 visual fidelity）。
它與 Figma MCP 服務器配合工作——Skill 定義「怎麼做」，MCP 提供 get_design_context、get_screenshot 等工具讀取設計數據。Skill 還明確劃定了邊界，避免 Agent 誤用：
| 用戶需求 | 應切換到的 Skill |
|---|---|
| 在 Figma 畫布內創建/編輯/刪除節點 | figma-use |
| 從代碼或描述在 Figma 裏生成整頁界面 | figma-generate-design |
| 僅做 Code Connect 組件映射 | figma-code-connect-components |
編寫 CLAUDE.md / AGENTS.md 等設計系統規則 |
figma-create-design-system-rules |
figma-implement-design 只在你需要「把設計實現進代碼倉庫」時啓用。
核心功能與亮點¶
結構化七步工作流¶
官方要求按順序執行、不可跳步，保證每次實現路徑一致：
- 獲取 Node ID：從 Figma URL 解析
fileKey與node-id；若使用figma-desktopMCP，也可直接讀取桌面端當前選中節點（遠程 MCP 必須提供鏈接）。 - 拉取設計上下文：調用
get_design_context(fileKey, nodeId)，獲取 Auto Layout、 typography、顏色/Design Token、組件變體、間距等結構化數據。 - 截取視覺參考：調用
get_screenshot，作爲後續像素級對比的「標準答案」。 - 下載資源：圖標、SVG、圖片等從 Figma MCP 內置資源端點獲取；若返回
localhost源地址，應直接使用，不要另裝圖標庫或寫佔位圖。 - 映射到項目規範：MCP 默認輸出常帶 React + Tailwind 風格，Skill 要求將其改寫爲你項目的框架、Design System 與現有組件，而非原樣粘貼。
- 追求 1:1 視覺還原：優先稿面 fidelity；有 Design Token 時用 Token，與項目 Token 衝突時以項目 Token 爲主，微調間距/尺寸保視覺一致，並滿足 WCAG 無障礙要求。
- 對照 Figma 驗收：佈局、字體、顏色、交互態、響應式、資源加載、無障礙逐項覈對。
複雜稿面的拆分策略¶
單節點設計上下文過大或被截斷時，先 get_metadata 看清節點樹，再對子節點分別 get_design_context，避免一次拉取失敗或信息不全。
設計系統優先¶
Skill 強調：複用現有 Button、Input 等組件，擴展變體而不是重複造輪子；Figma 顏色映射到項目 Token（如 primary-500）；新組件放入項目約定的 Design System 目錄，並補充 TypeScript 類型與必要文檔。
安裝與啓用¶
使用該 Skill 的前置條件是 Figma MCP 服務器已連接且可用。Figma 官方推薦 Remote MCP（https://mcp.figma.com/mcp），功能最全；Desktop MCP（http://127.0.0.1:3845/mcp）適用於部分組織/企業場景，且支持「選中節點即取上下文」。
1. 配置 Figma MCP（必做）¶
Cursor（推薦）：在 Agent 對話中執行 Figma 官方插件安裝命令，插件會一併配置 MCP 與相關 Skill：
/add-plugin figma
安裝後在 Cursor Settings → Tools & MCP 中完成 Figma 認證連接。Figma 文檔說明該插件包含「實現設計稿、Code Connect、設計系統規則」等 Agent Skills。
也可手動添加 Remote MCP，或通過 Deep Link 一鍵安裝，詳見 Figma Remote Server 安裝指南。
Claude Code：官方推薦 claude plugin install figma@claude-plugins-official，同樣 bundled MCP 與 Skills。
Codex CLI：在 Codex 內使用 curated Skill 安裝器（.system 技能，最新版 Codex 自動可用）：
$skill-installer figma-implement-design
安裝後需重啓 Codex 以加載新 Skill。也可指定 GitHub 目錄 URL 安裝：
$skill-installer install https://github.com/openai/skills/tree/main/skills/.curated/figma-implement-design
說明：
openai/skills倉庫 README 標註已 deprecated，Skill 示例仍託管於該倉庫；Codex 新插件體系見 OpenAI Plugins 倉庫 與 Build plugins 文檔。本文安裝說明以各工具當前官方文檔爲準。
2. 安裝 figma-implement-design Skill¶
若你的 MCP 客戶端未通過 Figma 插件自動帶入該 Skill，可將官方目錄複製到項目 Skill 路徑，例如 Cursor：
# 在項目根目錄執行，按需調整路徑
git clone --depth 1 https://github.com/openai/skills.git /tmp/openai-skills
cp -r /tmp/openai-skills/skills/.curated/figma-implement-design .cursor/skills/
複製後重啓 IDE / Agent，使 Skill 被索引。Skill 觸發條件（寫在 frontmatter 的 description 裏）包括：用戶提供 Figma URL、提到「implement design / generate code / implement component」、或要求按 Figma 規格寫 UI 等。
3. 使用前準備¶
- 準備一個可訪問的 Figma 設計鏈接，格式示例：
https://figma.com/design/:fileKey/:fileName?node-id=42-15
其中 :fileKey 爲 /design/ 後的文件鍵，42-15 爲 node-id 參數（具體 frame 或組件）。
- 項目最好已有 Design System 或組件庫；沒有也能用，但 Skill 會提示優先建立可複用組件。
典型用法示例¶
示例 1：實現一個 Button 組件¶
用戶對 Agent 說：
Implement this Figma button component: https://figma.com/design/kL9xQn2VwM8pYrTb4ZcHjF/DesignSystem?node-id=42-15
Agent 在 Skill 約束下應依次：
- 解析
fileKey=kL9xQn2VwM8pYrTb4ZcHjF，nodeId=42-15 get_design_context(fileKey="kL9xQn2VwM8pYrTb4ZcHjF", nodeId="42-15")get_screenshot(...)留作對照- 從 MCP 資源端點下載按鈕圖標等資源
- 檢查項目是否已有 Button 組件——有則擴展變體，無則按項目規範新建
- 將 Figma 色值映射爲項目 Token（如
primary-500、primary-hover） - 對照截圖檢查 padding、圓角、字重
示例 2：搭建 Dashboard 整頁佈局¶
用戶提供 Dashboard frame 鏈接後，Skill 建議先 get_metadata 瞭解 header、sidebar、卡片等子結構，再分節點 get_design_context，最後全頁 get_screenshot 做整體驗收。複雜頁面切忌跳過 metadata 一步硬拉整樹。
示例 3：僅選中節點（Desktop MCP）¶
使用 figma-desktop 且用戶未給 URL 時，在 Figma 桌面應用裏選中目標節點即可；MCP 自動使用當前打開文件與選區。注意：此能力僅 Desktop MCP 支持，Remote MCP 必須提供 frame/layer 鏈接。
適用場景與注意事項¶
適合誰用
- 前端 / 全棧開發者，需要把 Figma 組件或頁面快速落地到現有代碼庫
- 設計系統維護者，希望 AI 輸出對齊 Token 與既有組件，而不是堆 inline style
- 產品團隊在新功能迭代中，設計稿已定、希望縮短「稿到 PR」週期
使用限制
- 必須有可用的 Figma MCP；Skill 本身不替代 MCP 連接與鑑權
- 交付物是用戶倉庫裏的代碼，不是 Figma 文件編輯
- MCP 返回的 React+Tailwind 只是中間表示，最終代碼風格以項目爲準
- 稿面過大時要拆分節點，否則上下文截斷會導致實現偏差
常見問題（官方 FAQ 摘要）
| 現象 | 處理思路 |
|---|---|
| 設計上下文被截斷 | get_metadata 後按子節點分批 get_design_context |
| 實現與稿面不一致 | 用 Step 3 截圖逐項對比 spacing / color / typography |
| 資源加載失敗 | 確認 MCP assets 端點可訪問，localhost URL 勿改 |
| Token 與 Figma 數值不一致 | 以項目 Token 爲準，微調尺寸保視覺接近 |
驗收清單（官方 Step 7）包括：佈局、字體、顏色、hover/active/disabled 等交互態、響應式約束、資源、無障礙——建議在 Agent 標記完成前人工過一遍。
小結¶
figma-implement-design 把「Figma MCP 能讀到什麼」和「代碼倉庫該怎麼寫」之間的空白填上了：固定七步流程、強調截圖對照與 Design System 複用，並與其他 Figma 系列 Skill 分工清晰。Design-to-Code 賽道里，OpenAI 官方 curated 方案加上 Figma 官方 MCP，代表性很強，值得納入前端 Agent 工作流。
官方 Skill 目錄：https://github.com/openai/skills/tree/main/skills/.curated/figma-implement-design
Figma MCP 文檔：https://developers.figma.com/docs/figma-mcp-server/
