Back to Details

web-clone

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Skill: web-clone

Skill: web-clone

Two honestly-different jobs. Pick the mode first.
ModeOutputUse whenEngine
snapshotONE self-contained 
.html
(exact bytes, offline)		archive / faithful copy / "lưu y hệt offline"builtin inliner · SingleFile CLI · monolith
reconstructclean Next.js + Tailwind codebase (editable)"rebuild as code I can edit" / "clone giao diện thành code"the ai-website-cloner-template pipeline
Mode + engine live in 
harness/web-clone.config.yaml
(
verified:false
— the live-capture engine and reconstruct fidelity are the quarantined unknowns).
两个本质不同且明确区分的任务。先选择模式。
模式输出使用场景引擎
snapshot一个自包含的 
.html
文件（字节完全一致，可离线使用）		归档 / 忠实副本 / “原样离线保存”内置 inliner · SingleFile CLI · monolith
reconstruct干净、可编辑的 Next.js + Tailwind 代码库“重建为我可编辑的代码” / “把界面克隆成代码”ai-website-cloner-template 流程
模式和 engine 均在 
harness/web-clone.config.yaml
中配置（
verified:false
——实时捕获 engine 和 reconstruct 保真度均属于隔离待验证的不确定项）。

WHAT

WHAT

Purpose và context

用途与上下文

  • Purpose: clone một website theo một trong hai mode trung thực khác nhau — SNAPSHOT (bản offline tự chứa, đúng byte) hoặc RECONSTRUCT (dựng lại thành codebase Next.js/Tailwind sửa được).
  • Trigger (when to use): user muốn "clone this site", copy design/UI + interactions của một trang, mirror a layout, save offline, hoặc rebuild site thành code sửa được.
  • Non-goals: không cam kết pixel+behavior hoàn hảo; không clone để republish site người khác; không phải page → markdown text (đó là 
    /web-crawl
    ).
  • 用途： 根据两种本质不同且明确区分的模式之一克隆网站——SNAPSHOT（自包含、字节完全一致的离线副本）或 RECONSTRUCT（重建为可编辑的 Next.js/Tailwind 代码库）。
  • 触发条件（何时使用）： 用户希望“clone this site”、复制页面的设计/UI + 交互、镜像布局、保存为离线文件，或将网站重建为可编辑代码。
  • 非目标： 不承诺像素和行为完全一致；不克隆网站用于再次发布他人的站点；不用于将页面转换为 Markdown 文本（那属于 
    /web-crawl
    ）。

Mental model

心智模型

URL hoặc page.html → chọn mode → snapshot: engine (builtin inliner · SingleFile CLI · monolith) → clone.html
/ 
reconstruct: recon → foundation → component spec → parallel builders → assembly → visual-QA diff → Next.js codebase
. Mode + engine là adapter trong 
harness/web-clone.config.yaml
(
verified:false
).
URL 或 page.html → 选择 mode → snapshot：engine（builtin inliner · SingleFile CLI · monolith）→ clone.html
/ 
reconstruct：recon → foundation → component spec → parallel builders → assembly → visual-QA diff → Next.js codebase
。mode + engine 是 
harness/web-clone.config.yaml
中的 adapter（
verified:false
）。

Input và output contract

输入与输出约定

FieldRequired?Ý nghĩa
Inmodecósnapshot hoặc reconstruct — chọn trước
Inpage.html local hoặc URL livecólocal → builtin inliner offline; live → cần engine
Inengine trong configkhi snapshot live
singlefile-cli
hoặc 
monolith
Out
clone.html
mode snapshotmột file tự chứa HTML+CSS+JS+ảnh
Outcodebase Next.js + Tailwindmode reconstructcomponent spec 
docs/research/components/<name>.spec.md
+ 
app/page.tsx
build được
字段是否必填含义
输入mode是snapshot 或 reconstruct——需事先选择
输入本地 page.html 或实时 URL是本地 → 使用内置 inliner 离线处理；实时 → 需要 engine
输入config 中的 enginesnapshot live 时必填
singlefile-cli
或 
monolith
输出
clone.html
mode 为 snapshot一个自包含 HTML+CSS+JS+图片的文件
输出Next.js + Tailwind 代码库mode 为 reconstruct可构建的组件规格 
docs/research/components/<name>.spec.md
+ 
app/page.tsx

