研究 AI 切版的翻車紀錄
前陣子在開發新專案，有很多 Figma 設計稿要實作，我花了滿多時間在研究怎麼讓 AI 可以把視覺還原到程式碼。
老實說，到現在還是會歪掉。但這幾個禮拜下來，問題的輪廓有比較清楚了。
一開始以為是 AI 不夠強#
我在開發新需求的時候，都會把設計稿跟需求文件一次丟給 AI，透過 Figma mcp 先確認再開始實作。通常功能是正常的，只有畫面每次都切歪，邊距不對、擅自加圓角、icon 用錯、RWD 爆版。
我一開始以為是模型還不夠強，後來才發現 AI 看設計稿是在讀 Figma 的節點結構，不是真的「看到」畫面長怎樣。
Figma 畢竟是人去畫的。為了方便設計，常常有多餘的節點，UI Kit 包的 wrapper、調整用的 group…等等，AI 全部帶進程式碼，判斷不出哪些是要的、哪些不是。
我發現這些「雜訊」是會影響切版的視覺還原度。
第一次覺得有進展：換輸入格式 + 拆任務#
後來換了兩個做法，情況好一些。
第一個是換輸入格式。我想到 AI 「生成程式碼」的時候比較自由奔放，那如果是用現有的程式碼「重構」的話呢？我就先不用 Figma mcp 拿設計稿資料，以免雜訊太多，我改從 Figma 複製 JSX 程式碼，再請 AI 重構成我的專案的樣子。
第二個是拆任務。原本畫面跟功能一次做，改成「切版」、「功能」兩個階段。先只做 UI、不管互動，畫面確認之後再做 API 串接和狀態管理。每個階段 AI 只有一個目標，注意力沒被分散，每一步的輸出都比較可信。
這兩個改動加起來，小元件切版的品質明顯穩了。AI 把畫面切得整整齊齊的，元件也拆分得很漂亮。
我那時候以為找到方法了。
翻車：兩階段也救不了整頁切版#
拆兩階段的方法一放到整頁 RWD 就不行了。
我發現真正的原因在上游：進到前端實作之前，Figma 設計稿不同裝置的結構不統一、auto layout 沒設好，很容易讓畫面歪掉。
這不像一開始提到的雜訊，這次的瓶頸在設計稿本身夠不夠結構化。
我本以為拆成「切版」、「功能」兩個階段可以做到 90% 以上的視覺還原，花了很多力氣把兩階段工作流包成一整組 Skill。
實驗這個 Skill 到最後發現我在做白工，因為設計稿如果很簡單，不用 Skill 也能切得很好、設計稿一旦複雜（有雜訊、結構不統一），用不用 Skill 都會歪掉。
後來的方向：向他人取經#
我還研究了其他人怎麼做。
- 別人特製的流程，透過 playwright 去爬設計稿資料（但這段我沒有搞清楚他要爬什麼東西）
- Muki 的 figma-visual-reviewer，直接比對畫面差異最後產出報告（pixel-diff + HTML 報告那種）再針對報告去修正
- Figma plugin，可直接生成 react component，或是生成畫面描述的 json 再用 AI 生成程式碼
目前這些條列的內容都是憑記憶列出來的，之後還要補上正確的來源
從這些案例裡面我發現，大家遇到的事情都差不多，只是要從哪個部分切入，例如要給 AI 什麼指令才切得好？給 AI 什麼工具來比較實作畫面與設計稿？
還沒有答案，但是…#
老實說，研究 AI 切版到現在還沒有答案。整頁切版我還是沒辦法靠 AI 一次做完，每次都會有需要手動微調的地方，改到後來我還是必須花很多時間檢查畫面。
所以我只能先承認：目前只要是有切版的需求，我就算用 AI 還是不順。
但我想記錄下來，設計 AI 切版 workflow 可能需要這些基礎：
- 不要想著一次切完一整頁，最好拆小塊從 component > layout > page 這樣慢慢疊出來
- 用 AI 切版需要乾淨的來源（沒有雜訊、結構穩定的設計稿）
- 用 AI 驗收畫面最好是用實作的畫面跟設計稿截圖比對