zanwei/design-dna

解决的问题

将主观的视觉设计请求（例如："让它看起来像这个网站"）转化为精确、机器可读的规范，称为「Design DNA」。这可以防止AI代理偏离通用设计默认值或无法捕捉品牌视觉身份的特定细微差别这一常见问题。

工作原理

该项目提供一个遵循三阶段流程的代理技能：

1. 结构：定义设计令牌、定性风格和视觉效果的全面模式。
2. 分析：从截图、图像或URL中提取量化JSON配置文件，涵盖可测量的令牌（颜色、排版）、定性感知（氛围、品牌语气）以及高级视觉效果（WebGL、着色器、玻璃拟态）。
3. 生成：使用提取的DNA JSON和用户内容，实现忠实的UI，通常以自包含的HTML/CSS/JS形式输出。

为确保准确性，项目包含可选的确定性测量脚本。这些脚本使用实际像素上的k-means聚类来提取精确的十六进制代码，并验证最终实现与原始参考的一致性，以消除LLM颜色感知漂移。

适用人群

使用AI代理（如Cursor或Claude Code）的开发者和设计师，希望在不同项目中一致地复现特定视觉身份，或在团队间共享设计规范。

主要亮点

• 三维分析：捕捉设计令牌、定性风格和超越标准CSS的复杂视觉效果。
• 确定性验证：使用像素级测量确保颜色和样式在数学上准确，而非基于LLM感知。
• 可移植规范：输出可版本控制并跨不同代理和项目复用的JSON「DNA」文件。
• 广泛代理兼容性：与Agent Skills规范兼容，可通过skills CLI在各种AI编辑器和代理中安装。