Rules và capabilities

规则与能力

  • RULE-01 (MUST): State the mode + be honest: snapshot builtin = LOCAL resources only; faithful live capture needs an engine; reconstruct fidelity depends on extraction quality — never claim pixel+behavior perfection.
  • RULE-02 (MUST): Respect copyright / Terms — clone for reference/offline/learning, not to republish someone's site.
  • RULE-03 (MUST): Self-test (snapshot core): 
    python3 harness/scripts/web-clone.py --self-test
    .
  • Capabilities: đọc trang (file local hoặc tải live qua engine đã cấu hình); điều khiển trình duyệt để recon; dispatch builder song song; ghi file clone/codebase cục bộ.
  • RULE-01（MUST）：说明 mode 并保持诚实：snapshot 内置模式 = 仅支持 LOCAL 资源；忠实的实时捕获需要 engine；reconstruct 的保真度取决于提取质量——绝不能声称像素和行为完全一致。
  • RULE-02（MUST）：遵守 copyright / Terms——克隆仅可用于参考、离线保存或学习，不得用于再次发布他人的网站。
  • RULE-03（MUST）：执行 snapshot 核心自测：
    python3 harness/scripts/web-clone.py --self-test
    。
  • 能力：读取页面（本地文件或通过已配置的 engine 下载实时页面）；控制浏览器进行 recon；并行 dispatch builder；将 clone/codebase 写入本地。

Failure boundaries

失败边界

  • Live URL mà engine chưa cấu hình → builtin chỉ inline tài nguyên LOCAL → partial, nói rõ.
  • JS interactions ở mọi engine snapshot = best-effort → không claim đầy đủ hành vi.
  • Reconstruct: builder 
    npx tsc --noEmit
    hoặc 
    npm run build
    đỏ → failed cho merge đó, sửa rồi chạy lại.
  • Mục đích republish vi phạm copyright/Terms → cancelled.
  • 实时 URL 尚未配置 engine → 内置模式只能 inline 本地资源 → partial，需如实说明。
  • 所有 snapshot engine 中的 JS 交互均为 best-effort → 不得声称行为完整。
  • Reconstruct：builder 执行 
    npx tsc --noEmit
    或 
    npm run build
    失败 → 该次合并判定为 failed，修复后重新运行。
  • 目的在于再次发布且违反 copyright/Terms → cancelled。

HOW

HOW

Main workflow

主流程

StepTypeInputsActionOutputs/exitFailure/next
W01judgmentyêu cầu userChọn mode (bảng mode ở trên) + nói rõ giới hạn trung thựcmodelưu offline → B01; code sửa được → B02
W02deterministic—Self-test lõi snapshot 
web-clone.py --self-test
rc 0đỏ → dừng, báo
W03effectmodeChạy nhánh mode A (snapshot) hoặc B (reconstruct)
clone.html
hoặc codebase		xem nhánh
W04judgmentoutputBáo kết quả + phần best-effort (JS interactions, fidelity)báo cáo trung thực—
Chi tiết từng bước (nguồn chân lý cho W03, theo mode):
StepTypeInputsActionOutputs/exitFailure/next
W01判断用户需求选择 mode（使用上方的模式表）并如实说明限制mode保存离线 → B01；生成可编辑代码 → B02
W02确定性—对 snapshot 核心执行自测：
web-clone.py --self-test
rc 0失败 → 停止并报告
W03副作用mode运行模式 A（snapshot）或模式 B（reconstruct）
clone.html
或代码库		参见对应分支
W04判断output报告结果以及 best-effort 部分（JS 交互、保真度）如实报告—
每个步骤的详细信息如下（W03 的执行依据，按模式划分）：

Mode A — snapshot (faithful 1-file copy)

