Claude Code 配 Figma MCP 還原設計稿：插件或一條命令安裝，複製圖層連結，小塊小塊地讓它出代碼

本文根據 Figma 官方開發者文檔《Figma MCP Server》系列頁面和 Claude Code 官方《Connect Claude Code to tools via MCP》整理，資料核對於 2026-11-05。配圖為本站整理的示意圖，不是介面截圖。本站（bigolab.com）不是 Anthropic 或 Figma 官方網站。

適用於誰

• 手裏有 Figma 設計稿，想讓 Claude Code 寫出對應前端頁面的人；
• 前端開發者，想減少「看着設計稿一個個量尺寸」的重複勞動；
• 連上了 Figma 但生成的代碼總是不對、或者提示被限流的人。

結論先說

1. 官方推薦用遠程伺服器，地址是 https://mcp.figma.com/mcp，不需要裝 Figma 桌面應用，第一次連接時用你的 Figma 帳號登入授權。
2. Claude Code 有兩種裝法：官方首推安裝 Figma 插件（claude plugin install figma@claude-plugins-official），它同時帶上伺服器設定和 Figma 的技能；裝不了插件就手動執行 claude mcp add --transport http figma https://mcp.figma.com/mcp。
3. 取設計稿靠連結：在 Figma 裏右鍵圖層或畫框，選 Copy link to selection，把連結貼給 Claude。官方說 Claude 不會真的打開這個連結，而是從中取出伺服器需要的節點編號。
4. 一次只選小塊。 官方明確建議：生成卡片、頁頭、側邊欄這樣的小部分，別選很大的整屏畫框，否則可能變慢、出錯或返回不完整的結果。
5. 有調用次數限制，不同座位和套餐不一樣，官方還寫明 Figma 可能隨時改。

圖：本站根據 Figma 官方 MCP 文檔 整理的示意圖

第一步：安裝

方式一：安裝插件（官方首推）。 官方說插件包含 MCP 伺服器設定，也包含 Figma 的技能，對常見流程更可靠。在終端執行：

bash
claude plugin install figma@claude-plugins-official

官方提醒：如果命令失敗，可能是你的組織屏蔽了插件安裝，可以聯絡管理員，或改用手動添加。裝好後如果 Claude Code 正在運行，需要重啟，然後在 Claude Code 裏輸入 /plugin 打開插件管理器，切到 Installed 標籤，選中 figma 伺服器按回車開始登入，瀏覽器裏點 Allow access。回到 Claude Code 再看 /plugin，顯示已連接就可以了。

方式二：手動添加。 官方原話是：如果你不能裝插件，可以自己添加遠程伺服器，這樣不會裝上 Figma 的技能。

bash
claude mcp add --transport http figma https://mcp.figma.com/mcp

預設只加到當前項目；想所有項目都可用，加 --scope user。然後開新會話，輸入 /mcp，選 figma，選 Authenticate，瀏覽器裏點 Allow access，看到 Authentication successful. Connected to figma 即成功。MCP 的基礎概念見 /guides/claude-code-mcp-setup。

官方另有一個「桌面伺服器」方案，經 Figma 桌面應用運行，官方說它面向特定的組織和企業需求，大多數人用遠程伺服器即可。

第二步：複製連結，而不是在 Claude 裏點選

官方說，讀取設計的方式是基於連結：在 Figma Design 裏右鍵你要的畫框或圖層，選 Copy link to selection，貼到 Claude Code，讓它實現。注意官方的一條說明：「提示詞裏用當前選中內容」只在桌面伺服器上有效；遠程伺服器必須在提示詞裏附上畫框或圖層的連結。

預設情況下，官方說取設計上下文的主要工具 get_design_context 會輸出 React 加 Tailwind 的代碼，但你可以在提示詞裏要求別的框架，例如官方示例裏的「用 Vue 生成」「用純 HTML 和 CSS 生成」，也可以要求使用你項目裏已有的組件目錄。

提示詞 1：用項目已有組件還原一個小模組

text
請實現這個 Figma 設計：【粘貼圖層連結】
要求：
1）用我們項目的技術棧【React + Tailwind / Vue / 純 HTML 和 CSS】；
2）優先使用 src/components/ui 裏已有的組件，沒有合適的再新建，不要引入新的依賴；
3）顏色、字號、間距用項目現有的變量或 Tailwind 配置，不要寫死數值；
4）先在計劃模式給我方案：要新建的文件、複用的組件、不確定的地方。我批准後再寫代碼。

