複製一個網站
在當前應用程式中重建所提供的頁面。在添加新的設計方向之前，應先與來源保持一致。交付可運作、可編輯的程式碼：截圖、iframe 和下載的生產環境包裝僅供參考，而非最終實作。
1. 規劃工作
閱讀專案說明、實際的框架/腳本以及現有路由。使用可用的瀏覽器開啟來源 URL。在可行時，優先使用直接 HTTP、素材工具或 API 進行提取；使用瀏覽器來確認外觀和行為。
記錄一份簡短的來源到本地端路由對應表，以及每個頁面擁有的檔案。遵循應用程式的慣例；在此範本中，使用 src/app/、src/components/sites/<site>/、public/sites/<site>/ 和 docs/research/<site>/。為來源、頁面和下載項目提供不同的名稱；當可讀名稱衝突時，添加連接埠或 URL 雜湊。
- 第一個根複製可能會取代未經修改的範本首頁。
- 對於來自同一來源的多個頁面，保留來源的路徑名稱。查詢/片段變體通常代表同一路由的不同狀態；請重現這些狀態。
- 保留現有已建立的路由/素材。僅在要求時更新它們；在取代任何內容之前，先解決未經請求的路由衝突。
- 在向現有複製添加頁面時，擴展其版面與全域樣式，但不要取代現有頁面使用的樣式。
- 除非使用者想要一個合併的應用程式，否則為不同的來源使用不同的應用程式。合併的網站需要不同的路由前綴以及作用域化的字型、樣式和版面。
- 使用框架支援的機制來轉義與框架語法（
_、@、括號、圓括號）衝突的字面 URL 區段，然後驗證實際請求的 URL。
現有的複製品是很好的起點：將它們與當前來源進行比較，並記錄重複使用了哪些內容。當每個請求的 URL 都有了目標位置且檔案所有權明確時，即完成此步驟。
2. 在建立之前先觀察
在桌面和行動裝置寬度下檢查整個頁面。從上到下滾動以載入延遲媒體並顯示粘性/固定場景。然後練習選單、標籤頁、摺疊面板、輪播、懸浮狀態和主要連結。區分由滾動、點擊、懸浮或時間驅動的變化；用點擊來模擬滾動驅動的區塊是完全不同的做法。
將每個觀察結果視為某個規則的一個樣本。讀取宣告值（計算樣式、CSS 變數、函式庫的即時選項），而不是從一次渲染中推斷它們，並變化視窗寬度（包括比設計更寬的寬度）、視窗高度、輸入和狀態，直到你了解每個變化的驅動因素。使用訪客實際使用的輸入（滾輪、觸控、鍵盤、指標）來驅動頁面；腳本化的滾動會繞過附加在這些輸入上的行為，例如平滑滾動。
保存標有視窗、滾動位置和互動狀態的來源截圖。捕捉替代狀態的內容/素材。保持一份簡潔的頁面摘要：區塊順序、版式、版面測量值、素材對應和互動。僅在對獨立建構者有幫助時才添加區塊摘要。
閱讀檢查參考資料以了解提取和狀態比較的資訊。對於Framer 生成的頁面、粘性場景、顯示動畫或動畫媒體，請閱讀 Framer 與動畫。
使用來源的真實文字以及其實際載入的檔案：字型、圖片、SVG 和影片。來自其他供應商或圖示集的同名替代品具有不同的度量或形狀。測量重要的幾何形狀/計算樣式。在將視覺效果重建為 HTML 之前，檢查分層圖像和媒體元素。追蹤來源 URL → 本地端素材路徑，並驗證內容類型/尺寸：一個 .png URL 可能回傳 AVIF。
當每個區塊和有意義的狀態都有足夠的證據來建構，且已識別出不可用的細節時，即完成此步驟。大量的 DOM 轉儲並不能取代實際查看頁面。
3. 建立完整的第一版
首先建立字型、頁面寬度、顏色、素材、路由、頁面級行為和共享元件。為每個共享元件建立其所有觀察到的狀態（懸浮、焦點、斷點），以便建構者可以直接重用。重用合適的元件。優先使用 CSS 處理版面/簡單動畫，並在來源行為需要時使用動畫函式庫。
使用真實內容建構連貫的區塊。在共享檔案擁有者確定後，將獨立的頁面/區塊委派出去。為建構者提供截圖、相關測量值/狀態說明、素材路徑、目標檔案和具體的完成標準。包含精確檔案引用的簡潔摘要就足夠了；不需要固定的代理數量或每個元件的文書工作。
重現範圍內的互動。保留真實的外部目標連結。當本地端路由包含在範圍內時，將連結改寫為本地端路由；將超出範圍的目標保持指向來源，並揭露它們。可見的控制項必須執行它們所承諾的行為。
在整合完一個片段後，執行適當的專案檢查。當每個請求的區塊/路由都能使用實際素材渲染，且重要的控制項都能運作時，即完成此版本。
4. 比較、修復、重複
在相同的視窗、滾動位置和狀態下開啟來源/本地端頁面。讓字型、媒體和顯示動畫穩定下來。在步驟 2 發現規則變化的任何地方，以及在比設計更寬的視窗下，檢查整個頁面；使用真實輸入來判斷滾動和指標行為。並排比對可以找出偏差；全尺寸區塊可以確立細節。
首先修復最大的可見差異：幾何形狀、缺失的區塊/圖層、版式/換行、素材裁剪，然後是間距和動畫。重新檢查受影響的視圖。比較動畫區域的初始、活動和穩定狀態，必要時包括反向滾動。
演練真實的本地端工作流程：在複製的路由之間導航，行動選單，標籤頁/摺疊面板狀態，輪播邊界，主要操作，媒體控制項，以及觀察到的與滾動相關的轉換。檢查執行時期錯誤、缺失素材和水平溢出。在添加頁面時，驗證現有路由仍然正常運作。在這些邊界上進行幾次瀏覽器檢查，而不是對類別名稱進行斷言。
執行專案的生產環境檢查。完成需要成功的建置以及渲染後的比較。精確說明剩餘的差異，而不是將未經檢查的結果稱為像素完美。
交付
回傳預覽/執行說明、來源到本地端路由對應表、具代表性的桌面/行動裝置比較、實際執行的檢查，以及剩餘的視覺/功能差距。在維護可重複使用的範本時，將參考用的複製品保留在分開的應用程式中。