模式 A——snapshot（忠实的单文件副本）

  1. Local page already downloaded: offline, no key — 
    python3 harness/scripts/web-clone.py inline <page.html> --out clone.html
    (inlines local 
    <link>
    CSS, 
    <script src>
    JS, images as data-URI → one file).
  2. Live URL, faithful: set 
    engine: singlefile-cli
    (
    npm i -g single-file-cli
    , keeps scripts) or 
    monolith
    (Rust), then 
    web-clone.py url "<URL>" --out clone.html
    .
  3. JS interactions = best-effort across all snapshot engines (the quarantined unknown).
  1. 本地页面已下载： 离线，无需 key—— 
    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
    ，保留 scripts） 或 
    monolith
    （Rust），然后运行 
    web-clone.py url "<URL>" --out clone.html
    。
  3. JS 交互 = best-effort，适用于所有 snapshot engine（隔离待验证的不确定项）。

Mode B — reconstruct (→ editable Next.js, the ai-website-cloner-template method)

模式 B——reconstruct（转换为可编辑的 Next.js，采用 ai-website-cloner-template 方法）

This is NOT a byte-copy — it reverse-engineers the page into a fresh, clean codebase. Method (distilled from JCodesMore's 
ai-website-cloner-template
, ~6k★; see Related):
  1. Reconnaissance — browser-MCP/Computer-Use: full-page screenshots @desktop 1440 + mobile 390; extract global design tokens (fonts, colors, favicons); sweep scroll/click/hover to find every interactive behavior; map page topology.
  2. Foundation — 
    layout.tsx
    fonts, 
    globals.css
    color tokens + animations, TS interfaces, inline SVGs → React icon components, Node asset-download script → 
    public/
    .
  3. Component spec & dispatch — per section: read EXACT 
    getComputedStyle()
    values (never estimate) → write 
    docs/research/components/<name>.spec.md
    (the builder contract: DOM, computed styles, state transitions, verbatim content, asset paths, breakpoints) → dispatch parallel builder subagents (one per sub-component for complex sections; ≤~150 lines spec each).
  4. Assembly — import components into 
    app/page.tsx
    ; wire scroll-snap / Lenis / IntersectionObserver.
  5. Visual-QA diff — compare clone vs original @desktop+mobile, test every interactive state, fix discrepancies by re-extracting. Builders verify 
    npx tsc --noEmit
    ; main 
    npm run build
    per merge.
Stack: Next.js + TypeScript + Tailwind v4 + shadcn/ui. Dispatch builders via overstack 
/orchestration
or the Agent tool.
这不是字节级复制——它会将页面逆向工程为全新、干净的代码库。方法如下： （提炼自 JCodesMore 的 
ai-website-cloner-template
，约 6k★；参见“相关”部分）
  1. Reconnaissance——browser-MCP/Computer-Use：分别以 desktop 1440 和 mobile 390 生成整页截图；提取全局 design tokens（字体、颜色、favicon）；遍历 scroll/click/hover 以找出所有交互行为；映射页面拓扑结构。
  2. Foundation——在 
    layout.tsx
    中设置字体，在 
    globals.css
    中定义颜色 tokens 与动画，编写 TS interfaces，将 inline SVG 转换为 React 图标组件，并创建用于把资源下载到 
    public/
    的 Node 资源下载脚本。
  3. Component spec 与 dispatch——针对每个 section：读取准确的 
    getComputedStyle()
    值（绝不估算）→ 编写 
    docs/research/components/<name>.spec.md
    （builder 约定：DOM、computed styles、state transitions、逐字内容、资源路径、breakpoints）→ dispatch parallel builder subagents（复杂 section 可为每个子组件分派一个；每份规格约不超过 150 行）。
  4. Assembly——将组件导入 
    app/page.tsx
    ；连接 scroll-snap / Lenis / IntersectionObserver。
  5. Visual-QA diff——在 desktop+mobile 下比较 clone 与 original，测试每一种交互状态，并通过重新提取信息修复差异。Builders 验证 
    npx tsc --noEmit
    ；每次 merge 后，主流程运行 
    npm run build
    。
技术栈：Next.js + TypeScript + Tailwind v4 + shadcn/ui。通过 overstack 的 
/orchestration
或 Agent 工具 dispatch builders。

