深度報告
-
ditto.site 是一個開源、確定性的網站克隆工具，輸入任意公開 URL，5 分鐘內輸出一份「元件化」的 Next.js 或 Vite 專案程式碼。與市面上依賴大語言模型「猜」程式碼的截圖轉程式碼工具不同，ditto 採用瀏覽器真實渲染捕獲 + 規則化提取的兩段式架構，生成結果位元組級可重複，且能保留懸停狀態、互動動效、設計 Token 和 SEO 後設資料，產出質量遠超傳統爬蟲工具。
-
ditto.site 由設計工作室 ion.design 團隊打造，核心開發者為 Samraaj。該專案於 2026 年 6 月 30 日在 GitHub 上首次提交，7 月 21 日在 Product Hunt 正式釋出並獲 418 票。團隊此前已在內部使用 ditto 數月，用於將客戶現有網站快速轉化為可編輯的程式碼基線。 團隊描述開源動機為「太有用了，不能只留給自己用」。專案採用 MIT 許可證，累計 90 次提交，倉庫主要由 TypeScript 編寫，依賴 Playwright 進行瀏覽器捕獲、Drizzle ORM 與 PostgreSQL 進行資料管理。
-
ditto 的核心能力非常聚焦：URL 到程式碼。使用者提交一個公開網址後，系統執行「捕獲 → 生成 → 驗證」三步流水線，最終產出包含以下內容的 TypeScript 專案：完整頁面路由基於 Next.js App Router 或 Vite React 的頁面結構；元件化程式碼中重複 DOM 拆分為可複用的 React 元件，頁面區域被提取為獨立 Section；設計系統方面設計 Token、字型、斷點、佈局結構均被提取並保留在可編輯狀態；互動行為方面懸停/焦點狀態、下拉選單、手風琴、宣告式動效等大多數同類工具無法保留；SEO 物料後設資料、JSON-LD、站點地圖自動生成；以及可編輯內容模型提取出一個 content.ts 檔案方便後續修改文字和圖片。 產品提供三種使用入口：開源自託管（npm run clone -- <url>）、託管 REST API（POST /v1/clones）、MCP 伺服器（可與 Claude、Cursor 等 AI 程式設計工具整合）。第三種方式特別適合 AI 驅動的開發流水線，在 Agent 工作流中把網站克隆當作一個普通工具呼叫。 與競品對比，ditto 最大的差異化在於「確定性」。市面上的 screenshot-to-code 工具（如 v0、Bolt.new）基於 LLM 生成，每次結果不同，且互動動效層幾乎為零；而 ditto 的位元組級穩定輸出使其可以用於 diff 對比和持續整合。OpenAI 的 Operator 等瀏覽器代理也能做類似事情，但 ditto 的定位更精準，它只做從渲染到程式碼的轉化，不做瀏覽器自動化操作。
-
ditto.site 目前核心引擎完全開源（MIT），託管 API 需申請 API Key 使用。官網提供 /api-key 路徑獲取金鑰，具體定價層級需透過註冊流程確認。對於個人開發者和小團隊，自託管版是免費且功能完整的；託管版預計按呼叫量收費，適合不想自己搭建基礎設施的團隊。 目標使用者覆蓋前端開發者（快速原型、競品頁面結構學習）、設計工作室（客戶網站遷移重構）、AI 應用構建者（為新客戶提供真實程式碼基線而非空白畫布）、Web 教育場景（透過實際頁面學習元件拆分）。
-
在 Product Hunt 評論區，社群對 ditto 的評價整體積極。多位使用者稱讚其元件化輸出「不是一堵 div 牆」，懸停狀態的保留「讓大多數爬蟲工具相形見絀」，確定性的輸出「意味著第二次執行結果與第一次完全一致，這對 diff 很關鍵」。 也有開發者提出了對合規邊界的擔憂。團隊創始人 Samraaj 在評論區明確回應工具是中性的，合規責任在使用者一方。
-
AI 工具評測網站如 AIPure 和 ExploreAI Tools 均將 ditto.site 收錄並給予 8-10 分的高價效比評分。中文科技媒體對其評價為「2026 年建站工具鏈兩個清晰轉向」的代表：從 AI 猜測到確定性生成，從平臺鎖定到通道式工具。中文網站覺醒 AI 的一篇文章指出，ditto 代表的趨勢是使用者越來越不願意把內容鎖死在某個 SaaS 平臺，這種克隆加遷出工具正在拆掉 Webflow、Framer、Wix 的護城河。
-
ditto 面臨的最大風險是合規與濫用。將其指向他人網站後用於商業誤導、冒充或再分發，可能涉及版權和 IP 侵權。ditto 官方在 README 中明確了僅限擁有授權的內容的使用限制，但技術層面並未內建強制的 URL 白名單或版權校驗。 技術侷限方面同樣不容忽略：無法處理需登入的後臺頁面；SPA 應用中的動態載入內容可能被遺漏；大型頁面的保真度可能打折扣；圖片等二進位制資源預設引用原站地址而非託管；產出的程式碼仍需要人工審查後才能用於生產環境。
-
ditto.site 最適合前端開發者、設計工作室和 AI 應用構建者。如果你正在做網站重構、競品頁面結構研究，或者想給 AI 程式設計助手賦予克隆任意網站的能力，ditto 是一個值得認真考慮的工具。 不適合的場景包括：需要複製複雜應用邏輯和 API 後端的場景、對生產程式碼零審查要求的團隊、以及任何未經授權的網站複製用途。
-
ditto.site 用一個精準的技術選擇——確定性而非 LLM——在一個看似擁擠的「截圖轉程式碼」賽道中打出了差異化。它沒有試圖成為萬能工具，而是在 URL 到元件化程式碼這個單點上做到了極致。對於前端開發和 AI 程式設計工具鏈來說，這是一個值得加入工具箱的開源利器。
使用者評論
-
miYOU—content.ts 提取的設計不錯，克隆完了改改文字和圖片就能用，不是那種改一行要找半天的結構。 -
Harold_Sanders_2023—大圖片和內聯資源預設引用原站地址，對於遷移場景來說還得自己託管一下，這個要注意。 -
PhilipMendozaX44—昨天試了一個比較複雜的營銷頁面，元件拆分大體對，但 Accessibility 方面有幾個語義標籤沒處理好。 -
NathanTurner_8848—免費的 hosted API 不知道有沒有呼叫次數限制？如果大規模用的話還是自託管靠譜。 -
Phillip.Sullivan369—說實話有點擔心法律風險，指向任意公開 URL 就能拿到元件化的克隆程式碼，如果有人指向競爭對手的站點怎麼辦？ -
PatrickWilson_77—如果能直接把克隆結果在 StackBlitz 裡開啟直接編輯就更好了，下載 ZIP 再解壓還是多了幾步。 -
Walter.PerryJr—用 ditto 做競品頁面結構學習挺好的，但絕對不能拿生成程式碼直接上線，還是要人工審一遍才行。 -
DrSolineHubert_x—UI 設計很出彩，畫素 RPG 風格跟網站克隆這個主題意外的搭，第一眼就被吸引了。 -
AAllen_100—跑了幾次 API 介面，文件寫得還算清楚，POST 一個 URL 然後輪詢就完事了，整合成本很低。 -
Dylan_Rodriguez369—PH 上線那天就 star 了，418 票的精選產品實至名歸，確實解決了一個很具體的痛點。 -
MrThaísCastro_x—只支援公開頁面的克隆，登入後的後臺或者 SPA 的動態內容抓不到，這算是一個已知的限制吧。 -
Sophia948—中文媒體說這個工具在拆 Webflow 和 Wix 的護城河，我覺得說得挺對的，建站工具從平臺變成通道是個大趨勢。 -
RWrightIII—ion.design 團隊之前做 Ruby 的，那個 AI 產品設計師也很厲害，這個 ditto 感覺是他們內部工具的開源化。 -
Deborah.Russell5—對於教學場景特別有用，讓學生把一個真實網站克隆下來看元件拆分，比從頭教怎麼寫元件直觀多了。 -
DMyers_Plus47—確定性這個點確實是剛需，跑了兩遍輸出完全一致，拿來 diff 追蹤頁面變化很實用。 -
JohnRogersK921—試了一下指向我自己的作品集網站，生成的程式碼乾淨得有點意外，hover 狀態居然真的保留了，元件拆分也合理，不是那種一堵 div 牆的輸出。 -
Philip.MitchellK—要是能加個 diff 檢視對比生成的程式碼和原站就好了，這樣維護的時候一眼能看出 ditto 做了哪些取捨。 -
Frank.Hall_2023—MCP 伺服器這個點很聰明，直接接到 Claude 或者 Cursor 裡當工具用，不用來回導檔案了。 -
orangewolf962—自託管的話依賴 PostgreSQL 和 MinIO，部署門檻比純 Node 服務稍高一點，但文件還算全。 -
劉琪—從一個設計工作室的角度看，這工具能大幅降低客戶網站遷移的起手成本，以前報價裡光還原設計就要一週。 -
CFisher_2021—Webflow 上做了兩百多個頁面，每年續費一千五，想遷出來自己維護，ditto 可能是目前最好的方案了。 -
WalterRobertsZ—價格很良心，MIT 開源加免費託管 API，小團隊自託管完全夠用了。 -
Nash214—看了倉庫的提交歷史，一個月不到 90 次提交��團隊迭代速度挺快，生產事故的覆盤也寫得很認真。 -
TeresaMartin007—團隊回覆得很清楚，工具是中性的，合規責任在使用者。但我還是覺得技術上應該加一道基本的 URL 白名單機制。 -
Stake_Base—拿幾個 landing page 試了一圈，元件化的效果比我想象中好太多，hover 和 token 都完好，這個開源的誠意很足。 -
FridaNascimento—用在 AI 應用構建的場景很順手，新使用者註冊完了直接從老站克隆一套程式碼給他做起點，不用每次都從空白畫布開始。 -
bigbear717—好奇元件邊界推斷是怎麼做的？是靠 DOM 結構的語義分析還是有更啟發式的方法？ -
Catherine_Thompson_X7—之前用 screenshot-to-code 的工具，每次生成結果都不一樣，改來改去真的很崩潰。ditto 這個確定性路線才是做工具該有的態度。 -
AmberMooreK—對老舊營銷網站那些 CSS 寫得亂七八糟的頁面，能還原到什麼程度？有點想試試極限情況。 -
AbigailLopez—同類的工具之前用過幾個，要麼是 LLM 猜的不穩定，要麼輸出的是 flattened HTML 沒法維護，ditto 算是找到了一個平衡點。