# 策展 · X (Twitter) 🔥

> 作者：Figma (@figma) · 平台：X (Twitter) · 日期：2026-03-25

> 原始來源：https://x.com/figma/status/2036434766661296602

## 中文摘要

Figma 推出新功能，讓 AI Agent 能夠直接在設計畫布上操作。透過新的「use_figma」MCP 工具和「Skills」機制，Agent 可以存取設計系統脈絡，產生與團隊決策相符的設計。該功能自 2026 年 3 月 24 日起進入開放測試階段，測試期間免費，未來將轉為使用量計費的付費功能。

**設計脈絡的缺失問題**

過去 AI Agent 在設計時缺乏關鍵的設計決策脈絡，導致產出的設計常感覺陌生且通俗化。這些決策看似細微——從色彩調色盤、按鈕內距、排版到互動邏輯——卻是定義產品外觀和使用者體驗差異的核心因素。Figma 的解決方案讓 Agent 能夠存取設計系統，確保產出的資源與團隊精心建立的標準保持一致。

**核心工具與工作流程**

- **use_figma 工具**：讓 Claude Code、Codex 和其他 MCP 用戶端能夠直接在 Figma 檔案中寫入，生成和修改與設計系統相關聯的設計資源
- **generate_figma_design 工具**：將現場應用和網站的 HTML 翻譯成可編輯的 Figma 圖層（現有功能）
- 兩個工具互補運作：當設計與程式碼不同步時，generate_figma_design 將最新 UI 匯入 Figma；use_figma 則使用元件和變數編輯這些設計或建立新資源

**Skills 機制的角色**

Skills 是以 Markdown 檔案撰寫的指令集，定義 Agent 在 Figma 畫布上的工作方式。它們不僅規定執行工作流程的步驟、順序和約定，更重要的是為 Agent 提供專門知識，確保產出耐用且品牌一致的設計。Skills 填補了知識缺口，讓 Agent 瞭解如何在 Figma 中工作，並將團隊的判斷和意圖具體化為規則。

由於 AI 模型本質上是非確定性的，相同提示可能產生不同結果；Skills 透過編碼特定步驟和指南，使這種行為更可預測。

**現有技能示例**

已有九個範例技能供使用者探索，包括：
- /figma-generate-library：從程式庫生成新元件
- /figma-generate-design：使用現有元件和變數建立新設計
- /create-voice：從 UI 規格產生無障礙規範（VoiceOver、TalkBack、ARIA）
- /apply-design-system：將現有設計連接到系統元件
- /rad-spacing：應用階層式間距與變數
- 其他由 Uber、Warp、Firebender 等社群貢獻者開發的技能

**社群驅動與可達性**

任何人都可以撰寫 Skill，無需開發外掛或編寫程式。多個推出的 Skill 來自社群實踐者，他們正在實際建構這些工作流程。一個基礎的「/figma-use」Skill 提供所有 Agent 對 Figma 的共同理解，團隊可在此基礎上自訂。

**自我修復與迴圈優化**

Agent 生成螢幕後可以截圖並迭代不相符的部分。因為它操作的是實際的結構、元件、變數和自動排版，調整會與系統本身互動，而非僅編輯視覺輸出。這種自我修復機制提升了產出品質的可靠性。

**安全性與未來方向**

此功能原生於 Figma MCP 伺服器，受惠於 Figma 的安全性和可靠性，同時透過 Plugin API 開放 Code Connect、Figma Draw 和 FigJam 等介面的存取。未來 Figma 計畫擴展 Agent 功能，加強原生 AI 能力，簡化 Skills 的使用和分享，並逐步添加影像支援和自訂字型等功能。

該功能現已相容 Augment、Claude Code、Codex、Copilot CLI、Cursor、Factory、Firebender 和 Warp 等多個 MCP 用戶端。

## 標籤

Skills, MCP, 功能更新, Agent, 新產品