design-dna：把任何网站的设计语言提取成可复用的 JSON

把主观的「照着那个网站做」变成一份精确、可复现的规格定义——任何智能体都能据此稳定输出一致的设计。

用 AI 做界面时，最难的从来不是生成代码，而是怎么让 AI 真正「理解」一个设计的视觉语言，并在后续生成中保持一致。design-dna 解决的就是这件事：把视觉设计身份提取成机器可读的 JSON，跨项目、跨团队、跨 Agent 复用。

项目地址：https://github.com/zanwei/design-dna

三个维度定义设计身份

design-dna 把视觉设计拆成三个维度，覆盖从可度量到定性的全部属性：

• 设计系统 — 可度量的 token：色彩、字体、间距、版式、形状、层级、动效、组件等
• 设计风格 — 定性描述：情绪、视觉语言、构图、图像风格、交互气质、品牌语气等
• 视觉特效 — 超出普通 CSS 的实现：Canvas、WebGL、3D、粒子、着色器、滚动驱动动效、光标效果、SVG 动画、玻璃拟态等

第三维度是它区别于一般设计系统工具的关键——动效、shader、3D 这些难用 token 描述、却决定设计气质的东西，被单独拎出来结构化。

三阶段工作流

技能内置三个阶段，可单独用也可串联：

1. 结构 — 展示完整 schema 与各字段含义，让 Agent 知道要提取什么
2. 分析 — 根据截图、图片或 URL，输出字段齐全的 JSON 画像（无空字段；多参考冲突时注明主方案与变体）
3. 生成 — 在已有 DNA JSON + 内容的前提下落地实现（默认自包含 HTML/CSS/JS）

典型链路是「分析 → 生成」：第一步把参考素材喂给 Agent，它逐项检视三个维度的每一项视觉属性，输出一份完整且量化的 Design DNA JSON；第二步把这份 JSON 与你自己的内容一起提供，Agent 生成忠实还原原始设计语言、同时适配你素材与文案的实现。

DNA JSON 是核心产物

一旦提取完成，这份 JSON 可以提交到版本控制、跨团队共享、在多个项目中复用，也可以持续迭代微调。

它把「设计感」这种原本只存在于设计师脑中、难以言传的东西，变成了一份精确的规格定义。任何 Agent 拿到它，都能稳定输出同一套设计——而不是每次「照着这个网站做」都跑偏成不同的样子。

安装

符合 Agent Skills 规范，通过 skills CLI 一行安装：

npx skills add zanwei/design-dna

兼容 40+ 款智能体，包括 Cursor、Claude Code、Codex、GitHub Copilot 等。也可装到指定 Agent：

# 仅 Cursor
npx skills add zanwei/design-dna -a cursor -g -y
# 仅 Claude Code
npx skills add zanwei/design-dna -a claude-code -g -y

一个精修技巧

若首轮产出相对参考仍显单薄或细节不足，不要从零重做——把同一批参考链接或截图再次提供给 Agent，发起明确的精修轮次，在保留初稿的前提下显著拉近与高保真参照的差距。

对应的 Prompt 思路是：请其对照参考复审界面层级与点缀、字阶与留白、动效与材质及整体 UI，并将结论回填至当前实现。

小结

AI 写代码越来越强，但「让 AI 稳定复现某个设计」一直是道坎。design-dna 的思路是把设计语言从感性认知转成可序列化的数据，让「设计一致性」这件事从靠运气变成靠规格。配合配套的 harness-design 仓库（对保真度打分并驱动修正循环），基本能把「AI 做出来的界面像不像参考」这件事工程化。