網站轉程式碼複製
接受公開 URL，產生元件化的複製網站程式碼，而不是單純擷取平面頁面內容。
Ditto
認領Ditto 是開源網站複製工具，可將公開 URL 轉為可編輯的 Next.js 或 Vite 元件化程式碼；支援自架、託管 API 與 MCP。
概覽
Ditto 是一個開源、具決定性的網站複製工具。它會接收公開 URL，並將其轉換為乾淨、元件化的程式碼庫；首頁與 API 範例則展示 Next.js 與 Vite 作為輸出目標。
此產品定位於想要一個忠實起點而非空白畫布的開發者。網站說 Ditto 會保留忠實度、擷取設計系統與其他 UI 細節，並可作為自架工具、託管 API 或 MCP 連接的代理工作流程使用。
核心功能
框架導向的輸出
將輸出重建為 Next.js 或 Vite 專案，讓使用者擁有可編輯、可延伸的實際程式碼庫。
決定性流程
被描述為具決定性，網站明確將其與 LLM 式猜測方式對比。
UI 與版面擷取
依首頁文案擷取設計系統、tokens、字型、互動、動效、斷點與頁面區塊。
元件化專案結構
將重複的 DOM 拆分為元件，將區域提升為區塊，並輸出可編輯的語意內容與專案檔案。
多種執行方式
支援三種存取模式：自架開源、託管 REST API，以及供代理使用的 MCP 伺服器。
實際使用情境
從既有網站快速建立新專案
開發者可以將公開網站 URL 傳給 Ditto，取得一個可作為在 Next.js 或 Vite 中重建或延伸 UI 起點的程式碼庫。
自架複製流程
當團隊想檢視流程並將工作流程保留在內部時，可以在自己的機器或基礎設施上執行這個開源複製工具。
透過 API 自動化網站複製
應用程式可以呼叫託管的 REST API 來排程複製工作、監控進度，並在不於本地端設定基礎設施的情況下取回完成的專案。
將複製功能加入代理工作流程
AI 代理或 builder 迴圈可以連接到 MCP 伺服器，並在迭代工作流程中使用 Ditto，將目標 URL 轉為程式碼。
檢視並精修生成的程式碼庫
設計師或工程師可以檢視生成的元件、區塊、內容模型與擷取的 tokens，作為進一步編輯的結構化基礎。
Pros and Cons
Pros
- 開源且採 MIT 授權，程式碼可供檢視並可自架。
- 決定性方法被定位為可避免複製過程中的 LLM 猜測。
- 支援多種工作流程：本機自架、託管 REST API 存取，以及供代理使用的 MCP 伺服器。
- 輸出被描述為結構化且可編輯，包括元件、區塊、tokens 與專案檔案。
- 首頁提供了 Next.js、Vite、Tailwind 與 TypeScript 的具體生成輸出範例。
Cons
- 蒐集到的定價頁是 404，因此目前提供的證據無法確認定價與方案細節。
- 來源僅部分說明整合與工作流程細節，因此部分設定與輸出限制無法從已蒐集頁面中得知。
FAQ
Ditto 是做什麼的？
Ditto 是一個開源網站複製工具，可將公開 URL 轉為元件化的程式碼庫。來源顯示它可輸出 Next.js 或 Vite 專案，並可透過自架流程、託管 REST API 或 MCP 伺服器使用。
我可以如何使用 Ditto？
網站顯示有三種使用方式：使用 MIT 授權的原始碼自架複製工具、向 api.ditto.site 的託管 REST API 提交工作，或連接 MCP 伺服器供代理工作流程使用。
它會產生什麼樣的輸出？
首頁說 Ditto 可以將頁面重建為乾淨、元件化的 Next.js 或 Vite 程式碼。也提到會擷取設計系統、tokens、字型、互動、動效、斷點與區塊。
Ditto 是決定性的嗎？
首頁將 Ditto 描述為具決定性的工具，並表示它不依賴 LLM 去猜測頁面結構。產品頁也強調保留忠實度的輸出與位元穩定的副本。
Ditto 的費用是多少？
在蒐集到的證據中，/pricing 的定價頁回傳 404，因此目前提供的網站快照中沒有可確認的定價資訊。
Quick Facts
- 類別
- 開發者工具
- 來源網域
- ditto.site
- 授權
- MIT
- 主要輸出
- 元件化的 Next.js 或 Vite 程式碼
- 存取模式
- 自架、REST API、MCP 伺服器
- 主要工作流程
- 指向公開 URL 並生成複製專案