Decagon 怎麼用 AI 把設計系統鋪滿整個產品

導入設計系統這件事，多數團隊都是等到「亂到受不了」才回頭補。Decagon 走的是反過來的路。

這家做客服 AI 的公司才成立三年，agent 已經橫跨語音、聊天、email，把排隊等客服的體驗直接拆掉，還擠進 CNBC Disruptor 50 名單。真正讓 Figma 想寫他們的是做法本身：一套叫 Deco 的設計系統，加上 Figma MCP 與 Figma Make，讓 design 和 code 幾乎變成同一件事。

對正在學 Figma 的人來說，這篇是難得的實戰樣本：一個 AI 原生團隊，怎麼把 component library 變成 coding agent 也吃得下的輸入。

AI 原生公司的節奏很快，但快也代表崩得快。coding agent 要的是精準的輸入；沒有設計系統，每個 component 都變成一次「憑感覺」的判斷，而憑感覺沒辦法規模化。Decagon 的做法，是把「craft 一致」這件事，變成一套所有人都吃得到的基礎建設。

Product Designer Jennifer Xu 加入 Decagon 時，公司沒有設計系統——只有一個持續長大的產品，和一支快到開始感覺到「缺了什麼」的團隊。平台上的不一致，會直接削弱他們要端給企業客戶的那份完成度；design 跟 dev 之間來回改稿，也一直在吃掉時間。

他們建 Deco 的方式是：設計師和工程師從一開始就手把手一起做。「我們從頭就能一起想清楚很多 edge case、還有 code 裡已經存在什麼，」Jennifer 說。這代表那些容易被拖延、之後回頭修又很貴的問題，在最前面就被攤開來：focus mode 會怎樣？每個 component 需要哪些 state——disabled、read-only、error、warning？要不要 placeholder？

成果是一套發佈到全公司的 Figma library，涵蓋數百個 component、style 和 variable，蓋掉整個平台跨多個團隊的絕大多數使用情境。根據 Figma 的 library analytics，它在 30 天內被記錄到數萬次 insert——這是「大家真的在用」最直接的訊號。設計系統最常見的死法，就是做完沒人用；insert 數字是少數能反駁這件事的證據。

「有了完整的 library，我們不會再為 style 或實作方式吵，」Jennifer 說。「工程師很清楚該用哪個 button、哪個 table。這也代表我們有一套共用的詞彙。身為設計師，我可以錨定在跟工程師幾乎一樣的 primitive 上，所以在做產品、想 flow 的時候，溝通會容易很多。」

coding agent 不會像工程師那樣「解讀」spec，它只吃你給它的東西。給的東西不一致，output 就跟著不一致。在 Decagon，這個 handoff 以前就是熟悉的來回：設計師匯出 spec、工程師解讀、review 抓錯、再重來一輪。

Figma MCP server 改了這件事。Decagon 的工程團隊把設計系統的 component 搬進 Storybook，再幫 coding agent 做了一個 skill，讓它在實作時能用到「精確的那個 component」；另一個 skill 則讓設計師能新增 component，讓 Figma 和 code 持續保持同步。「我們的 agent 都開了 Figma MCP，所以 spec、code、canvas 全在同一個 loop 裡，不用再兩邊彈來彈去，」Jennifer 說。

接上 Deco 之後，迭代速度整個拉起來。「有了 MCP，我只要把 Figma 連結複製貼進 coding agent，它不只會用『抓 design context』那個 skill，還會把它對應到我們的 design system component，」Jennifer 說。「它做出來的東西擬真度很高、很接近設計，不用再做一堆瑣碎的來回微調。」

Decagon 大約 70% 的產品 roadmap 直接來自客戶——這句話已經寫進他們的做事方式裡。「我們會跟客戶團隊做動手的 roadmap session，確認要出的功能真的對到他們的需求，」Decagon 產品總監 Bihan Jiang 說。而能在 Figma 裡直接秀 mockup 和可操作原型，正是這個流程的關鍵。

以前是收集需求、再端出一個成品；現在團隊可以做 10 個不同原型，拿去給 10 個不同客戶看。其中一位 PM 用 Make 來原型化新圖表、重新設計頁面，做法是丟一句「用這個頁面的風格做」再貼上一張 Figma 截圖，讓新工具和新圖表能放在整個平台的脈絡裡一起看。要改一張互動圖表時，PM 把原圖餵進 Make、描述想要的改動、直接交給工程師——省掉「翻譯給設計師 → 設計師畫 mock → 工程師開發」這一整段，開發時間直接砍下來。

Decagon 把 AI 同時放進兩個地方：他們賣的平台，還有他們蓋東西的方式。設計系統讓團隊在規模化時 craft 維持一致；MCP 讓 design 和 code 對齊，翻譯過程不掉東西；Figma Make 則把視覺思考交到每個「有想法值得測」的人手上。對正在轉職、正在學 Figma 的人來說，這篇的啟示很具體：先把 library 蓋扎實，component 的 state 想全、命名乾淨，AI 工具才有辦法接得上。速度來自結構，而結構是設計師能先做好的那一半。