[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M78AMKHTFS149JGEYNQM5AXR":3,"skill-same:01M78AMKHTFS149JGEYNQM5AXR":160},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":15,"sourceHtmlUrl":16,"categories":17,"keywords":18,"publishedAt":19,"linkOnly":20,"markdownContent":21,"markdownBody":22,"frontMatter":23,"refName":47,"commitSha":48,"skillDirectory":49,"forksCount":13,"repositoryHtmlUrl":50,"repositoryHomepageUrl":51,"ownerHtmlUrl":52,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":53,"install":54,"resources":67},"01M78AMKHTFS149JGEYNQM5AXR","web-clone",null,"网站复刻 \u002F 克隆方法论。USE WHEN 用户说 复刻网站、克隆网站、clone website、抄个站、仿站、 照着这个站做一个、reproduce site、还原某个网页效果、把这个站搬下来改成我的、 复刻某个交互\u002FWebGL\u002FCanvas\u002FThree.js 效果。提供「先拿真源码 → 判路径 → 逆向拆解 → 搭工程 → 替换内容」的可移植决策树，覆盖静态站 \u002F React-Vue-Next 内容站 \u002F WebGL-Canvas 重前端站三大分支，并强制核对任何 AI 二手分析里的可执行代码。","bluesman1971\u002Fopen-design","bluesman1971","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F96430007?v=4","01M788AK0TR13JE8ART2WNQZV6","01M788AK1PVB085AS9SP38WWGK",0,"MIT","https:\u002F\u002Fgithub.com\u002Fbluesman1971\u002Fopen-design\u002Fblob\u002Fmain\u002Fskills\u002Fweb-clone\u002FLICENSE","https:\u002F\u002Fgithub.com\u002Fbluesman1971\u002Fopen-design\u002Fblob\u002Fmain\u002Fskills\u002Fweb-clone\u002FSKILL.md",[],[],"2026-11-15 14:19:17",false,"---\nname: web-clone\ndescription: >\n  网站复刻 \u002F 克隆方法论。USE WHEN 用户说 复刻网站、克隆网站、clone website、抄个站、仿站、\n  照着这个站做一个、reproduce site、还原某个网页效果、把这个站搬下来改成我的、\n  复刻某个交互\u002FWebGL\u002FCanvas\u002FThree.js 效果。提供「先拿真源码 → 判路径 → 逆向拆解 →\n  搭工程 → 替换内容」的可移植决策树，覆盖静态站 \u002F React-Vue-Next 内容站 \u002F\n  WebGL-Canvas 重前端站三大分支，并强制核对任何 AI 二手分析里的可执行代码。\nmetadata:\n  author: jane (xiaoer)\n  version: \"1.6.0\"\n  use_case: 个人本地复刻\u002F学习网站，沉淀自 website-clones 克隆中枢\ntriggers:\n  - \"复刻网站\"\n  - \"克隆网站\"\n  - \"clone website\"\n  - \"reproduce site\"\n  - \"仿站\"\n  - \"照着这个站做一个\"\n  - \"还原网页效果\"\n  - \"WebGL\"\n  - \"Canvas\"\n  - \"Three.js\"\nod:\n  mode: prototype\n  category: web-artifacts\n  preview:\n    type: markdown\n  design_system:\n    requires: false\n  upstream: \"https:\u002F\u002Fgithub.com\u002FJane-xiaoer\u002Fclaude-skill-web-clone\"\n---\n\n# Web Clone · 网站复刻方法论\n\n把\"复刻一个网站\"做成可重复的流程。配套工程区默认是目标工作区的 `.\u002Fwebsite-clones\u002F`（每个复刻是一个子目录）。如需自定义位置，设置 `WEB_CLONE_ROOT=\u002Fabsolute\u002Fpath`。\n\n运行内置脚本时，从用户的目标 workspace \u002F project 根目录执行命令，并让 `WEB_CLONE_SKILL_DIR` 指向本 skill 目录。不要 `cd` 到 skill 目录里运行脚本，否则 `.\u002Fwebsite-clones\u002F` 会写进 skill 包内部。\n\n```bash\nexport WEB_CLONE_SKILL_DIR=\"\u002Fabsolute\u002Fpath\u002Fto\u002Fskills\u002Fweb-clone\"\n```\n\n## 头号铁律：真源码至上，绝不信 AI 推测的代码\n\n> 任何 AI 生成的\"复刻分析\u002F施工图\"，**正文的概念骨架可以参考，但里面的可执行代码块默认全是臆造的**，必须逐行用真源码核对，否则照抄必崩。\n\n**实证（marbles 案例）**：一份 AI 分析文档把原站\"解析法求光线-球体交点 + 把光学结果编码成位移图、交给 SVG `feDisplacementMap` 去扭曲真实 DOM\"的真架构，臆造成了\"ray-marching + SDF + 把 DOM 当纹理采样\"——两套完全不同的实现，照抄做不出原效果且慢 N 倍。详见 `references\u002Fmarbles-case.md`。\n\n所以第一动作永远是：**拿到真源码**。\n\n## 决策树（按顺序走，不许跳）\n\n### Step 0 · 先建标准工程骨架\n\n```bash\nexport WEB_CLONE_ROOT=\"${WEB_CLONE_ROOT:-.\u002Fwebsite-clones}\"\nWEB_CLONE_PROJECT=\"$(node \"$WEB_CLONE_SKILL_DIR\u002Fscripts\u002Finit-clone.mjs\" \u003C站名> --url \u003C原站URL>)\" || exit 1\nexport WEB_CLONE_PROJECT\n```\n\n该脚本会创建 `$WEB_CLONE_PROJECT\u002F`、`NOTES.md`、`RECON\u002Fscreenshots\u002F`，避免每次手工漏掉产物。`WEB_CLONE_PROJECT` 必须来自脚本输出，因为 `init-clone.mjs` 会规范化站名（空格、大小写、URL、非 ASCII 等都会清洗成 slug）；后续步骤继续使用同一个 `WEB_CLONE_PROJECT`，确保实际创建路径、默认路径和 `WEB_CLONE_ROOT` 自定义路径一致。\n\n### Step 1 · 先去 GitHub 搜源码，别急着抓站\n\n```bash\nunset SSL_CERT_FILE   # macOS 怪癖，bash 前先解\n# 按站名\u002F产品名搜\nSSL_CERT_FILE=\u002Fetc\u002Fssl\u002Fcert.pem gh api \"search\u002Frepositories?q=\u003C关键词>\" \\\n  | jq -r '.items[] | \"\\(.full_name) ⭐\\(.stargazers_count) \\(.description)\"' | head -10\n# vercel.app\u002Fnetlify.app\u002Fgithub.io 的 URL slug 常常就是 仓库名 \u002F 部署者用户名\n```\n- 单文件站（github.io \u002F 纯 HTML）→ 直接抓 raw：`curl -sL https:\u002F\u002Fraw.githubusercontent.com\u002F\u003Cuser>\u002F\u003Crepo>\u002Fmain\u002Findex.html`\n- **找到源码且许可允许 → 跳 Step 4 直接 clone。** 教训：先搜 GitHub 能省 30 分钟弯路。\n\n### Step 2 · 没找到源码 → 浏览器侦察（探针）\n\n加载 `Browser` skill 或 playwright MCP，跑探针抽信号（框架 \u002F `window.THREE` \u002F canvas 数 \u002F 平滑滚动库 \u002F 字体 \u002F scrollHeight）。截图 1440\u002F768\u002F390 三档 + 侦察 JSON 存 `$WEB_CLONE_PROJECT\u002FRECON\u002F`。\n\n优先用内置脚本跑标准侦察：\n\n```bash\nnode \"$WEB_CLONE_SKILL_DIR\u002Fscripts\u002Frecon-site.mjs\" \\\n  --url \u003C原站URL> \\\n  --out \"$WEB_CLONE_PROJECT\u002FRECON\" \\\n  --label original\n\nnode \"$WEB_CLONE_SKILL_DIR\u002Fscripts\u002Fasset-harvest.mjs\" \\\n  --recon \"$WEB_CLONE_PROJECT\u002FRECON\u002Foriginal-recon.json\" \\\n  --out \"$WEB_CLONE_PROJECT\u002Fassets\u002Foriginal\" \\\n  --manifest \"$WEB_CLONE_PROJECT\u002FRECON\u002Fasset-manifest.json\"\n\nnode \"$WEB_CLONE_SKILL_DIR\u002Fscripts\u002Fnetwork-capture.mjs\" \\\n  --url \u003C原站URL> \\\n  --out \"$WEB_CLONE_PROJECT\u002FRECON\u002Fnetwork\" \\\n  --label original\n\nnode \"$WEB_CLONE_SKILL_DIR\u002Fscripts\u002Froute-crawl.mjs\" \\\n  --url \u003C原站URL> \\\n  --out \"$WEB_CLONE_PROJECT\u002FRECON\u002Froutes\" \\\n  --label original \\\n  --max-pages 25 \\\n  --max-depth 2\n\nnode \"$WEB_CLONE_SKILL_DIR\u002Fscripts\u002Finteraction-probe.mjs\" \\\n  --url \u003C原站URL> \\\n  --out \"$WEB_CLONE_PROJECT\u002FRECON\u002Finteractions\" \\\n  --label original\n\nnode \"$WEB_CLONE_SKILL_DIR\u002Fscripts\u002Fsourcemap-hunt.mjs\" \\\n  --recon \"$WEB_CLONE_PROJECT\u002FRECON\u002Foriginal-recon.json\" \\\n  --out \"$WEB_CLONE_PROJECT\u002FRECON\u002Fsourcemaps\"\n```\n\n> 登录态私域站才使用用户已授权的浏览器自动化环境；localhost \u002F 无登录公开站用 `Browser` skill 或 Playwright。\n\n### Step 2.5 · 先给复杂度定级，别盲目承诺\n\n根据侦察结果先写一版\"复刻前预判\"：复杂度 L1-L6、推荐模式（忠实复刻 \u002F 视觉复刻 \u002F 内容爆改）、预计可还原范围、明确不克隆的部分。分级和评分规则见 `references\u002Fassessment.md`。\n\n**若模式是「视觉复刻」或「内容爆改」** → 顺手产出结构化设计身份 `design-dna.json`，把\"那个站的感觉\"变成可版本化、可对照的 token 规范，让 Step 6 替换时\"DNA 留着、内容换掉\"有据可依：\n\n```bash\nnode \"$WEB_CLONE_SKILL_DIR\u002Fscripts\u002Fdna-scaffold.mjs\" \\\n  --recon \"$WEB_CLONE_PROJECT\u002FRECON\u002Foriginal-recon.json\" \\\n  --out   \"$WEB_CLONE_PROJECT\u002FRECON\u002Fdesign-dna.json\" \\\n  --name  \"\u003C站名>\"\n```\n\n脚本会把侦察到的字体\u002F色候选\u002F框架特效信号 best-effort 预填，其余字段人工 Analyze 补全。三维结构（design_system \u002F design_style \u002F visual_effects）、完整 schema、适用边界见 `references\u002Fdesign-dna.md`。\n> ⚠️ **「忠实复刻」分支不要用 DNA**：真源码就是真相，别让\"近似风格\"的 DNA 稀释逐字节铁律。\n\n### Step 3 · 按侦察结果选路径\n\n| 侦察结果 | 走哪条路 |\n|---|---|\n| 静态 HTML\u002FCSS，无框架 | `wget --mirror` 抓镜像 → 删追踪脚本 → 改文案 |\n| React \u002F Vue \u002F Next（内容为主） | 重建模板（如 `ai-website-cloner-template`，Node 24+），灌内容 |\n| SPA \u002F SaaS \u002F 数据驱动页面 | 先跑 `network-capture.mjs` 保存 API fixtures → 本地 JSON\u002Fmock server 替身 |\n| 多页面官网 \u002F 产品站 | 先跑 `route-crawl.mjs` 做路由地图 → 每类页面抽模板 → 统一替换内容 |\n| 复杂交互站 | 先跑 `interaction-probe.mjs` 记录 hover\u002Fclick\u002Fscroll\u002Fcanvas drag 状态 → 按状态补交互，不许只截首屏 |\n| **WebGL \u002F Canvas \u002F Three.js 重前端** | **深度逆向真源码（见下）→ 忠实复刻 或 找同类开源 3D 模板换内容**。单文件原生站常常逐字节保留=最忠实复刻。**找不到真源码时走运行时帧捕获 + baseline 闸门**，纪律见 `references\u002Feffect-extraction.md`（可委托 web-shader-extractor） |\n| **静态构建站（Astro\u002FVite SSG\u002FHugo），含重 WebGL** | **`mirror-site.mjs` 全量镜像部署资产 → 自托管字体 + 删追踪 → 本地 web 根服务 = 真源码 1:1 忠实复刻**。对静态站，\"拿到真源码\"=\"镜像部署资产整套\"。配方见 `references\u002Fstatic-mirror.md`。范例：oryzo.ai（Lusion，L6，高斯泼溅，hero 像素 diff 5\u002F5） |\n| 用现成开源主题的站（Astro\u002FHugo 主题） | 去对应主题市场找源主题（**仅限套用现成主题的站**；定制站走上一行的全量镜像，别来这行） |\n\nL4-L6 复杂站按 `references\u002Fcomplex-playbooks.md` 走，不要只用普通官网流程。\n\n### Step 4 · 在克隆中枢里搭工程\n\n```bash\ncd \"$WEB_CLONE_PROJECT\"\n# git 源码：clone 进来；单文件：放进来。原始源码留一份只读基准 index-original.html\n# 检查 Node 版本（package.json engines），nvm use 对应版本，钉 .nvmrc\n```\n\n### Step 5 · 删追踪 + 写元信息 + 验证\n\n- **删追踪**：Google Analytics（`gtag` \u002F `googletagmanager`）、像素、热图——逐行精确切除（GA 块常在 `\u003Chead>` 顶部）。\n- **写 NOTES.md**（必须）：包含复杂度、复刻模式、原站 vs 克隆站对比、保真度评分、已知缺口。模板见 `references\u002Fdeliverables.md`。\n- **复杂站写 TEARDOWN.md**（技术拆解）。所有结论标真源码行号。\n- **复刻后评分**：按 `references\u002Fassessment.md` 给结构 \u002F 视觉 \u002F 交互 \u002F 响应式 \u002F 内容替换 \u002F 功能完整度打分。分数要能被截图、源码、运行结果支撑。\n- **浏览器真验证**（硬要求，不许只看代码就说\"应该能跑\"）：起本地服务器 → 浏览器打开 → 抓 console（不能有 JS\u002FWebGL 编译错误）→ 截图对照原站。诚实记录验证不了的部分（如合成 PointerEvent `isTrusted=false` 触发不了拖拽，要如实写，别伪造\"拖动成功\"）。\n\n复刻完成后再跑一次克隆站侦察，并生成自动对比报告：\n\n```bash\nnode \"$WEB_CLONE_SKILL_DIR\u002Fscripts\u002Frecon-site.mjs\" \\\n  --url http:\u002F\u002F127.0.0.1:\u003C端口>\u002F \\\n  --out .\u002FRECON \\\n  --label clone\n\nnode \"$WEB_CLONE_SKILL_DIR\u002Fscripts\u002Froute-crawl.mjs\" \\\n  --url http:\u002F\u002F127.0.0.1:\u003C端口>\u002F \\\n  --out .\u002FRECON\u002Froutes-clone \\\n  --label clone \\\n  --max-pages 25 \\\n  --max-depth 2\n\nnode \"$WEB_CLONE_SKILL_DIR\u002Fscripts\u002Finteraction-probe.mjs\" \\\n  --url http:\u002F\u002F127.0.0.1:\u003C端口>\u002F \\\n  --out .\u002FRECON\u002Finteractions-clone \\\n  --label clone\n\nnode \"$WEB_CLONE_SKILL_DIR\u002Fscripts\u002Fvisual-diff.mjs\" \\\n  --original .\u002FRECON\u002Fscreenshots\u002Foriginal-1440.png \\\n  --clone .\u002FRECON\u002Fscreenshots\u002Fclone-1440.png \\\n  --out .\u002FRECON\u002Fvisual-diff-1440.json \\\n  --diff .\u002FRECON\u002Fscreenshots\u002Fvisual-diff-1440.png\n\nnode \"$WEB_CLONE_SKILL_DIR\u002Fscripts\u002Fcompare-recon.mjs\" \\\n  --original .\u002FRECON\u002Foriginal-recon.json \\\n  --clone .\u002FRECON\u002Fclone-recon.json \\\n  --visual-diff .\u002FRECON\u002Fvisual-diff-1440.json \\\n  --original-routes .\u002FRECON\u002Froutes\u002Foriginal-route-map.json \\\n  --clone-routes .\u002FRECON\u002Froutes-clone\u002Fclone-route-map.json \\\n  --original-interactions .\u002FRECON\u002Finteractions\u002Foriginal-interactions.json \\\n  --clone-interactions .\u002FRECON\u002Finteractions-clone\u002Fclone-interactions.json \\\n  --out .\u002FCLONE_REPORT.md\n\nnode \"$WEB_CLONE_SKILL_DIR\u002Fscripts\u002Faudit-clone.mjs\" \\\n  --project . \\\n  --brand \"\u003C原站品牌名>\" \\\n  --out .\u002FCLONE_AUDIT.md\n```\n\n### Step 6 · 替换成用户自己的东西\n\n目标永远是\"做用户自己的站\"，不是搬一个一模一样的。替换三件套：文字（`index.html`\u002F`data\u002F*.json`\u002F`content\u002F*.md`）、媒体（`public`\u002F`assets`）、品牌色（CSS 变量 \u002F Tailwind theme）。结构非平凡就写 REPLACE_GUIDE.md。\n\n**做过 `design-dna.json`（视觉\u002F爆改模式）的**：这一步就是它的兑现——**DNA 留着、内容换掉**。把 `design_system` 落成 CSS 自定义属性、按 `design_style` 做主观取舍、按 `visual_effects.effect_intensity` 选实现层级（lightweight CSS \u002F medium Canvas+GSAP \u002F heavy Three.js）；素材优先用 `asset-harvest.mjs` 取原站真图，别 AI 重绘近似。生成流程见 `references\u002Fdesign-dna.md`。\n\n## 逆向拆解 WebGL\u002FCanvas 重前端（核心手艺）\n\n把交互站拆成**技术支柱**，逐柱定位真实实现 + 标行号：渲染（WebGL\u002F着色器算法）、合成（SVG filter \u002F 多 canvas \u002F 后期）、物理、交互、音频。然后才去核对任何二手分析。\n\n**逆向特效时三件套纪律**（治\"边抠边美化、最后既不像也说不清\"）：\n1. **证据分级**：每条结论标 `SOURCE`（真源码\u002Fsource-map\u002F运行时 dump\u002F帧捕获）、`PARTIAL`（名字\u002F切片，待证）、`GUESS`（视觉拟合\u002F魔数）。**未标=GUESS，照抄前必须升级到 SOURCE。**\n2. **no-compensation**：严禁靠调亮度\u002F速度\u002F位置\u002F噪声去掩盖时序\u002F坐标\u002F状态错误；拟合值仍标 GUESS，写明要拿到什么证据才能升级。\n3. **baseline-first 闸门**：先用真实 draw call\u002Fshader\u002Funiform 做\"最小原样可复现 RAW REPLAY\"→ 逐帧比对通过 → **才允许**重构工程化。\n详见 `references\u002Feffect-extraction.md`（含运行时捕获兜底 + 何时委托 web-shader-extractor）。\n\n**可迁移的高级范式**（值得攒着）：\n- **位移图折射 DOM**：离屏 WebGL 算出 RG=位移\u002FB=菲涅尔的\"位移图\"，再用 SVG `\u003Cfilter>\u003CfeDisplacementMap scale=N>` 拿它去扭曲真实的、活的、可交互的 HTML——折射的是真 DOM，WebGL 全程不碰 DOM 像素。这是 marbles 的灵魂，也是 Three.js `MeshPhysicalMaterial(transmission)` 做不到的事（它只能做\"玻璃球外观\"，做不出\"折射整个网页\"）。\n\n详细方法 + marbles 真架构逐项拆解 → `references\u002Freverse-engineering.md`、`references\u002Fmarbles-case.md`。\n\n## 许可与署名（clone 前必查）\n\n```bash\nSSL_CERT_FILE=\u002Fetc\u002Fssl\u002Fcert.pem gh api repos\u002F\u003Cu>\u002F\u003Cr> | jq '.license'  # + 找 LICENSE 文件 + 看 README\n```\n\n| 许可 | 能做什么 |\n|---|---|\n| MIT \u002F Apache \u002F BSD \u002F Unlicense | 可改、可上线，保留致谢即可 |\n| **NONE（无 LICENSE 文件 \u002F 未声明）** | **默认保留所有权利**。仅本地学习\u002F复刻，须署名原作者，**未经许可不得公开重新部署**。别因为代码公开就当成可自由用 |\n| 专有 \u002F 明确禁止 | 只读学习，不复制不部署 |\n\n⚠️ 别把\"GitHub 上是公开的\"或\"gh api 一时查不到\"等同于 MIT——核实到底。\n\n## 产物规范\n- 每个子项目根目录：`NOTES.md`（源信息\u002F技术栈\u002Flicense\u002F替换地图\u002F跑起来命令）\n- 复杂交互站追加：`TEARDOWN.md`（技术拆解，标行号）\n- 需要对外汇报或评估 skill 效果时追加：`CLONE_REPORT.md`（原站 vs 克隆站完整对比）\n- 上线前追加：`CLONE_AUDIT.md`（追踪脚本、原站品牌\u002F语言残留、TODO、外链风险）\n- `RECON\u002Fscreenshots\u002F`：原站 vs 克隆对照图\n- 复刻完更新中枢 `README.md` 索引行\n\n## 内置脚本\n- `scripts\u002Finit-clone.mjs`：初始化克隆项目骨架和 `NOTES.md`。\n- `scripts\u002Frecon-site.mjs`：用 Playwright 打开页面，采集框架\u002F资源\u002FDOM 结构\u002Fconsole 错误，并保存三档截图。\n- `scripts\u002Fasset-harvest.mjs`：从侦察 JSON 下载原站图片、脚本、样式并生成素材清单。\n- `scripts\u002Fnetwork-capture.mjs`：捕获 XHR\u002Ffetch 请求并保存 JSON\u002Ftext 响应，给 SPA\u002FSaaS 做本地 fixtures。\n- `scripts\u002Fmirror-site.mjs`：真浏览器全程滚动捕获每一个真实请求 → 按路径镜像同源资产（含 JS 运行时 fetch 的 `.sog\u002F.buf\u002F.wasm\u002F.riv`\u002F字体），给静态构建站（Astro\u002FVite SSG\u002FHugo）做 1:1 忠实复刻。详见 `references\u002Fstatic-mirror.md`。\n- `scripts\u002Froute-crawl.mjs`：爬同站内部链接，按路由保存截图、标题、H1、结构信号，解决多页面站只复刻首页的问题。\n- `scripts\u002Finteraction-probe.mjs`：自动执行 scroll、hover、安全 click、canvas drag，保存交互前后状态、截图、网络和 console 证据。\n- `scripts\u002Fsourcemap-hunt.mjs`：从 JS chunk 里找 source map，能拿到就保存源码映射。\n- `scripts\u002Fcompare-recon.mjs`：读取原站与克隆站的侦察 JSON、路由图、交互证据，生成 `CLONE_REPORT.md`。\n- `scripts\u002Fvisual-diff.mjs`：用浏览器 canvas 做截图像素差异，输出 visual score 和差异图。\n- `scripts\u002Faudit-clone.mjs`：扫描追踪脚本、原站品牌残留、日文残留、TODO、外部 URL 风险。\n- `scripts\u002Fdna-scaffold.mjs`：从侦察 JSON 生成 `design-dna.json` 设计身份骨架（字体\u002F色候选\u002F框架特效信号 best-effort 预填），给「视觉复刻 \u002F 内容爆改」模式用。详见 `references\u002Fdesign-dna.md`。\n\n## 能力边界（默认口径）\n- **能高保真做**：静态营销页、企业官网、内容型 React\u002FVue\u002FNext 前端、可直接拿到源码的动画站。\n- **能视觉还原但会简化**：CMS 后台数据、复杂滚动叙事、多端断点、WebGL\u002FCanvas 特效、第三方嵌入。\n- **默认不承诺完整克隆**：登录、支付、下单、搜索推荐、权限系统、服务端业务逻辑、专有 API、受版权限制的素材。需要时只做可演示前端替身。\n- **内容爆改时**：优先保留原站的信息架构、节奏、动效和视觉语法，把文案、图片、品牌色、业务主张换成用户自己的内容。\n\n## 旗舰案例\n`.\u002Fwebsite-clones\u002Fmarbles-clone\u002F` — 原生 WebGL + SVG Filter + 自研物理的玻璃弹珠站，逐字节忠实复刻 + 完整 TEARDOWN，是\"WebGL 重前端分支\"的范例。\n","# Web Clone · 网站复刻方法论\n\n把\"复刻一个网站\"做成可重复的流程。配套工程区默认是目标工作区的 `.\u002Fwebsite-clones\u002F`（每个复刻是一个子目录）。如需自定义位置，设置 `WEB_CLONE_ROOT=\u002Fabsolute\u002Fpath`。\n\n运行内置脚本时，从用户的目标 workspace \u002F project 根目录执行命令，并让 `WEB_CLONE_SKILL_DIR` 指向本 skill 目录。不要 `cd` 到 skill 目录里运行脚本，否则 `.\u002Fwebsite-clones\u002F` 会写进 skill 包内部。\n\n```bash\nexport WEB_CLONE_SKILL_DIR=\"\u002Fabsolute\u002Fpath\u002Fto\u002Fskills\u002Fweb-clone\"\n```\n\n## 头号铁律：真源码至上，绝不信 AI 推测的代码\n\n> 任何 AI 生成的\"复刻分析\u002F施工图\"，**正文的概念骨架可以参考，但里面的可执行代码块默认全是臆造的**，必须逐行用真源码核对，否则照抄必崩。\n\n**实证（marbles 案例）**：一份 AI 分析文档把原站\"解析法求光线-球体交点 + 把光学结果编码成位移图、交给 SVG `feDisplacementMap` 去扭曲真实 DOM\"的真架构，臆造成了\"ray-marching + SDF + 把 DOM 当纹理采样\"——两套完全不同的实现，照抄做不出原效果且慢 N 倍。详见 `references\u002Fmarbles-case.md`。\n\n所以第一动作永远是：**拿到真源码**。\n\n## 决策树（按顺序走，不许跳）\n\n### Step 0 · 先建标准工程骨架\n\n```bash\nexport WEB_CLONE_ROOT=\"${WEB_CLONE_ROOT:-.\u002Fwebsite-clones}\"\nWEB_CLONE_PROJECT=\"$(node \"$WEB_CLONE_SKILL_DIR\u002Fscripts\u002Finit-clone.mjs\" \u003C站名> --url \u003C原站URL>)\" || exit 1\nexport WEB_CLONE_PROJECT\n```\n\n该脚本会创建 `$WEB_CLONE_PROJECT\u002F`、`NOTES.md`、`RECON\u002Fscreenshots\u002F`，避免每次手工漏掉产物。`WEB_CLONE_PROJECT` 必须来自脚本输出，因为 `init-clone.mjs` 会规范化站名（空格、大小写、URL、非 ASCII 等都会清洗成 slug）；后续步骤继续使用同一个 `WEB_CLONE_PROJECT`，确保实际创建路径、默认路径和 `WEB_CLONE_ROOT` 自定义路径一致。\n\n### Step 1 · 先去 GitHub 搜源码，别急着抓站\n\n```bash\nunset SSL_CERT_FILE   # macOS 怪癖，bash 前先解\n# 按站名\u002F产品名搜\nSSL_CERT_FILE=\u002Fetc\u002Fssl\u002Fcert.pem gh api \"search\u002Frepositories?q=\u003C关键词>\" \\\n  | jq -r '.items[] | \"\\(.full_name) ⭐\\(.stargazers_count) \\(.description)\"' | head -10\n# vercel.app\u002Fnetlify.app\u002Fgithub.io 的 URL slug 常常就是 仓库名 \u002F 部署者用户名\n```\n- 单文件站（github.io \u002F 纯 HTML）→ 直接抓 raw：`curl -sL https:\u002F\u002Fraw.githubusercontent.com\u002F\u003Cuser>\u002F\u003Crepo>\u002Fmain\u002Findex.html`\n- **找到源码且许可允许 → 跳 Step 4 直接 clone。** 教训：先搜 GitHub 能省 30 分钟弯路。\n\n### Step 2 · 没找到源码 → 浏览器侦察（探针）\n\n加载 `Browser` skill 或 playwright MCP，跑探针抽信号（框架 \u002F `window.THREE` \u002F canvas 数 \u002F 平滑滚动库 \u002F 字体 \u002F scrollHeight）。截图 1440\u002F768\u002F390 三档 + 侦察 JSON 存 `$WEB_CLONE_PROJECT\u002FRECON\u002F`。\n\n优先用内置脚本跑标准侦察：\n\n```bash\nnode \"$WEB_CLONE_SKILL_DIR\u002Fscripts\u002Frecon-site.mjs\" \\\n  --url \u003C原站URL> \\\n  --out \"$WEB_CLONE_PROJECT\u002FRECON\" \\\n  --label original\n\nnode \"$WEB_CLONE_SKILL_DIR\u002Fscripts\u002Fasset-harvest.mjs\" \\\n  --recon \"$WEB_CLONE_PROJECT\u002FRECON\u002Foriginal-recon.json\" \\\n  --out \"$WEB_CLONE_PROJECT\u002Fassets\u002Foriginal\" \\\n  --manifest \"$WEB_CLONE_PROJECT\u002FRECON\u002Fasset-manifest.json\"\n\nnode \"$WEB_CLONE_SKILL_DIR\u002Fscripts\u002Fnetwork-capture.mjs\" \\\n  --url \u003C原站URL> \\\n  --out \"$WEB_CLONE_PROJECT\u002FRECON\u002Fnetwork\" \\\n  --label original\n\nnode \"$WEB_CLONE_SKILL_DIR\u002Fscripts\u002Froute-crawl.mjs\" \\\n  --url \u003C原站URL> \\\n  --out \"$WEB_CLONE_PROJECT\u002FRECON\u002Froutes\" \\\n  --label original \\\n  --max-pages 25 \\\n  --max-depth 2\n\nnode \"$WEB_CLONE_SKILL_DIR\u002Fscripts\u002Finteraction-probe.mjs\" \\\n  --url \u003C原站URL> \\\n  --out \"$WEB_CLONE_PROJECT\u002FRECON\u002Finteractions\" \\\n  --label original\n\nnode \"$WEB_CLONE_SKILL_DIR\u002Fscripts\u002Fsourcemap-hunt.mjs\" \\\n  --recon \"$WEB_CLONE_PROJECT\u002FRECON\u002Foriginal-recon.json\" \\\n  --out \"$WEB_CLONE_PROJECT\u002FRECON\u002Fsourcemaps\"\n```\n\n> 登录态私域站才使用用户已授权的浏览器自动化环境；localhost \u002F 无登录公开站用 `Browser` skill 或 Playwright。\n\n### Step 2.5 · 先给复杂度定级，别盲目承诺\n\n根据侦察结果先写一版\"复刻前预判\"：复杂度 L1-L6、推荐模式（忠实复刻 \u002F 视觉复刻 \u002F 内容爆改）、预计可还原范围、明确不克隆的部分。分级和评分规则见 `references\u002Fassessment.md`。\n\n**若模式是「视觉复刻」或「内容爆改」** → 顺手产出结构化设计身份 `design-dna.json`，把\"那个站的感觉\"变成可版本化、可对照的 token 规范，让 Step 6 替换时\"DNA 留着、内容换掉\"有据可依：\n\n```bash\nnode \"$WEB_CLONE_SKILL_DIR\u002Fscripts\u002Fdna-scaffold.mjs\" \\\n  --recon \"$WEB_CLONE_PROJECT\u002FRECON\u002Foriginal-recon.json\" \\\n  --out   \"$WEB_CLONE_PROJECT\u002FRECON\u002Fdesign-dna.json\" \\\n  --name  \"\u003C站名>\"\n```\n\n脚本会把侦察到的字体\u002F色候选\u002F框架特效信号 best-effort 预填，其余字段人工 Analyze 补全。三维结构（design_system \u002F design_style \u002F visual_effects）、完整 schema、适用边界见 `references\u002Fdesign-dna.md`。\n> ⚠️ **「忠实复刻」分支不要用 DNA**：真源码就是真相，别让\"近似风格\"的 DNA 稀释逐字节铁律。\n\n### Step 3 · 按侦察结果选路径\n\n| 侦察结果 | 走哪条路 |\n|---|---|\n| 静态 HTML\u002FCSS，无框架 | `wget --mirror` 抓镜像 → 删追踪脚本 → 改文案 |\n| React \u002F Vue \u002F Next（内容为主） | 重建模板（如 `ai-website-cloner-template`，Node 24+），灌内容 |\n| SPA \u002F SaaS \u002F 数据驱动页面 | 先跑 `network-capture.mjs` 保存 API fixtures → 本地 JSON\u002Fmock server 替身 |\n| 多页面官网 \u002F 产品站 | 先跑 `route-crawl.mjs` 做路由地图 → 每类页面抽模板 → 统一替换内容 |\n| 复杂交互站 | 先跑 `interaction-probe.mjs` 记录 hover\u002Fclick\u002Fscroll\u002Fcanvas drag 状态 → 按状态补交互，不许只截首屏 |\n| **WebGL \u002F Canvas \u002F Three.js 重前端** | **深度逆向真源码（见下）→ 忠实复刻 或 找同类开源 3D 模板换内容**。单文件原生站常常逐字节保留=最忠实复刻。**找不到真源码时走运行时帧捕获 + baseline 闸门**，纪律见 `references\u002Feffect-extraction.md`（可委托 web-shader-extractor） |\n| **静态构建站（Astro\u002FVite SSG\u002FHugo），含重 WebGL** | **`mirror-site.mjs` 全量镜像部署资产 → 自托管字体 + 删追踪 → 本地 web 根服务 = 真源码 1:1 忠实复刻**。对静态站，\"拿到真源码\"=\"镜像部署资产整套\"。配方见 `references\u002Fstatic-mirror.md`。范例：oryzo.ai（Lusion，L6，高斯泼溅，hero 像素 diff 5\u002F5） |\n| 用现成开源主题的站（Astro\u002FHugo 主题） | 去对应主题市场找源主题（**仅限套用现成主题的站**；定制站走上一行的全量镜像，别来这行） |\n\nL4-L6 复杂站按 `references\u002Fcomplex-playbooks.md` 走，不要只用普通官网流程。\n\n### Step 4 · 在克隆中枢里搭工程\n\n```bash\ncd \"$WEB_CLONE_PROJECT\"\n# git 源码：clone 进来；单文件：放进来。原始源码留一份只读基准 index-original.html\n# 检查 Node 版本（package.json engines），nvm use 对应版本，钉 .nvmrc\n```\n\n### Step 5 · 删追踪 + 写元信息 + 验证\n\n- **删追踪**：Google Analytics（`gtag` \u002F `googletagmanager`）、像素、热图——逐行精确切除（GA 块常在 `\u003Chead>` 顶部）。\n- **写 NOTES.md**（必须）：包含复杂度、复刻模式、原站 vs 克隆站对比、保真度评分、已知缺口。模板见 `references\u002Fdeliverables.md`。\n- **复杂站写 TEARDOWN.md**（技术拆解）。所有结论标真源码行号。\n- **复刻后评分**：按 `references\u002Fassessment.md` 给结构 \u002F 视觉 \u002F 交互 \u002F 响应式 \u002F 内容替换 \u002F 功能完整度打分。分数要能被截图、源码、运行结果支撑。\n- **浏览器真验证**（硬要求，不许只看代码就说\"应该能跑\"）：起本地服务器 → 浏览器打开 → 抓 console（不能有 JS\u002FWebGL 编译错误）→ 截图对照原站。诚实记录验证不了的部分（如合成 PointerEvent `isTrusted=false` 触发不了拖拽，要如实写，别伪造\"拖动成功\"）。\n\n复刻完成后再跑一次克隆站侦察，并生成自动对比报告：\n\n```bash\nnode \"$WEB_CLONE_SKILL_DIR\u002Fscripts\u002Frecon-site.mjs\" \\\n  --url http:\u002F\u002F127.0.0.1:\u003C端口>\u002F \\\n  --out .\u002FRECON \\\n  --label clone\n\nnode \"$WEB_CLONE_SKILL_DIR\u002Fscripts\u002Froute-crawl.mjs\" \\\n  --url http:\u002F\u002F127.0.0.1:\u003C端口>\u002F \\\n  --out .\u002FRECON\u002Froutes-clone \\\n  --label clone \\\n  --max-pages 25 \\\n  --max-depth 2\n\nnode \"$WEB_CLONE_SKILL_DIR\u002Fscripts\u002Finteraction-probe.mjs\" \\\n  --url http:\u002F\u002F127.0.0.1:\u003C端口>\u002F \\\n  --out .\u002FRECON\u002Finteractions-clone \\\n  --label clone\n\nnode \"$WEB_CLONE_SKILL_DIR\u002Fscripts\u002Fvisual-diff.mjs\" \\\n  --original .\u002FRECON\u002Fscreenshots\u002Foriginal-1440.png \\\n  --clone .\u002FRECON\u002Fscreenshots\u002Fclone-1440.png \\\n  --out .\u002FRECON\u002Fvisual-diff-1440.json \\\n  --diff .\u002FRECON\u002Fscreenshots\u002Fvisual-diff-1440.png\n\nnode \"$WEB_CLONE_SKILL_DIR\u002Fscripts\u002Fcompare-recon.mjs\" \\\n  --original .\u002FRECON\u002Foriginal-recon.json \\\n  --clone .\u002FRECON\u002Fclone-recon.json \\\n  --visual-diff .\u002FRECON\u002Fvisual-diff-1440.json \\\n  --original-routes .\u002FRECON\u002Froutes\u002Foriginal-route-map.json \\\n  --clone-routes .\u002FRECON\u002Froutes-clone\u002Fclone-route-map.json \\\n  --original-interactions .\u002FRECON\u002Finteractions\u002Foriginal-interactions.json \\\n  --clone-interactions .\u002FRECON\u002Finteractions-clone\u002Fclone-interactions.json \\\n  --out .\u002FCLONE_REPORT.md\n\nnode \"$WEB_CLONE_SKILL_DIR\u002Fscripts\u002Faudit-clone.mjs\" \\\n  --project . \\\n  --brand \"\u003C原站品牌名>\" \\\n  --out .\u002FCLONE_AUDIT.md\n```\n\n### Step 6 · 替换成用户自己的东西\n\n目标永远是\"做用户自己的站\"，不是搬一个一模一样的。替换三件套：文字（`index.html`\u002F`data\u002F*.json`\u002F`content\u002F*.md`）、媒体（`public`\u002F`assets`）、品牌色（CSS 变量 \u002F Tailwind theme）。结构非平凡就写 REPLACE_GUIDE.md。\n\n**做过 `design-dna.json`（视觉\u002F爆改模式）的**：这一步就是它的兑现——**DNA 留着、内容换掉**。把 `design_system` 落成 CSS 自定义属性、按 `design_style` 做主观取舍、按 `visual_effects.effect_intensity` 选实现层级（lightweight CSS \u002F medium Canvas+GSAP \u002F heavy Three.js）；素材优先用 `asset-harvest.mjs` 取原站真图，别 AI 重绘近似。生成流程见 `references\u002Fdesign-dna.md`。\n\n## 逆向拆解 WebGL\u002FCanvas 重前端（核心手艺）\n\n把交互站拆成**技术支柱**，逐柱定位真实实现 + 标行号：渲染（WebGL\u002F着色器算法）、合成（SVG filter \u002F 多 canvas \u002F 后期）、物理、交互、音频。然后才去核对任何二手分析。\n\n**逆向特效时三件套纪律**（治\"边抠边美化、最后既不像也说不清\"）：\n1. **证据分级**：每条结论标 `SOURCE`（真源码\u002Fsource-map\u002F运行时 dump\u002F帧捕获）、`PARTIAL`（名字\u002F切片，待证）、`GUESS`（视觉拟合\u002F魔数）。**未标=GUESS，照抄前必须升级到 SOURCE。**\n2. **no-compensation**：严禁靠调亮度\u002F速度\u002F位置\u002F噪声去掩盖时序\u002F坐标\u002F状态错误；拟合值仍标 GUESS，写明要拿到什么证据才能升级。\n3. **baseline-first 闸门**：先用真实 draw call\u002Fshader\u002Funiform 做\"最小原样可复现 RAW REPLAY\"→ 逐帧比对通过 → **才允许**重构工程化。\n详见 `references\u002Feffect-extraction.md`（含运行时捕获兜底 + 何时委托 web-shader-extractor）。\n\n**可迁移的高级范式**（值得攒着）：\n- **位移图折射 DOM**：离屏 WebGL 算出 RG=位移\u002FB=菲涅尔的\"位移图\"，再用 SVG `\u003Cfilter>\u003CfeDisplacementMap scale=N>` 拿它去扭曲真实的、活的、可交互的 HTML——折射的是真 DOM，WebGL 全程不碰 DOM 像素。这是 marbles 的灵魂，也是 Three.js `MeshPhysicalMaterial(transmission)` 做不到的事（它只能做\"玻璃球外观\"，做不出\"折射整个网页\"）。\n\n详细方法 + marbles 真架构逐项拆解 → `references\u002Freverse-engineering.md`、`references\u002Fmarbles-case.md`。\n\n## 许可与署名（clone 前必查）\n\n```bash\nSSL_CERT_FILE=\u002Fetc\u002Fssl\u002Fcert.pem gh api repos\u002F\u003Cu>\u002F\u003Cr> | jq '.license'  # + 找 LICENSE 文件 + 看 README\n```\n\n| 许可 | 能做什么 |\n|---|---|\n| MIT \u002F Apache \u002F BSD \u002F Unlicense | 可改、可上线，保留致谢即可 |\n| **NONE（无 LICENSE 文件 \u002F 未声明）** | **默认保留所有权利**。仅本地学习\u002F复刻，须署名原作者，**未经许可不得公开重新部署**。别因为代码公开就当成可自由用 |\n| 专有 \u002F 明确禁止 | 只读学习，不复制不部署 |\n\n⚠️ 别把\"GitHub 上是公开的\"或\"gh api 一时查不到\"等同于 MIT——核实到底。\n\n## 产物规范\n- 每个子项目根目录：`NOTES.md`（源信息\u002F技术栈\u002Flicense\u002F替换地图\u002F跑起来命令）\n- 复杂交互站追加：`TEARDOWN.md`（技术拆解，标行号）\n- 需要对外汇报或评估 skill 效果时追加：`CLONE_REPORT.md`（原站 vs 克隆站完整对比）\n- 上线前追加：`CLONE_AUDIT.md`（追踪脚本、原站品牌\u002F语言残留、TODO、外链风险）\n- `RECON\u002Fscreenshots\u002F`：原站 vs 克隆对照图\n- 复刻完更新中枢 `README.md` 索引行\n\n## 内置脚本\n- `scripts\u002Finit-clone.mjs`：初始化克隆项目骨架和 `NOTES.md`。\n- `scripts\u002Frecon-site.mjs`：用 Playwright 打开页面，采集框架\u002F资源\u002FDOM 结构\u002Fconsole 错误，并保存三档截图。\n- `scripts\u002Fasset-harvest.mjs`：从侦察 JSON 下载原站图片、脚本、样式并生成素材清单。\n- `scripts\u002Fnetwork-capture.mjs`：捕获 XHR\u002Ffetch 请求并保存 JSON\u002Ftext 响应，给 SPA\u002FSaaS 做本地 fixtures。\n- `scripts\u002Fmirror-site.mjs`：真浏览器全程滚动捕获每一个真实请求 → 按路径镜像同源资产（含 JS 运行时 fetch 的 `.sog\u002F.buf\u002F.wasm\u002F.riv`\u002F字体），给静态构建站（Astro\u002FVite SSG\u002FHugo）做 1:1 忠实复刻。详见 `references\u002Fstatic-mirror.md`。\n- `scripts\u002Froute-crawl.mjs`：爬同站内部链接，按路由保存截图、标题、H1、结构信号，解决多页面站只复刻首页的问题。\n- `scripts\u002Finteraction-probe.mjs`：自动执行 scroll、hover、安全 click、canvas drag，保存交互前后状态、截图、网络和 console 证据。\n- `scripts\u002Fsourcemap-hunt.mjs`：从 JS chunk 里找 source map，能拿到就保存源码映射。\n- `scripts\u002Fcompare-recon.mjs`：读取原站与克隆站的侦察 JSON、路由图、交互证据，生成 `CLONE_REPORT.md`。\n- `scripts\u002Fvisual-diff.mjs`：用浏览器 canvas 做截图像素差异，输出 visual score 和差异图。\n- `scripts\u002Faudit-clone.mjs`：扫描追踪脚本、原站品牌残留、日文残留、TODO、外部 URL 风险。\n- `scripts\u002Fdna-scaffold.mjs`：从侦察 JSON 生成 `design-dna.json` 设计身份骨架（字体\u002F色候选\u002F框架特效信号 best-effort 预填），给「视觉复刻 \u002F 内容爆改」模式用。详见 `references\u002Fdesign-dna.md`。\n\n## 能力边界（默认口径）\n- **能高保真做**：静态营销页、企业官网、内容型 React\u002FVue\u002FNext 前端、可直接拿到源码的动画站。\n- **能视觉还原但会简化**：CMS 后台数据、复杂滚动叙事、多端断点、WebGL\u002FCanvas 特效、第三方嵌入。\n- **默认不承诺完整克隆**：登录、支付、下单、搜索推荐、权限系统、服务端业务逻辑、专有 API、受版权限制的素材。需要时只做可演示前端替身。\n- **内容爆改时**：优先保留原站的信息架构、节奏、动效和视觉语法，把文案、图片、品牌色、业务主张换成用户自己的内容。\n\n## 旗舰案例\n`.\u002Fwebsite-clones\u002Fmarbles-clone\u002F` — 原生 WebGL + SVG Filter + 自研物理的玻璃弹珠站，逐字节忠实复刻 + 完整 TEARDOWN，是\"WebGL 重前端分支\"的范例。\n",{"od":24,"name":5,"metadata":31,"triggers":35,"description":46},{"mode":25,"preview":26,"category":28,"upstream":29,"design_system":30},"prototype",{"type":27},"markdown","web-artifacts","https:\u002F\u002Fgithub.com\u002FJane-xiaoer\u002Fclaude-skill-web-clone",{"requires":20},{"author":32,"version":33,"use_case":34},"jane (xiaoer)","1.6.0","个人本地复刻\u002F学习网站，沉淀自 website-clones 克隆中枢",[36,37,38,39,40,41,42,43,44,45],"复刻网站","克隆网站","clone website","reproduce site","仿站","照着这个站做一个","还原网页效果","WebGL","Canvas","Three.js","网站复刻 \u002F 克隆方法论。USE WHEN 用户说 复刻网站、克隆网站、clone website、抄个站、仿站、 照着这个站做一个、reproduce site、还原某个网页效果、把这个站搬下来改成我的、 复刻某个交互\u002FWebGL\u002FCanvas\u002FThree.js 效果。提供「先拿真源码 → 判路径 → 逆向拆解 → 搭工程 → 替换内容」的可移植决策树，覆盖静态站 \u002F React-Vue-Next 内容站 \u002F WebGL-Canvas 重前端站三大分支，并强制核对任何 AI 二手分析里的可执行代码。\n","main","0467f0e19df12a6994ec7fb20ff6e9e23cd704e7","skills\u002Fweb-clone","https:\u002F\u002Fgithub.com\u002Fbluesman1971\u002Fopen-design","https:\u002F\u002Fopen-design.ai","https:\u002F\u002Fgithub.com\u002Fbluesman1971","2026-07-09 04:08:20",{"source":8,"skillName":5,"commands":55,"prompt":65,"zipAvailable":66},[56,59,62],{"tool":57,"command":58},"npx","npx skills add bluesman1971\u002Fopen-design --skill web-clone",{"tool":60,"command":61},"bunx","bunx skills add bluesman1971\u002Fopen-design --skill web-clone",{"tool":63,"command":64},"pnpm","pnpm dlx skills add bluesman1971\u002Fopen-design --skill web-clone","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fbluesman1971\u002Fopen-design\u002Fblob\u002Fmain\u002Fskills\u002Fweb-clone\u002FSKILL.md",true,[68,72,78,82,86,90,94,98,102,106,112,116,120,124,128,132,136,140,144,148,152,156],{"path":69,"resourceType":69,"resourceTypeDesc":70,"sizeBytes":71,"sourceHtmlUrl":15},"LICENSE","许可证",1084,{"path":73,"resourceType":74,"resourceTypeDesc":75,"sizeBytes":76,"sourceHtmlUrl":77},"references\u002Fassessment.md","REFERENCE","参考文档",3608,"https:\u002F\u002Fgithub.com\u002Fbluesman1971\u002Fopen-design\u002Fblob\u002Fmain\u002Fskills\u002Fweb-clone\u002Freferences\u002Fassessment.md",{"path":79,"resourceType":74,"resourceTypeDesc":75,"sizeBytes":80,"sourceHtmlUrl":81},"references\u002Fcomplex-playbooks.md",2378,"https:\u002F\u002Fgithub.com\u002Fbluesman1971\u002Fopen-design\u002Fblob\u002Fmain\u002Fskills\u002Fweb-clone\u002Freferences\u002Fcomplex-playbooks.md",{"path":83,"resourceType":74,"resourceTypeDesc":75,"sizeBytes":84,"sourceHtmlUrl":85},"references\u002Fdeliverables.md",5063,"https:\u002F\u002Fgithub.com\u002Fbluesman1971\u002Fopen-design\u002Fblob\u002Fmain\u002Fskills\u002Fweb-clone\u002Freferences\u002Fdeliverables.md",{"path":87,"resourceType":74,"resourceTypeDesc":75,"sizeBytes":88,"sourceHtmlUrl":89},"references\u002Fdesign-dna.md",11695,"https:\u002F\u002Fgithub.com\u002Fbluesman1971\u002Fopen-design\u002Fblob\u002Fmain\u002Fskills\u002Fweb-clone\u002Freferences\u002Fdesign-dna.md",{"path":91,"resourceType":74,"resourceTypeDesc":75,"sizeBytes":92,"sourceHtmlUrl":93},"references\u002Feffect-extraction.md",5322,"https:\u002F\u002Fgithub.com\u002Fbluesman1971\u002Fopen-design\u002Fblob\u002Fmain\u002Fskills\u002Fweb-clone\u002Freferences\u002Feffect-extraction.md",{"path":95,"resourceType":74,"resourceTypeDesc":75,"sizeBytes":96,"sourceHtmlUrl":97},"references\u002Fmarbles-case.md",3375,"https:\u002F\u002Fgithub.com\u002Fbluesman1971\u002Fopen-design\u002Fblob\u002Fmain\u002Fskills\u002Fweb-clone\u002Freferences\u002Fmarbles-case.md",{"path":99,"resourceType":74,"resourceTypeDesc":75,"sizeBytes":100,"sourceHtmlUrl":101},"references\u002Freverse-engineering.md",3628,"https:\u002F\u002Fgithub.com\u002Fbluesman1971\u002Fopen-design\u002Fblob\u002Fmain\u002Fskills\u002Fweb-clone\u002Freferences\u002Freverse-engineering.md",{"path":103,"resourceType":74,"resourceTypeDesc":75,"sizeBytes":104,"sourceHtmlUrl":105},"references\u002Fstatic-mirror.md",4938,"https:\u002F\u002Fgithub.com\u002Fbluesman1971\u002Fopen-design\u002Fblob\u002Fmain\u002Fskills\u002Fweb-clone\u002Freferences\u002Fstatic-mirror.md",{"path":107,"resourceType":108,"resourceTypeDesc":109,"sizeBytes":110,"sourceHtmlUrl":111},"scripts\u002Fasset-harvest.mjs","SCRIPT","脚本",3844,"https:\u002F\u002Fgithub.com\u002Fbluesman1971\u002Fopen-design\u002Fblob\u002Fmain\u002Fskills\u002Fweb-clone\u002Fscripts\u002Fasset-harvest.mjs",{"path":113,"resourceType":108,"resourceTypeDesc":109,"sizeBytes":114,"sourceHtmlUrl":115},"scripts\u002Faudit-clone.mjs",5517,"https:\u002F\u002Fgithub.com\u002Fbluesman1971\u002Fopen-design\u002Fblob\u002Fmain\u002Fskills\u002Fweb-clone\u002Fscripts\u002Faudit-clone.mjs",{"path":117,"resourceType":108,"resourceTypeDesc":109,"sizeBytes":118,"sourceHtmlUrl":119},"scripts\u002Fcompare-recon.mjs",11109,"https:\u002F\u002Fgithub.com\u002Fbluesman1971\u002Fopen-design\u002Fblob\u002Fmain\u002Fskills\u002Fweb-clone\u002Fscripts\u002Fcompare-recon.mjs",{"path":121,"resourceType":108,"resourceTypeDesc":109,"sizeBytes":122,"sourceHtmlUrl":123},"scripts\u002Fdna-scaffold.mjs",11869,"https:\u002F\u002Fgithub.com\u002Fbluesman1971\u002Fopen-design\u002Fblob\u002Fmain\u002Fskills\u002Fweb-clone\u002Fscripts\u002Fdna-scaffold.mjs",{"path":125,"resourceType":108,"resourceTypeDesc":109,"sizeBytes":126,"sourceHtmlUrl":127},"scripts\u002Finit-clone.mjs",4091,"https:\u002F\u002Fgithub.com\u002Fbluesman1971\u002Fopen-design\u002Fblob\u002Fmain\u002Fskills\u002Fweb-clone\u002Fscripts\u002Finit-clone.mjs",{"path":129,"resourceType":108,"resourceTypeDesc":109,"sizeBytes":130,"sourceHtmlUrl":131},"scripts\u002Finteraction-probe.mjs",12502,"https:\u002F\u002Fgithub.com\u002Fbluesman1971\u002Fopen-design\u002Fblob\u002Fmain\u002Fskills\u002Fweb-clone\u002Fscripts\u002Finteraction-probe.mjs",{"path":133,"resourceType":108,"resourceTypeDesc":109,"sizeBytes":134,"sourceHtmlUrl":135},"scripts\u002Flib\u002Fplaywright-loader.mjs",1214,"https:\u002F\u002Fgithub.com\u002Fbluesman1971\u002Fopen-design\u002Fblob\u002Fmain\u002Fskills\u002Fweb-clone\u002Fscripts\u002Flib\u002Fplaywright-loader.mjs",{"path":137,"resourceType":108,"resourceTypeDesc":109,"sizeBytes":138,"sourceHtmlUrl":139},"scripts\u002Fmirror-site.mjs",6345,"https:\u002F\u002Fgithub.com\u002Fbluesman1971\u002Fopen-design\u002Fblob\u002Fmain\u002Fskills\u002Fweb-clone\u002Fscripts\u002Fmirror-site.mjs",{"path":141,"resourceType":108,"resourceTypeDesc":109,"sizeBytes":142,"sourceHtmlUrl":143},"scripts\u002Fnetwork-capture.mjs",4629,"https:\u002F\u002Fgithub.com\u002Fbluesman1971\u002Fopen-design\u002Fblob\u002Fmain\u002Fskills\u002Fweb-clone\u002Fscripts\u002Fnetwork-capture.mjs",{"path":145,"resourceType":108,"resourceTypeDesc":109,"sizeBytes":146,"sourceHtmlUrl":147},"scripts\u002Frecon-site.mjs",8945,"https:\u002F\u002Fgithub.com\u002Fbluesman1971\u002Fopen-design\u002Fblob\u002Fmain\u002Fskills\u002Fweb-clone\u002Fscripts\u002Frecon-site.mjs",{"path":149,"resourceType":108,"resourceTypeDesc":109,"sizeBytes":150,"sourceHtmlUrl":151},"scripts\u002Froute-crawl.mjs",7942,"https:\u002F\u002Fgithub.com\u002Fbluesman1971\u002Fopen-design\u002Fblob\u002Fmain\u002Fskills\u002Fweb-clone\u002Fscripts\u002Froute-crawl.mjs",{"path":153,"resourceType":108,"resourceTypeDesc":109,"sizeBytes":154,"sourceHtmlUrl":155},"scripts\u002Fsourcemap-hunt.mjs",3710,"https:\u002F\u002Fgithub.com\u002Fbluesman1971\u002Fopen-design\u002Fblob\u002Fmain\u002Fskills\u002Fweb-clone\u002Fscripts\u002Fsourcemap-hunt.mjs",{"path":157,"resourceType":108,"resourceTypeDesc":109,"sizeBytes":158,"sourceHtmlUrl":159},"scripts\u002Fvisual-diff.mjs",5935,"https:\u002F\u002Fgithub.com\u002Fbluesman1971\u002Fopen-design\u002Fblob\u002Fmain\u002Fskills\u002Fweb-clone\u002Fscripts\u002Fvisual-diff.mjs",[161,169,177,184,191,198],{"skillNo":162,"name":163,"nameZh":6,"description":164,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":165,"sourceHtmlUrl":166,"categories":167,"keywords":168,"publishedAt":19},"01M78AMRG8NAGKWKNDQE39ZZFQ","web-design-guidelines","Review UI code for Web Interface Guidelines compliance by the Vercel engineering team. Covers layout, typography, color, motion, and accessibility for product UI.","https:\u002F\u002Fgithub.com\u002Fbluesman1971\u002Fopen-design\u002Fblob\u002Fmain\u002Fskills\u002Fweb-design-guidelines\u002FLICENSE","https:\u002F\u002Fgithub.com\u002Fbluesman1971\u002Fopen-design\u002Fblob\u002Fmain\u002Fskills\u002Fweb-design-guidelines\u002FSKILL.md",[],[],{"skillNo":170,"name":171,"nameZh":6,"description":172,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":173,"licenseFileUrl":6,"sourceHtmlUrl":174,"categories":175,"keywords":176,"publishedAt":19},"01M78AMH25JH2SH3AWTRSDCM9F","venice-video","Video generation and transcription workflows via the Venice.ai API.","Apache-2.0","https:\u002F\u002Fgithub.com\u002Fbluesman1971\u002Fopen-design\u002Fblob\u002Fmain\u002Fskills\u002Fvenice-video\u002FSKILL.md",[],[],{"skillNo":178,"name":179,"nameZh":6,"description":180,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":173,"licenseFileUrl":6,"sourceHtmlUrl":181,"categories":182,"keywords":183,"publishedAt":19},"01M78AMF0M4FFKFWXFJ9NHTF5M","venice-image-generate","Image generation endpoints and available styles via the Venice.ai API.","https:\u002F\u002Fgithub.com\u002Fbluesman1971\u002Fopen-design\u002Fblob\u002Fmain\u002Fskills\u002Fvenice-image-generate\u002FSKILL.md",[],[],{"skillNo":185,"name":186,"nameZh":6,"description":187,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":173,"licenseFileUrl":6,"sourceHtmlUrl":188,"categories":189,"keywords":190,"publishedAt":19},"01M78AMCH68X46SHNZVD284KXS","threejs","Three.js skills for creating 3D elements and interactive experiences in the browser — scenes, materials, controls, and post-processing.","https:\u002F\u002Fgithub.com\u002Fbluesman1971\u002Fopen-design\u002Fblob\u002Fmain\u002Fskills\u002Fthreejs\u002FSKILL.md",[],[],{"skillNo":192,"name":193,"nameZh":6,"description":194,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":173,"licenseFileUrl":6,"sourceHtmlUrl":195,"categories":196,"keywords":197,"publishedAt":19},"01M78AM7P8WSBZDNZZ42BQHGK7","taste","Brief-time anti-AI-slop taste checklist — read the room and set the\ndesign dials BEFORE generating a landing page, portfolio, or redesign,\nso the first draft doesn't need a post-generation rescue. Use at the\nstart of a visual\u002Fcreative brief, not after the artifact exists.","https:\u002F\u002Fgithub.com\u002Fbluesman1971\u002Fopen-design\u002Fblob\u002Fmain\u002Fskills\u002Ftaste\u002FSKILL.md",[],[],{"skillNo":199,"name":200,"nameZh":6,"description":201,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":173,"licenseFileUrl":6,"sourceHtmlUrl":202,"categories":203,"keywords":204,"publishedAt":19},"01M78AM56WPJM89TFE6X2NQ1TK","sora","Generate, remix, and manage short video clips via OpenAI's Sora API. Useful for cinematic shots, b-roll, and rapid concept video iteration.","https:\u002F\u002Fgithub.com\u002Fbluesman1971\u002Fopen-design\u002Fblob\u002Fmain\u002Fskills\u002Fsora\u002FSKILL.md",[],[]]