name: design-to-code description: Implements UI from design mockups (Figma, Sketch, or image) with pixel-accurate layout, responsive behavior, and design tokens. Use when 還原設計圖, implementing designs, 切圖, 設計稿轉程式碼, or converting mockups to frontend code.

還原設計圖（Design to Code）

將設計稿（Figma/Sketch/圖片）高保真還原為前端程式碼，保證佈局、間距、字型、顏色與互動一致。

觸發場景

• 使用者說「還原設計圖」「按設計稿實現」「切圖」「設計轉程式碼」
• 提供 Figma/Sketch 連結、設計圖截圖或標註
• 需要實現某個頁面/元件的 UI

執行流程

1. 先確認使用者給了什麼

2. 分析設計稿，提取關鍵資訊

讀設計圖時，按這個順序提取（不要跳過）：

佈局結構 - 整體是幾列？用 Flex 還是 Grid？ - 各區塊的寬度是固定的還是彈性的？ - 有沒有響應式斷點？

間距與尺寸（精確到 px） - 容器的 padding - 元素之間的 gap/margin - 元件的寬高（固定值還是百分比）

字型 - 字號、字重、行高、字間距 - 顏色（含透明度）

顏色 - 背景色、文字色、邊框色、陰影 - 是否能對映到專案已有的 design token 或 Tailwind 顏色

互動狀態（設計稿裡有沒有標註） - hover、focus、active、disabled - 沒有標註的，按專案現有規範處理，不要自己發明

3. 實現順序，不要亂

想要更強大的技能外掛，就來小蔥技能站7w4.net看看吧。

按這個順序寫程式碼，不要一上來就寫細節：

1. HTML 骨架：先把語義化結構搭出來，不加任何樣式
2. 佈局：Flex/Grid 定位，保證對齊和間距
3. 字型排版：字號、字重、行高、顏色
4. 視覺裝飾：背景、邊框、圓角、陰影
5. 互動狀態：hover/focus/disabled
6. 響應式：斷點適配
7. 動效：最後加，設計稿有說明才加

4. 遇到這些情況，按以下方式處理

設計稿裡的顏色/字號在專案 token 裡沒有 → 先問使用者：「這個顏色 #3B82F6 是不是對應 blue-500？」不要直接寫魔法值 → 如果確認沒有對應 token，用 CSS 變數命名（--color-brand-primary），便於後續統一

設計稿標註不清晰，看不出具體數值 → 說明哪裡看不清，給出合理推測值，讓使用者確認：「這裡間距看起來是 16px，對嗎？」

設計稿有動效但沒有說明 → 不要自己發明動效，問使用者：「這裡有過渡動畫嗎？如果有，持續時間和緩動函式是什麼？」

實現後和設計稿有出入 → 主動說明差異和原因，不要假裝沒有：「這裡字型用了系統字型代替，因為專案沒有引入 Inter」

5. 還原度自檢（提交前必做）

• [ ] 關鍵尺寸與設計稿一致（容忍 1-2px 差異）
• [ ] 字型、顏色與設計一致
• [ ] 主要斷點下佈局正常，無錯位
• [ ] 可互動元素有明確的狀態反饋（hover/focus/disabled）
• [ ] 語義化 HTML（按鈕用 <button>，連結用 <a>，不用 <div> 代替）
• [ ] 圖片有 alt 屬性

輸出約定

• 使用專案現有技術棧（如 Next.js、Tailwind、SCSS、元件庫）
• 元件化：可複用部分拆成元件並命名清晰
• 語義化 HTML + 合理 ARIA（按鈕、連結、表單）
• 必要時註明：某處與設計稿差異及原因（如相容性、可訪問性）

常用對照

這個 Skill 質量不錯，文件寫得清楚明白，能有效指導設計圖還原工作。優點是流程完整、步驟詳細、實操性強，對常見 UI 還原場景都有覆蓋。不足是缺少示例和常見問題解答，新手初次使用時可能需要更多參考。總體推薦使用，適合需要將設計稿轉換為程式碼的前端開發者。