前言¶
做前端原型、落地頁遷移或競品界面分析時，常見路徑是截圖對照手寫，或者讓智能體「照着畫一個」。截圖不是復刻：第一屏像了、輪播不能點、下半屏沒做，智能體卻可能已經宣佈完成。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>，即可在本地拿到帶分數證據的復刻結果，再由你決定是否驗收通過。
