/ 目錄 / 演練場 / Claude Code Design Skills
● 社群 scoobynko ⚡ 即開即用

Claude Code Design Skills

作者 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 配對;與其專注於像素完美,不如專注於生成團隊將實際合併的程式碼。

為什麼要用

核心特性

即時演示

實際使用效果

claude-code-design-skills.replay ▶ 就緒
0/0

安裝

選擇你的客戶端

~/Library/Application Support/Claude/claude_desktop_config.json  · Windows: %APPDATA%\Claude\claude_desktop_config.json
{
  "mcpServers": {
    "claude-code-design-skills": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/scoobynko/claude-code-design-skills",
        "~/.claude-code/skills/claude-code-design-skills"
      ],
      "_inferred": false
    }
  }
}

開啟 Claude Desktop → Settings → Developer → Edit Config。儲存後重啟應用。

~/.cursor/mcp.json · .cursor/mcp.json
{
  "mcpServers": {
    "claude-code-design-skills": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/scoobynko/claude-code-design-skills",
        "~/.claude-code/skills/claude-code-design-skills"
      ],
      "_inferred": false
    }
  }
}

Cursor 使用與 Claude Desktop 相同的 mcpServers 格式。專案級設定優先於全域。

VS Code → Cline → MCP Servers → Edit
{
  "mcpServers": {
    "claude-code-design-skills": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/scoobynko/claude-code-design-skills",
        "~/.claude-code/skills/claude-code-design-skills"
      ],
      "_inferred": false
    }
  }
}

點擊 Cline 側欄中的 MCP Servers 圖示,然後選 "Edit Configuration"。

~/.codeium/windsurf/mcp_config.json
{
  "mcpServers": {
    "claude-code-design-skills": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/scoobynko/claude-code-design-skills",
        "~/.claude-code/skills/claude-code-design-skills"
      ],
      "_inferred": false
    }
  }
}

格式與 Claude Desktop 相同。重啟 Windsurf 生效。

~/.continue/config.json
{
  "mcpServers": [
    {
      "name": "claude-code-design-skills",
      "command": "git",
      "args": [
        "clone",
        "https://github.com/scoobynko/claude-code-design-skills",
        "~/.claude-code/skills/claude-code-design-skills"
      ]
    }
  ]
}

Continue 使用伺服器物件陣列,而非映射。

~/.config/zed/settings.json
{
  "context_servers": {
    "claude-code-design-skills": {
      "command": {
        "path": "git",
        "args": [
          "clone",
          "https://github.com/scoobynko/claude-code-design-skills",
          "~/.claude-code/skills/claude-code-design-skills"
        ]
      }
    }
  }
}

加入 context_servers。Zed 儲存後熱重載。

claude mcp add claude-code-design-skills -- git clone https://github.com/scoobynko/claude-code-design-skills ~/.claude-code/skills/claude-code-design-skills

一行命令搞定。用 claude mcp list 驗證,claude mcp remove 移除。

使用場景

實戰用法: Claude Code Design Skills

從 Figma 框架建立一個新頁面

👤 前端工程師將設計轉換為程式碼 ⏱ ~45 min intermediate

何時使用: 您已經有一個現成的 Figma 框架,並且想要適合您的程式碼庫的 React/Next.js 程式碼。

前置條件
  • Figma MCP 設定 — 安裝 Figma MCP 並提供 PAT
  • 技能已安裝 — git 克隆到 ~/.claude-code/skills/
步驟
  1. 指向框架
    將此 Figma 框架轉換為 Next.js 頁面:<figma URL>。 重複使用 src/components/ 中的元件。✓ 已複製
    → 代理程式在編寫新元件之前先清點現有元件
  2. 道具圖變體
    將Figma 變體對應到類型化的道具(大小、意圖、禁用)。✓ 已複製
    → 產生的 TS 類型;沒有任何
  3. 模擬數據
    使用模擬資料;不要發明 API 呼叫。 將後端排除在外。✓ 已複製
    → 使用模擬檔案清理無獲取元件

結果: 一個真正的 Next.js 頁面合併在一個 PR 中——沒有審閱者重寫。

