ditto.site
ditto.site ist ein Open-Source-, MIT-lizenziertes, deterministisches Website-Klon-Tool, das jede öffentliche URL in sauberen, komponentisierten Next.js- oder Vite-Code umwandelt – typischerweise in etwa 5 Minuten – ohne auf LLM-Vermutungen angewiesen zu sein.
https://ditto.site/?ref=producthunt&utm_source=aipure
Produktinformationen
Aktualisiert:Jul 23, 2026
Was ist ditto.site
ditto.site ist ein deterministisches „Website-zu-Code“-Tool, das eine eigenständige TypeScript-Web-App aus dem generiert, was eine Zielseite im Browser rendert. Anstatt Zugriff auf das Quell-Repository einer Website zu benötigen, geben Sie eine öffentliche URL an, und ditto gibt ein wartbares Projekt (Next.js oder Vite) mit strukturierten Komponenten und Styling (z. B. Tailwind) aus. Das Projekt ist Open Source (MIT) und kann über Self-Hosting, eine gehostete REST-API oder einen MCP-Server verwendet werden, der für Agenten-Workflows entwickelt wurde. ditto.site legt Wert auf konsistente, stabile Ausgaben und ist nur dort zu verwenden, wo Sie die Rechte zur Inspektion, zum Kopieren, Transformieren und Betreiben des Zielinhalts haben.
Hauptfunktionen von ditto.site
ditto.site ist ein quelloffener, MIT-lizenzierter, deterministischer Website-Kloner, der eine öffentliche URL in wenigen Minuten in eine eigenständige, wartbare TypeScript-Web-App (Next.js oder Vite) verwandelt. Anstatt eine LLM-basierte "beste Schätzung" zu verwenden, führt es eine stabile Pipeline aus, die das erfasst, was eine Seite im Browser rendert, und dann sauberen, komponentisierten Code mit extrahierten Designsystemen (Tokens, Schriftarten, Breakpoints), Interaktionen (Hover/Fokus, Dropdowns, Akkordeons, Bewegung) und produktionsfreundlichen SEO-Artefakten (Metadaten, JSON-LD, Sitemaps) generiert. Es kann über selbst gehostete Open-Source-Tools, eine gehostete REST-API oder einen MCP-Server für Agenten-Workflows verwendet werden.
Deterministische Klon-Pipeline: Erzeugt schnelle, stabile, wiederholbare Ergebnisse (Erfassung → Generierung → Verifizierung), ohne sich auf nicht-deterministische LLM-Interpretationen zu verlassen.
URL-zu-App-Code-Generierung: Konvertiert eine öffentliche Webseite in ein frisches, eigenständiges TypeScript-Projekt, basierend auf dem, was die Seite in einem Browser rendert – kein ursprüngliches Quell-Repository erforderlich.
Framework-Ausgabe: Next.js oder Vite: Gibt ein echtes Anwendungsgerüst aus, das Sie ausführen und erweitern können, wobei Sie je nach Stack und Bereitstellungsanforderungen Next.js oder Vite wählen.
Wartbarer, komponentisierter Code: Vermeidet "eine riesige Datei", indem wiederholtes DOM in Komponenten aufgeteilt, Regionen in Abschnitte gehoben und ein bearbeitbares Inhaltsmodell extrahiert wird.
Designsystem-Extraktion: Extrahiert Tokens, Schriftarten, Breakpoints, Layoutstruktur und Bewegung/Interaktionen, um das Erscheinungsbild zu erhalten und gleichzeitig die Stilbearbeitung zu ermöglichen.
Mehrere Integrationspfade (OSS, API, MCP): Lokal ausführen/selbst hosten (MIT), die gehostete REST-API aufrufen, um Jobs in die Warteschlange zu stellen/abzufragen und Ergebnisse herunterzuladen, oder das Klonen als Tool für Agenten über einen MCP-Server bereitstellen.
Anwendungsfälle von ditto.site
Agentur- oder Studio-Umbauten/-Migrationen: Erstellen Sie eine bestehende Marketing-Website in sauberem Next.js/Vite-Code als Ausgangspunkt für Redesigns, Performance-Arbeiten oder CMS-Integration.
Prototyping für Wettbewerbs-/Marktforschung: Generieren Sie originalgetreue, bearbeitbare Repliken öffentlich zugänglicher Seiten (wenn Sie die Rechte zur Inspektion/Transformation haben), um Layoutmuster, IA und Designsysteme zu untersuchen.
Onboarding-Vorlagen für KI-App-Builder: Geben Sie neuen Kunden eine Echtcode-Basislinie, die ihrer aktuellen Website entspricht, und ersetzen Sie das "leere Leinwand"-Problem durch ein wartbares Startprojekt.
Technische Übergabe von der "gerenderten Wahrheit": Wenn die Originalquelle nicht verfügbar ist, erstellen Sie eine funktionierende Codebasis aus der gerenderten Seite, um die interne Dokumentation, Refaktorisierungen oder Modernisierung zu beschleunigen.
Agenten-gestützte Site-Generierungs-Workflows: Verbinden Sie ditto über MCP mit Claude/Cursor/benutzerdefinierten Agenten, damit automatisierte Build-Schleifen reale Projekte klonen, modifizieren und iterieren können.
SEO-fähige Site-Replikations-Baseline: Verwenden Sie generierte Metadaten, JSON-LD und Sitemaps als Grundlage für SEO-erhaltende Umbauten vor weiterer Optimierung.
Vorteile
Deterministische, konsistente Ausgaben, geeignet für wiederholbare Workflows und Automatisierung.
Generiert wartbare, komponentisierte Next.js/Vite TypeScript-Projekte anstelle von flachen HTML-Dumps.
Flexible Nutzung: Open Source selbst hosten, gehostete REST-API oder MCP für Agenten-Tools.
Extrahiert Design-Tokens, Interaktionen und SEO-Artefakte, um die Genauigkeit zu erhalten und die Iteration zu beschleunigen.
Nachteile
Nur geeignet, wenn Sie die Rechte zur Inspektion/Kopie/Transformation des Zielinhalts haben; Missbrauch kann rechtliche/ethische Probleme verursachen.
Die Ausgabegenauigkeit ist auf das beschränkt, was von der gerenderten Seite erfasst werden kann; komplexe Anwendungslogik/Backends werden nicht inhärent rekonstruiert.
Kann immer noch manuelle Bereinigung oder Anpassung für dynamische Inhalte, Authentifizierungsabläufe oder sitespezifische Integrationen erfordern.
Wie verwendet man ditto.site
1) Wählen Sie, wie Sie Ditto verwenden möchten: Ditto bietet drei Einstiegspunkte, die dieselbe deterministische Engine verwenden: (a) Open-Source-Self-Host (die gesamte Pipeline lokal ausführen), (b) Gehostete REST-API (eine URL POSTen, den Jobstatus abfragen, dann die Ausgabe herunterladen) oder (c) MCP-Server (Ditto mit einem Agenten wie Claude/Cursor verbinden).
2) Ditto über die gehostete REST-API verwenden (schnellster Weg): Gehen Sie zu https://www.ditto.site/api-key und holen Sie sich einen API-Schlüssel. Verwenden Sie den gehosteten Endpunkt, um eine öffentliche URL zu übermitteln, fragen Sie dann den Job ab, bis er abgeschlossen ist, und ziehen Sie schließlich das generierte Projekt (standardmäßig Next.js App Router oder Vite React, wenn angefordert).
3) Ditto über MCP verwenden (für Agenten-Workflows): Holen Sie sich einen API-Schlüssel und fügen Sie Ditto dann als MCP-Server in Ihrer Agenten-/Client-Konfiguration hinzu, indem Sie die MCP-URL und Ihr Bearer-Token verwenden. Beispielkonfiguration: { "mcpServers": { "ditto": { "url": "https://api.ditto.site/mcp", "headers": { "Authorization": "Bearer ${DITTO_API_KEY}" } } } }
4) Ditto selbst hosten (die Pipeline lokal ausführen): Klonen Sie das Open-Source-Repository und installieren Sie Abhängigkeiten: `gh repo clone ion-design/ditto.site` dann `cd ditto.site && npm install`.
5) Führen Sie einen lokalen Klonjob gegen eine URL aus: Führen Sie aus dem Repository den Klonbefehl aus und übergeben Sie die Ziel-URL: `npm run clone -- https://example.com` (ersetzen Sie dies durch die Website, die Sie klonen dürfen).
6) Ditto's Klonausgabe in ein Projekt auf der Festplatte umwandeln (entpacken): Verwenden Sie den offiziellen Entpacker aus dem ausgecheckten Repository: `npm run unpack -- <clone.json|-> <out-dir>`. Dies schreibt Textdateien und materialisiert binäre Assets (Inline-Base64 oder über $DITTO_API_URL / $DITTO_API_KEY abgerufen).
7) Die generierte App öffnen und erstellen: Öffnen Sie das Ausgabeverzeichnis in Ihrem Editor. Ditto gibt ein echtes TypeScript-Projekt mit komponentisiertem Code (nicht eine riesige Datei) aus, einschließlich extrahierter Token/Designsystem, Schriftarten, Interaktionen, Bewegung, Breakpoints und Abschnitten.
8) Wissen, was Ditto erfasst (und was möglicherweise fehlt): Ditto erfasst, was der Browser zum Zeitpunkt des Snapshots tatsächlich gerendert hat. Inhalte, die später geladen werden (Infinite Scroll, Lazy-Loaded-Bilder oder durch Interaktion ausgelöste Inhalte), sind möglicherweise nicht enthalten – stellen Sie sicher, dass der gewünschte Inhalt vor dem Klonen sichtbar ist.
9) Befolgen Sie die Best Practices für Nutzung und Rechte: Ditto ist für Lern-, Prototyping- und autorisierte Anwendungsfälle vorgesehen. Sie sind dafür verantwortlich, sicherzustellen, dass Sie das Recht haben, Code von jeder Seite zu klonen und zu verwenden, wobei Sie Urheberrechte, Nutzungsbedingungen und geistiges Eigentum respektieren müssen.
ditto.site FAQs
ditto.site ist ein quelloffener, deterministischer Website-Kloner, der eine öffentliche URL in eine saubere, komponentisierte Codebasis (Next.js oder Vite) umwandelt, basierend auf dem, was die Seite in einem Browser rendert.
ditto.site Video
Beliebte Artikel
Atoms: Eine Multi-Agenten-KI-Plattform, die Ideen in startbereite Produkte verwandelt
May 22, 2026
Nano Banana SBTI: Was es ist, wie es funktioniert und wie man es im Jahr 2026 einsetzt
Apr 15, 2026
Atoms Review – Der KI-Produkt-Builder, der die digitale Erstellung im Jahr 2026 neu definiert
Apr 10, 2026
Kilo Claw: Wie man einen echten "Do-It-For-You" KI-Agenten bereitstellt und verwendet (2026 Update)
Apr 3, 2026
Neueste KI-Tools ähnlich wie ditto.site
GPT Easy Web
GPT Easy Web ist eine benutzerfreundliche, KI-gesteuerte Plattform, die es Benutzern ermöglicht, Websites einfach zu erstellen, anzupassen und zu verwalten, ohne Programmierkenntnisse durch natürliche Sprachinteraktionen und automatisierte Tools zu benötigen.
AI Website Tool
AI Website Tool ist ein KI-gestützter Website-Builder, der professionelle Websites in Minuten erstellt, indem er automatisch geschäftsorientierte Texte, benutzerdefinierte visuelle Inhalte und responsive Designs mit nur wenigen Klicks generiert.
Softgen
Softgen.ai ist eine KI-gestützte Full-Stack-Projektgenerator-Plattform, die es Benutzern ermöglicht, ihre Ideen ohne Programmieranforderungen in funktionale Webanwendungen umzuwandeln.
Webifier
Webifier ist ein KI-gestütztes Tool, das Text-Prompts in voll funktionsfähige React-Landing-Pages mit sauberem, exportierbarem Code unter Verwendung von NextJS14, TailwindCSS und Shadcn-Komponenten umwandelt.
Beliebte KI-Tools wie ditto.site
Adobe Express
Adobe Express ist eine All-in-One-App zur Inhaltserstellung, die von KI unterstützt wird, um mühelos beeindruckende soziale Beiträge, Bilder, Videos, Flyer und mehr mit professionell gestalteten Vorlagen und Assets zu erstellen.
Hostinger
Hostinger ist ein Webhosting- und Domaindienstanbieter, der KI-gestützte Tools wie Horizons anbietet, mit denen jeder benutzerdefinierte Web-Apps und Websites ohne Programmierung über eine einfache Chat-Oberfläche erstellen, bearbeiten und veröffentlichen kann.
GPT Engineer
GPT Engineer ist ein KI-gestütztes Softwareentwicklungstool, das es jedem ermöglicht, Webanwendungen zu erstellen, indem er mit einem KI-Ingenieur chattet.
Manus Shopify Connector
Der Manus Shopify Connector ermöglicht es Ihnen, einen Shopify-gestützten Storefront zu erstellen, Ihren Katalog zu verwalten und datengesteuerte Kampagnen aus einem einzigen Chat heraus zu generieren – unter Verwendung von Shopify-APIs mit OAuth-berechtigtem Zugriff und Shopify-Checkout.