# Ditto

Ditto 是一款開源網站複製工具，可將公開 URL 轉換為元件化的 Next.js 或 Vite 程式碼，為開發者提供確定且可編輯的起點，支援自託管、託管 API 或 MCP。

- Findings24: <https://findings24.com/zh-TW/tools/ditto>
- 網站: <https://www.ditto.site>
- 價格: Freemium
- 分類: AI網站架設

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

## 快速資訊

- **類別**: 開發者工具
- **來源網域**: ditto.site
- **授權**: MIT
- **主要輸出**: 元件化的 Next.js 或 Vite 程式碼
- **存取模式**: 自架、REST API、MCP 伺服器
- **主要工作流程**: 指向公開 URL 並生成複製專案