web-clone

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 · 先建标准工程骨架

node /Users/jane/.shared-skills/web-clone/scripts/init-clone.mjs <站名> --url <原站URL>

该脚本会创建 ~/projects/website-clones/<站名>-clone/、NOTES.md、RECON/screenshots/，避免每次手工漏掉产物。

Step 1 · 先去 GitHub 搜源码，别急着抓站

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)"' |  -10