ditto.site
ion-design · Coding
ditto.site ist ein quelloffener Website-Cloner unter MIT-Lizenz, der jede öffentliche URL in ein funktionierendes, in Komponenten aufgeteiltes Next.js- oder Vite-React-Projekt verwandelt. Statt ein Sprachmodell raten zu lassen, wie Ihr Markup aussieht, erfasst das Tool, was der Browser tatsächlich rendert, und erzeugt daraus eine deterministische Codebasis, meist in rund fünf Minuten. Sie können die ganze Pipeline selbst hosten, die gehostete REST-API aufrufen oder sie über ihren MCP-Server an einen Agenten anbinden, und in allen Fällen kostet es nichts. Da lässt sich schwer widersprechen.
Über ditto.site
Was ist ditto.site
ditto.site ist ein Website-zu-Code-Tool und Next.js-Code-Generator für Entwickler, die einen echten, wartbaren Ausgangspunkt wollen statt einer leeren Leinwand. Richten Sie es auf eine Live-Seite, und es schreibt ein frisches Projekt aus dem gerenderten Ergebnis, sodass Sie weder den Originalquellcode noch ein bestehendes Repository brauchen. Die Ausgabe ist nicht eine einzige riesige Datei: Das Tool teilt wiederholtes DOM in Komponenten, hebt saubere Bereiche in Sections und übergibt Ihnen typisierten, tokenisierten Code, an dem Sie weiterarbeiten können.
Der Kern der Idee ist Determinismus. Viele KI-Website-Cloner schicken Ihre Seite an ein LLM und hoffen, dass das Ergebnis halbwegs passt. ditto.site fährt stattdessen eine Capture-to-Code-Pipeline, sodass dieselbe eingefrorene Aufnahme immer eine byte-stabile App ergibt. Kein Rätselraten. Laut Projekt zieht es außerdem das Designsystem hinter der Seite heraus, inklusive Tokens, Schriften, Interaktionen, Bewegung, Breakpoints und Sections.
Die wichtigste Grenze ist der Umfang. Es klont öffentliche URLs, mit denen Sie arbeiten dürfen, und im Kern ist es ein Entwicklerwerkzeug, Sie sollten also mit npm-Befehlen, einem API-Schlüssel oder dem Entpacken einer JSON-Dateizuordnung vertraut sein. Nicht für alle. Wenn Sie ein fertiges Produkt mit visuellem Editor und integriertem Hosting suchen, ist das hier nichts.
Erste Schritte
- Gehen Sie auf die Seite von ditto.site und fordern Sie mit Ihrer E-Mail einen gehosteten API-Schlüssel an, oder klonen Sie das Repository und führen Sie die Pipeline auf Ihrem eigenen Rechner aus.
- Bestätigen Sie Ihre E-Mail, kopieren Sie den einmaligen Schlüssel
dtto_live_...und legen Sie ihn in einer Umgebungsvariable wieDITTO_API_KEYab. - Senden Sie per POST eine öffentliche URL an den Endpunkt der REST-API mit Ihren bevorzugten Optionen, etwa Framework
nextund Stylingtailwind. - Fragen Sie den Job ab, bis er erfolgreich ist, und entpacken Sie dann die zurückgegebene Dateizuordnung mit dem offiziellen Tool in ein Projektverzeichnis.
- Führen Sie Ihre üblichen Installations- und Entwicklungsbefehle im neuen Projekt aus und bauen Sie darauf auf.
Produktinformationen
Ein kurzer Überblick über Preise, unterstützte Plattformen und die Leistung von ditto.site.
Am besten für
Die Nutzer, Aufgaben und Szenarien, für die dieses Tool am besten passt.
Nutzer
- Frontend-Entwickler
- Entwickler von KI-Apps
- Teams, die eine bestehende Seite prüfen
Aufgaben
- Eine Landingpage in Next.js-Code verwandeln
- Aus einem Referenzdesign prototypen
- Einen internen Agenten-Workflow aufbauen
Szenarien
- Ein neues Kundenprojekt starten
- Eine alte öffentliche Seite neu aufbauen
- Ein Design in eine Komponentenbibliothek überführen
Wichtigste Funktionen
Deterministische Capture-to-Code-Pipeline
ditto.site richtet kein LLM auf Ihre Seite und hofft das Beste. Es erfasst, was der Browser gerendert hat, und kompiliert diese eingefrorene Aufnahme zu einem Projekt, sodass dieselbe Eingabe jedes Mal eine byte-stabile Ausgabe liefert. Gleiche Eingabe, gleiche Ausgabe. Diese Beständigkeit zählt, wenn Sie auf dem Ergebnis aufbauen oder es nach einer Änderung neu erzeugen.
In Komponenten aufgeteilte Ausgabe für Next.js und Vite
Das Tool teilt wiederholtes DOM in Komponenten und hebt saubere Bereiche in Sections, dann erzeugt es ein echtes Projekt statt einer einzigen monolithischen Datei. Keine riesige Datei zum Entwirren. Sie können standardmäßig Next.js App Router anfordern oder Vite React, wenn das besser zu Ihrem Stack passt. Das Ergebnis ist typisiert und tokenisiert, es fügt sich also in Ihren normalen Ablauf ein.
Drei Wege, es zu betreiben
Sie wählen den Einstiegspunkt, der zu Ihrer Arbeitsweise passt. Klonen Sie das Repository und hosten Sie die gesamte Pipeline unter der MIT-Lizenz, senden Sie eine URL an die gehostete REST-API und sparen Sie sich die Infrastruktur, oder verbinden Sie den MCP-Server, damit jeder Agent als Werkzeug klonen kann. Alle drei teilen darunter dieselbe deterministische Engine. Welcher passt, hängt von Ihrem Setup ab.
Designsystem-Extraktion
Über das Markup hinaus zieht ditto.site das Designsystem aus der Seite: Design-Tokens, Webfonts, Hover- und Fokuszustände, Dropdowns, Akkordeons und deklarative Bewegung. Es erfasst außerdem Breakpoints und Sections, dazu SEO-Metadaten, JSON-LD und Sitemaps. Damit haben Sie bearbeitbares Material fürs Styling, nicht nur eine statische Momentaufnahme.
Agenten- und API-Integration
Der gehostete Endpunkt unter api.ditto.site wickelt Clone-Jobs über REST ab und gibt eine Dateizuordnung zurück, die nach jedem app-relativen Pfad verschlüsselt ist. Der MCP-Server unter api.ditto.site/mcp lässt Sie Claude, Cursor oder einer eigenen Build-Schleife direkt ein Clone-Werkzeug geben. Für Teams, die ihr Setup automatisieren, ist das der schnellste Weg, Klonen in eine Pipeline einzubauen.
Open Source unter MIT
Das ganze Projekt steht unter MIT-Lizenz und wird offen entwickelt, Sie können also jede Zeile lesen, einen PR senden und mitgestalten, wie es sich weiterentwickelt. Selbsthosting bedeutet, dass Ihre Aufnahmen und Ihr erzeugter Code auf Ihrer eigenen Maschine bleiben, was zu Teams mit strengeren Datengewohnheiten passt. Auch keine Paywall. Keine bezahlte Stufe versteckt die Kern-Engine.
Vor- und Nachteile
Vorteile
- Kostenlos und quelloffen unter MIT-Lizenz, ohne bezahlte Stufe, die die Hauptfunktionen sperrt.
- Deterministische Ausgabe: dieselbe Aufnahme erzeugt stabilen, wiederholbaren Code.
- Teilt Seiten in Komponenten und Sections statt in eine einzige unhandliche Datei.
- Flexible Einstiegspunkte: Selbsthosting, REST-API oder MCP-Server für Agenten.
- Zieht Design-Tokens, Schriften, Bewegung und Breakpoints heraus, die Sie wirklich bearbeiten können.
Nachteile
- Auf Entwickler ausgerichtet, Sie brauchen also Sicherheit mit npm, API-Schlüsseln und dem Entpacken von JSON-Ausgaben.
- Es behandelt nur öffentliche URLs, und Sie sind dafür verantwortlich, die Rechte zum Klonen einer Seite zu haben.
- Es gibt keinen visuellen Editor und kein integriertes Hosting, es ersetzt also keinen vollständigen Website-Baukasten für Nicht-Programmierer.
Häufige Fragen
Es verwandelt eine öffentliche URL in ein eigenständiges Next.js- oder Vite-React-Projekt. Es erfasst, was der Browser rendert, und kompiliert das zu tokenisiertem, in Komponenten aufgeteiltem Code, auf dem Sie aufbauen können.
Ähnliche Inhalte
Entdecke passende Tools, Skills und Artikel zu ditto.site.
Alternativen zu ditto.site
Forefront
Forefront · CodingForefront ist eine Webplattform zum Bauen mit Open-Source-KI. Sie lassen sich führende Open-Source-Sprachmodelle mit eigenen Daten feintunen, ihre Leistung bewerten und sie über eine API ausführen oder exportieren, um sie selbst zu hosten. Entwickler, die den Komfort einer geschlossenen Plattform wollen, aber darauf bestehen, ihre Modelle und Daten zu besitzen, sind hier die Zielgruppe.
Startkit
StartKit.AI · CodingStartkit ist ein Boilerplate zum Bauen von KI-SaaS-Produkten und KI-Wrappern. Man kann es sich als KI-Startup-Boilerplate vorstellen, bei dem die langweiligen Teile schon verdrahtet sind: Authentifizierung, Zahlungen über Stripe und Lemon Squeezy, Nutzungslimits, transaktionale E-Mail und ein KI-API-Starter-Kit, das mit OpenAI, Anthropic, Groq oder Llama spricht. Man klont das Repository, setzt seinen Preis und kümmert sich um den Teil des Produkts, für den Menschen wirklich bezahlen. Es basiert auf Next.js über React und Tailwind, deshalb fühlt sich ein Großteil des Boilerplate-Codes schon vertraut an.
Testim
Tricentis · CodingTestim ist eine KI-gestützte Plattform für Testautomatisierung, mit der man End-to-End-Tests für Web-, Mobile- und Salesforce-Anwendungen baut und ausführt. Sie setzt auf maschinelles Lernen, um Tests stabil zu halten, wenn sich eine Oberfläche ändert, sodass Teams weniger Zeit mit der Reparatur kaputter Selektoren verbringen. Nicht schlecht für ein Tool für automatisierte Tests, das Sie heute schon nutzen können. Sie erstellen Tests, indem Sie Aktionen im Browser aufzeichnen, und fügen danach JavaScript hinzu, wenn Sie mehr Kontrolle brauchen. Für ein beschäftigtes QA-Team eine solide Wahl.