Web Clone · Website-Klon-Methodik

Das Klonen einer Website zu einem wiederholbaren Prozess machen. Arbeitsverzeichnis: ~/projects/website-clones/ (jeder Klon ist ein Unterverzeichnis).

Eisernes Gebot: Echter Quellcode zuerst, niemals KI-vermutetem Code vertrauen

Jede KI-generierte "Klon-Analyse/Arbeitsvorlage" – das konzeptionelle Gerüst kann man als Referenz nehmen, aber die darin enthaltenen ausführbaren Codeblöcke sind standardmäßig frei erfunden und müssen Zeile für Zeile mit dem echten Quellcode abgeglichen werden. Sonst wird das Nachbauen garantiert scheitern.

Nachweis (Marbles-Fall): Ein KI-Analysedokument hat die tatsächliche Architektur der Originalseite – "analytische Lösung für Strahl-Kugel-Schnittpunkte + Kodierung der optischen Ergebnisse in eine Displacement Map, die SVG feDisplacementMap zur Verzerrung des echten DOMs verwendet" – in "ray-marching + SDF + das DOM als Textur sampeln" umgedeutet. Das sind zwei völlig unterschiedliche Implementierungen; das Kopieren führt nicht zum Originaleffekt und ist N-mal langsamer. Siehe references/marbles-case.md.

Daher ist die erste Aktion immer: Den echten Quellcode holen.

Entscheidungsbaum (Reihenfolge einhalten, nicht überspringen)

Schritt 0 · Zuerst das Standardprojektgerüst anlegen

node /Users/jane/.shared-skills/web-clone/scripts/init-clone.mjs <Name> --url <Original-URL>

Dieses Skript erstellt ~/projects/website-clones/<Name>-clone/, NOTES.md, RECON/screenshots/, um zu vermeiden, dass manuelle Schritte vergessen werden.

Schritt 1 · Zuerst auf GitHub nach Quellcode suchen, nicht gleich die Seite scrapen

unset SSL_CERT_FILE   # macOS-Eigenheit, vor bash ausführen
# Nach Seiten-/Produktname suchen
SSL_CERT_FILE=/etc/ssl/cert.pem gh api "search/repositories?q=<Suchbegriff>" \
  | jq -r '.items[] | "\(.full_name) ⭐\(.stargazers_count) \(.description)"' | head -10
# URL-Slug von vercel.app/netlify.app/github.io entspricht oft dem Repository-Namen / Benutzernamen des Deployers

Einzelseiten (github.io / reines HTML) → direkt als Raw holen: curl -sL https://raw.githubusercontent.com/<user>/<repo>/main/index.html
Quellcode gefunden und Lizenz erlaubt es → direkt zu Schritt 4 springen und klonen. Lektion: Zuerst auf GitHub suchen spart 30 Minuten Umwege.

Schritt 2 · Kein Quellcode gefunden → Browser-Aufklärung (Sondierung)

Browser-Skill oder Playwright MCP laden, dann Sondierung ausführen, um Signale zu sammeln (Framework / window.THREE / Canvas-Anzahl / Smooth-Scrolling-Bibliothek / Schriftarten / scrollHeight). Screenshots in 1440/768/390 plus Aufklärungs-JSON im Verzeichnis <Name>/RECON/ speichern.

Bevorzugt die eingebauten Skripte für die Standard-Aufklärung verwenden:

node /Users/jane/.shared-skills/web-clone/scripts/recon-site.mjs \
  --url <Original-URL> \
  --out ~/projects/website-clones/<Name>-clone/RECON \
  --label original

node /Users/jane/.shared-skills/web-clone/scripts/asset-harvest.mjs \
  --recon ~/projects/website-clones/<Name>-clone/RECON/original-recon.json \
  --out ~/projects/website-clones/<Name>-clone/assets/original \
  --manifest ~/projects/website-clones/<Name>-clone/RECON/asset-manifest.json

