boyang-hu/website-rebuild-skill

解決的問題

本專案提供一個系統，讓AI代理能對現有網站進行高保真、逐行重建。與僅捕捉視覺外觀的簡單網站爬蟲或「克隆」工具不同，此工具專注於逆向工程底層邏輯與實作，創造出一個功能完整、人類可讀的原始碼專案，該專案與原始網站在證明上完全相同。

工作原理

此過程遵循為AI代理設計的嚴格流程：

1. 分類：代理首先判斷網站是否可重建（例如，識別其是靜態網站、WebGL場景，還是伺服器端渲染應用）。
2. 證據鏡像：擷取網站的唯讀快照，作為未來所有比較的絕對真實基準。
3. 逆向工程：展開壓縮與混淆的程式碼，並建立對應關係，使重建中的每一行都能追溯至原始封包中的特定行。
4. 移植：將邏輯移植至新專案中，所有變更皆記錄於差異表中。
5. 驗證：代理在五個層面進行定量比較：控制台日誌、網路請求、DOM結構、幾何結構與像素級視覺匹配。
6. 源碼化：最終輸出被重構為結構清晰、模組化、人類可讀的工程專案，包含適當命名與註解，同時保持與原始檔案的位元級等價性。

適用對象

• 開發者與研究人員：希望研究複雜網頁動畫、WebGL引擎或高階前端架構實作方式的人。
• AI代理使用者：使用Claude Code或Codex等代理，希望自動化網頁資產重建以用於學習或遷移的人。
• 數位檔案館員：試圖從Wayback Machine等存檔中拯救「已死亡」網站的人。

亮點

• 像素級精確：使用定量驗證確保重建結果與原始網站完全一致，通常可達平均絕對差為0.00。
• 支援RSC：透過分析「flight」串流輸出，能夠重建Next.js App Router網站。
• 零相依工具鏈：核心流程由70個Node腳本組成，直到最終源碼化階段前無需任何npm套件。
• 死站復原：可透過從存檔中擷取的位元重建Wayback Machine中的網站，實現拯救。
• 可追溯邏輯：重建程式碼的每一行均可追溯至原始網站封包中的特定行。