design-dna

Design DNA

提取、结构化并套用设计识别（Design Identity）的三阶段工作流程，涵盖三大维度：

1. Design System（设计系统） — 可量化的 Tokens（色彩、字体排印、间距、版型布局、形状、层级 Elevation、动态微交互、组件）
2. Design Style（设计风格） — 定性感受/感性认知（氛围 Mood、视觉语言、构图策略、影像风格、互动手感、品牌语气）
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 色码、Pixel 尺寸、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. 输出完毕后询问："在拿去生成设计前，有需要调整任何数值吗？"

各维度分析方法：

Dimension 1: design_system

• color：透过视觉取样提取主导配色。依面积占比确定主色（Primary），依辅助角色确定副色（Secondary），依 CTA 用途确定强调色（Accent）。参照最亮背景至最深文字来对齐中性色阶。
• typography：透过视觉特征识别字体系列（几何型、人文主义型、衬线体分类等）。从标题/内文的字级关系推导比例关系。
• spacing：透过组件间距紧密程度评估密度。透过区段间距的一致性测量节奏感。
• layout：透过内容对齐模式识别网格系统。记录最大宽度（max-width）、栏数（column count）及非对称性。
• shape：比对组件高度测量圆角半径（border-radius）。记录外框线与分割线的使用情况。
• elevation：分类阴影的柔和度、扩散范围与层叠方式。
• motion：若可观察（影片/互动展示），记录缓动曲线（easing curves）与时长感。

Dimension 2: design_style

• 综合整理整体印象 — 氛围、个性性格、构图策略
• 比对主流风格原型（SaaS 软件、杂志刊物 Editorial、新丑风 Brutalism 等）
• 记录装饰丰富度与留白哲学

Dimension 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 并提取三大维度下的所有 Tokens
3. 根据 design_system 的数值建置 CSS 自订属性（CSS Custom Properties / 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

请从上下文判断所需的阶段并相应执行。