node /Users/jane/.shared-skills/web-clone/scripts/network-capture.mjs \
  --url <Original-URL> \
  --out ~/projects/website-clones/<Name>-clone/RECON/network \
  --label original

node /Users/jane/.shared-skills/web-clone/scripts/route-crawl.mjs \
  --url <Original-URL> \
  --out ~/projects/website-clones/<Name>-clone/RECON/routes \
  --label original \
  --max-pages 25 \
  --max-depth 2

node /Users/jane/.shared-skills/web-clone/scripts/interaction-probe.mjs \
  --url <Original-URL> \
  --out ~/projects/website-clones/<Name>-clone/RECON/interactions \
  --label original

node /Users/jane/.shared-skills/web-clone/scripts/sourcemap-hunt.mjs \
  --recon ~/projects/website-clones/<Name>-clone/RECON/original-recon.json \
  --out ~/projects/website-clones/<Name>-clone/RECON/sourcemaps

Bei passwortgeschützten privaten Seiten bb-browser verwenden; bei localhost / nicht angemeldeten öffentlichen Seiten den Browser-Skill oder Playwright (bb-browser nicht verwenden, der kapert Brave).

Schritt 2.5 · Zuerst den Komplexitätsgrad bewerten, nicht blind versprechen

Basierend auf den Aufklärungsergebnissen eine "Vorabbewertung vor dem Klonen" erstellen: Komplexität L1-L6, empfohlener Modus (getreues Klonen / visuelles Klonen / Inhalts-Overhaul), voraussichtlich erzielbare Abdeckung, explizit nicht geklonte Teile. Bewertungs- und Punktesystem siehe references/assessment.md.

Wenn der Modus "Visuelles Klonen" oder "Inhalts-Overhaul" ist → direkt eine strukturierte Design-Identität design-dna.json ausgeben, die das "Gefühl der Seite" in eine versionierbare, vergleichbare Token-Spezifikation verwandelt. So ist bei Schritt 6 "DNA behalten, Inhalte austauschen" nachvollziehbar:

node /Users/jane/.shared-skills/web-clone/scripts/dna-scaffold.mjs \
  --recon ~/projects/website-clones/<Name>-clone/RECON/original-recon.json \
  --out   ~/projects/website-clones/<Name>-clone/RECON/design-dna.json \
  --name  "<Name>"

Das Skript füllt die gefundenen Schrift-/Farbkandidaten/Framework-Effektsignale best-effort vor, die restlichen Felder per manueller Analyse ergänzen. Drei Dimensionen (design_system / design_style / visual_effects), vollständiges Schema, Anwendungsgrenzen siehe references/design-dna.md.

⚠️ Beim "Getreuen Klonen"-Zweig keine DNA verwenden: Der echte Quellcode ist die Wahrheit. Keine "ungefähre Stil"-DNA darf das Byte-für-Byte-Eiserne-Gebot verwässern.

Schritt 3 · Je nach Aufklärungsergebnis den Pfad wählen

