Design DNA 是一套把参考截图、图片或网页 URL 转成可量化「设计基因」的工作流：从设计系统（色彩/字体/间距 token）、设计风格（气质/版式）到视觉特效（Canvas/WebGL/3D/粒子/滚动动效）三个维度提取结构化 JSON，并能反向据此生成同源风格的设计稿。适合需要快速克隆或统一 UI 风格的设计师与前端。
Design DNA 是一套把“参考设计”翻译成“可量化设计基因”的工作流。你给它一张截图、一张图片或一个网页链接，它从三个维度——设计系统（可测量的色彩/字体/间距 token）、设计风格（气质、版式、品牌声量）、视觉特效（Canvas/WebGL/3D/粒子/滚动动效）——提取出一份结构化 JSON 设计档案，并可以反向据此生成同源风格的设计稿。对需要快速克隆某类视觉、或在多个页面间保持品牌一致的设计师与前端，它把“说不清的好看”变成了“可复用的参数”。
设计系统管“能测量的”：精确色值、字号阶梯、间距节奏、栅格与形状；设计风格管“能感受到的”：情绪、视觉语言、留白哲学；视觉特效管“CSS 表达不出的”：WebGL 场景、粒子、着色器、滚动驱动动画。三者合起来，一份 DNA 既能喂给设计系统，也能指导具体生成。
把截图或 URL 交给它，它会按 schema 逐字段采样：主色按面积占比定、强调色看 CTA 用法、字体按几何/人文特征推断、栅格看内容对齐。多个参考冲突时，它标注主导模式并提示变体，最终输出一份“每个字段都填满”的 DNA JSON，并询问你是否要微调。
能。给它 DNA JSON + 你的内容，它会把设计系统值转成 CSS 变量、用风格字段指导主观决策、用合适的技木实现视觉特效（轻量用 CSS/SVG，中等用 Canvas/GSAP，重度用 Three.js/GLSL），默认产出自包含 HTML。拿到的是“同风格但内容是你自己”的设计，而不是照搬原图。
从代码侧它能扫出 canvas、WebGL、Three.js/Pixi.js、GSAP/Lottie、自定义着色器、IntersectionObserver 滚动触发、SVG 动画；从截图侧它能描述发光粒子、3D 渲染、噪声纹理、渐变动画、视差、光标拖尾、玻璃拟态等超出普通 CSS 的效果。识别不到实现细节的，会写进备注而非瞎猜。
最划算的是“看到喜欢的站想做成自己风格”的设计师、需要在多页面/多产品间统一观感的前端、以及做品牌规范落地时被“感觉不对但说不出哪不对”困扰的人。它不替你做创意判断，而是把风格沉淀成可传递、可复用的资产。
设计系统管“能测量的”：精确色值、字号阶梯、间距节奏、栅格与形状；设计风格管“能感受到的”：情绪、视觉语言、留白哲学；视觉特效管“CSS 表达不出的”：WebGL 场景、粒子、着色器、滚动驱动动画。三者合起来，一份 DNA 既能喂给设计系统，也能指导具体生成。
把截图或 URL 交给它，它会按 schema 逐字段采样：主色按面积占比定、强调色看 CTA 用法、字体按几何/人文特征推断、栅格看内容对齐。多个参考冲突时，它标注主导模式并提示变体，最终输出一份“每个字段都填满”的 DNA JSON，并询问你是否要微调。
能。给它 DNA JSON + 你的内容，它会把设计系统值转成 CSS 变量、用风格字段指导主观决策、用合适的技木实现视觉特效（轻量用 CSS/SVG，中等用 Canvas/GSAP，重度用 Three.js/GLSL），默认产出自包含 HTML。拿到的是“同风格但内容是你自己”的设计，而不是照搬原图。
从代码侧它能扫出 canvas、WebGL、Three.js/Pixi.js、GSAP/Lottie、自定义着色器、IntersectionObserver 滚动触发、SVG 动画；从截图侧它能描述发光粒子、3D 渲染、噪声纹理、渐变动画、视差、光标拖尾、玻璃拟态等超出普通 CSS 的效果。识别不到实现细节的，会写进备注而非瞎猜。
最划算的是“看到喜欢的站想做成自己风格”的设计师、需要在多页面/多产品间统一观感的前端、以及做品牌规范落地时被“感觉不对但说不出哪不对”困扰的人。它不替你做创意判断，而是把风格沉淀成可传递、可复用的资产。