design-dna

Design DNA

一个包含 3 个阶段的工作流，用于跨三个维度提取、结构化和应用设计标识（Design Identity）：

1. Design System（设计系统） — 可量化的 Token 标签（配色、排版、间距、布局、形状、阴影/层级 Elevation、动效、组件）
2. Design Style（设计风格） — 主观感官体验（氛围感、视觉语言、构图、图像风格、交互手感、品牌语气）
3. Visual Effects（视觉特效） — 特殊渲染效果（Canvas、WebGL、3D、粒子、着色器 Shader、滚动特效、光标特效、SVG 动画、毛玻璃 Glassmorphism 等）

工作阶段（Phases）

Phase 1: Structure — 输出 Schema

当用户询问结构维度或 Schema 时：

1. 读取 references/schema.md
2. 呈现完整的 Schema 结构及各字段说明
3. 解释三个维度及其核心作用：
   • design_system：可精确量化的指标 — 如具体的十六进制颜色值 (Hex)、像素大小 (px)、rem 缩放比例
   • design_style：感官体验与直觉 — 氛围感、个性特质、构图策略
   • visual_effects：能直观看到但无法仅凭 CSS 表达的复杂效果 — WebGL 场景、粒子系统、Shader 形变特效、滚动驱动动画
4. 询问用户是否需要自定义或扩展任何维度

Phase 2: Analyze — 从参考案例中提取 DNA

当用户提供代表目标设计风格的图片、截图或参考链接时：

1. 读取 references/schema.md 获取完整字段列表
2. 针对提供的每个参考对象：
   • 若为图片/截图：直接分析其视觉属性
   • 若为 URL：抓取并分析页面的视觉设计
3. 针对 Schema 中的每一个字段，从参考对象中提取或推断相应数值/属性
4. 当多个参考对象存在冲突时，记录主导模式并注明变体样式
5. 输出一份完整的 Design DNA JSON — 确保每个字段都有内容填入，不留空字符串
6. 输出完毕后，询问："在用这份 DNA 生成设计之前，需要调整哪些数值吗？"

各维度的具体分析方法：

维度 1: design_system

• color（颜色）：通过视觉采样提取主导配色。按面积占比确定主色（Primary），按辅助作用确定副色（Secondary），按 CTA 按钮使用情况确定强调色（Accent）。从最浅背景到最深文字映射出中性色阶。
• typography（排版）：通过视觉特征识别字体族（几何体、人文主义体、衬线体等）。根据标题/正文的字号关系推算字阶比例。
• spacing（间距）：根据元素间的紧密程度评估密度。通过区块间距的一致性测量版面节奏。
• layout（布局）：通过内容对齐模式识别栅格系统。记录最大宽度、列数及不对称性。
• shape（形状）：通过对比元素高度来测量圆角半径（border-radius）。记录边框和分割线的使用情况。
• elevation（层级/阴影）：归类阴影的柔和度、扩散范围及叠加层级处理。
• motion（动效）：若可观测（视频/交互动态），记录缓动曲线（Easing）与持续时间的手感。

维度 2: design_style

• 综合梳理整体印象 — 氛围感、个性特质、构图策略
• 对标类型原型（如 SaaS 风格、杂志排版风、荒谬主义/Brutalism 等）
• 记录装饰元素丰富度与留白哲学

维度 3: visual_effects

• 代码层面：检测是否存在 <canvas>、WebGL 上下文、Three.js/Pixi.js 引入、GSAP/Lottie 使用、自定义 Shader、IntersectionObserver 滚动触发器、SVG <animate> 元素
• 截图层面：描述超越标准 CSS 的可见特效 — 发光粒子、3D 模型渲染、噪声纹理、渐变动画、视差深度、光标拖尾、文本扭曲、毛玻璃质感等。若无法判断确切实现方式，在 composite_notes 中进行标注说明。
• 视频/交互演示层面：记录滚动行为、悬停扭曲、过渡动画编排、加载序列
• 针对参考案例中未出现的特效分类，将 enabled 设为 false
• 根据观察到的实际效果，评估并给出 overview.effect_intensity（特效强度）和 overview.performance_tier（性能等级）的评级

Phase 3: Generate — 将 DNA 应用到具体内容

当用户提供 DNA JSON 和需要设计的具体内容时：

1. 读取 references/generation-guide.md
2. 解析 DNA JSON，提取涵盖三个维度的所有 Token
3. 基于 design_system 的数值构建 CSS 自定义属性（CSS Variables）
4. 应用 design_style 的主观字段来指导设计决策
5. 当设计需要素材或源文件时，尽量直接从原始来源获取。如果用户提供了 URL，直接从该 URL 提取真实素材，而不是重新制作、近似替代或自行替换。
6. 使用合适的技术栈实现 visual_effects：
   • 轻量级特效 → CSS 动画、SVG、原生 JS
   • 中量级特效 → Canvas 2D、GSAP、Lottie
   • 重量级特效 → Three.js、自定义 GLSL Shader、Pixi.js
7. 生成设计成果（默认形式：包含内联 CSS/JS 的单文件 HTML）
8. 对照生成指南完成质量检查

如果用户仅提供了内容而没有 DNA JSON，询问是否需要：

• 先分析参考对象（进入 Phase 2）
• 使用描述的风格（从文字描述中提取 DNA，再进行生成）

阶段组合（Phase Combinations）

用户可能会触发以下任意组合：

• 仅 Phase 1："展示设计结构/Schema"
• 仅 Phase 2："分析这个设计"（附带图片/链接）
• Phase 2 → 3："分析这个设计，并用同款风格给我做个 Landing Page"
• Phase 1 → 2 → 3：完整流水线
• 仅 Phase 3：用户已手握 DNA JSON

根据上下文识别所需的阶段并相应执行。