/ 目录 / 演练场 / design-dna
● 社区 zanwei ⚡ 即开即用

design-dna

作者 zanwei · zanwei/design-dna

从任意参考 UI 中提取量化的设计 DNA——token、定性风格、视觉效果——然后生成与之匹配的组件。

design-dna 以图片、截图或实时 URL 为参考,输出结构化的设计 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

根据一张你喜欢的截图构建匹配的组件

👤 没有设计师但想做精致 UI 的开发者 ⏱ ~25 min intermediate

何时使用: 你在 Twitter 上看到了一个很棒的 UI 截图,想捕捉它的感觉。

前置条件
  • 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.✓ 已复制
    → 含 token + 风格 + 效果的 JSON
  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 or url, fidelity? 从任意参考开始的第一步 Vision LLM tokens
synthesize_dna dna[] 合并多个参考 LLM tokens
generate_component dna, component_spec 生成品牌一致的组件 LLM tokens
diff_dna dna_a, dna_b 审计参考与当前产品之间的漂移 0

成本与限制

运行它的成本

API 配额
取决于视觉 LLM
每次调用 Token 数
提取约 3000–8000 token(图片输入 + JSON 输出)
费用
免费;向 LLM 提供商付费
提示
每个项目缓存 DNA;只在真正的品牌刷新时重新提取

安全

权限、密钥、影响范围

最小权限: filesystem-read (images) Outbound HTTPS (URL refs)
凭据存储: 无(视觉 LLM 认证通过环境变量)
数据出站: 视觉 LLM 提供商;URL 抓取器(如有使用)

故障排查

常见错误与修复

提取遗漏了渐变

使用 --fidelity high;默认会跳过细微渐变以节省 token

DNA token 每次运行结果不同

视觉模型存在随机性——如支持请设置种子;或提取两次取中位值

生成代码使用了内联样式而非设计 token

传入 --token-mode strict;技能将拒绝内联已作为 token 存在的值

实时 URL 提取结果为空

网站需要 JS;改用完整渲染的截图,而非 URL 抓取

替代方案

design-dna 对比其他方案

替代方案何时用它替代权衡
design-extract (Manavarya09)你想要包含 DTCG 和多平台输出的完整设计 token 导出更重量级;完整设计系统流程 vs 轻量 DNA
Manual style guide curation你有设计师和完整的组件库更慢;更权威

更多

资源

📖 阅读 GitHub 上的官方 README

🐙 查看未解决的 issue

🔍 浏览全部 400+ MCP 服务器和 Skills