visual-dna 的用途是从参考来源中提取视觉识别，并将结果应用到任意内容。资料将其分为三个阶段，可任意组合使用。
分析阶段：输入截图、图片或网址，输出 Design DNA JSON。开始前需阅读 references/schema.md 以了解全部字段，随后逐项填充，字段涵盖三个维度：design_system（可量化令牌：颜色、字体、间距、布局、形状、高度、动效、组件）、design_style（定性感受：氛围、视觉语言、构图、品牌语气、交互个性）、visual_effects（特殊渲染：Canvas、WebGL、粒子、着色器、滚动效果、SVG 动画）。资料给出提取规则：颜色按面积采样主色板，主色取最大面积，强调色取 CTA 用法；字体按视觉判断类别并从标题与正文关系估算比例；间距按元素邻近度评估密度；视觉特效扫描 Canvas、WebGL、Three.js、GSAP、粒子、着色器等，未出现的设为 enabled: false。参考冲突时记录主导模式并提及变体，最后询问是否在生成前调整数值。
生成阶段：输入 Design DNA JSON 加内容，输出忠实实现。需阅读 references/generation-guide.md，从 design_system 令牌构建 CSS 自定义属性，将 design_style 定性字段用于主观判断，按 CSS → Canvas → WebGL 技术层级实现视觉特效，尽可能从原始网址获取真实素材而不是重造。默认输出为内联 CSS/JS 的自包含 HTML。优先级为颜色与字体（占视觉识别约八成）、间距与布局、形状与高度、设计风格定性字段、视觉特效、动效与交互。交付前检查是否像参考、令牌是否全部应用、输出是否自包含、特效在无 JS 时能否优雅降级。
结构阶段：被要求时展示完整模式。资料强调提取出的 JSON 本身就是关键资产，可提交版本控制、跨团队项目共享、喂给任意智能体复用并迭代精修，把“做成那个网站的样子”变成精确可复现的规格。
激活边界：仅当用户明确要求提取视觉 DNA、风格分析、品牌或设计系统提取，或基于已有 Design DNA JSON 生成时使用；除非用户提供参考或要求匹配参考，否则不用于通用 UI 任务。提供网址或素材时应使用用户给出的参考或项目已有素材，并报告所用来源；不判断参考的所有权、敏感性或权限，这属于人工决定；仅在参考本身含糊、不可用或需要凭证时询问。
限制与配套：资料建议生成时配合 no-slop-ui，DNA 说明设计是什么，no-slop-ui 说明不应做什么，避免 AI 默认风格混入。资料未提供收费、价格、平台或安装命令等信息。