注意事項
  • 在現有元件庫旁邊產生一個平行元件庫 — 從「列出現有元件」開始,以便代理程式重複使用現有元件
搭配使用: figma · magic-ui-mcp

將組件的 props 同步到 Figma 變體

👤 維護設計系統的團隊 ⏱ ~25 min intermediate

何時使用: 設計師在 Figma 中添加了一個新變體,程式碼需要跟上。

步驟
  1. Figma 與組件的差異
    將 Button (Figma) 變體與 src/components/Button.tsx 屬性進行比較。✓ 已複製
    → 清除增量清單:新變體、重新命名變體等。
  2. 應用差異
    更新 Button.tsx 以包含新的“ghost”變體;保留 API。✓ 已複製
    → 預設情況下鍵入的更新不會中斷呼叫者

結果: 設計系統漂移關閉而不破壞消費者。

使用正確的語意和焦點管理轉換 Figma 流程

👤 具有無障礙意識的前端工程師 ⏱ ~45 min intermediate

何時使用: 您需要一個透過螢幕閱讀器審查的對話框/選單/表單。

步驟
  1. 求程式碼中的流程
    從 Figma 建立結帳對話框 - 尊重焦點陷阱、Escape、減少運動。✓ 已複製
    → 適當的角色、標籤、焦點管理、Esc 關閉
  2. 運行審核員
    對結果運行 claude-design-auditor 技能。✓ 已複製
    → A11y分數≥85

結果: 無需手持每個組件即可實現。

組合

與其他 MCP 搭配,撬動十倍槓桿

claude-code-design-skills + figma

透過MCP拉取Figma框架;透過此技能進行轉換

取得 Figma 框架 X;使用現有元件重複使用進行轉換的技能。✓ 已複製
claude-code-design-skills + magic-ui-mcp

將 Figma 模式對應到 Magic UI 元件(如果存在)

Figma 使用模糊英雄的地方,請使用 Magic UI 的模糊淡入淡出,而不是編寫英雄。✓ 已複製
claude-code-design-skills + claude-design-auditor-skill

驗證產生的程式碼通過 18 條規則審核

轉換後,執行設計審核並修復任何 HIGH 問題。✓ 已複製

工具

此 MCP 暴露的能力

工具輸入參數何時呼叫成本
figma-to-code (SKILL) Figma frame URL + repo conventions 將設計轉換為適合您的程式碼庫的程式碼 0

成本與限制

運行它的成本

API 配額
沒有技能; Figma MCP 有自己的配額
每次呼叫 Token 數
Figma 框架 + 現有程式碼 + 輸出 — 可以很大;精確地確定框架範圍
費用
自由的
提示
一次轉換一幀;巨大的選擇浪費了上下文和審查的精力。

安全

權限、密鑰、影響範圍

憑證儲存: Figma PAT屬於Figma MCP,不是這個技能
資料出站: 沒有來自技能; Figma MCP 中發生網絡調用

故障排查

常見錯誤與修復

代理程式編寫一個新按鈕而不是重複使用現有按鈕

在提示中明確列出儲存庫的元件目錄。

驗證: Include 'check src/components/ first' in the request
新 Figma 變體缺少道具

轉換前詢問變體差異;更新組件而不是分叉。

驗證: Agent output includes a 'variants' section
類型太鬆散(任何地方都可以)

要求「沒有任何;」如果無法輸入變體,則會大聲失敗」。

驗證: Search the diff for ': any'

替代方案

Claude Code Design Skills 對比其他方案

替代方案何時用它替代權衡
magic-ui-mcp您需要預先建置的動畫元件,而不是 Figma 轉換器圖書館優先,而非設計優先
claude-design-auditor-skill您想要評估設計質量,而不是產生程式碼審核,而非生產
hue-brand-skill你需要一種設計語言,而不是框架轉換系統優先,而不是框架優先

更多

資源

📖 閱讀 GitHub 上的官方 README

🐙 查看未解決的 issue

🔍 瀏覽全部 400+ MCP 伺服器和 Skills