作者 scoobynko · scoobynko/claude-code-design-skills
Figma-to-Next.js 的正確方式－元件重複使用優先，Figma 變體對應到 props，嚴格的 TypeScript，預設為 a11y。
scoobynko/claude-code-design-skills 是用於設計到程式碼工作流程的 Claude Code 技能套件。 旗艦「Figma 到程式碼」技能將 Figma 設計轉換為可用於生產的 React/Next.js 程式碼，並具有明確的規則：偏好重用現有元件、將 Figma 變體映射到類型化的 props、強制前端/後端邊界以及從一開始就連接 a11y。 與 Figma MCP 配對；與其專注於像素完美，不如專注於生成團隊將實際合併的程式碼。
何時使用： 您已經有一個現成的 Figma 框架，並且想要適合您的程式碼庫的 React/Next.js 程式碼。
結果： 一個真正的 Next.js 頁面合併在一個 PR 中——沒有審閱者重寫。
何時使用： 設計師在 Figma 中添加了一個新變體，程式碼需要跟上。
結果： 設計系統漂移關閉而不破壞消費者。
何時使用： 您需要一個透過螢幕閱讀器審查的對話框/選單/表單。
結果： 無需手持每個組件即可實現。
將 Figma 模式對應到 Magic UI 元件（如果存在）
驗證產生的程式碼通過 18 條規則審核
| 工具 | 輸入參數 | 何時呼叫 | 成本 |
|---|---|---|---|
| figma-to-code (SKILL) | Figma frame URL + repo conventions | 將設計轉換為適合您的程式碼庫的程式碼 | 0 |
代理程式編寫一個新按鈕而不是重複使用現有按鈕在提示中明確列出儲存庫的元件目錄。
Include 'check src/components/ first' in the request新 Figma 變體缺少道具轉換前詢問變體差異；更新組件而不是分叉。
Agent output includes a 'variants' section類型太鬆散（任何地方都可以）要求「沒有任何；」如果無法輸入變體，則會大聲失敗」。
Search the diff for ': any'| 替代方案 | 何時用它替代 | 權衡 |
|---|---|---|
| magic-ui-mcp | 您需要預先建置的動畫元件，而不是 Figma 轉換器 | 圖書館優先，而非設計優先 |
| claude-design-auditor-skill | 您想要評估設計質量，而不是產生程式碼 | 審核，而非生產 |
| hue-brand-skill | 你需要一種設計語言，而不是框架轉換 | 系統優先，而不是框架優先 |