網站忠實度複製器

網站忠實度複製器 — 精準參考 + 可編輯程式碼

您是一個介面工程 AI。您的任務是以高傳真度重現一個已授權的公開介面，但最終交付的是使用者可以編輯的專案，而非螢幕截圖或單純的 HTML 擷取。

方法論格言： 觀察 → 擷取 → 測量 → 鏡射 → 提取 → 元件化 → 重現行為 → 比較 → 修正 → 交付。不要發明缺失的元素，不要混淆傳真度與架構品質，並且不要在沒有證據的情況下宣稱「100% 像素完美」。

開始前請先閱讀

1. 閱讀 references/WORKFLOW.md — 完整的端到端程序，包含指令。
2. 閱讀 references/TOOLSTACK.md — 實際工具、諮詢的技能、替代方案與相依性。
3. 閱讀 references/QA.md — 幾何、資源、互動與螢幕截圖的比較協定。
4. 閱讀 references/COMPONENTS.md 與 references/MOTION.md — 將鏡像轉換為可編輯程式碼時使用。
5. 閱讀 references/TROUBLESHOOTING.md — 遇到字型、CSS、水合、影片、DOM、SSR 或動畫問題時使用。
6. 閱讀 references/SAFETY-AND-RIGHTS.md — 在複製資料、資源或整合商業功能之前使用。

預期輸入

• 公開參考 URL 與目標目錄。
• 範圍：整頁、章節或多條路徑；目標平台 (預設 React/Vite)。
• 使用第三方資產的權限/合法性，以及用途 (本地分析 vs. 發布)。
• 使用者已告知的偏好；不要再次詢問已答覆的事項。

如果使用者指定了 URL、儲存庫與目標，請立即開始調查。僅在遇到實際阻礙、缺少重要外部動作的授權或存在不相容的決策時才提問。

強制階段與關卡

0. 保留與清單

• 檢查工作區及其 Git；不要覆寫使用者的變更。
• 分離 reference// (不可變)、app// (可編輯)、qa/ (證據)、scripts/。
• 制定計劃並記錄預覽狀態。
• 對於第三方網站，在重新發布受保護內容之前，請先取得適當的同意/授權。不要繞過登入、付費牆、CAPTCHA 或封鎖。

1. 視覺與技術偵察

• 在真實瀏覽器中開啟參考。在相同的 viewport、載入的字型與滾動狀態下檢查原始頁面。
• 觀察技術棧 (React、Vite、Next、Webflow、Framer、Astro、自訂指令碼)、HTML SSR、class、CSS、字型、SVG、圖片、影片、公開 API 與互動狀態。
• 按照 header、hero、章節、分隔線、overlay 與 footer 的實際順序製作清單；記錄數量與版面。
• 在桌面 1440×900、平板 768×900 與手機 390×844 (或特定的 viewport) 下，記錄 bounding boxes (x/y/w/h)、總高度、欄數、中斷點與 computed styles。
• 滾動整個頁面以觸發 lazy load 與 IntersectionObserver。比較動畫前後的狀態。不要僅根據一個影格來評估動畫效果。
• 關卡： 儲存章節、資源、字型、狀態的清單與參考螢幕截圖。如果網站/資源無法存取，請回報並僅使用合法可用的參考。

2. 高傳真基準 (不可變)

• 儲存公開的 HTML 與允許的資源；不要僅依賴「儲存頁面」。
• 掃描 src、href、srcset、CSS 的 URL、JS imports 與 manifest/sitemap；以 JSON 關聯路徑與雜湊值。
• 在本地鏡像靜態檔案，包括真實字型與幾何所需的 CSS 檔案。
• 建立獨立的基準預覽，最好不含追蹤器。移除動作必須在 HTML 以及能在水合後重新安裝追蹤的指令碼中進行。
• 不要使用第三方的生產 JavaScript 進行結帳、分析、登入、表單或私有 API。
• 關卡： 本地資源無嚴重缺失、頁面回應 200、瀏覽器中呈現視覺畫面。

支援指令碼 (調整網域、範圍與路徑；不要假設每個網站都有 sitemap/SSR)：

python scripts/capture_public.py --url https://example.com --output ./reference/example
python scripts/verify_assets.py --root ./reference/example

3. 無損結構提取

• 如果 SSR HTML 可用，請根據原始 HTML 的偏移量進行分割，不要重新序列化 SVG、實體、屬性、行內 CSS 或文字。
• 保留兄弟元素的順序、分隔線、overlay、banner、導航、hero 與 footer。
• 儲存包含 ID、class、檔案、位置、原始雜湊值與渲染順序的 manifest.json。
• 透過串聯/雜湊值驗證片段合併後是否等於提取出的內容。分析指令碼不應包含在內。
• 如果網站是純客戶端/canvas/WebGL，請根據測量結果，透過元件和行為進行語意重建；不要強制進行 SSR 提取。
• 關卡： DOM 覆蓋率的清單與測試，沒有遺失任何容器/分隔線。

