ditto.site
ditto.site là một công cụ sao chép trang web mã nguồn mở, được cấp phép MIT, xác định, biến bất kỳ URL công khai nào thành mã Next.js hoặc Vite sạch, được phân tách thành các thành phần—thường trong khoảng 5 phút—mà không cần dựa vào phỏng đoán của LLM.
https://ditto.site/?ref=producthunt&utm_source=aipure
Thông tin Sản phẩm
Đã cập nhật:Jul 23, 2026
ditto.site là gì
ditto.site là một công cụ “website-to-code” xác định, tạo ra một ứng dụng web TypeScript độc lập từ những gì một trang đích hiển thị trong trình duyệt. Thay vì cần quyền truy cập vào kho lưu trữ mã nguồn của một trang web, bạn cung cấp một URL công khai và ditto xuất ra một dự án dễ bảo trì (Next.js hoặc Vite) với các thành phần và kiểu dáng có cấu trúc (ví dụ: Tailwind). Dự án là mã nguồn mở (MIT) và có thể được sử dụng thông qua tự lưu trữ, API REST được lưu trữ hoặc máy chủ MCP được thiết kế cho quy trình làm việc của tác nhân. ditto.site nhấn mạnh đầu ra nhất quán, ổn định và chỉ được sử dụng khi bạn có quyền kiểm tra, sao chép, chuyển đổi và vận hành nội dung đích.
Các Tính năng Chính của ditto.site
ditto.site là một công cụ nhân bản trang web mã nguồn mở, được cấp phép MIT, mang tính xác định, biến một URL công khai thành một ứng dụng web TypeScript (Next.js hoặc Vite) độc lập, dễ bảo trì chỉ trong vài phút. Thay vì sử dụng phương pháp phỏng đoán tốt nhất dựa trên LLM, nó chạy một quy trình ổn định để nắm bắt những gì một trang hiển thị trong trình duyệt, sau đó tạo mã sạch, được phân tách thành các thành phần với các hệ thống thiết kế được trích xuất (mã thông báo, phông chữ, điểm ngắt), tương tác (di chuột/tập trung, menu thả xuống, accordion, chuyển động) và các tạo phẩm SEO thân thiện với sản xuất (siêu dữ liệu, JSON-LD, sơ đồ trang web). Nó có thể được sử dụng thông qua các công cụ mã nguồn mở tự lưu trữ, API REST được lưu trữ hoặc máy chủ MCP cho các quy trình làm việc của tác nhân.
Quy trình nhân bản xác định: Tạo ra các kết quả nhanh, ổn định, có thể lặp lại (chụp → tạo → xác minh) mà không cần dựa vào diễn giải LLM không xác định.
Tạo mã URL thành ứng dụng: Chuyển đổi một trang web công khai thành một dự án TypeScript mới, độc lập dựa trên những gì trang hiển thị trong trình duyệt—không yêu cầu kho lưu trữ nguồn gốc.
Đầu ra khung: Next.js hoặc Vite: Phát ra một khung ứng dụng thực mà bạn có thể chạy và mở rộng, chọn Next.js hoặc Vite tùy thuộc vào ngăn xếp và nhu cầu triển khai của bạn.
Mã có thể bảo trì, được phân tách thành các thành phần: Tránh "một tệp khổng lồ" bằng cách chia DOM lặp lại thành các thành phần, nâng các vùng thành các phần và trích xuất một mô hình nội dung có thể chỉnh sửa.
Trích xuất hệ thống thiết kế: Trích xuất mã thông báo, phông chữ, điểm ngắt, cấu trúc bố cục và chuyển động/tương tác để giữ nguyên giao diện trong khi vẫn giữ cho kiểu dáng có thể chỉnh sửa.
Nhiều đường dẫn tích hợp (OSS, API, MCP): Chạy cục bộ/tự lưu trữ (MIT), gọi API REST được lưu trữ để xếp hàng/thăm dò công việc và tải xuống kết quả, hoặc hiển thị nhân bản dưới dạng công cụ cho các tác nhân thông qua máy chủ MCP.
Các Trường hợp Sử dụng của ditto.site
Xây dựng lại/di chuyển của đại lý hoặc studio: Tạo lại một trang web tiếp thị hiện có thành mã Next.js/Vite sạch làm điểm khởi đầu cho việc thiết kế lại, tối ưu hóa hiệu suất hoặc tích hợp CMS.
Tạo mẫu nghiên cứu cạnh tranh/thị trường: Tạo các bản sao trung thực, có thể chỉnh sửa của các trang có thể truy cập công khai (khi bạn có quyền kiểm tra/chuyển đổi) để nghiên cứu các mẫu bố cục, IA và hệ thống thiết kế.
Mẫu giới thiệu trình tạo ứng dụng AI: Cung cấp cho khách hàng mới một cơ sở mã thực phù hợp với trang web hiện tại của họ, thay thế vấn đề "canvas trống" bằng một dự án khởi đầu có thể bảo trì.
Bàn giao kỹ thuật từ "sự thật đã hiển thị": Khi nguồn gốc không khả dụng, tạo ra một cơ sở mã hoạt động từ trang đã hiển thị để tăng tốc tài liệu nội bộ, tái cấu trúc hoặc hiện đại hóa.
Quy trình tạo trang web được hỗ trợ bởi tác nhân: Kết nối ditto vào Claude/Cursor/các tác nhân tùy chỉnh thông qua MCP để các vòng lặp xây dựng tự động có thể nhân bản, sửa đổi và lặp lại trên các dự án thực.
Cơ sở nhân bản trang web sẵn sàng cho SEO: Sử dụng siêu dữ liệu, JSON-LD và sơ đồ trang web được tạo làm nền tảng cho việc xây dựng lại bảo toàn SEO trước khi tối ưu hóa thêm.
Ưu điểm
Đầu ra xác định, nhất quán phù hợp cho các quy trình làm việc và tự động hóa có thể lặp lại.
Tạo ra các dự án Next.js/Vite TypeScript có thể bảo trì, được phân tách thành các thành phần thay vì các bản đổ HTML phẳng.
Sử dụng linh hoạt: mã nguồn mở tự lưu trữ, API REST được lưu trữ hoặc MCP cho công cụ tác nhân.
Trích xuất các mã thông báo thiết kế, tương tác và tạo phẩm SEO để bảo toàn độ trung thực và tăng tốc lặp lại.
Nhược điểm
Chỉ phù hợp khi bạn có quyền kiểm tra/sao chép/chuyển đổi nội dung mục tiêu; lạm dụng có thể tạo ra các vấn đề pháp lý/đạo đức.
Độ trung thực của đầu ra bị giới hạn ở những gì có thể được chụp từ trang đã hiển thị; logic/phần phụ trợ ứng dụng phức tạp không được tái tạo một cách cố hữu.
Vẫn có thể yêu cầu dọn dẹp hoặc điều chỉnh thủ công cho nội dung động, luồng xác thực hoặc tích hợp dành riêng cho trang web.
Cách Sử dụng ditto.site
1) Chọn cách bạn muốn sử dụng Ditto: Ditto cung cấp ba điểm truy cập sử dụng cùng một công cụ xác định: (a) Tự lưu trữ mã nguồn mở (chạy toàn bộ quy trình cục bộ), (b) API REST được lưu trữ (POST một URL, thăm dò trạng thái công việc, sau đó tải xuống đầu ra), hoặc (c) Máy chủ MCP (kết nối Ditto với một tác nhân như Claude/Cursor).
2) Sử dụng Ditto thông qua API REST được lưu trữ (con đường nhanh nhất): Truy cập https://www.ditto.site/api-key và lấy khóa API. Sử dụng điểm cuối được lưu trữ để gửi một URL công khai, sau đó thăm dò công việc cho đến khi hoàn thành, và cuối cùng kéo dự án được tạo (Next.js App Router theo mặc định, hoặc Vite React khi được yêu cầu).
3) Sử dụng Ditto thông qua MCP (cho quy trình làm việc của tác nhân): Lấy khóa API, sau đó thêm Ditto làm máy chủ MCP trong cấu hình tác nhân/ứng dụng khách của bạn bằng cách sử dụng URL MCP và mã thông báo Bearer của bạn. Ví dụ cấu hình: { "mcpServers": { "ditto": { "url": "https://api.ditto.site/mcp", "headers": { "Authorization": "Bearer ${DITTO_API_KEY}" } } } }
4) Tự lưu trữ Ditto (chạy quy trình cục bộ): Sao chép kho lưu trữ mã nguồn mở và cài đặt các phụ thuộc: `gh repo clone ion-design/ditto.site` sau đó `cd ditto.site && npm install`.
5) Chạy một công việc sao chép cục bộ đối với một URL: Từ kho lưu trữ, chạy lệnh sao chép và truyền URL đích: `npm run clone -- https://example.com` (thay thế bằng trang web bạn được phép sao chép).
6) Biến đầu ra sao chép của Ditto thành một dự án trên đĩa (giải nén): Sử dụng trình giải nén chính thức từ kho lưu trữ đã kiểm tra: `npm run unpack -- <clone.json|-> <out-dir>`. Điều này ghi các tệp văn bản và hiện thực hóa các tài sản nhị phân (base64 nội tuyến hoặc được tìm nạp qua $DITTO_API_URL / $DITTO_API_KEY).
7) Mở và xây dựng ứng dụng đã tạo: Mở thư mục đầu ra trong trình chỉnh sửa của bạn. Ditto phát ra một dự án TypeScript thực sự với mã được phân tách thành các thành phần (không phải một tệp lớn), bao gồm các mã thông báo/hệ thống thiết kế được trích xuất, phông chữ, tương tác, chuyển động, điểm ngắt và các phần.
8) Biết những gì Ditto nắm bắt (và những gì nó có thể bỏ lỡ): Ditto nắm bắt những gì trình duyệt thực sự đã hiển thị tại thời điểm chụp nhanh. Nội dung tải sau (cuộn vô hạn, hình ảnh tải chậm hoặc nội dung được kích hoạt bởi tương tác) có thể không được bao gồm—đảm bảo nội dung bạn muốn hiển thị trước khi sao chép.
9) Tuân thủ các thực tiễn tốt nhất về sử dụng và quyền: Ditto được thiết kế để học hỏi, tạo mẫu và các trường hợp sử dụng được ủy quyền. Bạn có trách nhiệm đảm bảo rằng bạn có quyền sao chép và sử dụng mã từ bất kỳ trang nào, tôn trọng bản quyền, điều khoản dịch vụ và IP.
Câu hỏi Thường gặp về ditto.site
ditto.site là một công cụ nhân bản trang web xác định mã nguồn mở, biến một URL công khai thành một codebase sạch, được phân tách thành các thành phần (Next.js hoặc Vite) dựa trên những gì trang hiển thị trong trình duyệt.
Video ditto.site
Bài viết phổ biến
Atoms: Nền tảng AI đa tác nhân biến ý tưởng thành sản phẩm sẵn sàng ra mắt
May 22, 2026
Nano Banana SBTI: Nó là gì, Cách thức hoạt động và Cách sử dụng nó vào năm 2026
Apr 15, 2026
Đánh giá Atoms — Trình tạo sản phẩm AI định nghĩa lại việc tạo nội dung số vào năm 2026
Apr 10, 2026
Kilo Claw: Cách Triển Khai và Sử Dụng AI Agent "Làm-Thay-Bạn" Thực Sự (Cập Nhật 2026)
Apr 3, 2026
Công cụ AI Mới nhất Tương tự ditto.site
GPT Easy Web
GPT Easy Web là một nền tảng thân thiện với người dùng được hỗ trợ bởi AI cho phép người dùng dễ dàng xây dựng, tùy chỉnh và quản lý các trang web thông qua các tương tác bằng ngôn ngữ tự nhiên và các công cụ tự động mà không cần kiến thức lập trình.
AI Website Tool
Công cụ Website AI là một trình tạo website được hỗ trợ bởi AI, tạo ra các trang web chuyên nghiệp trong vài phút bằng cách tự động tạo nội dung tập trung vào doanh nghiệp, hình ảnh tùy chỉnh và thiết kế phản hồi chỉ với vài cú nhấp chuột.
Softgen
Softgen.ai là một nền tảng tạo dự án full-stack hỗ trợ AI cho phép người dùng biến ý tưởng của họ thành các ứng dụng web chức năng mà không cần yêu cầu lập trình.
Webifier
Webifier là một công cụ được hỗ trợ bởi AI biến các đề xuất văn bản thành các trang đích React hoàn toàn chức năng với mã sạch, có thể xuất khẩu sử dụng NextJS14, TailwindCSS, và các thành phần Shadcn.
Công cụ AI Phổ biến Giống ditto.site
Adobe Express
Adobe Express là một ứng dụng tạo nội dung tất cả trong một sử dụng AI cho phép dễ dàng tạo ra các bài đăng mạng xã hội, hình ảnh, video, tờ rơi và nhiều hơn nữa với các mẫu và tài sản được thiết kế chuyên nghiệp.
Hostinger
Hostinger là một nhà cung cấp dịch vụ lưu trữ web và tên miền cung cấp các công cụ được hỗ trợ bởi AI như Horizons, cho phép bất kỳ ai xây dựng, chỉnh sửa và xuất bản các ứng dụng web và trang web tùy chỉnh mà không cần viết mã thông qua một giao diện trò chuyện đơn giản.
GPT Engineer
GPT Engineer là một công cụ phát triển phần mềm được hỗ trợ bởi AI cho phép bất kỳ ai xây dựng các ứng dụng web bằng cách trò chuyện với một kỹ sư AI.
Manus Shopify Connector
Manus Shopify Connector cho phép bạn xây dựng một giao diện cửa hàng được hỗ trợ bởi Shopify, quản lý danh mục của bạn và tạo các chiến dịch dựa trên dữ liệu từ một cuộc trò chuyện duy nhất—sử dụng API Shopify với quyền truy cập được giới hạn bởi OAuth và thanh toán Shopify.