Figma 實測 Code Connect：AI 產 code 少花三成 token、快兩成的那塊拼圖
Figma 用 27 個測試量化了一件事：讓 AI agent 事先知道「這個元件在你的 codebase 裡本來就有」，它會快兩成、省三成 token、code 品質跳一級。而拉開差距的變因，起點在設計師這邊。
交過一次設計稿的人都記得那種感覺——你在 Figma 裡把一個 Segmented Control 排得整整齊齊，對方接手做出來，畫面長得像、點下去卻沒反應。選中狀態是寫死的，切 tab 什麼都不會發生。
現在把接手的人換成 AI coding agent，同一件事會被放大。agent 看著你的畫面，很認真地用一堆 <div> 加三百行 CSS，把那個元件「畫」了出來。看起來幾乎一樣，功能是零。
Figma 最近發了一篇文章，量化了一個一直沒人認真量過的問題：如果讓 agent 事先知道「這個元件在你的 codebase 裡本來就有」，它會表現得多好？答案是——快兩成、省三成 token、code 品質跳一級。
（2→3，滿分 4）
先把兩個名詞拆開。
Figma 的 MCP server，作用是把你在畫布上的設計決策，直接餵進工程師寫 code 的工具裡。agent 不用再靠截圖猜，可以讀到 frame 的結構、間距、顏色。
Code Connect 是再上面一層。它把 Figma 裡的元件，跟你 codebase 裡真正的那顆元件綁在一起。設定好之後，agent 拿到的不再只是一段長得像的 React，而是一段可以直接 import 的正版程式碼：告訴它該用哪個 component、該傳哪些 property。
Figma 當初做 Code Connect，是為了幫真人工程師省事。這次他們想量的是另一件事——換成 AI agent，同一套機制還有沒有用、有用多少。
沒有 Code Connect 的時候，agent 面對你的設計，大致會走三條岔路。
第一條，它從零捏一個元件出來。第二條，它從你的 design system 裡挑，但挑錯。第三條最隱性——它最後找對了，可是過程中翻遍 node_modules、grep 一堆 icon 名字，繞了一大圈，token 就這樣燒掉。
Figma 舉的例子很直白。一個 Segmented Control，沒接 Code Connect 時，agent 產出這種東西：
<div role="tablist" className="flex gap-1 rounded-md bg-gray-100">
<button className="bg-white shadow rounded">Design</button>
<button className="text-gray-600">Code</button>
</div>
看起來對，點下去沒反應，選中狀態是寫死的。接上 Code Connect 之後，同一個畫面，agent 收到的是一行：
<SegmentedControl value="design" options={["Design", "Code"]} />
一行，正版，可維護。差別在畫面底下那層——有沒有真的接回你的元件庫。
Figma 建了一套 eval，把同一批 design-to-code 任務跑兩遍：一遍沒 Code Connect，一遍有。27 個測試案例，每個都量 code 品質、token 用量、花的時間。
測的是兩套 React design system。一套是 Simple Design System（SDS），Figma 自己的範例，覆蓋率高，平均兩成的 MCP 回應是 Code Connect 片段。另一套 Figma Pattern Library（FPL）是內部真正在用的大型系統，覆蓋率比較零散，大概只有 6%。
跑出來的中位數：code 品質從 2 分升到 3 分（滿分 4）、token 少 29.5%、時間少 19.6%。模型端他們用了 Claude Sonnet 4.5 和 Claude Opus 4.7。
真正把數字拉開的變因只有一個——覆蓋率。你的設計稿裡有多少比例是 design system 元件、這些元件又有多少被 Code Connect 接上，兩個數字越高，agent 拿到的正版片段就越多，結果就越漂亮。覆蓋率低的時候，再好的機制也只能救到一小塊。
這篇文章掛在工程部落格下面，但真正該讀的是設計師。
因為決定 agent 表現的那個變因——覆蓋率——起點在設計端。你的 component 有沒有好好命名、結構乾不乾淨、該抽成元件的有沒有抽，直接決定了下游的 agent 認不認得出來。畫布上一團散圖層，再強的模型接手也只能重畫一次。
Figma 結尾那句話，對真人和對 agent 一樣成立：它們不會自動知道你們公司眼中的「好 code」長怎樣，你得把 context 明確地、有結構地交給它。設計師的工作，某種程度上就是在生產這份 context。
把這件事放大看，設計稿正在變成一種給機器讀的規格。
過去交稿，對面是一個會問問題、會自己補上下文的人；現在多了一個不會問、只會照著現有材料硬做的協作者。你留下多少結構，它就還你多少品質。
Code Connect 這類機制之所以值得，是它把「設計和程式碼是同一件事的兩面」這句老話，第一次變成了可以量出來的數字。
