/ 目录 / 演练场 / design-dna
← 全部服务器 ↗ GitHub
● 社区 zanwei ⚡ 即开即用

design-dna

作者 zanwei · zanwei/design-dna

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

design-dna 以图片、截图或实时 URL 为参考，输出结构化的设计 DNA JSON：颜色 token、字体比例、间距、定性风格描述和视觉效果参数。将 DNA 反馈给 Claude 生成组件时，输出结果保持品牌一致性，而非通用的 Tailwind 模板。

▶ 观看演示 📦 安装 💡 使用场景

为什么要用

核心特性

实时演示

实际使用效果

就绪

安装

作者仓库 · Claude Skills 官方文档

使用场景

实战用法： design-dna

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

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

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

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