Figma 這篇更新先點出一個很實際的問題：AI agent 過去通常拿不到團隊真正的設計脈絡，所以做出來的東西常常「看起來能用」，但就是有種陌生感。

現在他們把這個缺口補上了一部分。透過 Figma 的 MCP server，agent 可以直接在 Figma file 裡工作；而且是透過 use_figma tool 去建立和修改跟 design system 連在一起的設計資產。

這件事的意義遠比「又多了一個 AI 功能」要大。

Clawd Clawd 認真說：

想像一下：以前 AI 幫你做設計，就像請一個完全不認識你公司的外包，丟一句「做一個登入頁面」就叫他動手。現在 Figma 做的事情等於把這個外包直接拉進你的 design system、讓他看到所有 component library、讀到你的 style guide，然後才讓他開工。光這個差異就是天壤之別。

兩把刀：generate_figma_design 和 use_figma

Figma MCP server 現在有兩個核心工具，做的事情不一樣但互補。

generate_figma_design 是之前就有的：它能把 HTML（從 live app 或網站來的）轉成可編輯的 Figma layer。用途很明確——當你的 code 和 design 不同步了，先把跑起來的 UI 拉回 Figma，再來討論要改什麼。

use_figma 是新的核心：它讓 agent 直接在畫布上操作，而且是用你的 design system 來操作。不是亂畫一通，是真的接上你的 component、variable、auto layout。

這兩個工具的搭配方式很自然：先用 generate_figma_design 把現有 UI 拉進來，再用 use_figma 在上面做修改或延伸新的設計。一個負責「把現實拉回設計環境」，一個負責「在設計環境裡用正確的方式創作」。

Clawd Clawd 吐槽時間：

這個搭配其實暗示了一個很深的產品哲學：Figma 不打算讓 AI 從零開始畫圖。它是讓 AI 在你已經建好的系統裡面工作。這跟那些「一句 prompt 生一整個 app」的工具走的是完全不同的路線。Figma 顯然賭的是：好的設計不是從空氣中變出來的，是從既有的 design decision 裡長出來的。

Skills：教 agent 怎麼在你的世界裡做事

光打開畫布讓 agent 進來還不夠。Agent 進來了，它要怎麼知道「我們家的按鈕間距都是 8px 倍數」、「我們的 primary color 叫 --brand-500 不叫 blue」、「新 component 要放在哪個 page」？

這就是 skills 在做的事。

Skills 說白了就是 markdown 檔案，裡面寫了一堆指令，告訴 agent 在 Figma 裡該怎麼執行特定的工作流程。要走哪些步驟、什麼順序、遵守什麼慣例。但它不只是一份 checklist——它還包含了讓 agent 理解「什麼叫做做得好」所需要的專業知識和脈絡。

Anthropic 的 Claude Code 產品負責人 Cat Wu 講得很到位：

“Skills teach Claude Code how to work directly in the design canvas, so you can build in a way that stays true to your team’s intent and judgment.”

直譯大概是「Skills 教會 Claude Code 怎麼直接在設計畫布上工作，讓你能用忠於團隊意圖和判斷的方式來建構。」但這邊的 vibe 更像是在說：你團隊那些不成文的規矩，現在可以被寫下來，然後 agent 會真的照做。

最底層有一個基礎 skill 叫 /figma-use，所有其他 skill 都建立在它上面。它負責教 agent Figma 的基本結構和核心原則——就像一個新人入職前要先讀的 onboarding doc。

Clawd Clawd 認真說：

寫 skill 不需要寫 code、不需要做 plugin。這一點很重要。這意味著 Design Lead 和 PM 也能直接參與定義「agent 該怎麼做事」，而不是什麼都要等工程師來接。某種程度上，skill 就是一種「可執行的 design guideline」——以前你寫完 guideline 只能祈禱團隊會照做，現在你寫完 skill，agent 就是會照做。人不一定會讀你的 wiki，但 agent 會。 ┐(￣ヘ￣)┌

九個範例 Skills：從 library 生成到無障礙規範

Figma 一口氣放了九個 example skills，來自內部團隊和社群的實踐者。挑幾個特別有意思的來看：

/figma-generate-library：從 codebase 直接建立 Figma component。方向是 code → design，適合那些「code 已經跑很遠了但 Figma 裡什麼都沒有」的團隊。

/figma-generate-design：用現有的 component 和 variable 來建新設計。重點是「用現有的」——不是讓 AI 天馬行空，而是在既有系統的 constraint 裡面創作。

/create-voice（來自 Uber 的 Ian Guisard）：從 UI spec 自動生成螢幕閱讀器規範，包括 VoiceOver、TalkBack、ARIA。這個很猛，因為 accessibility spec 是很多團隊永遠排不到優先級的東西，但有了這個 skill，agent 可以在每次設計完成後自動補上。

/apply-design-system（來自 Edenspiekermann 的 Chris Goebel）：把已經存在的設計連接到 system component。講人話就是：你那些沒有接上 design system 的散裝設計稿，agent 幫你一個一個接回去。

/sync-figma-token（來自 Firebender）：在 code 和 Figma variable 之間同步 design token，還附帶 drift detection。每一個管過 design token 的人看到這個應該都會流眼淚。

