Oct 27, 2026
用 design-dna 把任意界面的视觉风格提取成可复用的 Design DNA
design-dna 是一个 agent skill：读取截图、图片或网址，输出字段齐全的 Design DNA JSON——设计 token、定性风格与视觉特效——再用你自己的内容生成同风格界面，并附带让取色可确定性度量的可选脚本。
「把页面做成这个网站的样子」是前端工作里最模糊的需求。design-dna 是 zanwei 出品的 2k 星标 MIT agent skill，它用一个 JSON 文件取代这句形容词：把视觉身份提取、结构化并应用为可量化的 Design DNA，供你的 agent 复用。
为什么这个 Skill 重要
这个 skill 覆盖三个维度：
| 维度 | 捕获内容 |
|---|---|
| 设计系统 | 可度量 token：色彩、字体、间距、版式、形状、层级、动效、组件 |
| 设计风格 | 定性感受：情绪、视觉语言、构图、图像风格、交互气质、品牌语气 |
| 视觉特效 | 超出普通 CSS 的实现：Canvas、WebGL、3D、粒子、着色器、滚动驱动动效、光标效果、SVG 动画、玻璃拟态 |
三阶段工作流驱动它们：结构展示 schema 与字段含义；分析把截图、图片或网址变成字段齐全、冲突注明的完整 JSON 画像；生成拿 DNA JSON 加你的内容落地实现——默认输出自包含的 HTML/CSS/JS。各阶段可单独使用，也可串联。关键产物是那份 JSON：提取之后可以提交进版本控制、跨团队共享、跨项目复用——把主观审美变成任何 agent 都能消费的规格。
安装
npx skills add zanwei/design-dna
前置条件是 Node.js 和能运行 npx。用 npx skills add zanwei/design-dna -a claude-code -g -y 可以只装到单个 agent，--list 查看仓库提供的技能。按 README 的说法，这个 skill 遵循 Agent Skills 规范，通过 skills CLI 可安装到 Cursor、Claude Code、Codex、GitHub Copilot 等 agent。
实战：从一张截图到同风格的页面
- 准备参考——收集你想捕获的设计的截图、图片或在线网址。多个参考可以组合使用；skill 会识别主导模式并注明变体。
- 分析——把参考交给你的 agent；它输出完整、量化的 Design DNA JSON。
- 生成——把 DNA JSON 和你自己的内容一起提供，agent 按原有设计语言产出实现。
如果第一版看起来视觉上偏单薄，README 给出的打磨迭代是：重新附上同一批网址或截图，运行它的审计提示词：
Against the reference, audit hierarchy, ornamentation, typographic rhythm, motion, materiality, and overall UI—then merge your conclusions back into the current implementation.
在取色这件事上，README 说明了为什么靠眼睛不行：LLM 的色彩感知会向熟悉的默认色板漂移——它的例子是品牌粉 #ff90e8 被看成 #ec4899（ΔE ≈ 29）。两个可选脚本让阶段结果可度量：measure-colors.mjs 对真实像素做确定性的 k-means 聚类，输出精确色值与角色归属；verify.mjs 重新度量生成结果，按 PASS/FAIL 阈值报告逐色 ΔE 与覆盖率漂移。在 README 重建 bun.sh 首屏的例子里，度量版以平均 ΔE 0.87 通过，感知版以 9.54 失败。skill 会在参考是图片文件时自动指导 agent 使用这两个脚本；不需要任何 API 密钥。
技巧
- 各阶段相互独立：单独跑分析可以为现有设计系统建档，单独跑生成可以用手头已有的 DNA JSON。
- 以 skill 方式安装时，agent 从加载的
SKILL.md所在目录解析度量脚本——你的项目里不需要scripts/目录。 - 把 DNA JSON 提交进代码库；README 把它定位为可移植、可复用、可迭代精化的规格。
- 多个参考胜过单个：组合参考能让 skill 识别出主导模式，同时注明变体。
何时不用这个 Skill
生成的文档化默认输出是自包含的 HTML/CSS/JS——README 没有提供框架导出，要移植到 React 或 Vue 得自己改。确定性脚本需要本地克隆路径或能暴露它们的 skill 安装，而没有 Node.js 和 npx，这一切都无法运行。
查看 排行榜 了解更多 skill。