howone 0.1.52 → 0.1.53

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "howone",
-  "version": "0.1.52",
+  "version": "0.1.53",
   "private": false,
   "description": "HowOne command line tools for creating app templates.",
   "type": "module",

package/templates/vite/.howone/skills/web-clone/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Jane (@xiaoerzhan / 小耳)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/templates/vite/.howone/skills/web-clone/README.md

@@ -0,0 +1,179 @@
+# 🪞 Web Clone · 网站复刻方法论
+
+> Reproduce any website — from a single-file static page to a WebGL-heavy interactive demo — without faking it from AI hallucinations.
+> 把任何一个网站(从单文件静态页到 WebGL 重前端 demo)忠实复刻出来 —— 不靠 AI 臆测代码硬抄。
+
+**English** · [中文](#中文)
+
+---
+
+## What this skill does
+
+You see a website you love. You want to clone it — to learn how it works, to remix it into your own thing, or to run it offline. AI tools love to produce *plausible-looking* "clone analysis" documents full of code blocks that are entirely fabricated and break the moment you run them.
+
+This skill is a **methodology plus executable probes that put real source first**, with a 6-step decision tree covering:
+
+- Static HTML/CSS sites → `wget --mirror`
+- React / Vue / Next content sites → rebuild on a template
+- Multi-page sites → crawl internal routes before designing templates
+- Interactive sites → record hover / click / scroll / canvas-drag states before cloning
+- **WebGL / Canvas / Three.js heavy frontends** → reverse-engineer real source, line by line; when there's no findable source, runtime frame-capture + a **baseline-first replay gate** with `SOURCE / PARTIAL / GUESS` evidence grading
+- **Static-built sites (Astro / Vite SSG / Hugo), even WebGL-heavy** → `mirror-site.mjs` full-scroll-captures and mirrors every deployed asset (incl. runtime-fetched `.sog/.buf/.wasm`) for a true 1:1 clone — for a static site, "get the real source" = "mirror the whole deployed bundle"
+- Verify in a real browser, document the truth, replace content with yours
+- **Visual / rebrand modes** → distill a versionable `design-dna.json` (design tokens + style + effects), then "keep the DNA, swap the content"
+
+## Iron rule: real source first, never copy AI-guessed code
+
+> Any AI-written "clone analysis" — treat the conceptual skeleton as a hint, but **assume every executable code block is hallucinated** until you've verified it against real source code line by line.
+
+**Case in point** (see `references/marbles-case.md`): A real WebGL marbles demo uses **analytic ray-sphere intersection** + an SVG `feDisplacementMap` to refract the live DOM. An AI analysis confidently described it as **ray-marching + SDF + sampling the DOM as a texture** — two entirely different implementations. Copying the AI version produces nothing like the original and runs many times slower.
+
+So **step 1 is always: get the real source**.
+
+## What's in here
+
+```
+claude-skill-web-clone/
+├── SKILL.md                       ← The methodology (loaded by Claude Code / Codex / Cursor)
+├── README.md
+├── LICENSE                         ← MIT
+├── follow-wechat-qrcode.jpg
+└── references/
+    ├── reverse-engineering.md     ← How to dissect a WebGL/Canvas frontend, line by line
+    ├── effect-extraction.md       ← Evidence grading + baseline-first gate for extracting effects
+    ├── static-mirror.md           ← 1:1 clone of static-built sites (Astro/Vite SSG/Hugo) via full asset mirror
+    ├── design-dna.md              ← Structured design-identity layer (visual / rebrand modes)
+    ├── marbles-case.md            ← Flagship case: real architecture vs AI hallucination
+    └── deliverables.md            ← NOTES.md / TEARDOWN.md / RECON/ templates
+└── scripts/
+    ├── recon-site.mjs             ← Browser screenshots + DOM/framework/resource signals
+    ├── mirror-site.mjs            ← Full-scroll capture + mirror every same-origin asset (static-site 1:1 clone)
+    ├── route-crawl.mjs            ← Same-site route map + screenshot per route
+    ├── interaction-probe.mjs      ← Scroll/hover/click/canvas-drag state evidence
+    ├── network-capture.mjs        ← XHR/fetch capture for SPA fixtures
+    ├── asset-harvest.mjs          ← Download discovered source assets
+    ├── dna-scaffold.mjs           ← Build a design-dna.json skeleton, prefilled from recon
+    └── visual-diff.mjs            ← Pixel comparison for original vs clone screenshots
+```
+
+## Install
+
+This is a [Claude Code skill](https://docs.claude.com/en/docs/agents-and-tools/skills). Drop it into your skills directory:
+
+```bash
+git clone https://github.com/Jane-xiaoer/claude-skill-web-clone.git ~/.claude/skills/web-clone
+```
+
+Then use it by saying things like:
+- "复刻这个网站: https://..."
+- "Clone this site for me"
+- "Reverse-engineer this WebGL demo"
+- "把这个站抄下来改成我的"
+
+Claude / Codex will load `SKILL.md` and walk the decision tree.
+
+## The decision tree (one-screen summary)
+
+| Step | What to do |
+|---|---|
+| **1** | `gh api search/repositories?q=<name>` — find the real source on GitHub FIRST |
+| **2** | If no source: browser-probe the site, crawl routes, capture network, and probe interactions |
+| **3** | Pick the path: `wget` mirror / template rebuild / **WebGL reverse-engineering** / theme market |
+| **4** | Set up `~/projects/website-clones/<name>-clone/` (or your equivalent), keep `index-original.html` read-only |
+| **5** | Strip tracking, write `NOTES.md` + `TEARDOWN.md`, verify in a real browser with screenshots |
+| **6** | Replace text / media / brand colors with yours |
+
+## License & attribution discipline
+
+Before deploying anything publicly, **check the source repo's license**:
+
+| License | What you can do |
+|---|---|
+| MIT / Apache / BSD / Unlicense | Modify, redeploy, just keep credits |
+| **NONE / unstated** | Default = **All Rights Reserved**. Local learning only, must credit, **do not redeploy publicly without permission** |
+| Proprietary / explicitly forbidden | Read-only learning, no copying, no deployment |
+
+⚠️ "Code is on GitHub" ≠ "code is MIT". Many viral demos have no LICENSE file and default to All Rights Reserved.
+
+## Flagship case
+
+`marbles-case.md` documents the full reverse-engineering of [chiuhans111/marbles](https://github.com/chiuhans111/marbles) — a 1067-line single-file WebGL + SVG-filter glass marbles interactive demo — and contrasts the real architecture with an AI-generated clone analysis that got the core mechanism completely backwards. This is the canonical example of why you must verify against real source.
+
+---
+
+## 中文
+
+### 这个 skill 是干什么的
+
+你看到一个喜欢的网站,想复刻 —— 学它怎么做、改成你自己的版本、或者离线跑起来。AI 工具最爱产出**看起来煞有其事**的"复刻分析文档",里面的代码块几乎全是臆造的,照抄必崩。
+
+这个 skill 把"真源码至上"做成可重复的流程,**6 步决策树**覆盖三大分支:
+- 静态 HTML/CSS 站 → `wget --mirror`
+- React / Vue / Next 内容站 → 重建模板灌内容
+- **WebGL / Canvas / Three.js 重前端** → 逆向真源码,逐行核对;找不到源码时用运行时帧捕获 + **baseline-first 复现闸门** + `SOURCE/PARTIAL/GUESS` 证据分级
+- **静态构建站(Astro/Vite SSG/Hugo),哪怕重 WebGL** → `mirror-site.mjs` 全程滚动捕获 + 镜像每一个部署资产(含运行时 fetch 的 `.sog/.buf/.wasm`),做真 1:1 忠实复刻——对静态站,"拿到真源码"="镜像部署资产整套"(范例:Lusion oryzo.ai,高斯泼溅,hero 像素 diff 5/5)
+- **视觉复刻 / 内容爆改模式** → 把"那个站的感觉"蒸馏成可版本化的 `design-dna.json`(设计 token + 风格 + 特效),然后"DNA 留着、内容换掉"
+- 浏览器真验证,如实记录,最后替换成你自己的内容
+
+### 头号铁律:真源码至上,绝不抄 AI 臆造代码
+
+> 任何 AI 写的"复刻分析",**概念骨架可以参考,但里面的可执行代码块默认全是臆造的**,必须用真源码核对,否则照抄必崩。
+
+**实证案例**:一份 AI 分析文档把原站"解析法求光线-球体交点 + 把光学结果编码成位移图 + 交给 SVG `feDisplacementMap` 扭曲真实 DOM"的真架构,臆造成了"ray-marching + SDF + 把 DOM 当纹理采样"—— 两套完全不同的实现,照抄做不出原效果且慢 N 倍。详见 `references/marbles-case.md`。
+
+### 安装
+
+这是一个 [Claude Code skill](https://docs.claude.com/en/docs/agents-and-tools/skills)。clone 到你的 skills 目录:
+
+```bash
+git clone https://github.com/Jane-xiaoer/claude-skill-web-clone.git ~/.claude/skills/web-clone
+```
+
+然后跟 Claude / Codex / Cursor 说:
+- 「复刻这个网站: https://...」
+- 「把这个站抄下来改成我的」
+- 「逆向拆解这个 WebGL demo」
+
+AI 会自动加载 `SKILL.md` 走决策树。
+
+### 旗舰范例
+
+`references/marbles-case.md` 拆解了 [chiuhans111/marbles](https://github.com/chiuhans111/marbles) —— 1067 行单文件 WebGL + SVG filter 玻璃弹珠站,真架构对比 AI 分析文档的错误,是"为什么必须真源码核对"的标准教材。
+
+---
+
+## 致谢 / Credits
+
+- **方法论沉淀来源 / Origin**:Jane 的克隆中枢 `~/projects/website-clones/` 工作流(2026-05-27 marbles 案例跑通后抽出 skill)
+- **旗舰范例原作 / Flagship case author**:[chiuhans111/marbles](https://github.com/chiuhans111/marbles) by Hans Chiu — 没有这份单文件 1067 行的玻璃弹珠源码就没有这个 skill 的"真源码至上"铁律
+- **设计身份层 schema / Design-DNA schema**:`references/design-dna.md` 的三维 DNA JSON 改编自 [zanwei/design-dna](https://github.com/zanwei/design-dna)（MIT），用于"视觉复刻 / 内容爆改"模式
+- **特效提取纪律 / Effect-extraction discipline**:`references/effect-extraction.md` 的证据分级 + baseline-first 闸门受 [lixiaolin94/skills · web-shader-extractor](https://github.com/lixiaolin94/skills) 启发（该仓库无 LICENSE，本 skill 只借方法概念、用自己的话重写，未复制其代码或原文）
+- **迭代打磨 / Iteration**:Jane(`@xiaoerzhan`) + Claude Code(多轮 reverse-engineering)
+
+---
+
+## License
+
+MIT. Use it freely, remix it, ship it. Attribution welcome but not required.
+
+如果这个 skill 让你免于在 AI 臆造代码上浪费一个下午,欢迎 ⭐ 这个仓库。
+If this skill saves you a frustrating afternoon of debugging fake AI code, ⭐ the repo.
+
+---
+
+## 📱 关注作者 / Follow Me
+
+如果这个仓库对你有帮助,欢迎关注我。后面我会持续更新更多 AI Skill、设计方法、网站美学和创意工作流。
+
+If this repo helped you, follow me for more AI skills, design systems, web aesthetics, and creative workflows.
+
+- X (Twitter): [@xiaoerzhan](https://x.com/xiaoerzhan)
+- 微信公众号 / WeChat Official Account: 扫码关注 / Scan to follow
+
+<p align="center">
+  <img src="./follow-wechat-qrcode.jpg" alt="Jane WeChat Official Account QR code" width="300" />
+</p>
+
+<p align="center"><strong>中文:</strong>欢迎关注我的公众号,一起研究 AI Skill、设计原则、网站表达和创意工作流。</p>
+
+<p align="center"><strong>English:</strong> Follow my WeChat Official Account for more AI skills, design principles, web aesthetics, and creative workflows.</p>

package/templates/vite/.howone/skills/web-clone/SKILL.md

@@ -0,0 +1,243 @@
+---
+name: web-clone
+description: >
+  网站复刻 / 克隆方法论。USE WHEN 用户说 复刻网站、克隆网站、clone website、抄个站、仿站、
+  照着这个站做一个、reproduce site、还原某个网页效果、把这个站搬下来改成我的、
+  复刻某个交互/WebGL/Canvas/Three.js 效果。提供「先拿真源码 → 判路径 → 逆向拆解 →
+  搭工程 → 替换内容」的可移植决策树，覆盖静态站 / React-Vue-Next 内容站 /
+  WebGL-Canvas 重前端站三大分支，并强制核对任何 AI 二手分析里的可执行代码。
+metadata:
+  author: jane (xiaoer)
+  version: "1.6.0"
+  use_case: 个人本地复刻/学习网站，沉淀自 website-clones 克隆中枢
+---
+
+# Web Clone · 网站复刻方法论
+
+把"复刻一个网站"做成可重复的流程。配套工程区：`~/projects/website-clones/`（每个复刻是一个子目录）。
+
+## 头号铁律：真源码至上，绝不信 AI 推测的代码
+
+> 任何 AI 生成的"复刻分析/施工图"，**正文的概念骨架可以参考，但里面的可执行代码块默认全是臆造的**，必须逐行用真源码核对，否则照抄必崩。
+
+**实证（marbles 案例）**：一份 AI 分析文档把原站"解析法求光线-球体交点 + 把光学结果编码成位移图、交给 SVG `feDisplacementMap` 去扭曲真实 DOM"的真架构，臆造成了"ray-marching + SDF + 把 DOM 当纹理采样"——两套完全不同的实现，照抄做不出原效果且慢 N 倍。详见 `references/marbles-case.md`。
+
+所以第一动作永远是：**拿到真源码**。
+
+## 决策树（按顺序走，不许跳）
+
+### Step 0 · 先建标准工程骨架
+
+```bash
+node /Users/work/create-x-studio/.agents/skills/web-clone/scripts/init-clone.mjs <站名> --url <原站URL>
+```
+
+该脚本会创建 `~/projects/website-clones/<站名>-clone/`、`NOTES.md`、`RECON/screenshots/`，避免每次手工漏掉产物。
+
+### Step 1 · 先去 GitHub 搜源码，别急着抓站
+
+```bash
+unset SSL_CERT_FILE   # macOS 怪癖，bash 前先解
+# 按站名/产品名搜
+SSL_CERT_FILE=/etc/ssl/cert.pem gh api "search/repositories?q=<关键词>" \
+  | jq -r '.items[] | "\(.full_name) ⭐\(.stargazers_count) \(.description)"' | head -10
+# vercel.app/netlify.app/github.io 的 URL slug 常常就是 仓库名 / 部署者用户名
+```
+- 单文件站（github.io / 纯 HTML）→ 直接抓 raw：`curl -sL https://raw.githubusercontent.com/<user>/<repo>/main/index.html`
+- **找到源码且许可允许 → 跳 Step 4 直接 clone。** 教训：先搜 GitHub 能省 30 分钟弯路。
+
+### Step 2 · 没找到源码 → 浏览器侦察（探针）
+
+加载 `Browser` skill 或 playwright MCP，跑探针抽信号（框架 / `window.THREE` / canvas 数 / 平滑滚动库 / 字体 / scrollHeight）。截图 1440/768/390 三档 + 侦察 JSON 存 `<站>/RECON/`。
+
+优先用内置脚本跑标准侦察：
+
+```bash
+node /Users/work/create-x-studio/.agents/skills/web-clone/scripts/recon-site.mjs \
+  --url <原站URL> \
+  --out ~/projects/website-clones/<站名>-clone/RECON \
+  --label original
+
+node /Users/work/create-x-studio/.agents/skills/web-clone/scripts/asset-harvest.mjs \
+  --recon ~/projects/website-clones/<站名>-clone/RECON/original-recon.json \
+  --out ~/projects/website-clones/<站名>-clone/assets/original \
+  --manifest ~/projects/website-clones/<站名>-clone/RECON/asset-manifest.json
+
+node /Users/work/create-x-studio/.agents/skills/web-clone/scripts/network-capture.mjs \
+  --url <原站URL> \
+  --out ~/projects/website-clones/<站名>-clone/RECON/network \
+  --label original
+
+node /Users/work/create-x-studio/.agents/skills/web-clone/scripts/route-crawl.mjs \
+  --url <原站URL> \
+  --out ~/projects/website-clones/<站名>-clone/RECON/routes \
+  --label original \
+  --max-pages 25 \
+  --max-depth 2
+
+node /Users/work/create-x-studio/.agents/skills/web-clone/scripts/interaction-probe.mjs \
+  --url <原站URL> \
+  --out ~/projects/website-clones/<站名>-clone/RECON/interactions \
+  --label original
+
+node /Users/work/create-x-studio/.agents/skills/web-clone/scripts/sourcemap-hunt.mjs \
+  --recon ~/projects/website-clones/<站名>-clone/RECON/original-recon.json \
+  --out ~/projects/website-clones/<站名>-clone/RECON/sourcemaps
+```
+
+> 登录态私域站才用 `bb-browser`；localhost / 无登录公开站用 `Browser` skill 或 playwright（别动 bb-browser，会抢 Brave）。
+
+### Step 2.5 · 先给复杂度定级，别盲目承诺
+
+根据侦察结果先写一版"复刻前预判"：复杂度 L1-L6、推荐模式（忠实复刻 / 视觉复刻 / 内容爆改）、预计可还原范围、明确不克隆的部分。分级和评分规则见 `references/assessment.md`。
+
+**若模式是「视觉复刻」或「内容爆改」** → 顺手产出结构化设计身份 `design-dna.json`，把"那个站的感觉"变成可版本化、可对照的 token 规范，让 Step 6 替换时"DNA 留着、内容换掉"有据可依：
+
+```bash
+node /Users/work/create-x-studio/.agents/skills/web-clone/scripts/dna-scaffold.mjs \
+  --recon ~/projects/website-clones/<站名>-clone/RECON/original-recon.json \
+  --out   ~/projects/website-clones/<站名>-clone/RECON/design-dna.json \
+  --name  "<站名>"
+```
+
+脚本会把侦察到的字体/色候选/框架特效信号 best-effort 预填，其余字段人工 Analyze 补全。三维结构（design_system / design_style / visual_effects）、完整 schema、适用边界见 `references/design-dna.md`。
+> ⚠️ **「忠实复刻」分支不要用 DNA**：真源码就是真相，别让"近似风格"的 DNA 稀释逐字节铁律。
+
+### Step 3 · 按侦察结果选路径
+
+| 侦察结果 | 走哪条路 |
+|---|---|
+| 静态 HTML/CSS，无框架 | `wget --mirror` 抓镜像 → 删追踪脚本 → 改文案 |
+| React / Vue / Next（内容为主） | 重建模板（如 `ai-website-cloner-template`，Node 24+），灌内容 |
+| SPA / SaaS / 数据驱动页面 | 先跑 `network-capture.mjs` 保存 API fixtures → 本地 JSON/mock server 替身 |
+| 多页面官网 / 产品站 | 先跑 `route-crawl.mjs` 做路由地图 → 每类页面抽模板 → 统一替换内容 |
+| 复杂交互站 | 先跑 `interaction-probe.mjs` 记录 hover/click/scroll/canvas drag 状态 → 按状态补交互，不许只截首屏 |
+| **WebGL / Canvas / Three.js 重前端** | **深度逆向真源码（见下）→ 忠实复刻 或 找同类开源 3D 模板换内容**。单文件原生站常常逐字节保留=最忠实复刻。**找不到真源码时走运行时帧捕获 + baseline 闸门**，纪律见 `references/effect-extraction.md`（可委托 web-shader-extractor） |
+| **静态构建站（Astro/Vite SSG/Hugo），含重 WebGL** | **`mirror-site.mjs` 全量镜像部署资产 → 自托管字体 + 删追踪 → 本地 web 根服务 = 真源码 1:1 忠实复刻**。对静态站，"拿到真源码"="镜像部署资产整套"。配方见 `references/static-mirror.md`。范例：oryzo.ai（Lusion，L6，高斯泼溅，hero 像素 diff 5/5） |
+| 用现成开源主题的站（Astro/Hugo 主题） | 去对应主题市场找源主题（**仅限套用现成主题的站**；定制站走上一行的全量镜像，别来这行） |
+
+L4-L6 复杂站按 `references/complex-playbooks.md` 走，不要只用普通官网流程。
+
+### Step 4 · 在克隆中枢里搭工程
+
+```bash
+mkdir ~/projects/website-clones/<站名>-clone && cd $_
+# git 源码：clone 进来；单文件：放进来。原始源码留一份只读基准 index-original.html
+# 检查 Node 版本（package.json engines），nvm use 对应版本，钉 .nvmrc
+```
+
+### Step 5 · 删追踪 + 写元信息 + 验证
+
+- **删追踪**：Google Analytics（`gtag` / `googletagmanager`）、像素、热图——逐行精确切除（GA 块常在 `<head>` 顶部）。
+- **写 NOTES.md**（必须）：包含复杂度、复刻模式、原站 vs 克隆站对比、保真度评分、已知缺口。模板见 `references/deliverables.md`。
+- **复杂站写 TEARDOWN.md**（技术拆解）。所有结论标真源码行号。
+- **复刻后评分**：按 `references/assessment.md` 给结构 / 视觉 / 交互 / 响应式 / 内容替换 / 功能完整度打分。分数要能被截图、源码、运行结果支撑。
+- **浏览器真验证**（硬要求，不许只看代码就说"应该能跑"）：起本地服务器 → 浏览器打开 → 抓 console（不能有 JS/WebGL 编译错误）→ 截图对照原站。诚实记录验证不了的部分（如合成 PointerEvent `isTrusted=false` 触发不了拖拽，要如实写，别伪造"拖动成功"）。
+
+复刻完成后再跑一次克隆站侦察，并生成自动对比报告：
+
+```bash
+node /Users/work/create-x-studio/.agents/skills/web-clone/scripts/recon-site.mjs \
+  --url http://127.0.0.1:<端口>/ \
+  --out ~/projects/website-clones/<站名>-clone/RECON \
+  --label clone
+
+node /Users/work/create-x-studio/.agents/skills/web-clone/scripts/route-crawl.mjs \
+  --url http://127.0.0.1:<端口>/ \
+  --out ~/projects/website-clones/<站名>-clone/RECON/routes-clone \
+  --label clone \
+  --max-pages 25 \
+  --max-depth 2
+
+node /Users/work/create-x-studio/.agents/skills/web-clone/scripts/interaction-probe.mjs \
+  --url http://127.0.0.1:<端口>/ \
+  --out ~/projects/website-clones/<站名>-clone/RECON/interactions-clone \
+  --label clone
+
+node /Users/work/create-x-studio/.agents/skills/web-clone/scripts/compare-recon.mjs \
+  --original ~/projects/website-clones/<站名>-clone/RECON/original-recon.json \
+  --clone ~/projects/website-clones/<站名>-clone/RECON/clone-recon.json \
+  --visual-diff ~/projects/website-clones/<站名>-clone/RECON/visual-diff-1440.json \
+  --original-routes ~/projects/website-clones/<站名>-clone/RECON/routes/original-route-map.json \
+  --clone-routes ~/projects/website-clones/<站名>-clone/RECON/routes-clone/clone-route-map.json \
+  --original-interactions ~/projects/website-clones/<站名>-clone/RECON/interactions/original-interactions.json \
+  --clone-interactions ~/projects/website-clones/<站名>-clone/RECON/interactions-clone/clone-interactions.json \
+  --out ~/projects/website-clones/<站名>-clone/CLONE_REPORT.md
+
+node /Users/work/create-x-studio/.agents/skills/web-clone/scripts/visual-diff.mjs \
+  --original ~/projects/website-clones/<站名>-clone/RECON/screenshots/original-1440.png \
+  --clone ~/projects/website-clones/<站名>-clone/RECON/screenshots/clone-1440.png \
+  --out ~/projects/website-clones/<站名>-clone/RECON/visual-diff-1440.json \
+  --diff ~/projects/website-clones/<站名>-clone/RECON/screenshots/visual-diff-1440.png
+
+node /Users/work/create-x-studio/.agents/skills/web-clone/scripts/audit-clone.mjs \
+  --project ~/projects/website-clones/<站名>-clone \
+  --brand "<原站品牌名>" \
+  --out ~/projects/website-clones/<站名>-clone/CLONE_AUDIT.md
+```
+
+### Step 6 · 替换成 Jane 自己的东西
+
+目标永远是"做她自己的站"，不是搬一个一模一样的。替换三件套：文字（`index.html`/`data/*.json`/`content/*.md`）、媒体（`public`/`assets`）、品牌色（CSS 变量 / Tailwind theme）。结构非平凡就写 REPLACE_GUIDE.md。
+
+**做过 `design-dna.json`（视觉/爆改模式）的**：这一步就是它的兑现——**DNA 留着、内容换掉**。把 `design_system` 落成 CSS 自定义属性、按 `design_style` 做主观取舍、按 `visual_effects.effect_intensity` 选实现层级（lightweight CSS / medium Canvas+GSAP / heavy Three.js）；素材优先用 `asset-harvest.mjs` 取原站真图，别 AI 重绘近似。生成流程见 `references/design-dna.md`。
+
+## 逆向拆解 WebGL/Canvas 重前端（核心手艺）
+
+把交互站拆成**技术支柱**，逐柱定位真实实现 + 标行号：渲染（WebGL/着色器算法）、合成（SVG filter / 多 canvas / 后期）、物理、交互、音频。然后才去核对任何二手分析。
+
+**逆向特效时三件套纪律**（治"边抠边美化、最后既不像也说不清"）：
+1. **证据分级**：每条结论标 `SOURCE`（真源码/source-map/运行时 dump/帧捕获）、`PARTIAL`（名字/切片，待证）、`GUESS`（视觉拟合/魔数）。**未标=GUESS，照抄前必须升级到 SOURCE。**
+2. **no-compensation**：严禁靠调亮度/速度/位置/噪声去掩盖时序/坐标/状态错误；拟合值仍标 GUESS，写明要拿到什么证据才能升级。
+3. **baseline-first 闸门**：先用真实 draw call/shader/uniform 做"最小原样可复现 RAW REPLAY"→ 逐帧比对通过 → **才允许**重构工程化。
+详见 `references/effect-extraction.md`（含运行时捕获兜底 + 何时委托 web-shader-extractor）。
+
+**可迁移的高级范式**（值得攒着）：
+- **位移图折射 DOM**：离屏 WebGL 算出 RG=位移/B=菲涅尔的"位移图"，再用 SVG `<filter><feDisplacementMap scale=N>` 拿它去扭曲真实的、活的、可交互的 HTML——折射的是真 DOM，WebGL 全程不碰 DOM 像素。这是 marbles 的灵魂，也是 Three.js `MeshPhysicalMaterial(transmission)` 做不到的事（它只能做"玻璃球外观"，做不出"折射整个网页"）。
+
+详细方法 + marbles 真架构逐项拆解 → `references/reverse-engineering.md`、`references/marbles-case.md`。
+
+## 许可与署名（clone 前必查）
+
+```bash
+SSL_CERT_FILE=/etc/ssl/cert.pem gh api repos/<u>/<r> | jq '.license'  # + 找 LICENSE 文件 + 看 README
+```
+
+| 许可 | 能做什么 |
+|---|---|
+| MIT / Apache / BSD / Unlicense | 可改、可上线，保留致谢即可 |
+| **NONE（无 LICENSE 文件 / 未声明）** | **默认保留所有权利**。仅本地学习/复刻，须署名原作者，**未经许可不得公开重新部署**。别因为代码公开就当成可自由用 |
+| 专有 / 明确禁止 | 只读学习，不复制不部署 |
+
+⚠️ 别把"GitHub 上是公开的"或"gh api 一时查不到"等同于 MIT——核实到底。
+
+## 产物规范
+- 每个子项目根目录：`NOTES.md`（源信息/技术栈/license/替换地图/跑起来命令）
+- 复杂交互站追加：`TEARDOWN.md`（技术拆解，标行号）
+- 需要对外汇报或评估 skill 效果时追加：`CLONE_REPORT.md`（原站 vs 克隆站完整对比）
+- 上线前追加：`CLONE_AUDIT.md`（追踪脚本、原站品牌/语言残留、TODO、外链风险）
+- `RECON/screenshots/`：原站 vs 克隆对照图
+- 复刻完更新中枢 `README.md` 索引行
+
+## 内置脚本
+- `scripts/init-clone.mjs`：初始化克隆项目骨架和 `NOTES.md`。
+- `scripts/recon-site.mjs`：用 Playwright 打开页面，采集框架/资源/DOM 结构/console 错误，并保存三档截图。
+- `scripts/asset-harvest.mjs`：从侦察 JSON 下载原站图片、脚本、样式并生成素材清单。
+- `scripts/network-capture.mjs`：捕获 XHR/fetch 请求并保存 JSON/text 响应，给 SPA/SaaS 做本地 fixtures。
+- `scripts/mirror-site.mjs`：真浏览器全程滚动捕获每一个真实请求 → 按路径镜像同源资产（含 JS 运行时 fetch 的 `.sog/.buf/.wasm/.riv`/字体），给静态构建站（Astro/Vite SSG/Hugo）做 1:1 忠实复刻。详见 `references/static-mirror.md`。
+- `scripts/route-crawl.mjs`：爬同站内部链接，按路由保存截图、标题、H1、结构信号，解决多页面站只复刻首页的问题。
+- `scripts/interaction-probe.mjs`：自动执行 scroll、hover、安全 click、canvas drag，保存交互前后状态、截图、网络和 console 证据。
+- `scripts/sourcemap-hunt.mjs`：从 JS chunk 里找 source map，能拿到就保存源码映射。
+- `scripts/compare-recon.mjs`：读取原站与克隆站的侦察 JSON、路由图、交互证据，生成 `CLONE_REPORT.md`。
+- `scripts/visual-diff.mjs`：用浏览器 canvas 做截图像素差异，输出 visual score 和差异图。
+- `scripts/audit-clone.mjs`：扫描追踪脚本、原站品牌残留、日文残留、TODO、外部 URL 风险。
+- `scripts/dna-scaffold.mjs`：从侦察 JSON 生成 `design-dna.json` 设计身份骨架（字体/色候选/框架特效信号 best-effort 预填），给「视觉复刻 / 内容爆改」模式用。详见 `references/design-dna.md`。
+
+## 能力边界（默认口径）
+- **能高保真做**：静态营销页、企业官网、内容型 React/Vue/Next 前端、可直接拿到源码的动画站。
+- **能视觉还原但会简化**：CMS 后台数据、复杂滚动叙事、多端断点、WebGL/Canvas 特效、第三方嵌入。
+- **默认不承诺完整克隆**：登录、支付、下单、搜索推荐、权限系统、服务端业务逻辑、专有 API、受版权限制的素材。需要时只做可演示前端替身。
+- **内容爆改时**：优先保留原站的信息架构、节奏、动效和视觉语法，把文案、图片、品牌色、业务主张换成 Jane 自己的内容。
+
+## 旗舰案例
+`~/projects/website-clones/marbles-clone/` — 原生 WebGL + SVG Filter + 自研物理的玻璃弹珠站，逐字节忠实复刻 + 完整 TEARDOWN，是"WebGL 重前端分支"的范例。

package/templates/vite/.howone/skills/web-clone/references/assessment.md

@@ -0,0 +1,77 @@
+# 复杂度分级与复刻评分
+
+用于复刻前预判、复刻后验收，以及向 Jane 解释"这个站能克隆到什么程度"。
+
+## 复刻模式
+
+| 模式 | 目标 | 适用场景 |
+|---|---|---|
+| 忠实复刻 | 尽量保留原源码 / 原布局 / 原交互 | 找到合法源码、单文件站、学习复杂前端技法 |
+| 视觉复刻 | 外观看起来接近，内部实现可替换 | 无源码、商业官网、内容站、组件化重建 |
+| 内容爆改 | 保留原站节奏和视觉语法，换成 Jane 的业务内容 | 把参考站改成自己的站、品牌页、产品介绍 |
+| 技术拆解 | 不急着重建，先确认真实实现 | WebGL/Canvas/复杂交互、AI 分析互相矛盾 |
+
+## 复杂度 L1-L6
+
+| 等级 | 类型 | 典型信号 | 通常可还原度 | 默认边界 |
+|---|---|---|---|---|
+| L1 | 静态 HTML/CSS | 少量 JS、无框架、页面数少 | 90-98% | 可接近像素级，素材版权另算 |
+| L2 | CMS/企业内容站 | 多页面、CMS 生成、表单/新闻/地区站 | 70-90% | 前台可还原，CMS 后台不克隆 |
+| L3 | React/Vue/Next 内容前端 | hydration、chunk、路由、接口取内容 | 65-90% | 数据/API 可用本地 JSON 替身 |
+| L4 | 动画重品牌站 | GSAP、Lenis、复杂滚动、视频蒙版 | 50-80% | 主视觉可还原，微交互常近似 |
+| L5 | WebGL/Canvas/Three.js | shader、物理、后期合成、GPU 资源 | 30-95% | 有源码可高，没源码先拆解再定 |
+| L6 | SaaS/电商/登录业务系统 | 账号、支付、订单、权限、搜索推荐 | 展示层可做 | 服务端业务逻辑默认不克隆 |
+
+## 复刻前预判模板
+
+```markdown
+## 复刻前预判
+- 复杂度等级:
+- 推荐模式: 忠实复刻 / 视觉复刻 / 内容爆改 / 技术拆解
+- 可高保真的部分:
+- 需要近似或替代的部分:
+- 不克隆的部分:
+- 主要风险: 许可 / 素材 / 登录态 / API / 性能 / WebGL / 响应式
+```
+
+## 复刻后评分
+
+每项 0-5 分。只给能被源码、截图、浏览器运行结果支撑的分数。
+
+| 维度 | 5 分 | 3 分 | 1 分 |
+|---|---|---|---|
+| 源证据 | 找到源码或完整静态资源，关键结论有文件/行号 | 有运行时侦察和资源抓取 | 主要靠目测和推断 |
+| 结构保真 | 信息架构、区块顺序、断点都一致 | 主区块一致，细节有合并/删减 | 只保留大概风格 |
+| 视觉保真 | 字体、间距、颜色、图片比例高度接近 | 主视觉接近，局部比例不同 | 明显像另一个设计 |
+| 动效/交互 | 滚动、悬停、视频、Canvas/WebGL 行为接近 | 只保留核心交互 | 基本静态化 |
+| 响应式 | 桌面/平板/手机都验证且无错位 | 验证 1-2 个宽度 | 移动端明显破版 |
+| 功能完整 | 导航、表单、媒体、外链、本地运行都可用 | 主要浏览路径可用 | 多处死链或报错 |
+| 内容替换 | 已改成 Jane 的内容，替换地图清晰 | 部分改造，仍有原站残留 | 大量原站文案/品牌残留 |
+| 法务/部署风险 | 许可清楚，追踪移除，素材边界明确 | 风险已记录但未完全解决 | 风险不清楚 |
+
+建议输出：
+
+```markdown
+## 复刻评分
+- 源证据: /5
+- 结构保真: /5
+- 视觉保真: /5
+- 动效/交互: /5
+- 响应式: /5
+- 功能完整: /5
+- 内容替换: /5
+- 法务/部署风险: /5
+- 总评:
+```
+
+## 原站 vs 克隆站对比表
+
+```markdown
+| 模块 | 原站表现 | 克隆实现 | 差异 / 取舍 | 证据 |
+|---|---|---|---|---|
+| 首屏 |  |  |  | screenshot / file:line |
+| 导航 |  |  |  |  |
+| 核心动效 |  |  |  |  |
+| 内容区块 |  |  |  |  |
+| 移动端 |  |  |  |  |
+```

package/templates/vite/.howone/skills/web-clone/references/complex-playbooks.md

@@ -0,0 +1,46 @@
+# 复杂站复刻 Playbooks
+
+用于 L4-L6 站点，目标是把"看起来复杂"拆成可执行路径。
+
+## L4 动画品牌站
+
+1. `recon-site.mjs` 抓三档截图、sections、视频/canvas 数量。
+2. 记录滚动库信号：GSAP / Lenis / ScrollTrigger / Locomotive。
+3. 把页面拆成首屏、滚动叙事、视频蒙版、hover、过渡五类。
+4. 优先复刻节奏和视觉语法；微交互可近似，但必须在 `CLONE_REPORT.md` 标差异。
+5. 用 `visual-diff.mjs` 对首屏和关键滚动位置截图评分。
+
+## L5 WebGL / Canvas / Three.js
+
+1. 先找真源码、source map、公开 repo；找不到再逆向 bundle。
+2. `recon-site.mjs` 记录 canvas 尺寸、数量、框架信号。
+3. `sourcemap-hunt.mjs` 尝试下载 source map。
+4. 拆技术支柱：渲染、shader、后期、物理、交互、音频、资源加载。
+5. 复杂 shader 不盲写；先做最小可运行场景，再逐项补材质、光照、后期。
+6. 交互验证必须用浏览器实际操作或截图/视频证据，不能只看代码。
+
+## L6 SaaS / 电商 / 登录业务系统
+
+默认只克隆展示层和可演示流程，不承诺真实账号、支付、订单、权限。
+
+1. 登录态公开页面先确认授权和隐私边界。
+2. `network-capture.mjs` 保存 XHR/fetch 响应作为 fixtures。
+3. 把接口分成：内容接口、搜索筛选、用户态、交易/写入。
+4. 内容接口可用本地 JSON 替身；交易/写入接口只做 mock 成功/失败状态。
+5. 保留空态、加载态、错误态、权限不足态，别只做 happy path。
+6. `audit-clone.mjs` 扫外链、原品牌残留和追踪脚本。
+
+## 多页面 / CMS / 企业站
+
+1. 先抓 sitemap、导航、页脚、主要模板。
+2. 只复刻代表性模板：主页、列表页、详情页、搜索/筛选页、联系页。
+3. 重复内容用数据文件生成，不逐页手写。
+4. CMS 后台不克隆；如需要编辑能力，用本地 JSON/Markdown 替代。
+
+## 成功标准
+
+- 原站证据完整：截图、recon JSON、网络清单、素材清单。
+- 克隆站可本地运行，console/page error 清零或解释清楚。
+- `CLONE_REPORT.md` 有结构、视觉、交互、响应式、功能边界评分。
+- `CLONE_AUDIT.md` 没有追踪脚本、原品牌残留、未解释的日文/外链风险。
+- 对做不到的真实后端、专有 API、版权素材明确写边界。