第三步：大設計稿怎麼辦

官方「Avoid selecting large, heavy frames」一頁的建議是：給較小的部分（卡片、頁頭、側欄）生成代碼；覺得卡住了就少選一點再試；真的要處理大設計稿，讓 Claude 先用 get_metadata 拿到一份輕量的結構提綱，再只對需要的部分取詳細上下文。官方的工具說明裏，get_metadata 返回的是圖層編號、名稱、類型、位置、大小的簡要 XML，適合特別大的設計。

提示詞 2：大頁面分塊還原

text
這是一個完整頁面的設計：【粘貼頁面畫框連結】。它很大，請不要一次生成。
請先獲取頁面的結構提綱，告訴我它由哪些區塊組成，按「頁頭、主要內容、側欄、頁腳」之類切分，並給出每個區塊對應的圖層名稱。
等我確認切分方式後，再逐個區塊獲取細節並實現，每完成一個區塊先停下來讓我看。

圖：本站根據官方文檔整理的示意圖

第四步：核對還原結果

還原出來「像不像」要靠對照。官方沒有給還原度的保證。本站的做法是：用瀏覽器打開生成的頁面，對着設計稿看。Claude Code 官方的 Chrome 集成文檔裏就把「用 Figma 設計稿做介面，再在瀏覽器裏打開驗證是否匹配」列為一個用法，設定方法見 /guides/claude-in-chrome，瀏覽器自動化也可以見 /guides/claude-code-playwright-mcp-browser-testing。

提示詞 3：對照檢查

text
請對比剛實現的頁面和 Figma 設計【粘貼連結】，逐項檢查：佈局、間距、字號、顏色、圓角、圖片資源、懸停和按下狀態。
把不一致的地方列成表：位置、設計稿裏是什麼、代碼裏是什麼、修改建議。
只列差異，先不要修改，等我確認哪些要改。

次數限制和費用

官方「Rate limits & access」頁的說法：使用頻率取決於你的套餐和座位類型，每分鐘的限制是在每天或每月限制之外疊加的。官方當天的表格裏，Starter 套餐以及 View、Collab 座位，每月最多 20 次；Professional、Education、Organization 套餐的 Full 或 Dev 座位，每天最多 200 次、每分鐘 10 到 15 次；Enterprise 的 Full 或 Dev 座位每天最多 600 次、每分鐘 20 次。官方寫明 Figma 可能隨時修改，請以官方頁面為準。限制只針對讀取 Figma 數據的工具，寫入類工具中有一部分不計入。

如果收到「沒有權限」的錯誤，官方建議檢查三件事：連結是不是 Figma Design、FigJam 或 Make 文件的連結；你登入的是不是對的帳號（可以讓 Claude 調用 whoami，它會顯示電郵、套餐和座位）；這個帳號是否屬於擁有該文件的套餐。

常見問題

Q：為什麼總是返回 React 代碼？

預設輸出就是 React 加 Tailwind，要別的框架得在提示詞裏明說，官方有專門一頁講這個問題。

Q：能把代碼反過來畫進 Figma 嗎？

官方介紹裏有「寫入畫布」功能，要求使用遠程伺服器，寫到草稿之外需要 Full 座位，官方說目前是 beta、將來會變成按用量收費。本文沒有展開，請以官方為準。

訂閱和額度

讀設計稿再生成代碼，會佔用不少上下文，分塊做更穩。Claude Code 訂閱選擇見 /chongzhi/claude-code，價格和額度以官方頁面當前顯示為準；Figma 的座位和套餐以 Figma 官方為準。

相關教學

• /guides/claude-code-mcp-setup：MCP 怎麼配
• /guides/claude-code-build-frontend-project-react-vue：從零搭前端項目
• /guides/claude-code-plugins-marketplace：插件與市場

參考資料

• Figma 開發者文檔：Figma MCP Server — https://developers.figma.com/docs/figma-mcp-server/
• Figma 開發者文檔：Set up the remote server — https://developers.figma.com/docs/figma-mcp-server/remote-server-installation/
• Figma 開發者文檔：Tools and prompts — https://developers.figma.com/docs/figma-mcp-server/tools-and-prompts/
• Figma 開發者文檔：Rate limits & access — https://developers.figma.com/docs/figma-mcp-server/rate-limits-access/
• Claude Code 文檔：Connect Claude Code to tools via MCP — https://code.claude.com/docs/en/mcp