---
title: "Uber uSpec 教學：用 AI Agent 自動產出 Figma 元件規格，幾分鐘搞定整套文件"
slug: uber-uspec-figma-ai-agent-design-specs
url: https://rar.design/posts/uber-uspec-figma-ai-agent-design-specs
published_at: 2026-03-14
modified_at: 2026-03-14
author: "設計師 Riven"
category: "UI/UX 設計"
tags: ["figma"]
access: public_access
---

# Uber uSpec 教學：用 AI Agent 自動產出 Figma 元件規格，幾分鐘搞定整套文件

> Uber 設計系統團隊開源了 uSpec——透過 Figma Console MCP 讓 AI Agent 直接讀寫 Figma，自動產出 Anatomy、API、色彩標注、無障礙規格等六大文件頁面。

By **設計師 Riven** - 資深數位產品設計師｜知名線上課程講師 | 2026-03-14

📌 目錄01 設計系統的文件地獄02 uSpec 是什麼？03 兩步完成：從 Figma 連結到完整規格04 六大 Agent Skill 拆解05 底層架構：AI 判斷 × 程式化渲染06 企業級設計系統的六大優勢07 開源基礎：Figma Console MCP08 設計師能從這件事學到什麼09 重點整理10 延伸資源🔔 想掌握更多 AI × 設計工作流？加入 AI 設計覺醒訂閱方案 →設計系統的文件地獄如果你用過任何設計系統，你一定知道這個痛：元件做好了，但文件永遠追不上。一顆 Button 看起來簡單，但完整的元件規格（Component Spec）需要涵蓋：結構解剖、API 屬性、色彩 Token 對應、間距尺寸、螢幕閱讀器無障礙標注……寫完一個元件的規格文件，可能就花掉好幾天。現在想像一下 Uber 的情況——他們的 Base 設計系統有數百個元件，要同時支援 7 個實作平台（UIKit、SwiftUI、Android XML、Android Compose、Web React、Go、SDUI），每個元件規格都是其他平台工程師的唯一參考來源。▲ Uber 工程部落格原文封面：uSpec 自動化設計規格系統。手動寫規格不僅慢，而且不同作者寫出來的格式不一致，更要命的是——元件一改，文件就過時了。所以 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 輔助文件化的先決條件。▲ uSpec 自動產出的各類規格頁面，包含結構解剖、色彩標注、螢幕閱讀器規格等。兩步完成：從 Figma 連結到完整規格uSpec 把原本需要好幾天的規格撰寫流程，壓縮成兩個步驟：1貼上 Figma 連結 + 附加情境在 Cursor 中引用對應的 Agent Skill，貼上元件的 Figma 連結，然後補充 Agent 無法從設計稿推斷的資訊（例如特定的狀態邏輯、平台差異行為）。▲ 在 Cursor 中引用 Agent Skill，貼上 Figma 元件連結。2Agent 自動讀取 Figma 檔案並渲染規格AI Agent 透過 Figma Console MCP 連線到你的 Figma 檔案，萃取元件結構、Design Token、Variables、Styles，分析父子層級關係，然後直接在 Figma 中放置完成的規格頁面。沒有中間步驟、不需要手動排版。▲ Cursor IDE 畫面：Agent 透過 MCP 萃取元件數據，並直接在 Figma 中渲染完成的規格頁面。六大 Agent Skill 拆解uSpec 的核心是六個專門的 Agent Skill，每個 Skill 負責生成規格文件的一個區塊：Skill產出內容Anatomy在元件實例上放置編號標記，搭配屬性對照表API列出所有可配置屬性、值、預設值、配置範例Properties變體軸（Variant Axes）和布林開關，搭配實例預覽Color Annotation每個元素在各種狀態下的 Design Token 色彩對應Structure高度、Padding、Spacing，跨不同 Size 和 Density 變體Screen ReaderVoiceOver、TalkBack、ARIA 三大無障礙平台的完整標注，一次生成其中 Screen Reader Skill 可能是最有價值的一個。無障礙標注是設計系統文件裡最耗時的部分——三個平台各有數百個屬性，設計師需要反覆查文件才能選出正確的值。一個屬性選錯，就代表輔助技術使用者會遇到問題。uSpec 的 Agent 會預先載入各平台的無障礙屬性文件，從中選取正確的值，而不是靠猜測。▲ 一個 Prompt 就能同時產出 VoiceOver、TalkBack、ARIA 三個平台的無障礙規格。底層架構：AI 判斷 × 程式化渲染uSpec 最聰明的設計，是把「需要判斷力的工作」和「需要精確度的工作」分開處理：▲ AI 負責分析與判斷，程式化腳本負責精準渲染。🧠 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 MCPuSpec 的底層依賴一個關鍵的開源工具：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 SkillUber 不是讓 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 官方網站——完整流程文件與示範🔗 uSpec GitHub 開源專案🔗 Figma Console MCP GitHub——Southleft 開發的開源 MCP 橋接工具🔗 Uber Engineering Blog 原文🔗 Deep Dive into Uber's Design Systems — Figma 演講影片線上課程 🎨 設計工具Figma 全攻略｜RAR 設計攻略想深入學習 Figma 元件系統、Auto Layout、Variables？從基礎到進階，帶你掌握設計系統必備技能。了解課程內容 →訂閱制 ✨ AI × 設計趨勢AI 設計覺醒｜RAR 設計攻略訂閱方案AI 工具每週都在更新，我幫你過濾雜訊，只整理對設計師真正有用的 AI 應用。✦ AI 工具實測與工作流分享✦ 設計師角度的 Prompt 技巧✦ 每週精選 AI × 設計新知了解訂閱方案 →