Eine Website öffnen — Next.js-Projekt auf der Festplatte

Noch nicht lange her, da musste ich die Oberfläche einer Marketing-Website wiederherstellen, deren Quellcode zusammen mit dem Auftragnehmer verschwunden war. Genauer gesagt hatte der Kunde nur noch einen Produktionslink übrig. Früher hätte ich einen Abend damit verbracht, das Layout manuell zu kopieren, aber diesmal stieß ich auf ein Projekt, das das in einer Minute erledigt. Und nicht über LLM, was für mich unerwartet war.

Was ist ditto.site

ditto.site — ein Open-Source-TypeScript-Compiler, der eine öffentliche URL nimmt und in ein eigenständiges Projekt verwandelt. Standardmäßig gibt es Next.js App Router aus, auf Anfrage — Vite React. Styles kommen über Tailwind oder Plain CSS.

Ich möchte klarstellen, was der Autor mit „Klonen" meint. Hier gibt es keine git clone: Sie brauchen weder das Repository der Website noch deren Quellcode. Sie brauchen nur einen Link, der vom Browser aus erreichbar ist. Das Tool öffnet die Seite, zeichnet das auf, was der Browser tatsächlich rendert, und schreibt ein neues Projekt daraus.

Der Autor bezeichnet sein System explizit als „Capture-to-Code-Pipeline" und betont, dass der Compiler kein LLM ist, das Seiten erstellt. Dieselbe erfasste Kopie erzeugt immer byte-für-byte identische Ausgabe. Übrigens wird Deterministik als Hauptfeature vermarktet, und das ist ehrlicher als mysteriöse neuronale Netzwerk-Generierung, wo jeder Durchlauf unterschiedlich ist.

Das Projekt hat bereits 1580 Stars und 214 Forks auf GitHub, MIT-Lizenz. Das Projekt ist neu, aber die Community darum bildet sich schnell.

So wird es verwendet

Drei Möglichkeiten. Die einfachste ist die lokale CLI:

git clone https://github.com/ion-design/ditto.site.git
cd ditto.site
npm ci
npx playwright install chromium
npm run clone -- https://example.com/ --out=./output

Nach der Installation von Chromium öffnet der Befehl npm run clone die Seite, erfasst den Zustand und legt die fertige Anwendung in output/<site>/app ab. Mir hat dieses Detail gefallen: ohne das Flag --out landen Ergebnisse in runs/<site>/<timestamp>/, und der Symlink runs/<site>/latest zeigt immer auf den neuesten Klon. Skripte müssen nicht für den neuen Zeitstempel umgeschrieben werden.

Es gibt auch Lazy-Modi:

npm run clone -- https://example.com/ --serve   # клонирует и сразу поднимает dev-сервер
npm run clone -- https://example.com/ --open    # плюс открывает браузер

Der zweite Weg ist eine REST-API unter api.ditto.site. Erstellen Sie einen Schlüssel über das Formular oder curl mit E-Mail-Verifizierung, exportieren Sie ihn nach DITTO_API_KEY, und starten Sie einen Task:

curl -sS -X POST "$DITTO_API_URL/v1/clones" \
  -H "authorization: Bearer $DITTO_API_KEY" \
  -H "content-type: application/json" \
  -d '{
    "url": "https://example.com/",
    "options": {
      "mode": "single",
      "styling": "tailwind",
      "framework": "next"
    }
  }'

Die Antwort enthält eine Datei-Map mit dem Pfad, der Größe und dem SHA-256 jeder Datei. Ihr CLI-Unpacker hilft beim Extrahieren der Verzeichnisstruktur auf die Festplatte, und das gesamte Projekt kann als einzelnes Archiv über /bundle?format=tgz heruntergeladen werden.

Der dritte Weg ist ein MCP-Server, und ehrlich gesagt ist das der interessanteste Teil für mich. ditto.site verbindet sich mit Agents als reguläres MCP-Tool, und der Server ist darauf ausgelegt, sparsam zu sein: zuerst erhält der Agent nur die Task-ID und Metadaten und liest Dateien nach Bedarf. Tools wie clone_website, list_clone_files und read_clone_files ermöglichen es dem Agent, einen Klon selbst zu starten, auf den Abschluss zu warten und selektiv package.json oder eine bestimmte Komponente zu lesen.

Was landet im generierten Projekt

Die Ausgabe ist nicht nur Layout. Laut README enthält die Anwendung:

• wiederhergestellte Seiten und Routenmodule;
• erfasste Assets, Fonts, Icons, Manifeste und Metadaten;
• robots, sitemap, llms.txt und JSON-LD, wenn erkannt;
• kleine Runtime-Helfer für erkannte Interaktionen und Animationen;
• generierte AGENTS.md und ARCHITECTURE.md für die Übergabe des Projekts.

