ditto.site
ditto.site 是一個開源、MIT 許可的確定性網站克隆器，它將任何公共 URL 轉換為乾淨、組件化的 Next.js 或 Vite 程式碼——通常在大約 5 分鐘內完成——而無需依賴 LLM 的猜測。
https://ditto.site/?ref=producthunt&utm_source=aipure
產品資訊
更新時間：2026年07月23日
什麼是 ditto.site
ditto.site 是一個確定性的「網站到程式碼」工具，它根據目標頁面在瀏覽器中呈現的內容，生成一個自包含的 TypeScript 網路應用程式。您無需訪問網站的原始碼儲存庫，只需提供一個公共 URL，ditto 就會輸出一個可維護的專案（Next.js 或 Vite），其中包含結構化的組件和樣式（例如 Tailwind）。該專案是開源的（MIT），可以透過自託管、託管 REST API 或專為代理工作流程設計的 MCP 伺服器使用。ditto.site 強調一致、穩定的輸出，僅適用於您有權檢查、複製、轉換和操作目標內容的情況。
ditto.site 的主要功能
ditto.site 是一個開源、MIT 許可的確定性網站複製工具，可在幾分鐘內將公共 URL 轉換為獨立、可維護的 TypeScript 網路應用程式（Next.js 或 Vite）。它不使用基於 LLM 的最佳猜測，而是運行一個穩定的管道，捕獲頁面在瀏覽器中呈現的內容，然後生成乾淨、組件化的代碼，並提取設計系統（標記、字體、斷點）、交互（懸停/焦點、下拉菜單、手風琴、動態）和有利於生產的 SEO 人工製品（元數據、JSON-LD、站點地圖）。它可透過自託管開源工具、託管 REST API 或用於代理工作流程的 MCP 伺服器使用。
確定性複製管道: 產生快速、穩定、可重複的輸出（捕獲 → 生成 → 驗證），而不依賴非確定性 LLM 解釋。
URL 到應用程式代碼生成: 將公共網頁轉換為基於頁面在瀏覽器中呈現內容的全新、獨立的 TypeScript 專案——無需原始來源儲存庫。
框架輸出：Next.js 或 Vite: 發出一個真實的應用程式骨架，您可以運行和擴展，根據您的堆棧和部署需求選擇 Next.js 或 Vite。
可維護、組件化的代碼: 透過將重複的 DOM 分割為組件、將區域提升為區塊以及提取可編輯的內容模型來避免「一個巨大的文件」。
設計系統提取: 提取標記、字體、斷點、佈局結構和動態/交互，以保留外觀和感覺，同時保持樣式可編輯。
多種整合路徑（OSS、API、MCP）: 本地運行/自託管 (MIT)，呼叫託管 REST API 以排隊/輪詢作業並下載結果，或透過 MCP 伺服器將複製作為工具暴露給代理。
ditto.site 的使用案例
代理商或工作室重建/遷移: 將現有的行銷網站重新創建為乾淨的 Next.js/Vite 代碼，作為重新設計、性能優化或 CMS 整合的起點。
競爭/市場研究原型設計: 生成可公開訪問頁面（當您有權檢查/轉換時）的忠實、可編輯副本，以研究佈局模式、IA 和設計系統。
AI 應用程式建構器入門範本: 為新客戶提供與其當前網站相符的真實代碼基準，將空白畫布問題替換為可維護的起始專案。
從「渲染真相」進行工程交接: 當原始來源不可用時，從渲染頁面生成可運行的代碼庫，以加速內部文檔、重構或現代化。
代理輔助網站生成工作流程: 透過 MCP 將 ditto 整合到 Claude/Cursor/自訂代理中，以便自動化建構循環可以複製、修改和迭代真實專案。
SEO 就緒的網站複製基準: 在進一步優化之前，使用生成的元數據、JSON-LD 和站點地圖作為保留 SEO 的重建基礎。
優點
確定性、一致的輸出，適用於可重複的工作流程和自動化。
生成可維護、組件化的 Next.js/Vite TypeScript 專案，而不是扁平的 HTML 轉儲。
靈活的使用方式：自託管開源、託管 REST API 或用於代理工具的 MCP。
提取設計標記、交互和 SEO 人工製品，以保持保真度並加速迭代。
缺點
僅適用於您有權檢查/複製/轉換目標內容的情況；濫用可能導致法律/道德問題。
輸出保真度受限於從渲染頁面捕獲的內容；複雜的應用程式邏輯/後端不會被固有地重建。
可能仍需要手動清理或調整動態內容、身份驗證流程或特定站點整合。
如何使用 ditto.site
1) 選擇您想如何使用 Ditto: Ditto 提供三個入口點，它們使用相同的確定性引擎：(a) 開源自託管（在本地運行整個管道），(b) 託管 REST API（POST 一個 URL，輪詢作業狀態，然後下載輸出），或 (c) MCP 伺服器（將 Ditto 連接到像 Claude/Cursor 這樣的代理）。
2) 透過託管 REST API 使用 Ditto（最快路徑）: 前往 https://www.ditto.site/api-key 並獲取 API 金鑰。使用託管端點提交一個公共 URL，然後輪詢作業直到完成，最後拉取生成的專案（預設為 Next.js App Router，或在請求時為 Vite React）。
3) 透過 MCP 使用 Ditto（適用於代理工作流程）: 獲取 API 金鑰，然後使用 MCP URL 和您的 Bearer 令牌將 Ditto 添加為代理/客戶端配置中的 MCP 伺服器。範例配置：{ "mcpServers": { "ditto": { "url": "https://api.ditto.site/mcp", "headers": { "Authorization": "Bearer ${DITTO_API_KEY}" } } } }
4) 自託管 Ditto（在本地運行管道）: 克隆開源儲存庫並安裝依賴項：`gh repo clone ion-design/ditto.site` 然後 `cd ditto.site && npm install`。
5) 針對 URL 運行本地克隆作業: 從儲存庫中，運行克隆命令並傳遞目標 URL：`npm run clone -- https://example.com`（替換為您有權克隆的網站）。
6) 將 Ditto 的克隆輸出轉換為磁碟上的專案（解包）: 使用已檢出儲存庫中的官方解包器：`npm run unpack -- <clone.json|-> <out-dir>`。這將寫入文本文件並實體化二進制資產（內聯 base64 或透過 $DITTO_API_URL / $DITTO_API_KEY 獲取）。
7) 打開並構建生成的應用程式: 在您的編輯器中打開輸出目錄。Ditto 會發出一個真正的 TypeScript 專案，其中包含組件化程式碼（而不是一個巨大的文件），包括提取的令牌/設計系統、字體、互動、動態、斷點和區塊。
8) 了解 Ditto 捕獲了什麼（以及可能遺漏了什麼）: Ditto 捕獲了瀏覽器在快照時實際呈現的內容。稍後加載的內容（無限滾動、延遲加載的圖像或互動觸發的內容）可能不會包含在內——請確保您想要的內容在克隆前可見。
9) 遵循使用和權利最佳實踐: Ditto 旨在用於學習、原型設計和授權用例。您有責任確保您有權克隆和使用任何頁面中的程式碼，尊重版權、服務條款和智慧財產權。
ditto.site 常見問題
ditto.site 是一個開源的確定性網站複製工具，它能將公共 URL 轉換為基於頁面在瀏覽器中呈現的乾淨、組件化的程式碼庫（Next.js 或 Vite）。
与 ditto.site 类似的最新 AI 工具
GPT Easy Web
GPT Easy Web 是一個用戶友好的 AI 驅動平台，使用戶能夠通過自然語言交互和自動化工具輕鬆構建、定制和管理網站，而無需編碼知識。
AI Website Tool
AI網站工具是一個AI驅動的網站構建器，只需幾次點擊即可自動生成以業務為中心的文案、自定義視覺效果和響應式設計，創建專業網站。
Softgen
Softgen.ai 是一個 AI 驅動的全棧項目生成平台，使用戶能夠在沒有編碼要求的情況下將其想法轉化為功能完整的網頁應用程序。
Webifier
Webifier 是一個 AI 驅動的工具，將文本提示轉換為功能完備的 React 著陸頁，使用 NextJS14、TailwindCSS 和 Shadcn 組件生成乾淨、可導出的代碼。
类似 ditto.site 的热门 AI 工具
Adobe Express
Adobe Express 是一款集成了 AI 技術的全能內容創建應用程式，通過專業設計的模板和資產，輕鬆製作令人驚艷的社交帖子、圖像、視頻、傳單等。
Hostinger
Hostinger 是一家網站託管和域名服務提供商，提供由人工智慧驅動的工具，如 Horizons，使任何人都可以通過簡單的聊天界面構建、編輯和發布自定義 Web 應用程式和網站，而無需編碼。
GPT Engineer
GPT Engineer 是一個 AI 驅動的軟件開發工具，使任何人都能通過與 AI 工程師聊天來構建網絡應用程序。
Manus Shopify Connector
Manus Shopify 連接器讓您可以使用 Shopify API 和 OAuth 範圍的存取權限以及 Shopify 結帳，從單一聊天中建立 Shopify 支援的店面、管理您的目錄並生成數據驅動的行銷活動。