web-clone

技能：web-clone

两种截然不同的任务。先选择模式。

模式	输出	适用场景	引擎
snapshot	一个自包含的 .html（字节完全一致，可离线使用）	存档 / 忠实副本 / “原样保存以供离线使用”	内置内联器 · SingleFile CLI · monolith
reconstruct	整洁、可编辑的 Next.js + Tailwind 代码库	“重建为可编辑的代码” / “将界面克隆成代码”	the ai-website-cloner-template pipeline

模式和引擎位于 harness/web-clone.config.yaml 中（verified:false——实时捕获引擎和重建保真度属于尚未验证的未知项）。

内容

用途和背景

• 用途： 通过两种保真方式之一克隆网站——SNAPSHOT（自包含、字节完全一致的离线副本）或 RECONSTRUCT（重建为可编辑的 Next.js/Tailwind 代码库）。
• 触发条件（适用场景）： 用户想要“克隆这个网站”、复制某个页面的设计/UI 和交互、镜像布局、离线保存，或将网站重建为可编辑的代码。
• 非目标： 不承诺像素和行为都完美；不克隆他人网站并重新发布；不将页面转换为 Markdown 文本（那是 /web-crawl）。

心智模型

URL 或 page.html → 选择模式 → snapshot：引擎（内置内联器 · SingleFile CLI · monolith）→ clone.html / reconstruct：recon → 基础结构 → 组件规范 → 并行构建器 → 组装 → 视觉 QA 差异对比 → Next.js 代码库。模式和引擎是 harness/web-clone.config.yaml 中的适配器（verified:false）。

输入和输出约定

	字段	必填？	含义
输入	mode	是	snapshot 或 reconstruct——先选择
输入	本地 page.html 或在线 URL	是	本地 → 内置内联器离线处理；在线 → 需要引擎
输入	配置中的 engine	snapshot 在线模式下必填	singlefile-cli 或 monolith
输出	clone.html	snapshot 模式	一个自包含的 HTML+CSS+JS+图片文件
输出	Next.js + Tailwind 代码库	reconstruct 模式	可构建的组件规范 docs/research/components/<name>.spec.md + app/page.tsx

规则和能力

• RULE-01（必须）：说明模式并如实告知：snapshot 内置模式仅支持本地资源；忠实捕获在线页面需要引擎；reconstruct 的保真度取决于提取质量——绝不声称像素和行为都完美。
• RULE-02（必须）：遵守版权和服务条款——用于参考、离线查看或学习，不得重新发布他人网站。
• RULE-03（必须）：自测（snapshot 核心）：python3 harness/scripts/web-clone.py --self-test。
• 能力：读取页面（本地文件或通过已配置的引擎下载在线页面）；控制浏览器进行 recon；并行调度构建器；在本地写入克隆文件或代码库。

失败边界

• 在线 URL 的引擎尚未配置 → 内置模式只能内联本地资源 → 部分完成，需明确说明。
• 所有 snapshot 引擎对 JS 交互都仅尽力而为 → 不得声称行为完整。
• Reconstruct：构建器运行 npx tsc --noEmit 或 npm run build 报错 → 对该次合并视为失败，修复后重试。
• 用于违反版权或服务条款的重新发布 → 取消。

工作方式

主要工作流

步骤	类型	输入	操作	输出/退出	失败/后续
W01	判断	用户请求	选择模式（见上方模式表）+ 明确说明保真限制	mode	离线保存 → B01；代码可编辑 → B02
W02	确定性	—	运行 snapshot 核心自测 web-clone.py --self-test	rc 0	报错 → 停止并告知
W03	执行	mode	运行对应模式分支 A（snapshot）或 B（reconstruct）	clone.html 或代码库	查看对应分支
W04	判断	输出	报告结果和尽力而为的部分（JS 交互、保真度）	如实报告	—

各步骤的详细信息（W03 的真实依据，按模式划分）：

模式 A — 快照（忠实复制为单个文件）

