【設計師的 AI 秘笈】Figma 結合 Claude Code 的開掛雙向工作流

GenAI 時代來臨，設計師與 PM 該如何善用 AI 工具？本篇白話教學 Figma MCP 與 Claude Code 結合的雙向工作流，帶你用 5 個簡單步驟將設計稿 100% 轉化為前端程式碼。

為什麼要學 AI 輔助開發？告別「截圖通靈」時代

在軟體開發中，設計師（或 PM）與工程師之間總有一道無形的「溝通之牆」。

永遠有落差的「翻譯損耗」

你精心調好的 8px 圓角與精緻陰影，交給工程師實作後卻變成「差不多就好」。為了解決跑版，你們只能在通訊軟體上來回拉扯、標註尺寸。

後來，你試著把設計稿「截圖」丟給早期的 AI（如 ChatGPT）請它寫 Code。但這就像叫一個蒙眼的廚師看著美食照片做菜——AI 只能勉強猜測照片裡的間距與色碼，根本不知道你背後設定了哪些 Auto Layout 或深色模式，做出來的成品往往差強人意。這就是讓人崩潰的「截圖通靈」時代。

所見即所得的 Vibe Coding

現在，生成式 AI迎來了真正的進化！Figma MCP 結合 Claude Code 的出現，就像幫這位 AI 廚師摘下蒙眼布，並讓他直接走進你的廚房看食譜。

它打破了設計軟體與開發環境的壁壘，讓 AI 直接獲取精準的圖層數據與Variables。這種直覺、零損耗，想到什麼就能立刻產出真實產品的開發方式，就是現在最紅的 Vibe Coding。

什麼是 Claude Code 與 Figma MCP？

在進入教學前，還是先科普一下，Claude Code與 Figma MCP。我們可以用一個最直白的場景來講解：

1. Claude Code ＝ 住在你電腦裡的「頂級前端工程師」 過去的 AI（如網頁版 ChatGPT）就像螢幕另一端的客服，你只能傳截圖給他。但 Claude Code 是一個能直接運行在你電腦終端機（Terminal）裡的 AI 助手。只要你給他一個辦公室（強烈建議使用 Cursor 這個內建 AI 的程式碼編輯器），他就能直接幫你建立資料夾、撰寫程式碼，甚至自動安裝所需的套件。

2. Figma MCP ＝ 工程師專屬的「超能透視眼鏡」 MCP（Model Context Protocol）是近期打破工具壁壘的革命性技術。原本 AI 工程師看不到你的設計稿，但只要你在 Figma 中開啟 MCP 伺服器，就等於發給 AI 一副透視眼鏡。他能瞬間「看穿」畫布，精準讀取圖層架構、Auto Layout 數值與色彩變數（Variables），實現 100% 的像素級還原。

零基礎開發指南：5 步驟實現 Figma x Claude Code 雙向工作流

要建立高效的 AI 協作環境，需打通設計端與開發端的數據接口。請按照以下步驟完成設定與實作：

還想看更多嗎？完整內容只對註冊用戶開放喔！
點下方的免費 Subscribe，馬上加入我們～

第一步：環境建置與啟動 Claude Code

建議使用 Cursor 作為開發環境，因其內建終端機（Terminal）且對 AI 指令具備極佳的相容性。在 Cursor 終端機輸入 claude 即可啟動 Claude Code 助理。此步驟是為了在本地端建立一個具備執行能力的「AI 代理人」，負責後續所有的程式碼撰寫與文件管理。

完全沒建過終端機的看這邊>>

複製此文案，貼入終端機，可安裝claude:
npm install -g @anthropic-ai/claude-code

第二步：配置 Figma MCP 伺服器＆Plugin

1. 首先，在終端機中，安裝連接的mcp（一樣貼進去即可），讓他可以串figma。

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

2. 接著，安裝figma plugin，進入 Claude ，並輸入：

/plugin install figma@claude-plugin-desktop

3. 選擇安裝範圍：畫面上會出現選項，請用鍵盤上下鍵選擇：

