1. 基本信息
| 项目 | 内容 |
|---|---|
| 名称 | design-dna |
| 作者/维护者 | zanwei（GitHub 个人账号 zanwei.guo，注册于 2018 年，27 个公开仓库） |
| 来源链接 | https://github.com/zanwei/design-dna |
| 许可证 | MIT License（GitHub API 验证） |
| GitHub Stars | 1,089（GitHub API 实测） |
| Forks | 53（GitHub API 实测） |
| 最新版本 | 未发行正式 Release/Tag，仓库无版本号标注，以最近一次代码提交（2026-04-13）为准 |
| 安装方式 | npx skills add zanwei/design-dna（跨 Agent 通用安装器） |
项目自述名称为「design-dna」，与正式名称一致。
2. 功能介绍与亮点
design-dna 是一个把“参考界面的视觉风格”转成结构化、可复用规范的 agent skill。它围绕三个维度工作：设计系统（颜色、字体、间距、圆角、阴影等可量化 token）、设计风格（氛围、构图策略、品牌调性等定性描述）、视觉效果（Canvas、WebGL、粒子、滚动动效、玻璃拟态等超出 CSS 表达范围的效果）。
工作流分三阶段，可单独使用也可串联：① Structure 输出完整字段 schema；② Analyze 接收截图、图片或 URL，逐字段提取出一份不留空白的 Design DNA JSON；③ Generate 拿这份 JSON 加上自己的内容，生成风格一致的界面实现（默认为可独立运行的 HTML/CSS/JS）。
亮点：① 提取结果落地为结构化 JSON，可提交进版本控制、跨项目复用、团队间共享，把“照着那个风格做”这种主观描述变成可版本化的规格说明；② 覆盖范围不止色彩字体等静态 token，还包含视觉效果这类传统设计系统工具较少量化的维度；③ 纯提示词/参考文档实现，不含任何可执行脚本，无外部依赖；④ 通过 npx skills add 通用安装器分发，遵循 Agent Skills 规范，安装门槛低；⑤ README 提供中/英/日/韩/西/繁中六种语言版本。
3. 适用场景
固定分类：前端与设计。
适合独立开发者、前端工程师与产品设计师：看中某个网站或界面的视觉风格，想把这种“感觉”变成可复用、可版本管理的规范，再套用到自己的内容或项目上——例如给一批落地页统一视觉语言，或把某个参考站的构图与动效风格迁移到自己的产品界面。
4. 跨 Agent 兼容性
- Claude Code：✅ 原生支持——SKILL.md 遵循通用 Agent Skills 规范，
npx skills add安装器明确将其部署到.claude/skills/ - Codex：✅ 原生支持——同一安装器支持
-a codex参数，部署到.agents/skills/（Codex 官方 Skills 文档收录该安装路径） - OpenClaw：✅ 原生支持——安装器文档列出
openclaw为受支持 Agent，部署到skills/（OpenClaw 官方 Skills 文档收录） - Hermes Agent：✅ 原生支持——安装器文档列出
hermes-agent为受支持 Agent，部署到.hermes/skills/
判断依据：design-dna 本身不含任何 Agent 专属机制（无 allowed-tools、无平台特定路径变量），是纯 Markdown 格式的方法论与参考文档；四个生态的兼容性证据均来自其分发所用的 skills CLI 官方文档对支持 Agent 列表的明确记录，而非该 skill 自身文档。
5. 推荐理由
一次提取参考设计的视觉DNA为JSON规范，之后可反复复用生成风格一致的界面。
6. 评分
| 维度 | 分数 | 说明 |
|---|---|---|
| 受欢迎程度 | 7 | GitHub 1,089 星、53 fork（API 实测）；作者为个人开发者账号，暂无官方/机构背书；未找到独立第三方渠道的具名讨论，热度依据以 star/fork 数为主 |
| 可用性 | 8 | 单条命令 npx skills add 即可跨 Agent 安装，无需 API Key 或账号注册；文档含 SKILL.md、两份参考手册（schema/生成指南）与六语言 README；最近一次代码提交为 2026-04-13，距今约 3 个月 |
| 安全性 | 9 | 见下方检查清单 |
安全检查清单逐项：①仓库全部内容为 Markdown 文档（SKILL.md + references/），不含任何可执行脚本或 shell 命令 ②运行时的网络访问仅限于用户主动提供的参考图片/URL 由 Claude 自身抓取分析，未见技能本身向第三方服务器外发数据 ③不要求任何 API Key 或账号凭据 ④已直接读取 SKILL.md 全文及全部提交记录，未发现提示注入或可疑指令 ⑤作者为 GitHub 老账号（2018 年注册），仓库结构干净，无堆砌营销类文件的迹象 ⑥MIT 许可证明确（GitHub API 验证） ⑦最近提交距今约 3 个月，仓库无 issue 积压（0 open issues），暂无维护停滞迹象
综合评分：8.0（三项均值）
7. 跟同类 Skills 相比的优势
| 名称 | Star | 定位 | 与 design-dna 的差异 |
|---|---|---|---|
| design-dna（本次推荐） | 1,089 | 把参考界面提炼为三维度（token/风格/视觉效果）JSON 规范，离线可用、无需账号 | 产出物是可版本控制、跨项目复用的静态规格文件，不依赖任何在线平台 |
| TypeUI (bergside/typeui) | 1,582 | 托管式设计系统平台，通过 MCP 连接后按项目下发设计 token 与 UI 提示词，含免费与 Pro 两档账号 | 功能更全面（含通用设计原则库、多方案变体生成），但核心能力需连接其云端 MCP 服务，非纯离线运行 |
| Superdesign (superdesigndev/superdesign-skill) | 350 | 连接 CLI 账号后在无限画布上直接生成并迭代高保真 UI 草图，含免费与 $20/月 Pro 档 | 定位是端到端的界面生成智能体，而非风格提取与规范沉淀；需要注册 superdesign.dev 账号并登录 CLI |
差异化总结：TypeUI 与 Superdesign 都是需要连接账号/云端服务的平台型工具，覆盖面更广但依赖外部平台持续可用；design-dna 只做“提炼与复用视觉规范”这一件事，全程本地运行、产出物是可长期保存的 JSON 文件，适合不想绑定第三方账号、只想把风格固化下来反复使用的场景。
8. 用户评价
该技能目前在第三方平台（Reddit、Hacker News 等）尚无独立第三方具名用户评价；GitHub 仓库 Issues 区暂无记录（0 条 open/closed）。
9. 其他补充
README 提供英语、简体中文、繁体中文、日语、韩语、西班牙语六种语言版本。仓库采用单一贡献者维护模式（作者 zanwei 本人 23 次提交），提交历史全部为文档完善与多语言支持相关内容，未见功能性回退或异常变更。
10. 安装使用方式
# 跨 Agent 通用安装（自动识别当前环境）
npx skills add zanwei/design-dna
# 指定安装到某个 Agent（以 Claude Code 为例）
npx skills add zanwei/design-dna -a claude-code -g -y
# 从本地克隆安装
git clone https://github.com/zanwei/design-dna.git
npx skills add ./design-dna -y前置条件：本机已安装 Node.js 且可执行 npx 命令。安装后无需重启，直接在对话中提供参考图片/截图/URL 并说明意图（如“分析这个设计的风格”或“提取这个网站的 Design DNA”）即可触发对应阶段；也可提供已有的 Design DNA JSON 和新内容触发生成阶段。
11. 注意事项
- 提取阶段的准确度依赖 Claude 自身的视觉分析能力，复杂视觉效果（如自定义 WebGL 着色器细节）可能只能给出近似描述而非精确参数
- 最近一次代码提交为 2026-04-13，此后仅有文档性质更新，功能层面是否会持续迭代暂无法从已抓取材料判断
- 仓库为单一作者维护，未见其他核心贡献者，长期维护的连续性依赖作者个人投入
- 与 Codex、OpenClaw、Hermes Agent 的兼容性依据来自其分发安装器（
skillsCLI）的官方文档记录，并非 design-dna 自身文档或作者的直接测试声明