Claude Code to Figma 教學：把 AI 生成的介面直接變成可編輯設計稿
2026年2月19日 下午 3:04
AI 設計
你有沒有遇過這種情況：用 AI 工具快速生成了一個介面原型，效果還不錯，但想要進一步調整、跟團隊討論，卻發現只能截圖分享？或者請同事把專案 clone 下來跑 dev server？這個痛點，Figma 和 Anthropic 聽到了。
2026 年 2 月 17 日，Figma 正式發布了 Claude Code to Figma 整合功能（也被稱為「Code to Canvas」）。這個功能讓你可以把用 Claude Code 建立的網頁介面，直接擷取到 Figma 畫布上，變成完全可編輯的設計檔——不是截圖，不是扁平圖片，而是有圖層、可以拆解的真實 Figma Frame。
這篇文章帶你完整了解這個整合怎麼用、為什麼重要，以及設計師可以怎麼把它融入日常工作流。
Claude Code to Figma 是什麼？
簡單來說，Claude Code to Figma 是一個讓「程式碼」和「設計畫布」之間可以無縫轉換的橋樑。
🔗 核心功能
把 Claude Code 生成的網頁介面（無論是 localhost、staging 還是 production），擷取並轉換成 Figma 可編輯的 Frame，讓團隊可以在畫布上協作、標註、比較方案。
這個功能建立在 Figma 的 MCP（Model Context Protocol）Server 之上。MCP 是一個開放標準，讓 AI 工具可以跟外部應用程式連接。你可以把它想成是 Claude Code 和 Figma 之間的「萬用轉接頭」。
Figma
@figma · Feb 17, 2026
Tired: code or canvas
Wired: code AND canvas
Introducing Claude Code to Figma 🎨
| 比較項目 | 傳統方式 | Claude Code to Figma |
|---|---|---|
| 分享介面 | 截圖 / 錄影 | 可編輯的 Figma Frame |
| 團隊協作 | 請同事跑 dev server | 直接在 Figma 標註討論 |
| 比較方案 | 來回切換分支 | 畫布上並排對比 |
| 修改探索 | 改 code 重新 build | 複製 Frame 直接調整 |
為什麼我們需要這個整合？
「太常發生的是，我們在創造的衝勁中迷失方向，第一版就變成了最終版。我們希望 Claude Code to Figma 能幫你跳出隧道視野，退一步看清全局。」
— Dylan Field，Figma CEO
過去幾年，「設計轉程式碼」的工具越來越成熟——從 Figma 匯出 CSS、用 Dev Mode 檢視設計規格、甚至用 AI 直接生成前端程式碼。但反過來呢？「程式碼轉設計」這條路一直是斷的。
這在 AI 時代變得特別痛。現在用 Claude Code、Cursor、v0 這類工具，幾分鐘就能生出一個可以跑的介面原型。速度很快，但問題是：
⚠️ 單人開發的侷限
在 terminal 或 IDE 裡，你是唯一能看到完整畫面的人。整個 context——分支、dev server、當下的 state——都只存在你的腦袋裡。這種「單人探索」的速度優勢，一旦需要團隊介入，反而變成瓶頸。
Claude Code to Figma 解決的就是這個問題：讓程式碼產出的介面，可以被帶到一個共享的、視覺化的空間，讓團隊一起看、一起改、一起決定方向。
運作原理解析
這個整合的技術核心是 Figma 的 MCP Server。運作流程大概是這樣：
用 Claude Code 建立介面
在 terminal 下 prompt，讓 Claude Code 幫你生成網頁。可以是 React、Vue、純 HTML，任何能在瀏覽器跑的東西。
擷取瀏覽器畫面
在 Claude Code 輸入「Send this to Figma」，MCP Server 會抓取瀏覽器當前的渲染狀態，不是截圖，而是解析成可編輯的圖層結構。
貼到 Figma 畫布
擷取的內容會複製到剪貼簿，直接貼到任何 Figma 檔案。它會變成一個完整的 Frame，可以拆解、複製、編輯。
團隊協作探索
設計師、PM、工程師都可以在同一個 Figma 檔案裡標註、比較方案、探索不同方向，不需要懂 code 也能參與。
特別值得一提的是，你可以在一個 session 裡擷取多個畫面（比如一整個 onboarding flow），保留順序和 context，讓完整的體驗流程一次呈現在畫布上。
安裝與設定教學
要使用 Claude Code to Figma，你需要先設定好 Figma MCP Server。以下是完整步驟：
📋 前置需求
• Figma 桌面版 App（不支援網頁版）
• Figma Dev 或 Full 授權
• Claude Code（透過 npm 安裝）
開啟 Figma 桌面版的 MCP Server
打開 Figma 桌面 App → Preferences → 找到「Dev Mode MCP Server」並開啟。它會在本地端 http://127.0.0.1:3845/sse 執行。
在 Claude Code 連接 MCP Server
在 terminal 執行以下指令：
開始使用
連接成功後，你可以在 Claude Code 裡輸入「Send this to Figma」來擷取當前瀏覽器畫面，或是選取 Figma 裡的 Frame 讓 Claude 參考。
四大應用場景
Figma 官方在發布文章中特別點出四個主要用途：
👁️ 一次看到整個系統
把介面帶到畫布上，就能並排比較、發現不一致的地方、看到整個 flow 的全貌。特別適合多步驟流程的設計審查。
🔀 探索變體不用重寫 code
複製 Frame、調整排版、測試結構變化，不需要改一行程式碼就能試想法。被否定的方案也可以留著，未來可能用得到。
⚡ 更早做出更好的決定
設計師、工程師、PM 可以對著同一個 artifact 討論。問題浮現得更早，決策也更有依據——趁還好改的時候改。
🎯 讓 UI 變成共識
擷取的畫面可以標註、加 comment、概念化不同選項。設計不再只是「產出」，而是「一起思考產品」的過程。
雙向工作流：不只是單向匯入
這個整合最厲害的地方在於它是雙向的。
以前 Figma 的 MCP Server 已經可以讓 Claude Code 讀取 Figma 設計，幫你生成符合設計稿的程式碼。現在加上 Claude Code to Figma，整個路徑就完整了：
→
→
設計 → 程式碼 → 回到設計，完整的雙向工作流
這意味著你可以：從 Figma 設計出發 → 用 Claude Code 生成程式碼 → 把結果匯回 Figma 比較調整 → 再根據調整後的設計生成新版 code。整個流程不再是線性的「交接」，而是持續迭代的循環。
設計師可以怎麼用？
「任何批評這功能的人，大概都沒經歷過在 Figma 中重建複雜網頁 app 的痛苦——調整版面、嘗試不同變體、移除卡片、更新文案、改變資訊密度⋯⋯」
— Tom Johnson，Vercel 產品設計師（via X）
即使你不寫 code，這個整合對設計師來說也很有價值：
→
審查 AI 產出：工程師用 Claude Code 快速做了個原型？請他擷取到 Figma，你可以直接標註「這裡間距不對」「這個按鈕顏色要換」。
→
設計探索：把多個版本的 code 產出都匯入 Figma，在畫布上並排比較，幫團隊做視覺化的 A/B 分析。
→
建立設計規範：擷取實際跑起來的介面，檢查是否符合 Design System，發現不一致的地方。
→
快速提案：如果你也開始學 Vibe Coding，可以用 Claude Code 快速產出概念，馬上匯入 Figma 做更細緻的調整。
⚠️ 使用限制
• 目前只支援 Figma 桌面版 App，網頁版無法使用
• 需要 Figma Dev 或 Full 授權
• 複雜的多畫面 flow 需要逐一擷取，再手動排列
📝 重點整理
→
Claude Code to Figma 是 Figma 和 Anthropic 的合作功能，2026/2/17 正式發布
→
可以把 Claude Code 建立的網頁介面擷取成可編輯的 Figma Frame，不是截圖
→
基於 Figma MCP Server 運作，實現「設計 ↔ 程式碼」的雙向工作流
→
讓團隊可以在共享畫布上協作，提早發現問題、做出更好的設計決策
→
需要 Figma 桌面版 App 和 Dev/Full 授權才能使用
延伸資源
🔗 官方連結
Figma 官方發布文章：From Claude Code to Figma
Dylan Field 的文章：The Future of Design Is Code and Canvas
🎓 想系統性學習設計？
AI 工具再強也只是工具，設計的核心永遠是你的品味與判斷力。如果你想系統性地提升 Figma 和 UI/UX 設計能力，歡迎看看 RAR 設計攻略的課程：