Install for you (user scope) (選這個保證不會遇到 Mac 的系統權限阻擋問題)

重啟生效 (必做)：看到 ✓ Installed figma 後，輸入 /exit 離開，接著再次輸入 claude 重新啟動。

第三步：連結工具鏈與權限授權

1. 從這一步開始，我就是從cursor去進行claude code下載，並進行後續步驟。

2. 安裝後，去Figma開一個空白的file，複製連結。

3. 回到 Claude Code terminal中，輸入指令並貼上連結：
   你想請claude做的UI prompt: [在此貼上你剛才複製的 Figma 連結]。

例如：
幫我設計一個ios風格的蕃茄鐘：[figma 網址]

下完指令後，figma會問你一堆授權問題，若怕麻煩就永遠選擇：2. Yes, and don't ask again

第四步：程式碼生成實作 (Code→ Figma )

1. 接下來，就可以從web page上看到claude製作的內容。

2. 這時候還不能看到傳送figma的內容，需要輸入：

Now import the design directly inside [你剛剛複製的figma網址]

3. 這時候就可以在figma上看到剛剛claude幫你設計的設計稿了。

第五步：設計變更與程式碼同步 (Code ↔ Figma)

這是實現 Vibe Coding 閉環的核心：當設計師在畫布進行微調時，程式碼需同步更新。

1. 你可以在figma中進行修改，並一樣複製網址​回傳到claude：

輸入：
update changes:[figma連結]

2. 回到web page，你會發現claude幫你重改設計了

常見問題解答 (FAQ)

Q1：使用此工作流是否必須具備 Figma 付費帳號？

• 是。 由於此工作流高度依賴 Figma 的「開發模式 (Dev Mode)」來啟動 MCP 伺服器，因此必須具備 Professional 或更高版本的付費訂閱帳號。

Q2：完全沒有程式碼基礎（如 PM 或設計師）也能上手嗎？

• 可以。 此流程的核心在於使用自然語言指令驅動 AI 工程師執行任務。Claude Code 會自動處理檔案結構生成、環境變數配置與代碼撰寫。

Q3：此工作流支援哪些前端技術框架？

• 主流框架皆支援。 實測中與 React、Tailwind CSS 的配合度最高。AI 能根據現有的組件庫或 CSS 全域變數進行復用與還原，並確保代碼品質符合現代開發規範。

Q4：AI 生成的代碼能否處理深淺色模式或設計系統中的變數 (Variables)？

• 可以。 這是 Claude Code 優於其他工具的關鍵，它具備讀取 Figma Variables 的能力。透過 MCP 連動設計變數，AI 能理解設計系統中的 Token (如 blue-500)，而非僅讀取靜態色碼 (Raw Value)。

Q5：若 AI 無法識別 Figma 端的設計改動時該如何處理？

• 確認連線與範圍。 請檢查 Figma 桌面端是否保持開啟，且 Enable Dev Mode MCP Server 處於啟用狀態。若 AI 回饋未更新，建議重新複製特定圖層的連結（Link to selection），並在終端機明確指定修改位置。

擁抱 AI，人人都能成為開發者

這套 Figma ↔ Claude Code 的工作流，徹底改變了產品開發的門檻。

我想特別強調，我本身完全不懂程式碼，但我懂得如何與 AI 協作。 在這整個安裝與配置的過程中，只要遇到任何報錯或看不懂的術語，我第一時間就是詢問 Gemini；甚至在很多時候，利用 AI 的「快捷模式」，就幫助我快速跨越技術障礙。

所以，如果你在閱讀這份教學時覺得某些細節不夠仔細，請不要猶豫，直接去問 AI！這正是 Vibe Coding 的核心：工具是死的，但 AI 是活的。 只要你敢開口問，解決問題的速度一定會超乎你的想像。

從現在開始，把繁瑣的切圖與標註交給 AI，將你的精力專注在判斷、優化與創意上。讓我們一起進入這個「改圖即改 Code」的全新時代！

Source:

1. Figma Desktop server 
2. Claude Code Docs
3. 教學影片