Aufklärungsergebnis	Welchen Weg gehen
Statisches HTML/CSS, kein Framework	`wget --mirror` → Tracking-Skripte löschen → Texte ändern
React / Vue / Next (inhaltsbasiert)	Vorlage neu aufbauen (z. B. `ai-website-cloner-template`, Node 24+), Inhalte einfüllen
SPA / SaaS / datengesteuerte Seiten	Zuerst `network-capture.mjs` ausführen, API-Fixtures speichern → lokalen JSON/mock-Server als Ersatz
Mehrseitige Website / Produktseite	Zuerst `route-crawl.mjs` für eine Routenkarte ausführen → pro Seitentyp eine Vorlage extrahieren → einheitlich Inhalte ersetzen
Komplexe interaktive Websites	Zuerst `interaction-probe.mjs` ausführen, um hover/click/scroll/canvas-drag-Zustände aufzuzeichnen → dann interaktionen anhand der Zustände ergänzen, nicht nur den ersten Bildschirmausschnitt verwenden
WebGL / Canvas / Three.js – JavaScript-lastiges Frontend	Tiefgehendes Reverse-Engineering des echten Quellcodes (siehe unten) → Getreues Klonen oder ähnliche Open-Source-3D-Vorlage suchen und Inhalte austauschen. Bei Einzelseiten ist oft das byteweise Beibehalten = das getreuste Klonen. Wenn kein echter Quellcode gefunden wird: Runtime-Frame-Capture + Baseline-Schranke verwenden, Disziplin siehe `references/effect-extraction.md` (kann an web-shader-extractor delegiert werden)
Statisch gebaute Seiten (Astro/Vite SSG/Hugo), auch mit schwerem WebGL	`mirror-site.mjs` vollständig alle Deployment-Assets spiegeln → Schriftarten selbst hosten + Tracking entfernen → lokaler Web-Root-Server = 1:1 getreues Klonen des echten Quellcodes. Bei statischen Seiten bedeutet "echten Quellcode holen" = "das gesamte Deployment-Asset-Set spiegeln". Rezept siehe `references/static-mirror.md`. Beispiel: oryzo.ai (Lusion, L6, Gaussian Splatting, Hero-Pixel-Diff 5/5)
Websites, die ein fertiges Open-Source-Theme verwenden (Astro/Hugo-Theme)	Das entsprechende Theme im jeweiligen Marktplatz suchen (nur für Websites, die ein fertiges Theme verwenden; kundenspezifische Seiten nutzen die Zeile oben mit der vollständigen Spiegelung, nicht diese Zeile)

L4-L6 komplexe Seiten nach references/complex-playbooks.md bearbeiten, nicht nur den normalen Website-Prozess verwenden.

Schritt 4 · Im Klonzentrum das Projekt aufsetzen

mkdir ~/projects/website-clones/<Name>-clone && cd $_
# Git-Quellcode: hier rein klonen; Einzeldatei: hier ablegen. Originalquellcode als schreibgeschützte Referenz index-original.html belassen
# Node-Version prüfen (package.json engines), nvm use entsprechende Version, .nvmrc setzen

Schritt 5 · Tracking entfernen + Metadaten schreiben + verifizieren

Tracking entfernen: Google Analytics (gtag / googletagmanager), Pixel, Heatmaps – Zeile für Zeile präzise entfernen (GA-Blöcke sind oft oben im <head>).
NOTES.md schreiben (obligatorisch): Enthält Komplexität, Klonmodus, Vergleich Original vs. Klon, Treuegrad-Bewertung, bekannte Lücken. Vorlage siehe references/deliverables.md.
Bei komplexen Seiten TEARDOWN.md schreiben (technische Zerlegung). Alle Schlussfolgerungen mit Quellcodezeilennummern versehen.
Nach dem Klonen bewerten: Nach references/assessment.md die Punkte für Struktur / Visuell / Interaktion / Responsivität / Inhaltsersetzung / Funktionsvollständigkeit vergeben. Die Punktzahlen müssen durch Screenshots, Quellcode und Laufzeitergebnisse belegbar sein.
Echte Browser-Verifikation (harte Anforderung, nicht nur Code anschauen und sagen "sollte laufen"): Lokalen Server starten → Browser öffnen → Console abgreifen (keine JS/WebGL-Compilerfehler) → Screenshots mit dem Original vergleichen. Ehrlich protokollieren, was nicht verifiziert werden kann (z. B. synthetisches PointerEvent isTrusted=false löst kein Drag aus, dann so hinschreiben, nicht "Drag erfolgreich" erfinden).

Nach Fertigstellung des Klons noch einmal eine Klon-Aufklärung durchführen und einen automatischen Vergleichsbericht generieren:

node /Users/jane/.shared-skills/web-clone/scripts/recon-site.mjs \
  --url http://127.0.0.1:<Port>/ \
  --out ~/projects/website-clones/<Name>-clone/RECON \
  --label clone

