Ditto icon

Ditto

Ditto 是開源網站複製工具,可將公開 URL 轉為元件化 Next.js 或 Vite 程式碼,適合開發者與 AI 建構者打造可維護的確定性起點。

Ditto

Ditto 是什麼

Ditto 是一個開源網站複製工具,會將公開 URL 轉換為 byte-stable 的程式碼庫。這項產品的定位圍繞在確定性重建:它不是要請 LLM 猜測版面,而是希望產生穩定、元件化的 Next.js 或 Vite 輸出,保留原始網站的結構與還原度。

首頁將 Ditto 描述為適合 AI 應用建構者、重建頁面的團隊,以及想要可維護專案而非扁平匯出的開發者。網站也說其流程會將設計系統、tokens、字型、互動、動態效果、breakpoints、sections 與可編輯內容擷取成真實的專案檔案。

核心功能

確定性網站複製

將 Ditto 指向公開 URL,它就會回傳一份 byte-stable 的複本,目標是保留細節一致性,而不是臆測缺失內容。

元件化程式碼輸出

輸出被描述為乾淨、元件化的 Next.js 或 Vite 程式碼,因此結果是真正的專案結構,而不是單一龐大的產生檔案。

設計與版面擷取

網站說 Ditto 會從來源頁面抽取設計系統、tokens、字型、互動、動態效果、breakpoints 與 sections。

代管 REST API

代管 API 支援簡單的 POST 後輪詢流程,並可在擷取、生成與驗證執行時取得 job events。

供 agents 使用的 MCP server

文件中提供了供 agent 工作流程使用的 MCP server,並有可串接到 Claude 或 Cursor 等工具的範例。

開源自架

此專案採 MIT 授權且為開源,首頁也展示了自架的命令列工作流程。

Ditto 的常見用途

  • 以既有網站作為新專案的起始模板

    當你需要為新 app 或登陸頁建立忠實起點,並希望在真實程式碼中保留來源網站的視覺結構時,可使用 Ditto。

  • 將網站重建為可維護的元件

    正在重建或現代化公開網站的團隊,可使用元件化輸出將 sections、tokens 與可重用 UI 分離,而不是手動複製 HTML。

  • 在 agent 工作流程中自動化複製

    使用 agents 或內部工具的建構者,可連接 MCP server,讓 assistant 作為更大建置流程的一部分觸發複製。

  • 自架並延伸流程

    偏好執行自有基礎設施的開發者,可以自架該流程、檢視程式碼,並將其調整用於本機使用或貢獻。

  • 使用代管 API 而非本機基礎設施

    如果你只需要代管式工作流程,REST API 讓你提交 URL、追蹤 job,並在不自行執行 cloner 的情況下取得生成的專案。

Pros and Cons

Pros

  • 強調確定性輸出,應可降低使用 LLM 進行網站複製時的不確定性。
  • 程式碼輸出被組織為元件、sections、styles 與可編輯內容檔案,比單一產生的頁面更容易維護。
  • 使用者可依工作流程選擇自架、代管 REST API 或 MCP server。
  • 此專案採 MIT 授權且為開源,因此流程可供檢視與修改。
  • 代管 API 文件顯示了具體的請求與 job 流程,包括複製處理時的事件串流。

Cons

  • 蒐集到的價格頁 URL 回傳 404,因此在所提供的證據中,定價與方案細節並未清楚文件化。
  • 來源中顯示的最主要實作細節是公開 URL 與代管 API;更廣泛的平台、驗證或企業部署限制並未明確說明。
  • 有一些整合參考,但證據沒有提供完整的相容性矩陣,或每種工作流程的設定指南。

FAQ

Ditto 可以如何使用?

Ditto 可作為開源、自架的複製工具,或透過代管的 REST API 使用。網站也有文件說明可供 agent 工作流程使用的 MCP server。

Ditto 會輸出什麼?

首頁說明 Ditto 接受公開 URL,並產生乾淨、元件化的 Next.js 或 Vite 程式碼。它被描述為具確定性,而不是由 LLM 驅動。

支援哪些框架與樣式選項?

網站上顯示的來源內容強調 Next.js 與 Vite,重建輸出中提到 Tailwind v4 與 CSS。代管 API 範例也顯示 Next.js 與 Tailwind 設定。

Ditto 是免費還是付費?

所蒐集到的證據中的價格頁 URL 回傳 404,因此該頁面沒有清楚文件化定價資訊。首頁說 Ditto 採 MIT 授權且為開源,並提供具 API key 流程的代管 API。

Ditto 適合誰使用?

網站說 Ditto 是為公開 URL 設計,可抽取設計系統、tokens、字型、互動、動態效果、breakpoints 與 sections。它的定位是生成忠實的程式碼,而不是鬆散的視覺近似。

Quick Facts

類別
開發者工具
主要任務
將公開網站複製為元件化程式碼
輸出
Next.js 或 Vite 專案程式碼
授權
MIT
存取選項
自架 CLI、代管 REST API、MCP server
來源網域
ditto.site