網站復刻方法論 web-clone skill:先拿真源碼,不抄 AI 幻覺程式碼
claude-skill-web-clone: Methodology for faithfully cloning any website (static / React / WebGL)
摘要分析
Jane-xiaoer 的 web-clone skill(⭐1.1k,被 ⭐10 萬的 open-design 專案採用)是一套決策樹方法論:先在 GitHub 搜真實源碼,找不到才用瀏覽器偵察(爬路由、抓網路請求、記錄互動);再依站型選路徑——靜態站 wget 鏡像、React/Next 內容站模板重建、WebGL 重前端逆向拆解;保留原始 HTML 唯讀,用截圖像素比對驗證,最後換成自己的內容與品牌。附 recon、route-crawl、visual-diff 等腳本,並強調授權檢查。
- git clone https://github.com/Jane-xiaoer/claude-skill-web-clone.git ~/.claude/skills/web-clone
- 第一步永遠先搜 GitHub 有沒有真源碼
- 依站型選路徑:靜態→wget;React/Next→模板重建;WebGL→逆向
- 用 scripts/visual-diff.mjs 做像素比對驗證
- 只有 MIT/Apache/BSD/Unlicense 可明確再部署,無授權=保留所有權利
Jane-xiaoer's web-clone skill (about 1.1k stars, 127 forks, last pushed 2026-06-30) is a methodology rather than a tool, and the 100k-star open-design project adapted it. Its decision tree: search GitHub for the real source first; only if none exists, probe the site in a browser by crawling routes, capturing network traffic and recording interactions; then choose a path, wget mirror for static sites, template rebuild for React/Vue/Next content sites, reverse engineering for WebGL/Canvas-heavy fronts, or a theme; set up a project directory keeping the original HTML read-only; strip tracking, write notes and verify with screenshot pixel diffs; finally replace text, media and brand colors with your own. Scripts include recon-site, mirror-site, route-crawl, interaction-probe, network-capture, asset-harvest, dna-scaffold and visual-diff. It stresses license checks: code without a license is treated as all rights reserved.
- git clone into ~/.claude/skills/web-clone
- Always search GitHub for real source first
- Static → wget; React/Next → template rebuild; WebGL → reverse engineer
- Verify with visual-diff.mjs
- Only MIT/Apache/BSD/Unlicense are clearly redeployable
關鍵字:網站復刻web-clone逆向工程Claude Code skill授權
來源原文:https://github.com/Jane-xiaoer/claude-skill-web-clone
本頁為報導內容的摘要與分析,版權屬原媒體所有;請以原文為準。