node /Users/jane/.shared-skills/web-clone/scripts/route-crawl.mjs \
  --url http://127.0.0.1:<Port>/ \
  --out ~/projects/website-clones/<Name>-clone/RECON/routes-clone \
  --label clone \
  --max-pages 25 \
  --max-depth 2

node /Users/jane/.shared-skills/web-clone/scripts/interaction-probe.mjs \
  --url http://127.0.0.1:<Port>/ \
  --out ~/projects/website-clones/<Name>-clone/RECON/interactions-clone \
  --label clone

node /Users/jane/.shared-skills/web-clone/scripts/compare-recon.mjs \
  --original ~/projects/website-clones/<Name>-clone/RECON/original-recon.json \
  --clone ~/projects/website-clones/<Name>-clone/RECON/clone-recon.json \
  --visual-diff ~/projects/website-clones/<Name>-clone/RECON/visual-diff-1440.json \
  --original-routes ~/projects/website-clones/<Name>-clone/RECON/routes/original-route-map.json \
  --clone-routes ~/projects/website-clones/<Name>-clone/RECON/routes-clone/clone-route-map.json \
  --original-interactions ~/projects/website-clones/<Name>-clone/RECON/interactions/original-interactions.json \
  --clone-interactions ~/projects/website-clones/<Name>-clone/RECON/interactions-clone/clone-interactions.json \
  --out ~/projects/website-clones/<Name>-clone/CLONE_REPORT.md

node /Users/jane/.shared-skills/web-clone/scripts/visual-diff.mjs \
  --original ~/projects/website-clones/<Name>-clone/RECON/screenshots/original-1440.png \
  --clone ~/projects/website-clones/<Name>-clone/RECON/screenshots/clone-1440.png \
  --out ~/projects/website-clones/<Name>-clone/RECON/visual-diff-1440.json \
  --diff ~/projects/website-clones/<Name>-clone/RECON/screenshots/visual-diff-1440.png

node /Users/jane/.shared-skills/web-clone/scripts/audit-clone.mjs \
  --project ~/projects/website-clones/<Name>-clone \
  --brand "<Original-Markenname>" \
  --out ~/projects/website-clones/<Name>-clone/CLONE_AUDIT.md

Schritt 6 · Durch Janes eigene Inhalte ersetzen

