design-dna

Design DNA

一个分为 3 个阶段的工作流，用于提取、构建并应用三个维度的设计身份：

1. 设计系统 — 可测量的令牌（颜色、排版、间距、布局、形状、层级、动效、组件）
2. 设计风格 — 定性的感知（氛围、视觉语言、构图、图像、交互感受、品牌语气）
3. 视觉效果 — 特殊渲染（Canvas、WebGL、3D、粒子、着色器、滚动效果、光标效果、SVG 动画、玻璃拟态等）

阶段

阶段 1：构建结构 — 输出架构

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

1. 阅读 references/schema.md
2. 呈现完整架构及字段说明
3. 说明三个维度及其作用：
   • design_system：可测量的内容 — 精确的十六进制值、像素尺寸、rem 比例
   • design_style：可感受的内容 — 氛围、个性、构图策略
   • visual_effects：可见但无法仅用 CSS 表达的内容 — WebGL 场景、粒子系统、着色器扭曲、滚动驱动动画
4. 询问用户是否要自定义或扩展任何维度

阶段 2：分析 — 从参考资料中提取 DNA

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

1. 阅读 references/schema.md，了解完整字段列表
2. 对于每份参考资料：
   • 如果是图像/截图：先运行确定性的颜色测量（见下文），然后直接分析其余视觉属性
   • 如果是 URL：获取页面并分析其视觉设计
3. 从参考资料中提取或推断架构中的每个字段值
4. 当多份参考资料存在冲突时，指出占主导地位的模式并提及不同变体
5. 输出完整的 Design DNA JSON — 填写每个字段，不留空字符串
6. 输出后询问：“使用这些值进行生成前，要调整任何值吗？”

各维度的分析方法：

维度 1：design_system

• color：不要凭肉眼估算十六进制值 — 感知到的颜色会偏向熟悉的默认调色板（偏差 ΔE 往往达到 10 以上）。参考资料是图像文件时，应进行测量。将 SKILL_ROOT 解析为包含此 SKILL.md 的绝对目录；绝不要假设当前项目目录包含该技能的 scripts/ 文件夹。为参考资料和输出使用绝对路径，并为每份参考资料保留一个名称唯一的测量文件：

  npm install --prefix "$SKILL_ROOT/scripts" --silent
  node "$SKILL_ROOT/scripts/measure-colors.mjs" "$REFERENCE_IMAGE" > "$MEASUREMENT_JSON"
  

  在 DNA JSON 中逐字使用测得的十六进制值：将 background 角色映射到 surface.background；将 text 映射到与测得背景形成对比的 neutral.scale 端值，并在 neutral.usage 中记录此前景色的用途；将 accent 映射到 accent.hex。将测得的调色板及其 measurement 配置分别保存在 design_system.color.measured_palette 和 design_system.color.measurement 中，以便验证时复用相同的聚类配置。覆盖率值为 0 到 1 之间的分数。只有在无法测量时（例如只有 URL 的参考资料无法截图），才改为视觉采样。根据语义角色选择主色和次色，使用强调色突出 CTA，并始终按从最浅到最深的顺序排列中性色阶，不受主题影响。
• typography：根据视觉特征识别字体族（几何风格、人文主义风格、衬线类别）。根据标题与正文的字号关系估算比例。
• spacing：根据元素间距评估疏密度。通过各区块间距的一致性判断节奏。
• layout：根据内容对齐模式识别网格。注明最大宽度、列数和不对称布局。
• shape：通过与元素高度对比来测量圆角半径。注明边框和分隔线的使用情况。
• elevation：判断阴影的柔和度、扩散程度和层叠方式。
• motion：如果可观察到（视频/交互），注明缓动曲线和时长感受。

维度 2：design_style

• 综合整体印象——氛围、个性、构图策略
• 与类型原型（SaaS、编辑风、粗野主义等）进行比较
• 记录装饰程度和留白理念

维度 3：visual_effects

• 从代码分析：检查 <canvas>、WebGL contexts、Three.js/Pixi.js imports、GSAP/Lottie 用法、自定义 shaders、IntersectionObserver 滚动触发器、SVG <animate> 元素
• 从截图分析：描述超出标准 CSS 范畴的可见效果——发光粒子、3D 对象渲染、噪点纹理、渐变动画、视差深度、光标轨迹、文字扭曲、玻璃拟态表面。如果无法确定具体实现方式，请将这些内容记录在 composite_notes 中。
• 从视频/交互演示分析：记录滚动行为、悬停扭曲、转场编排、加载序列
• 对参考中不存在的任何效果类别，设置 enabled: false
• 根据观察结果评定 overview.effect_intensity 和 overview.performance_tier

阶段 3：生成——将设计 DNA 应用于内容

用户提供 DNA JSON 和待设计内容时：

1. 阅读 references/generation-guide.md
2. 解析 DNA JSON，并提取三个维度中的所有令牌
3. 根据 design_system 值构建 CSS 自定义属性
4. 根据 design_style 定性字段指导主观设计决策
5. 设计需要素材或源文件时，尽可能从原始来源获取。如果用户提供了 URL，应从该 URL 获取真实素材，而不是重新制作、近似还原或替换。
6. 使用适当的技术实现 visual_effects：
   • 轻量效果 → CSS 动画、SVG、原生 JS
   • 中等效果 → Canvas 2D、GSAP、Lottie
   • 重型效果 → Three.js、自定义 GLSL shaders、Pixi.js
7. 生成设计输出（默认：包含内联 CSS/JS 的独立 HTML）
8. 执行生成指南中的质量检查
9. 验证（当 DNA 包含测量过的调色板时）：如果当前 Design DNA JSON 尚未保存为文件，则将其保存；截取生成结果的屏幕截图，然后根据该 DNA 文件进行评分。从此 SKILL.md 解析 SKILL_ROOT，并使用绝对路径；不要假定名为 measured-colors.json 的临时文件存在：

   node "$SKILL_ROOT/scripts/verify.mjs" "$IMPLEMENTATION_SCREENSHOT" "$DESIGN_DNA_JSON"
   

   如果测量 JSON 是唯一已持久化的产物，则可以用独立测量 JSON 代替 DNA 文件。对于多个图像参考，请分别根据每个参考的测量结果进行验证。报告会提供每种颜色的 ΔE 和覆盖率偏差，并列出 PASS/FAIL 阈值。如果未通过，请修正不符合要求的颜色并重新验证，而不是让用户凭肉眼判断相似度。

如果用户只提供内容而未提供 DNA JSON，询问他们是否要：

• 先分析参考（转到阶段 2）
• 使用描述的风格（从描述中提取 DNA，然后生成）

阶段组合

用户可以调用任意组合：

• 仅阶段 1：“向我展示设计结构/架构”
• 仅阶段 2：“分析此设计”（附带图片/链接）
• 阶段 2 → 3：“分析此设计，并以相同风格为我制作一个着陆页”
• 阶段 1 → 2 → 3：完整流程
• 仅阶段 3：用户已经有 DNA JSON

根据上下文判断所需阶段，并相应执行。