專案定位與架構
rubenhassid1/remake（v0.1.0）是由 How to AI 電子報作者 Ruben Hassid 以 MIT 授權開源的網站重製與品牌替換引擎。傳統爬蟲或截圖匯入工具在離線重播時，常因時間差、隨機數、第三方 API 請求或捲動動畫不同步而破版。Remake 將流程拆為「單次擷取、時間凍結像素驗證、全站內容與圖片插槽替換、私有倉庫與密碼閘門部署」四個閉環階段，並針對 Claude Code 的 /goal 自主迴圈設計（以 remake report 輸出 REMAKE COMPLETE 作為終止條件）。
專案包含兩個核心組件：位於 engine/bin/remake.mjs 與 engine/lib/*.mjs 的命令列引擎（基於 Node.js >=20、playwright ^1.52.0、parse5 ^7.3.0 與 pngjs ^7.0.0），以及位於 plugins/remake/skills/remake/SKILL.md 的 Claude Code 技能定義。從 remake init 到 remake ship 的所有檔案均存放在專案根目錄的 site/（可部署靜態網站）與 remake/（快取、原始基準截圖、差異對照圖與插槽清單）中。
Stage 1 · 單次擷取與禮貌補抓：remake capture / fetch
- 以 Chromium 開啟目標網址一次，涵蓋桌面 1440x900 與手機 390x844 雙檢視視窗
- 攔截並記錄所有 HTTP 與 API 回應至 remake/.cache/http/，阻擋追蹤器並提取 Source Map 至 remake/sources/
- Polite 擷取器對缺漏資源採單主機單執行緒、間隔 0.5 秒（500 ms）請求，連續失敗 2 次自動改由 Internet Archive CDX 補抓
Stage 2 · 離線重播執行環境：site/ 與 runtime.js
- 將外部 CDN 資源重寫至 /_ext/<host>/...，移除 integrity 與 CSP 標籤
- 注入 runtime.js，依據 HTTP 方法、網址與請求本體 FNV-1a 32-bit 雜湊重播 fetch 與 XMLHttpRequest
- 停用 Service Worker 與 Beacon，並攔截表單送出以避免觸發外部後端
Stage 3 · 時間與隨機種子凍結：freeze.mjs
- 在首支腳本執行前暫停 Playwright 時鐘於 2026-01-01T12:00:00Z，每次依固定 100 ms 步進推進
- 以呼叫端檔名與行號建立獨立種子亂數串流（預設 seed 1337），取代全域 Math.random
- 將所有 video 元素停駐於第 0 幀、停用擷取階段 CSS 動畫，並以滑鼠滾輪步進觸發捲動事件
Stage 4 · 雜訊遮罩與像素評分：remake score / accept
- 對原始網站連續載入兩次，將兩次仍變動的像素向外膨脹 3 px 建立藍色雜訊遮罩
- 逐屏比對最多 40 個畫面與 24 個間隔 150 ms 的捲動動態幀；單一 RGB 通道差值超過 24/255 視為差異像素
- 通過門檻：每屏穩定像素 >= 98%、每幀動態捲動 >= 95%、頁面總高度誤差 <= 4 px
Stage 5 · 內容插槽與零原圖洩漏替換：remake slots / images / apply / board
- remake slots 以 parse5 解析標題、內文、按鈕、連結、標誌、圖片、影片、色彩與字型至 remake/content.json
- remake images 在 Chromium 內以 64x64 畫布與 k-means 計算 5 色調色盤、亮度、飽和度與構圖比例，不將原圖傳送給生成模型
- remake images --make 支援 Codex、OpenAI gpt-image-1、Gemini、CC0 圖庫或色盤藝術生成，並由 remake board 建立 /_remake/ 對照頁與 /_remake/swap/ 替換面板
Stage 6 · 私有倉庫與密碼閘門部署：remake ship / report
- 搬移 _next/static/immutable 避開 Vercel 保留路徑限制，透過 gh 建立私有 GitHub 倉庫
- 透過 vercel 部署並掛載 middleware.js 與 REMAKE_PASSCODE（未解鎖回傳 401、SHA-256 remake_pass Cookie 與 X-Robots-Tag noindex）
- remake report 彙整全部驗證閘門，全數通過時印出 REMAKE COMPLETE 供 /goal 迴圈結束任務
資料來源：docs/HOW-IT-WORKS.md、engine/bin/remake.mjs 與 engine/lib/*.mjs。
專案目錄與狀態檔案配置
remake init <url> 預設在 ~/remakes/<site> 建立工作目錄，將部署產物與驗證狀態分離：
| 路徑 | 產生階段 | 用途與結構說明 |
|---|---|---|
site/ | remake capture / apply / board | 部署至 Vercel 的靜態網站根目錄，內含 /_ext/<host>/ 外部資源、/_remake/ 左右拖曳證明頁與 /_remake/swap/ 替換面板。 |
remake/remake.json | remake init | 專案設定檔，記錄目標 url、pages、maxPages（預設 1）、雙視窗尺寸與評分門檻。 |
remake/.cache/http/ | remake capture | 單次錄製的 HTTP 與 API 回應儲存庫，供 remake score 重播原始網站時直接讀取，不再連線外部伺服器。 |
remake/original/ | remake score | 原始網站在雙視窗與動態捲動下的基準截圖（NN.png）、3 px 膨脹雜訊遮罩（NN.noise.png）與 meta.json。 |
remake/score/ 與 remake/score.json | remake score | 逐屏與逐幀的三合一差異對照圖（原站｜重製版｜紅色差異與藍色雜訊遮罩）及結構化評分報告。 |
remake/content.json | remake slots | 全站可替換插槽清單，包含 original、swap、status 與品牌替換完成度百分比（summary.yours）。 |
remake/images.json 與 images-sheet-NN.png | remake images | 待替換圖片的尺寸、方向、5 色調色盤、亮度、飽和度、prompt 與每頁 20 張的縮圖索引表（Contact Sheets）。 |
remake/credits.json | remake images --make | 記錄每張替換圖片的生成來源（Codex、OpenAI、Gemini、Openverse / Wikimedia Commons 圖庫或色盤幾何圖）與授權歸屬。 |
remake/ship.json 與 REPORT.md | remake ship / report | 記錄私有 GitHub 倉庫網址、Vercel 正式網址、REMAKE_PASSCODE、閘門外部驗證結果與最終報告。 |
環境需求與安裝步驟
Remake 需要 Node.js >=20、git、GitHub CLI（gh，已登入）、Vercel CLI（vercel，已登入）及 Playwright Chromium 瀏覽器。
Step 1：一鍵安裝腳本與 Claude Code 外掛市集
執行官方 install.sh 可自動檢查環境、將 remake CLI 連結至 ~/.local/bin/remake，並安裝技能至 ~/.claude/skills/remake；在 Claude Code 內亦可直接掛載外掛市集：
# Install Remake CLI and Claude Code skill with one command
curl -fsSL https://raw.githubusercontent.com/rubenhassid1/remake/main/install.sh | bash
# Or add the official plugin marketplace inside Claude Code
/plugin marketplace add rubenhassid1/remake
/plugin install remake@remakeStep 2：手動複製倉庫與 remake doctor --fix 自檢
若需檢視引擎原始碼或自訂安裝路徑，可將倉庫複製至 ~/.remake 並執行 remake doctor --fix 自動安裝缺失的 gh、vercel 與 Playwright Chromium（約 150 MB）：
git clone https://github.com/rubenhassid1/remake.git ~/.remake
cd ~/.remake && npm install
mkdir -p ~/.local/bin
ln -sf ~/.remake/engine/bin/remake.mjs ~/.local/bin/remake
# Check and auto-install missing dependencies (Node 20+, git, gh, vercel, Chromium)
remake doctor --fixStep 3：驗證登入狀態與選用圖片生成權杖
remake ship 需要 GitHub 與 Vercel 帳號權限；remake images --make 會依序偵測本機已登入的 Codex（~/.codex/auth.json）、環境變數 OPENAI_API_KEY、GEMINI_API_KEY（或 GOOGLE_API_KEY），若皆未設定則改用免費 CC0 圖庫（stock）與色盤幾何藝術（art）：
# Authenticate GitHub or Vercel in your browser if flagged by remake doctor
gh auth login --web
vercel login
# Confirm all prerequisites are ready
remake doctor核心技能與指令鏈
Remake 的 CLI 與 Claude Code 技能由 6 個核心操作模組組成，涵蓋擷取、除錯、像素驗證、內容替換與部署流程。
Phase 01 · Single-Visit Capture
remake init <url> · remake capture [--archive]
雙檢視視窗單次錄製、Source Map 提取與 Polite 佇列補抓
remake init 建立專案（預設 ~/remakes/<site>）；remake capture 以桌面（1440x900）與手機（390x844）各訪問一次，寫入 site/、提取 Source Map 至 remake/sources/，並以單主機間隔 0.5 s 的 Polite 佇列補齊響應式資源。
Phase 02 · Local Server & 404 Fetcher
remake serve [--port 4310] · remake fetch --missing
本機預覽伺服器、404 缺漏記錄與禮貌補抓
啟動本機預覽伺服器（含 /_remake/ 對照頁與 /_remake/swap/ 替換面板），將缺漏的字型、圖片或區塊路徑記錄至 remake/missing.log；隨後執行 remake fetch --missing 自動補抓並重寫路徑。
Phase 03 · Frozen-Time Pixel Scorer
remake score [--viewport] [--no-motion] · remake accept
時間凍結像素比對、3 px 雜訊遮罩與 24 幀捲動驗證
凍結時鐘與隨機種子，排除 3 px 膨脹藍色雜訊遮罩後逐屏比對（門檻 >= 98%）並驗證 24 幀捲動動態（門檻 >= 95%）。無法修復且分數 >= 90% 的外部差異可透過 remake accept 附理由簽認。
Phase 04 · Slot Parser & Visual Board
remake slots · remake board
全站內容插槽解析、左右滑桿證明頁與品牌替換面板
remake slots 使用 parse5 掃描 HTML 結構並輸出 remake/content.json；remake board 產生 site/_remake/ 左右滑桿對照頁、site/_remake/swap/ 品牌替換面板與 MAKE-IT-YOURS.md 逐步替換指南。
Phase 05 · Privacy-Safe Image Replacer
remake images [--make] · remake apply
零原圖洩漏之調色盤量測、多來源圖片生成與自動裁切套用
remake images 量測原圖尺寸、方向、5 色調色盤與明暗度至 remake/images.json；remake images --make 支援 codex、openai、gemini、stock 與 art 五種來源生成新圖；remake apply 將文字、色彩、Google Fonts 替代字型與裁切後圖片寫回 site/。
Phase 06 · Private Passcode Shipping
remake ship [--name] [--passcode] · remake report
私有 GitHub 倉庫、Vercel 密碼閘門部署與 /goal 完賽驗證
建立私有 GitHub 倉庫並部署至 Vercel，掛載 middleware.js 密碼閘門與 noindex 標頭，由外部發起請求驗證 401 鎖定與 303 Cookie 解鎖；remake report 檢查全部閘門並輸出 REMAKE COMPLETE。
remake score 與 remake report 驗收標準
搭配 Claude Code /goal 執行時，Agent 會持續修正 site/ 並重跑驗證，直到以下指標全數通過：
| 驗收項目 | 驗證指令 | 通過條件與行為規範 |
|---|---|---|
| 桌面與手機靜態畫面 | remake score | 每個檢視視窗（1440x900 與 390x844）最多擷取 40 個畫面，扣除藍色雜訊遮罩後，每一屏穩定像素一致率須 >= 98%。 |
| 頁面總高度誤差 | remake score | 重製版與原始網站的頁面總高度（height.original 對比 height.remake）差距須在 4 px 以內。 |
| 桌面捲動動態幀 | remake score | 第一頁桌面視窗在捲動過程擷取的 24 個連續畫面（頁面時間間隔 150 ms），每一幀穩定像素一致率須 >= 95%。 |
| 例外差異簽認 | remake accept | 僅限至少嘗試修復 3 次仍無法解決的外部因素（如商業字型差異或跨域 Canvas），且該屏分數已達 >= 90%，方可附理由簽認。 |
| 密碼閘門與防索引 | remake ship | 未帶 Cookie 存取須回傳 HTTP 401 與 X-Robots-Tag: noindex；POST /_remake/gate 正確密碼後須回傳 303 與 remake_pass= Cookie 並解鎖。 |
| 最終完賽報告 | remake report | 彙整擷取、評分、插槽、面板與部署狀態，全數通過時回傳結束代碼 0 並印出 REMAKE COMPLETE。 |
進階驗證與替換技巧
以下做法整理自 docs/HOW-IT-WORKS.md、plugins/remake/skills/remake/SKILL.md 與 engine/lib/ 原始碼。
遭遇防爬蟲驗證牆時改用 --archive 模式
Remake 絕不繞過登入牆或驗證碼。若目標網站回傳 403 或機器人檢查頁面，直接執行 remake capture --archive（可指定時間戳記如 remake capture --archive 20250601），引擎會改從 Internet Archive Wayback Machine 載入該站歷史快照並建立離線重播。
解讀 remake/score/ 三合一差異圖定位跑版根因
remake score 產生的 <page>-<viewport>-<screen>.png 由左至右並排顯示原站截圖、重製版截圖與差異標記圖（紅色代表超過 24/255 的差異像素、藍色代表已排除的動態雜訊）。若整塊區域呈紅色，優先檢查 remake/missing.log 是否缺漏字型或 CSS 背景圖，或是 scrollSettleMs 尚未觸發懶載入元素。
善用呼叫端種子亂數與 FNV-1a API 重播修正動態元件
若頁面因隨機排序或動態 API 呼叫導致每次繪製不一致，請勿直接刪除腳本：freeze.mjs 已依檔名與行號固定 Math.random（預設 seed: 1337），而 runtime.js 會以請求方法、網址與 Body 的 32-bit FNV-1a 雜湊匹配錄製的回應。若前端腳本帶有動態時間戳查詢參數，可在 site/ 內將該參數固定以命中快取。
在 ChatGPT Plus/Pro 方案下優先以 Codex 生成替換圖片
若本機已安裝 Codex 並完成 ~/.codex/auth.json 登入，remake images --make --source codex 會自動挑選清單中輕量快速的模型驅動影像工具，依原圖的 orientation（1536x1024、1024x1536 或 1024x1024）與 look（色盤、明暗、飽和度）批次生成無文字與無浮水印的新圖片，無須額外支付 API 費用。
實戰範例：像素級重製與品牌替換部署
以下工作流示範如何針對公開展示網站（以 https://example.com 為例）建立重製專案、完成像素與捲動評分、將全站文字與圖片替換為新品牌，並部署至受密碼保護的 Vercel 預覽站。
步驟一：初始化專案、單次擷取與缺漏資源補抓
建立專案並執行 remake capture，再透過 remake serve 檢查是否有延遲載入的 404 資源：
# 1. Initialize project (defaults to ~/remakes/example-com, up to 1 page)
remake init https://example.com --pages 1
cd ~/remakes/example-com
# 2. Capture desktop (1440x900) and phone (390x844) in a single visit
remake capture
# 3. Politely fetch any lazy-loaded 404 files recorded in remake/missing.log
remake fetch --missing步驟二：執行時間凍結像素與捲動動態評分
執行 remake score 比對重製版與原站快取；若特定畫面未達 98% 或動態幀未達 95%，可指定單一檢視視窗快速重測：
# Run full dual-viewport screen scoring (>= 98%) and 24-frame desktop motion (>= 95%)
remake score
# Re-test only the phone viewport without motion for fast CSS debugging
remake score --viewport phone --no-motion
# Run full verification once all screens pass
remake score步驟三：提取內容插槽、生成品牌圖片並套用面板
當 SCORE: PASS 後，依序解析插槽、量測圖片構圖與色盤、生成新圖並建置對照面板：
# 1. Parse all text, button, color, font, and image slots into remake/content.json
remake slots
# 2. Measure original image dimensions and 5-color palettes into remake/images.json
remake images --theme "Warm minimalist ceramic studio in Kyoto"
# 3. After writing a prompt for each entry in remake/images.json, generate new images
remake images --make --parallel 3
# 4. After filling swap values in remake/content.json, write text, colors, fonts, and images to site/
remake apply
# 5. Build /_remake/ proof page, /_remake/swap/ swap board, and MAKE-IT-YOURS.md
remake board步驟四：部署至私有 GitHub 與 Vercel 密碼閘門並完賽
執行 remake ship 搬移 Vercel 保留資料夾、推送私有倉庫、設定 REMAKE_PASSCODE 並驗證閘門，最後以 remake report 取得完賽證明：
# Create private GitHub repo and deploy to Vercel behind a passcode gate
remake ship --name remake-example-studio
# Verify all gates; prints REMAKE COMPLETE (exit code 0) when finished
remake report安全邊界與限制
延伸學習路徑
Code Animation Prompts 程式碼動畫提示詞庫：探索 341 組跨 10 大系列的程式碼動畫風格提示詞、196 張參考截圖與
render_video.py逐幀確定性匯出管線，為重製後的網站 Hero 區塊製作高畫質動態視覺。花叔藝術動效庫 huashu-art-motion：參考 53 張藝術風格配方卡、9 套解釋型動畫語法與 17 個搭配 Playwright 渲染的 Canvas/SVG 視覺函式庫，擴充網站重製後的品牌視覺語言。
15 種純程式碼 MG 動畫風格實戰：剖析 15 支 Claude Opus 5.5 10 秒純程式碼 MG 動畫、
mgaudio103 個取樣配樂合成器與rubric.md兩輪 AI 審查工作流，學習如何將重製網站的視覺評分迴圈延伸至動態影片製作。