Ich möchte den letzten Punkt separat hervorheben. Der Autor erwartet eindeutig, dass ein Mensch oder KI-Agent danach am Code weiterarbeitet, und nimmt sofort Anweisungen auf, welche Dateien sicher zu bearbeiten sind: src/app/content.ts und src/app/components/. Das ist ein seltenes Maß an Sorgfalt für einen Generator.

Wie es intern funktioniert

Die Pipeline sieht so aus: URL → Browser-Capture → normalisierter Zwischen-Render → deterministische Ausgabe → Anwendungs-Generierung → Asset-Materialisierung → optionale Validierung.

Der Capture schreibt das DOM, berechnete Styles, Layout-Boxen, Quelldatei-CSS, Fonts, Screenshots und Interaktionszustände. Reproduzierbare Animationen werden ebenfalls erfasst, wenn beobachtbar. Allerdings werden beliebiges Drittanbieter-JavaScript, Authentifizierung, Zahlungen und Personalisierung nicht reproduziert. Das ist eine logische Einschränkung: Das Tool arbeitet mit dem, was im Browser sichtbar ist, nicht mit serverseitiger Logik.

Das Repository hat eine solide Architektur: Compiler, Hono REST-API neben MCP-Server, Drizzle-Schema mit Migrations, Task-Queue-Worker, Artifact-Storage für S3/R2. Sie können alles lokal über Docker Compose mit Postgres und MinIO starten oder einen vereinfachten Inline-Modus ohne Datenbank in einem Befehl ausführen. Es gibt auch einen MCP-Endpunkt unter localhost:8787/mcp für die lokale API.

Ich mag, dass es verify und asyncVerify Optionen gibt: Das generierte Projekt kann durch Validierung geschickt werden, und Sie erhalten eine Bestätigung, dass es zumindest baut und ähnlich rendert wie das Original.

Wo es nützlich ist

Das erste Szenario ist offensichtlich: Wiederherstellung einer Website, wenn keine Quellen vorhanden sind. Eine aufgegebene Landing Page, verlorene Auftragnehmer-Quellen, eine Legacy-Seite, die auf einen modernen Stack migriert werden muss. Hier löst das Tool das Problem in Minuten.

Das zweite Szenario ist Prototyping. Ein Kunde zeigt „Ich will es wie hier" und wirft einen Link rein. Statt abstrakter Diskussionen erhalten Sie in ein paar Minuten ein funktionierendes Projekt mit Next.js-Struktur und besprechen dann die Unterschiede darin. Für einen Freelancer, der den Arbeitsumfang anhand einer Referenz eines anderen einschätzt, beschleunigt das den Start.

Das dritte Szenario ist Automatisierung über MCP. Einem Agent kann die Aufgabe erteilt werden: „Klone diese Website als Next.js-App, warte auf den Abschluss, lies die generierten Dateien". Das Format „nur benötigte Dateien" spart den Kontext des Agents, und die Autoren haben das eindeutig durchdacht.

Die Kehrseite und Spielregeln

Es gibt Einschränkungen. Die CLI lebt derzeit im Repository und ist nicht bei npm veröffentlicht, also wird npx ditto nicht funktionieren — Sie müssen das gesamte Repository klonen. Das ist nichts, was Sie mit einer einzigen Zeile zu CI hinzufügen können, aber die Autoren warnen ehrlich davor.

Dann gibt es die Ethik. Die README erinnert ständig: Verwenden Sie das Tool nur dort, wo Sie das Recht haben, Inhalte zu kopieren und zu transformieren. Phishing, Markenimitation, Authentifizierungsumgehung und Massenerfassung anderer Websites sind explizit verboten, und das Projekt hat ein separates Dokument RESPONSIBLE_USE.md. Das klingt richtig: Die Technologie selbst ist neutral, aber es lohnt sich, sie auf Ihre eigenen Projekte oder mit Erlaubnis der Eigentümer anzuwenden.

Noch etwas. Sowohl auf Russisch als auch auf Englisch klingt das Wort „Klonen" gewagt, aber in Wirklichkeit ist es eine Rekonstruktion des sichtbaren Teils der Seite. Erwarten Sie nicht, dass das Tool serverseitigen Code, eine Datenbank oder Business-Logik herauszieht — es sagt das ehrlich in der README.

Für wen es sich lohnt

Wenn Sie Landing Pages erstellen, Websites auf einen neuen Stack migrieren oder einem KI-Agent ein sauberes Tool für die Arbeit mit Web-Oberflächen geben möchten, werfen Sie einen Blick auf ditto.site. Beginnen Sie mit der lokalen CLI, es werden keine Schlüssel benötigt: npm run clone -- https://example.com/ --serve, und in ein paar Minuten haben Sie einen Dev-Server auf dem wiederhergestellten Projekt am Laufen. Und wenn Sie das in Ihre Pipeline einbauen möchten, sind die REST-API und der MCP-Server bereits enthalten. Für einen Designer oder Tech Lead, der oft „mach es wie dieses" erhält, sieht das Tool wie eine ehrliche Antwort auf einen sehr häufigen Schmerzpunkt aus.