Visual DNA — 视觉DNA

从任何参考中提取视觉身份（Design DNA）。将其应用于任何内容。随处复用。三个阶段——使用任意组合： 分析（Analyze）——截图、图像或URL → 生成Design DNA JSON 生成（Generate）——Design DNA JSON + 内容 →忠实实现 结构（Structure）——显示完整的模式，当请求时 阅读references/schema.md以获取完整的字段列表。阅读references/generation-guide.md以获取生成规则。

三个维度 维度 | 描述 -----|----- design_system | 可衡量的标记：颜色、字体、间距、布局、形状、阴影、动画、组件 design_style | 主观的感觉：情绪、视觉语言、构图、品牌声音、交互个性 visual_effects | 特殊渲染：Canvas、WebGL、粒子、着色器、滚动效果、SVG动画

阶段1：分析 当用户提供截图、图像或URL时： 阅读references/schema.md —— 在开始之前了解每个字段 对于每个参考：分析或获取并分析 填充每个字段 —— 不允许空字符串，不允许猜测 当参考冲突时：记录主导模式，提及变体 输出完整的Design DNA JSON 询问：“是否要在生成之前调整任何值？”

关键提取规则： 颜色：通过面积采样主导色板。主要颜色 = 最大面积，强调颜色 = CTA使用 字体：通过视觉识别字体类别（几何、人文、衬线）。估计比例比从标题/正文关系中得出 间距：通过元素接近度评估密度。测量部分节奏一致性 视觉效果：扫描Canvas、WebGL、Three.js、GSAP、粒子、着色器、自定义光标。设置enabled：false对于任何不存在的效果

阶段2：生成 当用户提供DNA JSON + 内容时： 阅读references/generation-guide.md 从design_system标记构建CSS自定义属性 将design_style主观字段应用于主观决策 在适当的技术层次（CSS → Canvas → WebGL）实现视觉效果 在可能的情况下，从原始URL获取实际资产 —— 不要重新创建 默认输出：自包含的HTML带有内联CSS/JS 优先顺序： 颜色和字体（80%的视觉身份） 间距和布局 形状和阴影 设计风格主观字段 视觉效果 运动和交互 质量检查： 是否实际上看起来像参考？ 是否应用了所有设计标记（而不仅仅是其中一些）？ 输出是否自包含（没有可能破坏的外部依赖）？ 视觉效果在没有JS的情况下是否可以正常降级？

DNA JSON作为资产 提取的JSON是关键输出 —— 不仅仅是生成的UI。一旦提取： 提交它到版本控制 在团队和项目中共享 将其输入到任何代理中以进行任何未来生成 迭代地改进它 这将“使其看起来像那个网站”转化为精确、可复制的规格。 与no-slop-ui配对 当从DNA生成UI时： 将no-slop-ui规则与DNA标记一起应用 DNA告诉你什么是设计 no-slop-ui告诉你什么不应该做（没有AI默认值滑入） 一起：忠实于参考，干净的执行