Ditto

什麼是 Ditto？

Ditto 是一個開源、具決定性的網站複製工具。它會接收公開 URL，並將其轉換為乾淨、元件化的程式碼庫；首頁與 API 範例則展示 Next.js 與 Vite 作為輸出目標。

此產品定位於想要一個忠實起點而非空白畫布的開發者。網站說 Ditto 會保留忠實度、擷取設計系統與其他 UI 細節，並可作為自架工具、託管 API 或 MCP 連接的代理工作流程使用。

Ditto 能做什麼？

網站轉程式碼複製

接受公開 URL，產生元件化的複製網站程式碼，而不是單純擷取平面頁面內容。

框架導向的輸出

將輸出重建為 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，作為進一步編輯的結構化基礎。

常見問題

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，因此目前提供的網站快照中沒有可確認的定價資訊。