Figma 聯手 Claude Code：直接把執行中程式碼抓取為可編輯設計稿

以前做產品，流程幾乎是鐵打的：設計師在 Figma 裡畫好畫素級圖層，交給前端敲程式碼還原，遇到對不齊的地方反覆扯皮。

到了 AI 程式設計時代，很多人習慣顛倒了。開啟 Claude Code，幾句提示詞下去，一個能點能跑的網頁原型就出來了。但麻煩也跟著來了：你想給團隊看，只能錄屏、發截圖，或者讓人家本地跑服務；想改改間距和排版，還得回終端裡繼續調提示詞。

Figma 宣佈支援把 Claude Code 生成的真實介面直接搬進畫布，變成完全可編輯的 Figma 圖層。

抓取網頁，塞回畫布

這套功能做的事情，簡單說就是逆向工程。

你在 Claude Code 裡調出來的介面，無論跑在 localhost 本地服務、測試環境 staging，還是已經上線的生產環境，都能直接捕獲。

截下來的不是一張死板的 PNG 圖片，而是保留了層級關係的 Figma frame。你可以像對待普通設計稿一樣，改文本、調間距、複製幾十個畫板去對比不同的按鈕樣式。

要是做的是多步驟的互動流程，它還支援連續捕獲多個螢幕，把整個前後邏輯完整保留在畫板上。

配合之前 Figma 推出的 Figma Make 原型功能，團隊現在既可以從 Figma 畫布向程式碼走，也可以從程式碼直接往畫布反哺。

連上 MCP，走完雙向閉環

單向抓取只是第一步，Figma 想要的是真正的迴路。

通過 Figma 的 MCP 伺服器，開發者可以在 Claude Code 等代理工具裡直接引用 Figma 畫板的連結。你在畫布上改好了顏色、重新排了模組，AI 代理讀取後能直接把修改同步到程式碼裡。

寫程式碼的人不用在終端裡猜視覺效果，設計師也不用從白紙開始畫那些已經被程式碼寫出來的元件。

這項能力的背後，有 2024 年被 Figma 收購的 Dynaboard 團隊的身影。前 Dynaboard 創始人 Alex Kern 和 Figma AI 設計總監 Gui 聯手推行了這個專案，試圖抹平設計與程式碼之間最後那道物理縫隙。

為什麼重要

我們認為，這是 Figma 面對 AI 編碼浪潮做出的一次非常聰明的防禦與反擊。

過去幾個月裡，以 Claude Code、Cursor 為代表的 AI 工具把前端原型的門檻壓得極低，很多全棧和獨立開發者已經習慣繞過設計軟體，直接用程式碼出活。長此以往，Figma 最核心的協作陣地很可能會被邊緣化。

把程式碼抓取回畫布，實際上承認了程式碼優先探索的合理性，同時又把最終決策和發散創意的場景死死拉回 Figma。

對使用者來說，如果你平時重度依賴 AI 敲前端，這個功能極其值得一試。以前你想改一個卡片的擺放順序，在終端裡調提示詞可能要試三次才能對準；現在直接拖進 Figma 挪兩下，再讓 MCP 同步回程式碼，效率高得多。

不過隱患也是明擺著的。真實前端程式碼裡的複雜元件狀態、動態資料和自適應佈局，轉換成 Figma 圖層後能不能完美保持設計規範，依然需要打個問號。但無論如何，設計和程式設計之間那堵十幾年的牆，正在被徹底拆掉。