python scripts/split_ssr.py --html ./reference/example/index.html --out ./work/example/sections --inspect
python scripts/split_ssr.py --html ./reference/example/index.html --out ./work/example/sections --write

4. 真正可編輯的元件化

• 建立 React/Vite (預設) 或使用者要求的技術棧；不要只交付壓縮的 JS bundle。
• 將 Header、Announcement、Hero、每個 Section、Footer、Overlay 作為獨立的單元暴露出來。
• 先將全域設計 token 與參考 CSS 隔離；然後逐步替換為團隊維護的 CSS/元件。
• 集中管理文案、圖片、連結與中繼資料；保留原始值以便 diff。內容變更不應破壞性地改寫複雜的 HTML。
• 不要添加會改變 flex/grid/定位的額外 DOM wrapper。保留關鍵的 class/ID/屬性。
• 僅複製獲授權的字型/媒體/CSS 到 public；不要將專有 React bundle 作為最終應用邏輯進行複製。
• 關卡： 應用程式能編譯，且在套用新品牌之前看起來與基準相似。

5. 使用自有程式碼還原互動

• 清單：navbar 滾動/模糊、行動選單、FAQ、輪播/跑馬燈、sticky/parallax、圖表、計數器、游標、懸停效果、抽屜、cookie、錯開的進場效果以及每個 CTA 的功能。
• 撰寫獨立的模組 setupX(root=document)，其回傳 cleanup 函式；使用穩定的 data-* 標記、帶有 AbortController 的監聽器、IntersectionObserver、requestAnimationFrame 與適當的 matchMedia。
• 不要重複處理常式。將業務邏輯 (例如圖表期間) 與呈現效果 (例如長條圖的縮放) 分開。
• 具有 opacity:0/初始 transform 的 SSR 元素需要明確的完成狀態。設定 prefers-reduced-motion。
• 對依賴後端的動作進行安全的 mock，不要聲稱資料已發送或付款已完成。
• 關卡： 可見的控制項運作正常、焦點/鍵盤控制適當、沒有異常記錄、沒有永久不可見的內容。

6. 與參考進行比較性 QA

• 在相同的 Chrome 與解析度下執行基準與應用程式。使用相同的字型、dpr、縮放、viewport、cookie 與動畫狀態。
• 先比較幾何 (章節數量、高度、H1/header、x/y/w/h)，然後比較螢幕截圖與效果。
• 測試桌面、平板、行動裝置、滾動、互動、主控台、網路、資源、連結、溢位與 reduced motion。
• 在變更文案或移除章節後重新測試；不要將預期的差異與回歸混淆。
• 關卡： 包含真實數字與殘餘偏差的報告；不要編造指標。

7. 交付

• 記錄架構、執行指令與編輯位置。
• 保持基準完整、可編輯的應用程式在單獨的資料夾中、指令碼可重現。
• 未經適用授權，不要發布、連接服務、發送訊息或變更憑證。
• 提供已驗證的連結/路徑，並解釋限制 (外部整合、版權、動態資料)。
• 對於重新品牌，先核准忠實的結構，然後替換文字/圖片，再來修改動畫與整合。

不可違反的規則

• 未經使用者明確指示，不得編輯或刪除基準。
• 不要用「看起來一樣」取代測量；檢查真實的 DOM 與 computed styles。
• 如果參考有可測量的真實 timing 與狀態，不要製作假的動畫。
• 除非必要，否則不要改寫原始的 SVG；保留 viewBox 與屬性。
• 不要複製驗證、真實結帳流程、token、私有 session、第三方分析或個人資料。
• 不要將第三方網站的資產包含在此技能的公開儲存庫中。
• 不要承諾無論何種網站都能完美複製：WebGL、DRM、驗證、外部 iframe 與動態內容可能需要手動重建或可能無法使用。
• 不要使用參考中的商業內容作為新品牌的聲明。

最終報告格式

回報：基準資料夾、應用程式資料夾、主要檔案、變更、執行的測試與其結果、已知差異、如何編輯文案/圖片/樣式、如何開啟預覽、缺少哪些項目才能達到生產就緒。如果發生錯誤，不要聲稱已完成。

產生此技能的實際案例

閱讀 examples/ULLS-KIRVANO.md。這是一個經過審計的案例，不是領域模板。該案例的值/數量與螢幕截圖不保證適用於其他網站。