用途：把“照着这个做”的参考物先拆解为 Design DNA JSON，再只用该 JSON 生成设计，避免凭印象复刻导致配色漂移、节奏扁平、特征效果缺失。参考物可为截图、图片集、在线 URL 或交互录像。
三个维度：design_system 记录可测量项（色值、字号比例、间距基数、圆角、层级、动效时长、组件模式）；design_style 记录整体判断项（氛围、装饰程度、构图策略、留白理念、交互性格、文案语气）；visual_effects 记录纯 CSS 难以表达的内容（Canvas、WebGL/3D、着色器、粒子、滚动动效、光标行为、玻璃拟态）。
用法分三阶段：先读 references/dna-schema.md 确认字段结构；再逐个分析参考物，URL 优先读源码（canvas、WebGL、动画库、IntersectionObserver、SVG animate），动效时序需依赖录像；最后按“色彩与排版→间距布局→形状层级→风格字段→视觉效果→动效交互”的顺序生成，design_system 以单个 :root 的 CSS 自定义属性输出。默认输出为自包含单文件，除非指定框架。
提取规则：色彩按面积主导分配主/次/强调色并建立中性色阶；圆角相对控件高度记录；字号按比例而非绝对值推断；间距按元素间隙与基数判断；参考冲突时记录主导模式并命名变体；字段须填满，未涉及写明“未观察到”；未出现的特效置 enabled: false；无法辨识的内容写入 composite_notes。
持久化：可将完成的 JSON 存为命名 profile，后续直接从已有 profile 生成，机制见 references/diagram-profiles.md。
限制与边界：Markdown 转 HTML 归 moai-domain-html-report，架构图归 moai-domain-svg-infographic，图表与配色归 dataviz，组件级打磨归 moai-ref-ui-polish。交付前需核对色值可溯源、字号间距圆角匹配、正文对比度 4.5:1、大字号 3:1、遵守 prefers-reduced-motion、动画使用 requestAnimationFrame、Canvas/WebGL 自适应容器并处理 resize。具体收费、价格、平台与效果资料暂未提供。