Das Ziel ist immer, "ihre eigene Website zu bauen", nicht eine 1:1-Kopie zu erstellen. Drei Ersetzungspakete: Text (index.html/data/*.json/content/*.md), Medien (public/assets), Markenfarben (CSS-Variablen / Tailwind-Theme). Wenn die Struktur nicht trivial ist, eine REPLACE_GUIDE.md schreiben.

Wenn design-dna.json erstellt wurde (visueller / Overhaul-Modus): Dieser Schritt ist seine Einlösung – DNA behalten, Inhalte austauschen. Das design_system in CSS-Custom-Properties umsetzen, nach design_style subjektive Entscheidungen treffen, nach visual_effects.effect_intensity die Implementierungsebene wählen (lightweight CSS / medium Canvas+GSAP / heavy Three.js); Materialien bevorzugt mit asset-harvest.mjs aus der Originalseite holen, keine KI-generierten Annäherungen. Generierungsprozess siehe references/design-dna.md.

Reverse-Engineering von WebGL/Canvas – JavaScript-lastiges Frontend (Kern-Handwerk)

Die interaktive Seite in technische Säulen zerlegen, pro Säule die tatsächliche Implementierung lokalisieren + Zeilennummern angeben: Rendering (WebGL/Shader-Algorithmen), Compositing (SVG-Filter / mehrere Canvase / Post-Processing), Physik, Interaktion, Audio. Erst dann irgendeine Sekundäranalyse überprüfen.

Drei Disziplinen beim Reverse-Engineering von Effekten (gegen "während des Feintunings verschönern und am Ende weder wie das Original aussehen noch erklärbar sein"):

Beweisgraduierung: Jede Schlussfolgerung mit SOURCE (echter Quellcode/source-map/Runtime-Dump/Frame-Capture), PARTIAL (Name/Ausschnitt, zu belegen), GUESS (visuelle Annäherung/magische Zahl) kennzeichnen. Nicht gekennzeichnet = GUESS; vor dem Übernehmen muss auf SOURCE hochgestuft werden.
no-compensation: Nicht erlaubt, durch Anpassen von Helligkeit/Geschwindigkeit/Position/Rauschen temporale/Koordinaten/Statusfehler zu überdecken; Annäherungswerte weiterhin als GUESS kennzeichnen und schreiben, welche Beweise für eine Hochstufung nötig wären.
Baseline-first-Schranke: Zuerst mit echten draw calls/shadern/Uniforms eine "minimal originalgetreue reproduzierbare RAW REPLAY" erstellen → Frame-für-Frame-Vergleich bestehen → dann erst die ingenieurmäßige Neuimplementierung erlauben. Siehe references/effect-extraction.md (enthält Runtime-Capture-Fallback + wann an web-shader-extractor delegiert werden kann).

Übertragbare fortgeschrittene Paradigmen (es lohnt sich, sie zu sammeln):

Displacement-Map-refraktiertes DOM: Offscreen-WebGL berechnet eine "Displacement-Map" mit RG=Verschiebung/B=Fresnel, dann wird mit SVG <filter><feDisplacementMap scale=N> diese Map genommen, um das echte, lebendige, interaktive HTML zu verzerren – das DOM wird refraktiert, WebGL berührt nie DOM-Pixel. Das ist die Seele von marbles, und das kann Three.js MeshPhysicalMaterial(transmission) nicht (es kann nur "Glaskugel-Optik" erzeugen, nicht "die gesamte Webseite refraktieren").

Detaillierte Methode + marbles-tatsächliche Architektur Schritt für Schritt zerlegt → references/reverse-engineering.md, references/marbles-case.md.

Lizenz & Namensnennung (vor dem Klonen zwingend prüfen)

SSL_CERT_FILE=/etc/ssl/cert.pem gh api repos/<u>/<r> | jq '.license'  # + LICENSE-Datei suchen + README lesen

Lizenz	Was ist erlaubt
MIT / Apache / BSD / Unlicense	Darf geändert und online gestellt werden, Nennung des Autors ausreichend
NONE (keine LICENSE-Datei / keine Angabe)	Standardmäßig alle Rechte vorbehalten. Nur lokales Lernen/Klonen, Namensnennung des Originals erforderlich, ohne Erlaubnis nicht öffentlich neu bereitstellen. Nicht davon ausgehen, dass öffentlicher Code frei verwendbar ist
Proprietär / ausdrücklich verboten	Nur lesen und lernen, nicht kopieren oder bereitstellen

⚠️ Nicht "auf GitHub öffentlich" oder "gh api findet vorübergehend nichts" mit MIT gleichsetzen – bis zum Ende überprüfen.

Lieferumfang

Jedes Unterprojekt im Wurzelverzeichnis: NOTES.md (Quelleninfo/Technologie-Stack/Lizenz/Ersetzungskarte/Befehl zum Starten)
Komplexe interaktive Seiten zusätzlich: TEARDOWN.md (technische Zerlegung mit Zeilennummern)
Bei externem Reporting oder Bewertung der Skill-Effektivität zusätzlich: CLONE_REPORT.md (vollständiger Vergleich Original vs. Klon)
Vor dem Deployment zusätzlich: CLONE_AUDIT.md (Tracking-Skripte, Reste der Originalmarke/Sprache, TODO, externe Link-Risiken)
RECON/screenshots/: Vergleichsbilder Original vs. Klon
Nach dem Klonen die Indexzeile in der zentralen README.md aktualisieren

Eingebaute Skripte

scripts/init-clone.mjs: Initialisiert das Klonprojektgerüst und NOTES.md.
scripts/recon-site.mjs: Öffnet die Seite mit Playwright, sammelt Framework/Ressourcen/DOM-Struktur/console-Fehler und speichert drei Screenshots.
scripts/asset-harvest.mjs: Lädt aus dem Aufklärungs-JSON die Original-Bilder, Skripte und Styles herunter und erstellt eine Asset-Liste.
scripts/network-capture.mjs: Fangt XHR/fetch-Anfragen und speichert JSON/Text-Antworten, für lokale Fixtures bei SPA/SaaS.
scripts/mirror-site.mjs: Echter Browser scrollt vollständig und fängt jede echte Anfrage → spiegelt gleichnamige Assets (inkl. via JS Runtime gefetchte .sog/.buf/.wasm/.riv/Schriftarten), für statisch gebaute Seiten (Astro/Vite SSG/Hugo) zum 1:1-getreuen Klonen. Siehe references/static-mirror.md.
scripts/route-crawl.mjs: Crawlt interne Links der gleichen Domain, speichert Screenshots, Titel, H1 und Struktursignale pro Route, löst das Problem, dass mehrseitige Seiten nur die Startseite klonen.
scripts/interaction-probe.mjs: Führt automatisch scroll, hover, sichere clicks, canvas-drag aus und speichert Zustände vor/nach der Interaktion, Screenshots, Netzwerk- und console-Beweise.
scripts/sourcemap-hunt.mjs: Sucht in JS-Chunks nach Source Maps, speichert die Zuordnung, wenn gefunden.
scripts/compare-recon.mjs: Liest die Aufklärungs-JSONs, Routenkarten und Interaktions-Beweise von Original und Klon und generiert CLONE_REPORT.md.
scripts/visual-diff.mjs: Nutzt Browser-Canvas für Pixel-Differenz der Screenshots, gibt visuelle Punktzahl und Differenzbild aus.
scripts/audit-clone.mjs: Scannt nach Tracking-Skripten, Originalmarkenresten, japanischen Resten, TODO und externen URL-Risiken.
scripts/dna-scaffold.mjs: Erzeugt aus dem Aufklärungs-JSON das design-dna.json-Designidentitätsgerüst (Schrift-/Farbkandidaten/Framework-Effektsignale best-effort vorausgefüllt), für den Modus "Visuelles Klonen / Inhalts-Overhaul". Siehe references/design-dna.md.

Fähigkeitsgrenzen (Standard-Aussage)

Hochtreu machbar: Statische Marketingseiten, Unternehmenswebsites, inhaltsbasierte React/Vue/Next-Frontends, Seiten mit direkt verfügbarem Quellcode für Animationen.
Visuell nachbildbar, aber vereinfacht: CMS-Backend-Daten, komplexe Scroll-Erzählungen, mehrere Breakpoints, WebGL/Canvas-Effekte, eingebundene Drittanbieter-Inhalte.
Standardmäßig kein vollständiges Klonen zugesagt: Login, Zahlung, Bestellung, Suchempfehlungen, Berechtigungssysteme, serverseitige Geschäftslogik, proprietäre APIs, urheberrechtlich geschützte Materialien. Bei Bedarf nur demonstrierbare Frontend-Ersatzlösungen.
Beim Inhalts-Overhaul: Bevorzugt die Informationsarchitektur, den Rhythmus, die Animationen und die visuelle Grammatik der Originalseite beibehalten, Texte, Bilder, Markenfarben und Wertversprechen durch Janes eigene Inhalte ersetzen.

Flaggschiff-Beispiel

~/projects/website-clones/marbles-clone/ – Native WebGL + SVG-Filter + selbstentwickelte Physik-Website für Glasmurmeln, byteweise getreu geklont + vollständige TEARDOWN, ein Paradebeispiel für den "WebGL-lastiges Frontend"-Zweig.

Web Clone · 网站复刻方法论

Was ist Web Clone · 网站复刻方法论?

In Ihrer bevorzugten KI fragen

Dokumentation