/ 目錄 / 演練場 / design-dna
● 社群 zanwei ⚡ 即開即用

design-dna

作者 zanwei · zanwei/design-dna

從任何參考介面擷取量化的 Design DNA——token、質性風格、視覺效果——然後生成符合該 DNA 的元件。

design-dna 以圖像、截圖或即時 URL 作為參考,輸出結構化的 Design DNA JSON:色彩 token、字型比例、間距、質性風格描述符,以及視覺效果參數。將 DNA 回饋給 Claude 生成元件,輸出就會保持品牌一致性,而非千篇一律的 Tailwind 預設樣式。

為什麼要用

核心特性

即時演示

實際使用效果

就緒

安裝

選擇你的客戶端

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

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

~/.cursor/mcp.json · .cursor/mcp.json
{
  "mcpServers": {
    "design-dna-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/zanwei/design-dna",
        "~/.claude/skills/design-dna"
      ],
      "_inferred": true
    }
  }
}

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

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

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

~/.codeium/windsurf/mcp_config.json
{
  "mcpServers": {
    "design-dna-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/zanwei/design-dna",
        "~/.claude/skills/design-dna"
      ],
      "_inferred": true
    }
  }
}

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

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

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

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

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

claude mcp add design-dna-skill -- git clone https://github.com/zanwei/design-dna ~/.claude/skills/design-dna

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

使用場景

實戰用法: design-dna

從你喜歡的截圖建立匹配的元件

👤 沒有設計師、想打造精緻介面的開發者 ⏱ ~25 min intermediate

何時使用: 你在 Twitter 上看到一個很棒的介面截圖,想捕捉它的質感。

前置條件
  • Skill 已安裝 — git clone https://github.com/zanwei/design-dna ~/.claude/skills/design-dna
步驟
  1. 擷取 DNA
    Use design-dna. Extract DNA from /screens/inspiration.png. Save as dna.json.✓ 已複製
    → JSON 含 token + 風格 + 效果
  2. 生成元件
    Using dna.json, generate a React Card component. Match the radii, shadow, gradient parameters.✓ 已複製
    → TSX 具有匹配的美感
  3. 視覺比較
    Render side-by-side; tweak any drift in shadow strength.✓ 已複製
    → 在可接受誤差範圍內的視覺匹配

結果: 品牌一致的元件,無需複製原始程式碼。

注意事項
  • DNA 遺漏了細微的效果(顆粒紋理) — 傳入 --high-fidelity 進行較慢但更豐富的擷取
搭配使用: filesystem

生成與現有產品設計相符的新元件

👤 為已設計好的產品新增功能的開發者 ⏱ ~30 min intermediate

何時使用: 你要為現有應用程式新增一個畫面,希望它看起來渾然天成。

步驟
  1. 從即時 URL 擷取 DNA
    Use design-dna. Extract DNA from https://app.example.com/dashboard (logged-in screenshot).✓ 已複製
    → DNA 反映實際產品樣貌
  2. 稽核 token 差異
    Compare DNA to our existing tailwind.config — flag drift.✓ 已複製
    → 漂移清單(例如「shadow-md 在各頁面不一致」)
  3. 生成新畫面
    Generate the new 'Settings' screen using our reconciled DNA.✓ 已複製
    → 新畫面與應用程式其餘部分無從分辨

結果: 即使在幾個月後新增畫面,產品仍保持一致性。

注意事項
  • 即時 URL 需要登入——從公開首頁擷取的 DNA 會誤導方向 — 使用已登入的截圖,而非行銷頁面

從參考資料快速建立設計系統

👤 沒有設計師的獨立創業者或小型團隊 ⏱ ~60 min advanced

何時使用: 你正在開發一個應用程式,想快速建立一個連貫的設計系統。

步驟
  1. 選擇 3 個參考資料
    Use design-dna. Extract DNA from 3 screenshots I admire (editorial, app, marketing).✓ 已複製
    → 3 個獨立的 DNA 物件
  2. 合成
    Synthesize a single DNA emphasizing the editorial type scale and the app's spacing.✓ 已複製
    → 合併後的 DNA
  3. 輸出初始系統
    Generate tailwind.config, CSS vars, and a Button + Card + Input set using the merged DNA.✓ 已複製
    → 儲存庫中的初始設計系統

結果: 一個可以持續迭代的連貫基礎,而非從 Tailwind 預設值重新開始。

注意事項
  • 合成風格差異極大的參考資料會產生混亂結果 — 選擇具有「家族感」的參考資料——同一風格的變體,而非對立風格
搭配使用: frontend-slides-skill

組合

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

design-dna-skill + filesystem

將 DNA 和生成的元件持久化至儲存庫

Save design.dna.json under /design/ and check in; treat it as design source-of-truth.✓ 已複製
design-dna-skill + frontend-slides-skill

生成符合你產品美感的簡報模板

Use design-dna to capture our brand; pass to frontend-slides-skill for matching deck templates.✓ 已複製

工具

此 MCP 暴露的能力

工具輸入參數何時呼叫成本
extract_dna image_path 或 url, fidelity? 從任何參考資料的第一步 視覺 LLM token
synthesize_dna dna[] 合併多個參考資料 LLM token
generate_component dna, component_spec 品牌一致的元件生成 LLM token
diff_dna dna_a, dna_b 稽核參考資料與目前產品之間的漂移 0

成本與限制

運行它的成本

API 配額
取決於視覺 LLM
每次呼叫 Token 數
擷取約 3000–8000 token(圖像輸入 + JSON 輸出)
費用
免費;向 LLM 供應商付費
提示
每個專案快取一份 DNA;只在真正的品牌更新時重新擷取

安全

權限、密鑰、影響範圍

最小權限: filesystem-read(圖像) 出站 HTTPS(URL 參考)
憑證儲存: 無(視覺 LLM 認證透過環境變數)
資料出站: 視覺 LLM 供應商;URL 擷取器(若使用)

故障排查

常見錯誤與修復

擷取遺漏了漸層

使用 --fidelity high;預設模式跳過細微漸層以節省 token

每次執行的 DNA token 不一致

視覺模型有隨機性——若支援請設定種子;或擷取兩次後取中間值

生成的程式碼使用內聯樣式而非 design token

傳入 --token-mode strict;skill 會拒絕對已存在 token 的值進行內聯

即時 URL 擷取結果為空白

網站需要 JavaScript;改用完整渲染的截圖,而非 URL 擷取

替代方案

design-dna 對比其他方案

替代方案何時用它替代權衡
design-extract(Manavarya09)你需要完整的 design token 匯出,含 DTCG 和多平台輸出器更重量級;完整的設計系統管線 vs 輕量 DNA
手動整理風格指南你有設計師和元件庫較慢;更具權威性

更多

資源

📖 閱讀 GitHub 上的官方 README

🐙 查看未解決的 issue

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