05 · Figma 與截圖轉程式碼

速覽

產出	可交付的前端程式碼
用時	30 分鐘到幾小時，看複雜度
輸入	Figma 匯出、截圖，或者一個網頁
難點	說清楚你要哪一層——畫素還是結構

先想清楚你要什麼

「把這個設計稿變成程式碼」有三種完全不同的意思：

你要的	說法	交付形態
一個能看的還原	「畫素級還原這張圖」	一個靜態 HTML，用來驗證視覺
一個能接著開發的骨架	「按這個結構生成元件，用我們的 token」	元件程式碼，能接進現有專案
一個能用的原型	「做成能點的原型，狀態要全」	帶互動的原型

不說清楚，你大機率拿到第一種，然後發現沒法用。

提示詞

要畫素級還原

這是一張介面截圖。請做一個儘可能接近的 HTML 還原。

要求：
1. 佈局、間距、字號儘量對齊原圖。
2. 顏色用取色得到的實際值。
3. 圖片用佔位塊，標註原圖裡那個位置是什麼內容。
4. 單檔案，不引入框架。

不確定的地方標出來，不要憑感覺填。

要能接著開發的元件

這是我們的 Figma 匯出 / 介面截圖。

請生成可以接進現有專案的元件程式碼。

技術棧：[React / Vue / 原生，說清楚]
樣式方案：[Tailwind / CSS Modules / styled-components]
設計 token：[貼上你們的 token，或者指向 design-systems/your-brand/DESIGN.md]

要求：
1. 用 token，不要寫死顏色和間距的字面值。
2. 按結構拆成合理的元件，每個元件職責單一。
3. props 的命名跟我們現有的約定一致：[舉兩個例子]
4. 狀態要全：空、載入、錯誤、停用。
5. 可訪問性：語義化標籤、鍵盤可達、必要的 aria。
6. 不要引入新依賴，如果確實需要先問我。

先做元件結構和一個元件的完整實現，我確認之後再做其餘的。

最後那句很重要。一次生成十個元件，你要通讀十個才能發現約定不對。先看一個，成本低得多。

從一個網頁開始

把 [URL] 這個頁面的結構和視覺抽出來，重建成 [你的技術棧] 的實現。

只要結構和視覺，不要複製他們的文案。
文案位置用佔位符，標註每一處該放什麼型別的內容。

為什麼這麼寫

「用 token，不要寫死字面值」是能不能接進專案的分水嶺。 生成的程式碼裡如果全是 #3B82F6 和 padding: 14px，那它就是一次性的，改主題的時候要全部重來。

「props 命名跟現有約定一致，舉兩個例子」 比「遵循我們的程式碼規範」有用一百倍。給兩個真實的例子，它能推斷出規律。

「不要引入新依賴，需要的話先問」 防止它順手裝一個日期庫、一個圖示庫、一個動畫庫。

驗收清單

• [ ] 沒有寫死的顏色和間距字面值
• [ ] 元件拆分合理，不是一個巨型元件
• [ ] props 命名符合現有約定
• [ ] 狀態覆蓋完整
• [ ] 語義化標籤用對了（不是一堆 div）
• [ ] 鍵盤能操作
• [ ] 沒有偷偷引入新依賴
• [ ] 在專案裡真的能跑起來

最後一條要真的試，別隻看程式碼。

變體

只要視覺規範，不要程式碼

不用生成程式碼。從這張圖裡抽出實現規範：
- 每個元素的尺寸、間距、顏色、字號
- 層級結構
- 響應式斷點下應該怎麼變

輸出成一份工程能直接照著寫的文件。

有些團隊的前端更願意自己寫，給他們規範比給他們程式碼更受歡迎。

批次轉一組頁面

這是同一個產品的 5 張介面截圖。

第一步：先分析這 5 張圖裡重複出現的元件，列出元件清單和每個元件
的變體。不要開始寫程式碼。

第二步（我確認清單之後）：實現這些基礎元件。

第三步：用這些元件拼出 5 個頁面。

分三步做，得到的是一套元件而不是五份互不相干的程式碼。

常見問題

還原度不夠。

先確認你要的是哪一層。如果確實要畫素級，把原圖和結果並排，指出具體哪裡不對（「卡片間距應該是 24 不是 16」），比說「不夠像」有效。

生成的程式碼風格跟專案不一樣。

給它看一個現有的元件檔案當參照：「按這個檔案的風格寫，包括命名、註釋密度、匯出方式」。

Figma 匯出裡資訊太多，它抓不住重點。

明確說要哪一層：「只看 Frame 層級和 Auto Layout 結構，忽略具體的圖層命名」。

做出來能跑但效能差。

生成程式碼預設不考慮效能。有要求就直接說：「列表要虛擬滾動，圖片要懶載入，避免不必要的重渲染」。

相關

• 案例 04 · 抽品牌系統 — 先有 token 再轉程式碼
• 進階 · 匯出與交付 — 怎麼交給工程