zanwei/design-dna

这是什么？

核心功能

• 01从参考图中提取颜色、字体、间距、布局和动效等设计令牌。
• 02描述情绪、构图、交互质感等定性风格特征。
• 03梳理 WebGL、粒子、着色器、滚动驱动动画等视觉效果。
• 04结合保存的 DNA JSON 与你的内容生成新界面。
• 05可选的像素级颜色测量，并用 ΔE 校验生成结果。
• 06通过 skills CLI 安装到 Cursor、Claude Code、Codex 等智能体。

适用场景

• 在新项目中复刻参考网站的视觉风格，避免凭感觉猜测数值。
• 把团队的视觉语言保存为可版本管理的 JSON，供多个项目共享。
• 用测量的容差检查生成界面是否符合品牌配色。
• 把一组灵感截图转化为智能体可用的统一设计说明。

快速上手

1. 1

   使用 skills CLI 安装该技能（需要 Node.js）

   npx skills add zanwei/design-dna
2. 2

   或为特定代理（如 Cursor）以非交互方式安装

   npx skills add zanwei/design-dna -a cursor -g -y
3. 3

   让代理将参考截图或网址分析为 Design DNA JSON，再据此生成 UI

使用前须知

• !它是代理技能，需要兼容的 AI 编程代理才能运行。
• !可选的确定性颜色测量脚本需要本地克隆仓库并执行 npm 安装。

标签

常见问题

design-dna 是什么？

一个智能体技能，可从参考界面中提取视觉设计特征，生成结构化的 Design DNA JSON，并据此生成风格一致的界面。 design-dna 是一个智能体技能，用于把现有设计的视觉特征提取为机器可读的 JSON。输入截图、图片或网址后，它会从三个维度生成描述：设计令牌（颜色、字体、间距、布局、形状、层级、动效、组件），定性风格（情绪、视觉语言、构图、图像风格、交互质感），以及视觉效果，如 Canvas、WebGL、粒子、着色器、滚动驱动动画和毛玻璃效果。

design-dna 可以免费使用吗？用的什么许可证？

design-dna 以 MIT 许可证开源。用于商业产品前，请先确认许可证条款。

design-dna 还在维护吗？

半年内有更新。design-dna 最近一次提交是在 2026年8月28日。

design-dna 适合用来做什么？

在新项目中复刻参考网站的视觉风格，避免凭感觉猜测数值。 把团队的视觉语言保存为可版本管理的 JSON，供多个项目共享。 用测量的容差检查生成界面是否符合品牌配色。 把一组灵感截图转化为智能体可用的统一设计说明。

design-dna 怎么安装和运行？

使用 skills CLI 安装该技能（需要 Node.js）: npx skills add zanwei/design-dna 或为特定代理（如 Cursor）以非交互方式安装: npx skills add zanwei/design-dna -a cursor -g -y 让代理将参考截图或网址分析为 Design DNA JSON，再据此生成 UI

在哪里获取 design-dna？

源代码和安装说明在 GitHub 上：https://github.com/zanwei/design-dna