將設計稿裁切為 HTML 是做什麼的？
忠實地將設計稿複製為 HTML；不要重新設計。正確的結果疊在設計稿上時，幾乎看不出差異。創意、「改進」和額外功能都算錯誤。
工作流程（按順序執行，不可跳過）
1. 接收設計稿
確認設計稿確實存在（檢查 /mnt/user-data/uploads 和對話記錄）；如果不存在，請使用者提供，切勿猜測。如果設計稿包含多個頁面/框架，請詢問要建置哪一個。
支援的輸入格式：PNG、SVG、透過 MCP 的 Figma（JPG 視為 PNG）。對於其他格式，請使用者匯出 PNG 或 SVG。每種輸入的讀取方式詳見 references/mockup-audit.md。對於 Figma，請先載入 figma:figma-design-to-code 技能，再呼叫 get_design_context。
2. 提出兩個問題
在審計和編碼之前，同時提出以下兩個問題。如果使用者已回答過，則跳過該問題。如果可用，請使用 ask_user_input_v0（一次呼叫，兩個問題）；否則以簡短的純文字提問。
- 輸出格式：單一檔案（HTML、CSS、JS 內嵌在一個
index.html中，加上assets/）或分離檔案（index.html、css/style.css、js/main.js，加上assets/） - CSS：原生 CSS、透過 CDN 載入 Bootstrap，或透過 CDN 載入 Tailwind
獲得答案後，閱讀 references/output-structure.md 以及對應的檔案：references/vanilla.md、references/bootstrap.md 或 references/tailwind.md。不要閱讀其他兩個檔案。
3. 編碼前進行審計
閱讀 references/mockup-audit.md 並產出審計規格（畫布、容器、網格、顏色、字型、間距、圓角、陰影、素材、可見的互動元素），每個數值標記為 測量值 或 估計值。僅在需要使用者決定時（無法辨識的字型、缺失的素材）顯示摘要給使用者；否則繼續進行。
4. 編寫程式碼
- 規則：
references/responsive-and-fidelity.md（像素完美與響應式）、references/code-standards.md（語意化 HTML、BEM）、references/anti-slop.md（禁止事項）。請在編寫程式碼時套用這些規則，而非事後。 - 在設計稿寬度下的數值必須與審計結果完全一致（以 px 為單位，不四捨五入到任何框架的刻度）。
- JS 僅用於設計稿中可見的互動元件，遵循
anti-slop.md中的內容測試（當設計稿包含所需內容時才建立行為，否則保持靜態並回報）；除了所選框架所需之外，不引入其他函式庫。
5. 驗證
依照 references/responsive-and-fidelity.md 中的驗證步驟進行驗證，然後執行 references/anti-slop.md 中的最終檢查。如果沙箱無法渲染，請直接說明。
6. 交付
儲存到 /mnt/user-data/outputs/ 並使用 present_files 分享。如果有多個檔案，請打包成一個 .zip，保持資料夾結構完整（以便素材路徑有效），同時也提供 index.html。
然後提供最多約 6 行的報告，僅包含使用者需要的資訊：無法識別的字型及其替代字型、估計值、佔位素材、無法重現或超出尺寸預算的圖示、因缺少內容而保持靜態或已建立的互動行為，以及因設計稿缺乏而推導出的平板/手機部分。不得包含功能建議、改進想法或自我讚美。
核心原則
- 忠實度至上。 即使設計稿看起來很弱，也要原樣複製。
- 不要添加 設計稿中沒有的任何內容；不要默默地猜測：所有會影響視覺的假設都要寫在報告中。
- 確切地複製文字，包括大小寫、標點符號和數字；標示出難以辨識的文字。