1. **本地页面已下载：**离线，无需密钥 — python3 harness/scripts/web-clone.py inline <page.html> --out clone.html （将本地 <link> CSS、<script src> JS 和图片内联为 data-URI → 单个文件）。
2. **实时 URL，忠实复制：**设置 engine: singlefile-cli（npm i -g single-file-cli，保留脚本） 或 monolith（Rust），然后运行 web-clone.py url "<URL>" --out clone.html。
3. JS 交互 = 所有快照引擎均尽力实现（未知项已隔离）。

模式 B — 重构（→ 可编辑的 Next.js，采用 ai-website-cloner-template 方法）

这不是逐字节复制，而是对页面进行逆向工程，重建为全新、干净的代码库。方法 （提炼自 JCodesMore 的 ai-website-cloner-template，约 6k★；参见“相关内容”）：

1. 侦察 — 使用 browser-MCP/Computer-Use：截取桌面端 1440 + 移动端 390 的整页截图； 提取全局设计标记（字体、颜色、favicon）；通过滚动/点击/悬停检查每种交互行为；绘制页面拓扑图。
2. 基础架构 — 在 layout.tsx 中设置字体，在 globals.css 中设置颜色标记 + 动画，定义 TS 接口， 将内联 SVG 转为 React 图标组件，并编写 Node 资源下载脚本 → public/。
3. 组件规格与分派 — 对每个区块：读取精确的 getComputedStyle() 值（绝不估算）→ 编写 docs/research/components/<name>.spec.md（构建者契约：DOM、计算样式、状态转换、原文内容、资源路径、断点）→ 分派并行构建子 Agent（复杂区块中的每个子组件各一个；每份规格 ≤约 150 行）。
4. 组装 — 将组件导入 app/page.tsx；接入 scroll-snap / Lenis / IntersectionObserver。
5. 视觉 QA 差异对比 — 比较克隆页面与原页面在桌面端 + 移动端的效果，测试每种交互状态，并通过重新提取信息修复差异。构建者验证 npx tsc --noEmit；主流程在每次合并时运行 npm run build。

技术栈：Next.js + TypeScript + Tailwind v4 + shadcn/ui。通过 overstack /orchestration 或 Agent 工具分派构建者。

分支

ID	类型	条件	行为	跳过 / 失败	汇合
B01	user_optional	mode = snapshot	模式 A：本地页面 → inline；实时 URL → 引擎 singlefile-cli/monolith + url	尚未安装引擎 → 仅处理本地资源，并报告部分完成	W04
B02	user_optional	mode = reconstruct	模式 B 的 5 个阶段，通过 /orchestration 或 Agent 工具并行分派构建者	构建失败 → 重新提取信息并修复	W04
B03	capability_optional	忠实捕获实时页面需要外部引擎	在 harness/web-clone.config.yaml 中设置 engine:	未安装 → 使用内置引擎	B01

验证与停止条件

必须执行：python3 harness/scripts/web-clone.py --self-test；构建者运行 npx tsc --noEmit，主流程在每次合并时运行 npm run build。需要审查：克隆页面与原页面在桌面端 + 移动端的视觉 QA 差异，以及所有交互状态。当输出已生成且限制已明确说明时停止；不要无限重复重新提取信息——报告仍存在的差异。

示例

• 成功：“将这个页面原样保存为离线文件”，且已有下载的 page.html → python3 harness/scripts/web-clone.py inline page.html --out clone.html → 生成一个可离线打开的文件，CSS/JS/图片均内联为 data-URI。
• **边界情况/失败：**提供实时 URL，但配置中未设置引擎 → 只能内联本地资源，报告部分完成并建议运行 npm i -g single-file-cli；明确说明 JS 交互仅尽力实现，不声称完美。

相关内容

• harness/scripts/web-clone.py + harness/web-clone.config.yaml（引擎/模式适配器）。
• 重构方法：github.com/JCodesMore/ai-website-cloner-template（上述 5 阶段流程）。
• **快照引擎：**SingleFile（github.com/gildas-lormeau/SingleFile）、monolith。
• /web-crawl（页面 → Markdown 文本），/computer-use + /orchestration（侦察 + 并行构建者）。