Figma 開放 AI Agent 直接操作畫布：use_figma 工具與 Skills 技能系統完整介紹
2026年3月24日 下午 3:30
UI/UX 設計
如果你今天打開 Figma 的社群或 X（Twitter），應該會被一則消息洗版——Figma 正式開放 AI Agent 直接在畫布上操作設計。不是幫你寫 code，不是幫你產圖片，而是像一個真正的設計師一樣，在你的 Figma 檔案裡建立元件、套用 Design System、調整 Auto Layout。
這不是概念影片，而是今天就能用的 Open Beta。讓我們來看看，Figma 這次到底做了什麼。
一、發生了什麼事？
Figma 在今天（2026/3/24）發布了一項重大更新：透過全新的 use_figma MCP 工具，AI Agent 現在可以直接在 Figma 畫布上進行設計操作。同時推出「Skills」技能系統，讓你用 Markdown 檔案定義 Agent 的工作方式。
簡單來說，過去 AI 生成的設計總是像「外包品」——風格不統一、不認識你的 Design System。現在，AI Agent 可以讀取你的元件庫、變數、樣式，用你團隊建立好的規範來產出設計。這就是這次更新的核心。
二、use_figma 工具是什麼？
use_figma 是 Figma MCP Server 新增的一個工具，讓 Claude Code、OpenAI Codex 等 MCP 客戶端可以直接對 Figma 檔案進行「寫入」操作。
它能做到的事包括：
🧩 建立與修改元件
Agent 可以直接在 Figma 裡建立 Frame、Component、Variables，並套用 Auto Layout
🎨 連結 Design System
生成的元素會自動連結到你的 Design System，使用你定義好的 Token 和樣式
🔄 自我修正迴圈
Agent 會截圖檢查產出結果，自動迭代修正不符合預期的部分（Self-healing Loop）
📐 跨檔案操作
支援 Figma Design、FigJam，未來也會擴展到更多 Figma 功能
這跟之前的 MCP 不一樣——之前的 Figma MCP 主要是「讀取」（把 Figma 設計資訊抓到程式碼裡），現在則是真正的「雙向」操作。Agent 不只能看你的設計，還能動手改你的設計。
三、Skills 技能系統：教 AI 怎麼設計
光有工具還不夠，AI 必須知道「怎麼用」。這就是 Skills 技能系統存在的意義。
Skill 就是一份 Markdown 文件，內容定義了 Agent 在 Figma 裡的工作流程：要用哪些工具、按什麼順序、遵守哪些設計規範。聽起來很熟悉對吧？沒錯，這跟 Claude Code 的 CLAUDE.md 概念完全一致——用人類能讀的文件，去引導 AI 的行為。
💡 Skills 的運作方式
基礎 Skill：/use-figma
所有 Skill 的底層，教 Agent 理解 Figma 的結構、原則與基本操作方式
專業 Skill：各種工作流
建立元件庫、產生設計稿、同步 Design Token⋯⋯每個 Skill 專注一件事
自訂 Skill：你的團隊規範
任何人都能撰寫 Skill，不需要寫程式碼，用 Markdown 就夠了
Anthropic 的 Claude Code 產品負責人 Cat Wu 對此評論：Skills 讓 Claude Code 能直接在設計畫布上工作，確保產出忠於團隊的意圖與判斷。
四、兩個工具怎麼搭配？
Figma MCP Server 現在有兩個核心工具，它們是互補的：
| generate_figma_design | use_figma（新） | |
|---|---|---|
| 方向 | Code → Canvas | Agent → Canvas |
| 做什麼 | 把 HTML / 網頁 UI 轉成可編輯的 Figma 圖層 | 用你的 Design System 建立或修改設計 |
| 使用時機 | 設計與 code 不同步時，把最新 UI 拉回 Figma | 從頭建立設計、或基於現有 Design System 擴充 |
| 結構 | 把 rendered UI 轉成圖層 | 直接操作 Component、Variables、Auto Layout |
| 需要 Skills | 不需要 | 強烈建議搭配 |
兩者的典型搭配流程：用 generate_figma_design 把現有 code 拉進 Figma，然後用 use_figma 修改、擴充，並連結回 Design System。這樣就形成一個完整的 Code ↔ Canvas 雙向循環。
五、9 個官方範例 Skills
Figma 首波推出 9 個 Skills，部分由 Figma 官方開發，部分來自社群實踐者：
/figma-generate-library
從程式碼庫建立 Figma 元件
/figma-generate-design
使用現有元件和變數建立新設計
/create-voiceby Uber
從 UI 規格生成螢幕閱讀器規格（VoiceOver、TalkBack、ARIA）
/cc-figma-componentby One North
從結構化 JSON 合約生成 Figma 元件
/apply-design-systemby Edenspiekermann
將現有設計連結到 Design System 元件
/rad-spacingby Rad Collab
套用階層式間距（Hierarchical Spacing），含 Variables 及 fallback
/edit-figma-designby Warp
用 Warp 和 Oz 編排 Figma 設計工作流
/sync-figma-tokenby Firebender
在 Code 和 Figma Variables 之間同步 Design Token，含 drift detection
/multi-agentby Augment Code
平行執行多個工作流，並在 Augment 中實作設計
這些 Skills 都可以在 Figma Community Skills 頁面 找到。最重要的是，任何人都可以自己寫——只要你懂 Figma 的操作邏輯，就能用 Markdown 寫出一份 Skill。
六、哪些工具支援？
目前支援 use_figma 工具的 MCP 客戶端相當豐富：
以 Claude Code 為例，安裝方式非常簡單。直接用 Figma 官方 Plugin 安裝：
// 安裝 Figma Plugin（含 MCP + Skills）
claude plugin install figma@claude-plugins-official
// 或手動加入 MCP Server
claude mcp add --transport http figma https://mcp.figma.com/mcp
七、價格與開放時程
🎉 Beta 期間免費
Figma 明確表示這將會是按用量計費（usage-based）的付費功能，但目前 Open Beta 期間完全免費。Remote MCP Server 在所有 Seat 和方案上都可用。Figma 正在研究如何在付費座位中合理計算 agentic 行為的用量。
換句話說：趁免費趕快玩。這是很典型的 Figma 策略——先讓大家養成習慣，後續再收費。
八、設計師該怎麼看這件事？
我知道很多設計師第一反應是焦慮：AI 能直接在 Figma 上設計了，那還需要設計師嗎？
需要，而且比以前更需要。原因很簡單——
01
Skills 要人來寫
Agent 的品質取決於 Skills 的品質。誰最懂設計規範？設計師。Skills 就是設計師的新武器——你的專業知識現在可以「程式化」地被執行。
02
Design System 更重要了
過去，Design System 只服務於人類。現在它同時服務 AI。你的元件庫整理得越好，Agent 的產出品質就越高。
03
判斷力無法被取代
AI 模型的輸出是非確定性的（同樣的 Prompt，可以產生不同結果）。誰來決定哪個版本好？哪裡要修？這需要設計師的品味和判斷力。
這次更新的本質，是讓設計師從「手動執行者」升級為「系統設計者」。你不再需要手動拉每一個元件，而是定義規則，讓 Agent 幫你大量執行。你的角色從畫圖變成指揮。
📝 重點整理
→
Figma 推出 use_figma MCP 工具，AI Agent 可以直接在畫布上建立元件、套用 Design System
→
Skills 技能系統用 Markdown 定義工作流程，人人都能撰寫，不需要寫 code
→
與先前的 generate_figma_design 互補，形成完整的 Code ↔ Canvas 雙向循環
→
首波 9 個 Skills，來自 Figma 官方與 Uber、Edenspiekermann 等社群貢獻者
→
支援 Claude Code、Codex、Cursor 等 9 個 MCP 客戶端
→
Beta 期間免費，未來會是按用量計費的付費功能
→
設計師的角色從「手動執行」轉變為「規則制定」，Design System 和 Skills 成為核心競爭力