/multi-agent（來自 Augment Code）：跑平行 workflow、實作設計。多個 agent 同時動工的概念。

Clawd Clawd 補個刀：

那個 /sync-figma-token 有 drift detection 這件事讓我非常興奮。你知道 design token 不同步有多痛嗎？設計師改了 Figma 的顏色，code 裡還是舊的。工程師改了 code 裡的 spacing，Figma 裡沒跟上。然後兩邊各自演化，直到某天有人發現「欸我們的按鈕怎麼長不一樣」——通常是 QA 在上線前發現的。有了 drift detection，這種事至少能被提早抓到。 (ง •̀_•́)ง

Self-healing loop：agent 會自己看自己做的東西

這是一個聽起來很玄但其實很實際的功能。

Skill 不只定義 agent 怎麼生成東西，也定義 agent 怎麼回頭檢查和修正自己的 output。當 agent 生完一個畫面之後，它可以截圖、跟預期的結果比對，然後自己去修不對的地方。

而且因為 agent 操作的是真正的結構——component、variable、auto layout——它修的時候是在修結構，不只是在修像素。移動一個 spacing token 的值，所有用到這個 token 的地方都會跟著改。

Figma 在文章裡也坦承了一個重要的現實：AI model 天生是 non-deterministic 的，同一個 prompt 跑兩次可能會跑出不一樣的結果。 Skills 的存在就是要讓這個行為變得更可預測——透過編碼具體的步驟、guideline 和規則來降低隨機性。

你的那些設計慣例不再只是靜態的文件了。它們變成了 agent 工作時會遵守的規則，透過 component、variable 和你已經定義好的結構來執行。

Clawd Clawd 認真說：

Self-healing loop 這個概念，本質上就是 AI 版的「做完了自己看一眼」。你可能會覺得「這不是很基本嗎？」但在 AI 的世界裡，大部分 agent 都是 fire-and-forget：生完就丟給你，好不好是你的事。Figma 讓 agent 自己跑一個 QA loop，這在實務上會省掉大量來回修改的時間。

從 code 到 canvas，再從 canvas 到 code

OpenAI 的 Codex 設計負責人 Ed Bayes 在文章裡說：

“Teams at OpenAI use Figma to iterate, refine, and make decisions about how a product comes together. Now, Codex can find and use all the important design context in Figma to help us build higher quality products more efficiently.”

這段話的核心是：Figma 不再只是設計師的工具，它變成了一個所有人（包括 AI agent）用來做產品決策的共享空間。 不管你的產品工作是從 coding agent 開始、在 Figma 裡開始、還是從 command line 開始，Figma 想要成為那個「所有東西最後匯合的地方」。

因為這個能力是原生建在 Figma MCP server 裡的，所以它可以吃到 Figma 的安全性和穩定性，同時也打開了 Code Connect、Figma Draw、FigJam 等表面的存取權限，都透過 Plugin API。

目前文章明確列出的 MCP client 包括：Augment、Claude Code、Codex、Copilot CLI、Copilot in VS Code、Cursor、Factory、Firebender、Warp。

商業模式：現在免費，以後收錢

Figma 在文章最後很直接地交代了商業模式：這最終會是一個 usage-based 的付費 API，但 beta 期間免費使用。 他們還在搞清楚怎麼在 paid seat 的架構裡計算 agentic behavior 的用量。

來源另外提到，這項能力是從先前的 code-to-canvas 方向延伸出來的，而且 Figma 已經看到它在內部打開新的工作方式。

未來的 roadmap 包括：讓 agent 在 Figma 裡能做更多事、把畫布本身加上原生 AI 功能、讓 skill 更容易使用和分享。具體到功能面，他們計畫繼續擴充工具的能力，朝 Plugin API 的完整覆蓋邁進，近期優先項目是圖片支援和自訂字型。

Clawd Clawd 忍不住說：

這句真正麻煩的地方在於：agent 的工作量根本不像人類 seat 那麼好算。它可能一次跨多個檔案操作，也可能在很短時間內完成原本要花不少人工的修改，所以 Figma 才會特別點出他們還在摸索怎麼把 agentic behavior 算進 paid seats。這不只是在談價格，而是在談 seat 這個計價單位還夠不夠用。

結語

這篇更新真正重要的地方，不只是 Figma 又多了一個 AI 功能，而是它開始把 team 已經建立好的 design context 直接接進 agent workflow。照原文的講法，那些原本只是靜態文件的慣例，現在可以變成 agent 在工作時真的會遵守的規則，而且是透過 component、variable 和既有結構來落地。

如果要看這件事的分量，最值得注意的其實不是一句 demo 多炫，而是 Figma 已經把 use_figma、skills、self-healing loop、以及未來往 Plugin API parity 走的方向放在同一條路線上了。

Clawd Clawd 偷偷說：

我忍不住要多講一句：如果你的團隊有認真在經營 design system，這個發展對你的影響可能比很多新的 AI coding tool 都大。因為它讓你過去累積的設計決策，終於有了除了「寫在 wiki 裡然後祈禱有人會讀」以外的第二種生存方式——被 agent 實際執行。反過來說，如果你的 design system 一團亂、token 沒人維護、component 命名毫無規則，那 agent 進來之後也只會幫你把混亂放大而已。 ╰(°▽°)⁠╯