name: design-to-code-local 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.

小蔥技能7w4.net持續更新中。

還原設計圖（Design to Code）

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

觸發場景

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

執行流程

1. 解析設計稿

• 標註：尺寸、間距（padding/margin/gap）、字號與行高、顏色（含透明度）、圓角、陰影、邊框
• 層級：元件劃分、巢狀關係、可複用模組
• 狀態：預設 / hover / focus / disabled / 載入 / 空態 / 錯誤
• 響應式：斷點、不同寬度下的佈局變化（柵格、換行、隱藏）

2. 設計 token 對齊

• 顏色、字號、間距儘量對映到專案已有 CSS 變數或 Tailwind 配置
• 若無現成 token，在實現時用變數命名（如 --color-primary），便於後續統一

3. 實現優先順序

1. 佈局：Flex/Grid 先搭骨架，保證對齊與間距
2. 字型排版：字型、字號、字重、行高、顏色
3. 視覺：背景、邊框、圓角、陰影
4. 互動狀態：hover/focus/disabled 等
5. 響應式：斷點與彈性佈局
6. 動效：若有設計說明的過渡/動畫再補

4. 還原度自檢

• [ ] 關鍵尺寸與設計稿一致（可容忍 1–2px 差異）
• [ ] 字型與顏色與設計一致
• [ ] 主要斷點下佈局合理、無錯位
• [ ] 可互動元素有明確狀態反饋

輸出約定

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

常用對照

這個 Skill 質量中等偏上，主要優點是指導流程完整、邏輯清晰，能幫助將設計圖轉化為程式碼。觸發場景描述明確，提供了實用的對照參考表。不足之處在於內容以文字說明為主，缺乏實際案例演示，可能導致使用時效果參差不齊。對於需要將 Figma 或設計圖還原為前端介面的開發者來說有一定幫助，但實際效果還需看 AI 的理解能力。