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 是 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 輔助文件化的先決條件。
uSpec 把原本需要好幾天的規格撰寫流程，壓縮成兩個步驟：
貼上 Figma 連結 + 附加情境
在 Cursor 中引用對應的 Agent Skill，貼上元件的 Figma 連結，然後補充 Agent 無法從設計稿推斷的資訊（例如特定的狀態邏輯、平台差異行為）。
Agent 自動讀取 Figma 檔案並渲染規格
AI Agent 透過 Figma Console MCP 連線到你的 Figma 檔案，萃取元件結構、Design Token、Variables、Styles，分析父子層級關係，然後直接在 Figma 中放置完成的規格頁面。沒有中間步驟、不需要手動排版。
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 會預先載入各平台的無障礙屬性文件，從中選取正確的值，而不是靠猜測。
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 自己的話來說：原本需要好幾個月才能寫完的數百個元件規格，現在幾天就能完成。
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 演講影片
