AI 複製網站 Skill：把授權頁面重建成 Next.js 程式碼

如果你想用 AI 複製網站，這套 Skill 可以分析一個你有權重建的頁面，擷取字體、色彩、元件、互動與響應式規則，再建立可執行的 Next.js 專案。它適合網站搬家、原始碼遺失或前端逆向學習，不等於取得他人品牌、文案與設計的使用權。

它能替你完成什麼

官方工作流從網址勘查開始，會截圖、讀取計算後的 CSS、盤點素材，並檢查捲動、點擊、hover 與不同螢幕尺寸下的狀態。接著建立設計基礎與元件規格，再分工重建各區塊，最後組裝並以視覺差異檢查結果。

v0.4.0 加強多頁重建：後續再次執行 /clone-website 時，會保留既有頁面，並把每個目標的路由、研究、元件、素材與下載器分開。這一版也補齊更多 AI coding agent 的工作區 Skill，更新到 Node.js 24、Next.js 16.3 與 React 19.2.4，並加入生成檔漂移檢查與安全政策。

輸出不是單張仿製圖片，而是一個以 Next.js、React、Tailwind CSS 與 shadcn/ui 為基礎的程式碼專案。你可以在此基礎上更換內容、重新命名元件並接上自己的資料與功能。

你需要準備什麼

• 你擁有或已取得重建許可的網站網址。
• Node.js 24 以上版本，以及能操作瀏覽器與子代理工作的 AI coding agent。
• 足夠清楚的目標範圍，例如只重建首頁，或包含多頁與互動狀態。
• 原站的品牌素材、字型和圖片授權，或可合法替換的素材。

第一次怎麼使用

先用官方 repository 的「Use this template」建立自己的副本並安裝依賴，再用支援的 coding agent 執行 /clone-website <網址>。第一次建議選擇自己的單頁網站，完整保留原站與重建版的桌面及手機截圖。完成後依序檢查字型、間距、斷點、鍵盤操作、載入效能與互動狀態，不要只看首頁首屏是否相像。

重建完成後，應把原站內容與可復用元件分開。若目標是網站遷移，還要另外處理資料、表單、登入、分析、SEO metadata、redirect 與部署；這些不會因畫面已重建就自動完成。

哪些情況不適合

不要用它製作釣魚頁面、冒充品牌，或把他人的視覺設計與文案當成自己的作品。公開網站可以被瀏覽，不代表允許抓取、下載素材或重新發布。使用前應確認網站條款、著作權、商標與個資邊界。

AI 重建也不保證像素完全一致。複雜 WebGL、登入後內容、動態資料、付款流程與無障礙行為都可能需要人工重寫。程式碼能執行也不代表安全、可維護或已達正式環境品質。

來源與授權

本頁介紹 JCodesMore 的 AI Website Cloner Template，專案程式碼採 MIT License。2026 年 8 月 31 日查核時，最新 Release 為 v0.4.0，release commit 為 c4c8848。MIT 只涵蓋專案本身，不會把目標網站的圖片、Logo、字型、文案與設計權利一併授權給你。