Uber uSpec 教學：用 AI Agent 自動產出 Figma 元件規格，幾分鐘搞定整套文件
2026年3月14日 下午 10:52
UI/UX 設計
🔔 想掌握更多 AI × 設計工作流？加入 AI 設計覺醒訂閱方案 →
設計系統的文件地獄
如果你用過任何設計系統，你一定知道這個痛：元件做好了，但文件永遠追不上。
一顆 Button 看起來簡單，但完整的元件規格（Component Spec）需要涵蓋：結構解剖、API 屬性、色彩 Token 對應、間距尺寸、螢幕閱讀器無障礙標注……寫完一個元件的規格文件，可能就花掉好幾天。
現在想像一下 Uber 的情況——他們的 Base 設計系統有數百個元件，要同時支援 7 個實作平台（UIKit、SwiftUI、Android XML、Android Compose、Web React、Go、SDUI），每個元件規格都是其他平台工程師的唯一參考來源。
手動寫規格不僅慢，而且不同作者寫出來的格式不一致，更要命的是——元件一改，文件就過時了。
所以 Uber 的設計系統團隊做了一件事：用 AI Agent 自動產出完整的元件規格頁面，而且只要幾分鐘。
uSpec 是什麼？
uSpec 是 Uber 開發的 Agentic System（代理系統），核心概念是：讓 AI Agent 透過 Figma Console MCP 直接讀取你的 Figma 檔案，自動分析元件結構、Design Token、變體屬性，然後直接在 Figma 裡面生成完整的規格頁面。
整個流程的技術堆疊長這樣：
🤖 AI Agent（Cursor IDE）
在 Cursor 編輯器中執行，載入特定的 Agent Skill 指令檔，負責分析元件數據、判斷語義、生成內容。
🔌 Figma Console MCP
開源的 MCP 橋接工具，讓 AI Agent 透過本地 WebSocket 連線直接讀寫 Figma Desktop，不需要經過外部 API。
🎨 Figma 輸出
Agent 直接在 Figma 檔案中匯入模板、填入數據、建立表格、放置標記——成品就是一頁完整的規格文件。
最關鍵的一點：整個流程在本地執行，沒有任何設計數據會離開你的電腦。對於像 Uber 這樣重視資安的企業來說，這是能採用 AI 輔助文件化的先決條件。
兩步完成：從 Figma 連結到完整規格
uSpec 把原本需要好幾天的規格撰寫流程，壓縮成兩個步驟：
貼上 Figma 連結 + 附加情境
在 Cursor 中引用對應的 Agent Skill，貼上元件的 Figma 連結，然後補充 Agent 無法從設計稿推斷的資訊（例如特定的狀態邏輯、平台差異行為）。
Agent 自動讀取 Figma 檔案並渲染規格
AI Agent 透過 Figma Console MCP 連線到你的 Figma 檔案，萃取元件結構、Design Token、Variables、Styles，分析父子層級關係，然後直接在 Figma 中放置完成的規格頁面。沒有中間步驟、不需要手動排版。
六大 Agent Skill 拆解
uSpec 的核心是六個專門的 Agent Skill，每個 Skill 負責生成規格文件的一個區塊：
| Skill | 產出內容 |
|---|---|
| Anatomy | 在元件實例上放置編號標記，搭配屬性對照表 |
| API | 列出所有可配置屬性、值、預設值、配置範例 |
| Properties | 變體軸（Variant Axes）和布林開關，搭配實例預覽 |
| Color Annotation | 每個元素在各種狀態下的 Design Token 色彩對應 |
| Structure | 高度、Padding、Spacing，跨不同 Size 和 Density 變體 |
| Screen Reader | VoiceOver、TalkBack、ARIA 三大無障礙平台的完整標注，一次生成 |
其中 Screen Reader Skill 可能是最有價值的一個。無障礙標注是設計系統文件裡最耗時的部分——三個平台各有數百個屬性，設計師需要反覆查文件才能選出正確的值。一個屬性選錯，就代表輔助技術使用者會遇到問題。uSpec 的 Agent 會預先載入各平台的無障礙屬性文件，從中選取正確的值，而不是靠猜測。
底層架構：AI 判斷 × 程式化渲染
uSpec 最聰明的設計，是把「需要判斷力的工作」和「需要精確度的工作」分開處理：
🧠 AI 判斷
• 分類無障礙語義
• 選擇正確的 Token 對應
• 決定規格結構
• 解讀元件組合模式
⚙️ 程式化渲染
• 匯入文件模板
• 填入文字欄位
• 建立表格與區塊
• 放置標記在元件上
這個分工很關鍵。純粹的 Plugin 可以從 Figma 萃取資料，但它無法「理解」資料的意義。截圖分析可以理解畫面，但無法讀取底層的 Token 名稱和變數結構。uSpec 兩者兼具——透過 MCP 取得結構化數據，再用 AI 做語義判斷，最後由程式化腳本精準渲染在 Figma 上。
企業級設計系統的六大優勢
安全性
100% 本地
資料不離開你的電腦
速度
< 2 分鐘
完整 Screen Reader 規格
一致性
結構化模板
不再依賴個別作者風格
跨平台
iOS + Android + Web
一次 Prompt 三平台規格
另外兩個同樣重要的優勢：準確性——Agent 直接從 Figma 讀取真實的 Token 名稱和 Variant 值，沒有轉錄錯誤的空間；以及可維護性——元件更新後，透過 MCP 用一個 Prompt 就能更新 Changelog，而不需要重新手寫整份文件。
用 Uber 自己的話來說：原本需要好幾個月才能寫完的數百個元件規格，現在幾天就能完成。
開源基礎：Figma Console MCP
uSpec 的底層依賴一個關鍵的開源工具：Figma Console MCP，由 Southleft 團隊開發並開源在 GitHub 上。
這個工具解決了一個長期存在的問題：怎麼讓 AI Agent 跟 Figma 對話？Figma Console MCP 透過本地 WebSocket 連線到 Figma Desktop，讓 Agent 能讀取元件樹、Variables、Styles，也能直接在 Figma 中建立和修改元素。
這也是整個 MCP（Model Context Protocol）生態正在發酵的一個縮影——工具與工具之間的壁壘正在被打破。Agent 不再只能透過截圖「看」Figma，而是能直接「進入」Figma 操作。
如果你有在關注 Figma MCP 的發展，你會發現這不只是 Uber 的故事。任何規模的設計系統團隊都面對同樣的文件化瓶頸，而開源基礎設施讓大家可以站在彼此的肩膀上。
📺 延伸觀看：Uber 設計系統深度解析
設計師能從這件事學到什麼
你可能會想：「我又不是 Uber，不需要管 7 個平台的規格。」這是事實，但 uSpec 背後的思維模式對所有設計師都有啟發：
💡 把重複性工作變成 Agent Skill
Uber 不是讓 AI 從零開始亂猜，而是先把多年的規格撰寫經驗封裝成結構化指令（Agent Skill），再讓 AI 照著做。你的設計工作中有哪些重複性流程，也可以用同樣的思路自動化？
🔌 MCP 是設計師的新超能力
MCP 打破了工具之間的壁壘。Figma Console MCP 讓 Agent 直接操作 Figma，這代表設計師的工作流程可以跟 AI 深度整合，而不只是「把截圖丟給 ChatGPT 看看」。
🎯 AI 判斷 + 程式精確 = 最佳組合
不是所有事都該交給 AI，也不是所有事都該用程式處理。uSpec 的做法是讓 AI 負責需要理解和判斷的部分，程式負責需要精確的部分。這個分工原則適用於所有 AI 輔助的設計工作流。
設計正在往 Code 的方向靠攏。看到設計師提交 Pull Request、直接在程式碼中修 Bug，已經不是什麼稀奇的事了。uSpec 代表的趨勢是：設計意圖和工程實作之間的隔閡正在縮小，而自動化就是那座橋。
重點整理
📝 重點整理
→
uSpec 是 Uber 開發的 Agentic System，能在幾分鐘內自動產出完整的 Figma 元件規格文件。
→
底層透過 Figma Console MCP（開源）讓 AI Agent 直接讀寫 Figma，全程本地執行，不外傳設計數據。
→
六大 Agent Skill 分別負責 Anatomy、API、Properties、Color、Structure、Screen Reader 六種規格頁面。
→
核心架構是 AI 負責判斷，程式負責精確渲染——兩者缺一不可。
→
從數百個元件要花好幾個月，到幾天就能搞定——這是設計系統文件化的典範轉移。
→
uSpec 和 Figma Console MCP 都已開源，任何團隊都能使用和擴展。
延伸資源
🔗 uSpec 官方網站——完整流程文件與示範
🔗 Figma Console MCP GitHub——Southleft 開發的開源 MCP 橋接工具
🔗 Deep Dive into Uber's Design Systems — Figma 演講影片
