ditto.site
ion-design · 程式設計
ditto.site 是一款採用 MIT 授權的開源網站複製工具，能把任何公開網址變成可運作、以元件切分的 Next.js 或 Vite React 專案。它不會要語言模型去猜你的標記，而是擷取瀏覽器實際算繪的內容，再產出確定性的程式碼基底，通常約五分鐘完成。你可以自行架設整條流程、呼叫託管的 REST API，或透過 MCP 伺服器接進 agent，而且兩種方式都不花一毛錢。這點很難反駁。
關於 ditto.site
ditto.site 是什麼
ditto.site 是一款網址轉程式碼工具，也是 Next.js 程式碼產生器，為想要真正可維護起點的開發者而做，而不是給你一張白紙。把一個線上頁面丟給它，它就會依算繪結果寫出全新的專案，所以你不需要原始原始碼，也不用現成的程式庫。輸出不是一個巨大檔案：工具會把重複的 DOM 拆成元件，把乾淨的區塊獨立成 section，再交給你已加上型別與 token 的程式碼，讓你繼續往下做。
核心概念是確定性。許多 AI 網站複製工具會把你的頁面送進 LLM，然後祈禱結果看起來差不多。ditto.site 走的是擷取到程式碼的流程，所以同一份凍結的擷取結果永遠產出位元層級穩定的應用程式。不靠猜。根據該專案說法，它還會把頁面背後的設計系統抽出來，包括 token、字型、互動、動態、斷點與 section。
主要限制在範圍。它複製你有權處理的公開網址，而且本質上是開發者工具，所以你得熟悉執行 npm 指令、管理 API 金鑰，或解開 JSON 檔案對應表。並非適合所有人。如果你想要的是內建視覺編輯器與託管服務的成品，那它不是。
開始使用
- 前往 ditto.site 網站並用你的電子郵件申請託管的 API 金鑰，或複製程式庫並在自己的機器上執行整條流程。
- 驗證電子郵件，然後複製一次性的
dtto_live_...金鑰，存進像DITTO_API_KEY這樣的環境變數。 - 用 POST 把公開網址送到 REST API 端點，並帶上你偏好的選項，例如框架
next與樣式tailwind。 - 輪詢工作直到成功，再用官方工具把回傳的檔案對應表解到專案目錄裡。
- 在新專案內執行你慣用的安裝與開發指令，然後開始往上搭建。
產品資訊
快速了解 ditto.site 的定價、支援平台與效能。
適合對象
這項工具最適合的使用者、任務與情境。
使用者
- 前端開發者：當你需要真正的 Next.js 或 Vite React 起點，而不是從零手工重建版面時，它非常合適。
- AI 應用開發者：這款工具被設計成第一步，所以你能給每個新專案一份忠實的程式碼基礎，而不是一片空白畫面。
- 評估現有網站的團隊：當你擁有某個頁面、或獲授權可重複使用時，想把它的結構表達成可維護的元件，就很實用。
任務
- 把到達頁變成 Next.js 程式碼：你會拿到已切分成元件的輸出，設計 token 與響應式版面都已經就位。
- 依參考設計打原型：擷取一個你喜歡的頁面，然後編輯產生的專案，而不是手工重做。
- 建立內部 agent 工作流：把 MCP 伺服器接進 Claude、Cursor 或你自己的建構迴圈，讓 agent 能隨需複製。
情境
- 啟動新的客戶專案：跳過枯燥的骨架階段，從反映真實網站的程式碼開始。
- 重建舊的公開頁面：在重構前先把結構與設計系統抽出來。
- 把設計搬進元件庫：一次就從線上頁面拉出 token、字型與 section。
主要功能
確定性的擷取到程式碼流程
ditto.site 不會把 LLM 對著你的頁面然後聽天由命。它擷取瀏覽器算繪的內容，再把那份凍結的擷取結果編譯成專案，所以同樣的輸入每次都給出位元層級穩定的輸出。同樣輸入，同樣輸出。當你要在結果上繼續開發，或在改動後重新產生時，這種一致性很重要。
切分成元件的 Next.js 與 Vite 輸出
工具會把重複的 DOM 拆成元件，把乾淨的區塊獨立成 section，然後產出真正的專案，而不是單一的巨大檔案。沒有巨型檔案要解開。你可以預設要求 Next.js App Router，或在更適合你的技術堆疊時要求 Vite React。結果已加上型別與 token，所以能嵌入你平常的工作流程。
三種執行方式
你可以挑最符合自己開發方式的進入點。複製程式庫並在 MIT 授權下自行架設整條流程，把網址 POST 到託管的 REST API 而省下基礎建設，或連接 MCP 伺服器讓任何 agent 把複製當工具用。三者底下共用同一套確定性引擎。哪一種適合你，取決於你的環境。
設計系統抽取
除了標記，ditto.site 還會從頁面抽出設計系統：設計 token、網頁字型、hover 與 focus 狀態、下拉選單、手風琴，以及宣告式動態。它也會擷取斷點與 section，連同 SEO 中繼資料、JSON-LD 與 sitemap。這給你的是可編輯的樣式素材，不只是靜態快照。
Agent 與 API 整合
位於 api.ditto.site 的託管端點透過 REST 處理複製工作，回傳一份以每個 app 相對路徑為鍵的檔案對應表。位於 api.ditto.site/mcp 的 MCP 伺服器則讓你直接給 Claude、Cursor 或自訂建構迴圈一個複製工具。對於把環境自動化的團隊來說，這是把複製嵌進流程最快的方式。
MIT 開源
整個專案採用 MIT 授權並公開開發，所以你可以讀每一行、送 PR，並形塑它怎麼演進。自行架設代表你的擷取結果與產生的程式碼都留在自己的機器上，適合資料習慣較嚴格的團隊。也沒有付費牆。沒有哪個付費方案把核心引擎藏起來。
優缺點
優點
- 依 MIT 授權免費且開源，沒有付費方案把主要功能鎖住。
- 確定性輸出讓同一份擷取結果產出穩定、可重複的程式碼。
- 把頁面拆成元件與 section，而不是一個難以駕馭的檔案。
- 進入點有彈性：自行架設、REST API，或給 agent 用的 MCP 伺服器。
- 抽出的設計 token、字型、動態與斷點，你真的能編輯。
缺點
- 鎖定開發者，所以你得熟悉 npm、API 金鑰，以及解開 JSON 輸出。
- 只處理公開網址，而且你得自行負責擁有複製某個網站的權利。
- 沒有視覺編輯器，也沒有內建託管，所以對不寫程式的人來說，它無法取代完整的網站建置工具。
常見問題
它把公開網址變成自成一體的 Next.js 或 Vite React 專案。它擷取瀏覽器算繪的內容，再編譯成已加 token、已切分成元件的程式碼，讓你往上搭建。
相關內容
探索與 ditto.site 相關的工具、技能與文章。
ditto.site 替代方案
Forefront
Forefront · 程式設計Forefront 是一個用來打造開源 AI 的網頁平台。你可以用自己的資料微調主流的開源語言模型、評估它們的表現，再透過 API 執行，或匯出後自行架設。想要封閉式平台的便利、卻堅持要自己擁有模型與資料的開發者，就是這裡的目標客群。
Startkit
StartKit.AI · 程式設計Startkit 是一套用來打造 AI SaaS 與 AI 包裝產品的樣板。可以把它想成一個 AI 新創樣板，把枯燥的部分都先接好了：驗證、Stripe 與 Lemon Squeezy 付款、用量限制、交易型電子郵件，以及一套能與 OpenAI、Anthropic、Groq 或 Llama 溝通的 AI API 啟動套件。你複製儲存庫、設定價格，然後專心在產品中使用者真正願意付費的部分。它建構於 React 與 Tailwind 之上的 Next.js，所以大部分的樣板程式碼對你來說並不陌生。
Testim
Tricentis · 程式設計Testim 是專為網頁、行動與 Salesforce 應用程式打造的 AI 測試自動化平台，用來建立並執行端到端測試。它靠機器學習在介面變動時維持測試穩定，團隊因此少花時間修補壞掉的定位器。對於一款今天就能開始使用的自動化測試工具來說，這表現不算差。你透過在瀏覽器錄製動作來建立測試，需要更多控制時再補上 JavaScript。對忙碌的 QA 團隊來說，這是個可靠的選擇。