前言¶
做前端原型、落地页迁移或竞品界面分析时，常见路径是截图对照手写，或者让智能体「照着画一个」。截图不是复刻：第一屏像了、轮播不能点、下半屏没做，智能体却可能已经宣布完成。DeepSeek Harness（dsh）把工具、技能与会话都做成可插拔扩展；社区目录 SkillHub 插件库 按功能分类收录了大量 DSH 插件。需要说明：该站点是面向中国用户的独立社区目录，与 DeepSeek / 幻方没有官方从属关系，不是官方应用商店。
目录「联网工具」分类下的 ericshang98/perfect-web-clone（GitHub 仓库名 Perfect-Web-Clone）走另一条路：粘贴 URL，走完整抓取 → 切分区块 → 生成干净 React → 构建 → 测量打分 → 定向修复的流水线，最后交出本地可预览、带证据的 Vite + React 工程。本稿核对时 GitHub 显示 257 星、23 forks；目录页归类为「联网工具」，许可证 MIT。
本文按 SkillHub 目录详情页、官方 install-plan 接口、GitHub README 与仓库 plugin/index.js 交叉核对后整理。
这是什么¶
perfect-web-clone 由 GitHub 用户 ericshang98 维护，一句话定位是：把任意网页做成像素级可测量复刻，输出 Vite + React 工程。仓库自述强调：本仓是测量核心（core/、pwc/），真正的「产品」是 skill/SKILL.md 里定义的智能体 harness——一句话 clone <url> 授权整条本地复刻流水线。
它和「截个图让模型猜」的区别在于：pwc CLI 负责确定性的抓取、构建、指纹扫描与视觉打分，从不调用模型；智能体负责读证据、写 React 组件、按测量结果修最差区块。完成标准不是主观「看起来差不多」，而是门禁表：ready_for_user_review（可交用户审阅）或 failed_with_residuals（带残留项失败），并附带证据路径。
作为 DSH 插件，它还会在运行时注册 pwc_extract、pwc_plan、pwc_assemble、pwc_build 等工具，并把 perfect-web-clone 技能注入会话，让 dsh web 里的智能体可以直接驱动整条流水线。
核心功能¶
整页抓取与资源本地化¶
pwc extract <url> 抓取活页：DOM、计算样式、字体、图片、视频等进入不可变源证据，资源本地化，不再热链原站。抓取带完整性检查；capture_integrity.status 必须为 passed 才能继续规划，不完整就停止，禁止凭猜测补内容。
若页面依赖 WebGL、运行时 canvas 或滚动编排，会在前期报告 ceiling：内容仍可复刻，运行时绘制出来的观感不一定能还原。
按真实区块规划与 React 重写¶
pwc plan <source_id> 按页面真实 #main 子节点切 section，每个 section 是后续编写与修复的单位。pwc assemble 初始化 Vite + React + Tailwind 壳工程；智能体为每个 section 写干净的语义化 JSX 与局部样式，放在 src/components/sections/ 下，而不是搬运源站框架 class 或嵌一张整页截图。
要求包括：粘性布局不裁剪、页脚按几何重建、懒加载内容尽量恢复、视频控件可播放、交互控件必须能点（长得像但不能点的轮播、菜单、Tab 视为失败）。
门禁打分与定向修复¶
构建通过后依次跑门禁：
pwc fingerprints <dist/>：扫描 Shopify class、原始 CSS 指纹等源框架残留pwc weight <dist/>：gzip 后 HTML/CSS/JS 体积预算（默认约 120KB 量级，可配）pwc score --ref <参考图> --cand <复刻图>：SSIM 等视觉匹配，可按 section 边界分项
某 section 不达标时，修测量最差的那一块，重建，再跑受影响门禁；每 breakpoint × state 最多约五次修复尝试。不接受用 aggregate 分数掩盖结构或交互失败。
DSH 插件侧的工具映射¶
plugin/index.js 把上述 CLI 封装成 DSH 工具（均返回 JSON，ok 为唯一通过标志）：
| 工具 | 作用 |
|---|---|
pwc_extract |
抓取 URL，返回 source_id |
pwc_plan |
对 source_id 做 section 规划 |
pwc_assemble |
生成 Vite + React 壳工程 |
pwc_build |
在沙箱里 npm run build |
pwc_fingerprints |
扫描 dist/ 框架指纹 |
pwc_weight |
测量 dist/ gzip 体积 |
pwc_score |
对比参考图与复刻图视觉分 |
同时注册 perfect-web-clone 技能，触发词包括 clone、copy、reproduce、复刻等。
安装与启用¶
需要 Python 3.10+ 与 Node 20+。插件工具依赖本机可执行的 pwc 命令，需先装 Python 包与 Playwright Chromium：
pip install "git+https://github.com/ericshang98/Perfect-Web-Clone.git"
playwright install chromium
在 DeepSeek Harness 中安装插件。SkillHub 目录页 install-plan 接口给出的官方命令如下（固定 commit，便于可复现安装）：
dsh plugin --profile web add github:ericshang98/perfect-web-clone#c846c37937a70497d37d082c26c85aa1289a9fa5
安装计划还要求：核对仓库所有者、精确 commit 与 package.json 中的 dsh.bundle.patch；审查 prepare / postinstall 等生命周期脚本；装完后启动或重启：
dsh --profile web
并确认插件行已挂载且无启动错误。若只想跟踪最新 main，可去掉 #commit 后缀，但可复现性会下降。
除 DSH 插件外，同一套 playbook 也可装进 Claude Code、Codex 等能执行 pwc 的编码智能体：仓库 README 指向独立发布的 perfect-web-clone-skill。两条路径共用同一 SKILL.md 逻辑，可按环境二选一或并用。
典型用法¶
对智能体说一句¶
在已加载技能或插件的会话里，自然语言即可：
clone https://example.com
或中文：
复刻 https://example.com
单条指令授权整条流水线；默认产出本地构建与预览 URL，不会自动部署，除非你明确要求。
手动分步 CLI¶
适合调试或只想用「手与眼」、自己写代码的场景：
pwc extract https://example.com
pwc plan <source_id>
pwc assemble <source_id>
# 为每个 section 编写组件后：
pwc assemble <source_id>
pwc build
pwc fingerprints dist/
pwc weight dist/
pwc score --ref reference.png --cand clone.png
每条命令打印 JSON；ok: false 或 success: false 应停下来读错误证据再修。
在 DSH Web 里通过工具驱动¶
装完插件并重启 dsh --profile web 后，智能体可调用 pwc_extract 等工具，由模型读返回 JSON 决定下一步。确定性步骤不消耗「猜布局」的 token，修复集中在测量最差的 section 上。
适用场景与注意事项¶
适合：
- 需要可继续开发的 Vite + React 源码，而不是一张静态图
- 落地页、营销站、文档站等以 DOM + CSS 为主的页面迁移或改版原型
- 希望复刻结果有指纹、体积、视觉分项分数，便于验收与迭代
- 已在用
dsh web，想让智能体在对话里一键发起整页复刻
不太适合或需降低预期：
- 强依赖 WebGL / 运行时 canvas / 复杂滚动编排的站点（ceiling 会 upfront 说明）
- 只要「大概像」、不需要交互与整页完整性的场景（本插件门禁偏严，成本更高）
- 无法安装 Playwright、Node 20 或 Python 3.10+ 的环境
安全与权限：
DSH 插件以当前 dsh 进程权限运行，会读写工作区、执行 npm run build、通过 Playwright 访问你提供的 URL。安装前应阅读仓库源码与 MIT 许可证，确认抓取目标站点的合规性；不要对不可信 URL 盲目 clone。目录 install-plan 明确：不要对 dsh plugin add 使用 --force，也不要在 profile 里直接手跑 pnpm install/add 绕过插件机制。
生态说明：
DeepSeek Harness 官方理念是「一切皆插件」；perfect-web-clone 是社区贡献的联网工具类扩展，SkillHub 标注 installability: verified，但仍属第三方维护，与 DeepSeek 官方无从属关系。星标、commit 与门禁阈值以你安装时目录页与 GitHub 为准。
结尾¶
如果你厌倦了「截图式复刻」和智能体过早喊完成，perfect-web-clone 把网页克隆收成一条可测量流水线：确定性 pwc 负责抓取与打分，智能体负责写代码和修最差区块，交付的是可构建的 Vite + React 工程与明确终端状态。
- 目录页：SkillHub — ericshang98/Perfect-Web-Clone
- GitHub：ericshang98/Perfect-Web-Clone
- 独立技能包：ericshang98/perfect-web-clone-skill
装插件、装 pwc、对智能体说一句 clone <url>，即可在本地拿到带分数证据的复刻结果，再由你决定是否验收通过。
