design-clone

Design Clone — Design DNA 提取 × 像素级克隆

你被调用来处理 $ARGUMENTS：可能是提取一份结构化的三维设计画像（Design DNA JSON），可能是完整克隆一个网站的源码，也可能两者都要。

这份 skill 提供两项核心能力：

• 精确提取：用 Browser MCP 注入 JS，通过 getComputedStyle() 读取像素级精确 CSS 值，零猜测
• 结构化表达：用三维 schema（150+ 字段）把提取到的原始值归类成可复用的设计画像

📖 参考：references/schema.md — 三维 schema 完整字段定义；references/generation-guide.md — DNA JSON → 代码的映射规则。

开始时告诉用户： "I'm using the design-clone skill to extract a Design DNA profile [and clone the site]."

---

模式识别（必须首先做）

解析 $ARGUMENTS，识别两类信息：

1. 模式标志
   • 出现 --dna-only → 仅提取设计数据，执行 Phase 0–3 即完成
   • 出现 --full 或没有标志 → 完整克隆，执行 Phase 0–6
2. URL 列表：剩余参数都是 URL。规范化、验证可访问。

多 URL 处理：

• --dna-only 多 URL：询问用户是并行处理输出多份 DNA，还是合并为一份 DNA（识别主导模式并标注差异）
• --full 多 URL：每个站点独立处理，产物隔离到 docs/research/<hostname>/

把识别结果作为首条状态输出给用户：

Mode: --dna-only
Targets: [url1, url2]
Merge strategy: combine into one DNA (dominant pattern + variants)

---

两种模式的执行路径

/design-clone --dna-only <url>          /design-clone --full <url>（或省略标志）

Phase 0: Pre-Flight (精简版)            Phase 0: Pre-Flight (完整版)
   ↓                                       ↓
Phase 1: Reconnaissance                  Phase 1: Reconnaissance
   ↓                                       ↓
Phase 2: Foundation (仅提取,不写入)       Phase 2: Foundation Build
   ↓                                       ↓
Phase 3: DNA Extraction                  Phase 3: DNA Extraction
   ↓                                       ↓
✅ 输出 design-dna.json 完成              Phase 4: Component Spec & Dispatch
                                            ↓
                                         Phase 5: Page Assembly
                                            ↓
                                         Phase 6: Visual QA
                                            ↓
                                         ✅ 输出 DNA JSON + 克隆源码

核心原则： --dna-only 模式跑同样的 JS 提取脚本获取精确数据，但数据流向 DNA JSON，而非写入 Next.js 项目。Phase 1 两种模式完全一样——DNA 的第一维和第三维都依赖 Phase 1 的精确数据和交互行为记录。