一、案例定位

說明 code model 如何把 design artifact 轉為前端實作。

二、學習目標

• 辨識 design-to-code workflow。
• 理解 generated code 仍需符合 style、framework 與 review standards。

三、案例情境

Pygma 開發基於 Codex 的應用，把 Figma designs 轉成不同 frontend frameworks，並配合 coding style 與 developer preferences。原書形容過去需數小時的任務可幾乎即時完成。

四、開始資料

五、Excel／AI 分析方法

可用 task log 記錄 baseline hours、AI generation time、review time、rework time，計算 NetTime=Generate+Review+Rework。

六、計算結果

原書沒有精確小時數，因此不自行計算真實節省比例。

七、結果分析與管理解讀

design-to-code 的價值不只速度，也包括標準化；但若產生的 code 需要大量重構，表面速度可能高估實際 ROI。

八、AI 提問詞

檢查以下由 design-to-code 工具產生的前端程式碼是否符合指定 framework、accessibility 與 coding conventions；不要改動未授權的設計需求。

九、思考／情境變動

**題目：**若生成只需 5 分鐘，但 review＋rework 共 90 分鐘，是否仍應把任務稱為「5 分鐘完成」？

**參考解答：**不應；end-to-end time 應為 95 分鐘。