Branches

分支

IDKindGuardHành viSkip / failureRejoin
B01user_optionalmode = snapshotMode A: page local → 
inline
; live URL → engine 
singlefile-cli
/
monolith
+ 
url
engine chưa có → chỉ tài nguyên local, báo partialW04
B02user_optionalmode = reconstructMode B 5 pha, builder song song qua 
/orchestration
hoặc Agent tool		build đỏ → re-extract, sửaW04
B03capability_optionallive capture trung thực cần engine ngoàiset 
engine:
trong 
harness/web-clone.config.yaml
không cài → builtinB01
IDKindGuard行为跳过或失败处理汇合点
B01user_optionalmode = snapshot模式 A：本地 page → 
inline
；实时 URL → engine 
singlefile-cli
/
monolith
+ 
url
engine 不可用 → 仅使用本地资源并报告 partialW04
B02user_optionalmode = reconstruct模式 B 的 5 个阶段，通过 
/orchestration
或 Agent 工具并行 dispatch builders		build 失败 → 重新提取并修复W04
B03capability_optional忠实的实时捕获需要外部 engine在 
harness/web-clone.config.yaml
中设置 
engine:
未安装 → 使用内置模式B01

Validation và stopping

验证与停止条件

Tất định: 
python3 harness/scripts/web-clone.py --self-test
; builders 
npx tsc --noEmit
, main 
npm run build
mỗi lần merge. Cần review: visual-QA diff clone vs gốc @desktop+mobile và mọi trạng thái tương tác. Dừng khi output có và giới hạn đã nói rõ; không lặp re-extract vô hạn — báo phần còn lệch.
确定性验证：运行 
python3 harness/scripts/web-clone.py --self-test
；builders 运行 
npx tsc --noEmit
；每次 merge 后主项目运行 
npm run build
。需要人工 review：在 desktop+mobile 下执行 clone 与原页面的 visual-QA diff，并检查所有交互状态。当 output 已生成且限制已明确说明时停止；不要无限重复 re-extract——应报告仍然存在的偏差。

Examples

示例

  • Positive: "lưu y hệt offline trang này" với 
    page.html
    đã tải → 
    python3 harness/scripts/web-clone.py inline page.html --out clone.html
    → một file mở offline được, CSS/JS/ảnh inline data-URI.
  • Boundary/failure: đưa URL live nhưng config chưa đặt engine → chỉ inline được tài nguyên local, báo partial và gợi ý 
    npm i -g single-file-cli
    ; tương tác JS ghi rõ best-effort, không claim hoàn hảo.
  • 正向示例： 对已下载的 
    page.html
    提出“原样离线保存此页面” → 
    python3 harness/scripts/web-clone.py inline page.html --out clone.html
    → 生成一个可离线打开的单文件，其中 CSS、JS 和图片均通过 data-URI 内联。
  • 边界或失败示例： 提供实时 URL，但 config 中尚未设置 engine → 只能 inline 本地资源，应报告 partial，并建议运行 
    npm i -g single-file-cli
    ；同时明确说明 JS 交互为 best-effort，不能声称完全一致。

Related

相关

  • harness/scripts/web-clone.py
    + 
    harness/web-clone.config.yaml
    (engine/mode adapter).
  • Reconstruct method: 
    github.com/JCodesMore/ai-website-cloner-template
    (the 5-phase pipeline above).
  • Snapshot engines: SingleFile (
    github.com/gildas-lormeau/SingleFile
    ), monolith.
  • /web-crawl
    (page → markdown text), 
    /computer-use
    + 
    /orchestration
    (recon + parallel builders).
  • harness/scripts/web-clone.py
    + 
    harness/web-clone.config.yaml
    （engine/mode adapter）。
  • Reconstruct 方法：
    github.com/JCodesMore/ai-website-cloner-template
    （上述五阶段流程）。
  • Snapshot engines：SingleFile（
    github.com/gildas-lormeau/SingleFile
    ）、monolith。
  • /web-crawl
    （页面 → Markdown 文本）、
    /computer-use
    + 
    /orchestration
    （recon + 并行 builders）。