用 AI Agent 透過 MCP 拉 Figma 雛形很燒 Token？試試 HTML to Design 吧！

前言
#

現在 AI 很快就能產生前端架構，前端雛形還有必要嗎？可能有些情況還真的不需要。不過前陣子，跟一位具備 UI 設計與前端工程師背景、後來轉職過來的同事聊到這件事，得到的 Feedback 是：

AI 確實前端產很快，但在更精細設計的樣式、後續的修改迭代，對於使用者體驗上複雜的頁面、細節的調整 Figma 拉起來就是比較順手，透過 Figma MCP 也能跟 Agent 溝通出具體的位置。

不過這點我也提出了想法：

有些 Agent IDE（如 Cursor）有內建 Browser，能直接把畫面上的物件當作 Context 給 AI，也可以做到很精細，不是嗎？

這點好像沒有說服到她 XD，所以還是因人而異吧～能快速產出高品質的前端，用得順手還是比較重要！

不過偶爾還是會用到 Figma 啦（在討論雛形的時候很方便，直接拉就可以），但還不是很熟就是～

前陣子學到一個很好用的 Figma 拉雛形工具：HTML to Design，效果我覺得比用 MCP 串 Agent 去畫還好用很多！也不燒 Token，每個物件在 Context 堆疊起來也是蠻可觀的！

想把 AI 產生的前端弄回雛形，進行後續迭代修正，會遇到什麼問題？
#

有用 Agent 在開發前端的，常常會遇到的問題是：

後續迭代修改常常改不到位，截圖貼給它好像可以，但要更精細、更抽象的修改又開始撞牆了。

這時候 Figma 就是很好的溝通橋樑~ 透過 MCP 讀取畫面時，Agent 會拿到類似下面的 JSON 資料。裡面包含節點名稱、文字內容、位置、尺寸、字型和顏色等資訊。

這些資訊可以幫助 Agent 更精準地找到需要修改的物件，回傳結果大概會像這樣：

json

{
  "id": "3355:67",
  "name": "Product title 3",
  "type": "TEXT",
  "characters": "收藏級角色公仔",
  "absoluteBoundingBox": {
    "x": 950,
    "y": 1078,
    "width": 126,
    "height": 22
  },
  "style": {
    "fontFamily": "Inter",
    "fontStyle": "Bold",
    "fontWeight": 700,
    "fontSize": 18,
    "textAlignHorizontal": "LEFT"
  }
}