/ 目錄 / 演練場 / design-dna
← 全部伺服器 ↗ GitHub
● 社群 zanwei ⚡ 即開即用

design-dna

作者 zanwei · zanwei/design-dna

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

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

▶ 觀看演示 📦 安裝 💡 使用場景

為什麼要用

核心特性

即時演示

實際使用效果

就緒

安裝

作者儲存庫 · Claude Skills 官方文件

使用場景

實戰用法： design-dna

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

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

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

步驟
  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