veyralabsgroup/webcloner

Was macht webcloner?

Website-Visual-Cloning-Skill für Claude Code — 6-Phasen-Prozess: Erkundung, Fundament, Spezifikation pro Abschnitt, paralleler Aufbau, Zusammenbau, Screenshot-QA.

Überblick

Dieses Skill automatisiert das visuelle Klonen einer bestehenden Website, indem es den Prozess in sechs klar definierte Phasen unterteilt. Der Benutzer gibt die Ziel-URL an, und Claude Code führt die Schritte aus, um eine originalgetreue visuelle Kopie zu erstellen.

Voraussetzungen

• Claude Code installiert und konfiguriert
• Internetzugang zur Ziel-Website
• Node.js und npm (für Build-Tools)
• Ein Projektverzeichnis für den Output

Installation

# Skill in Claude Code aktivieren
claude code skill install veyralabsgroup/webcloner

Verwendung

1. Starten Sie Claude Code mit dem aktivierten Skill.
2. Geben Sie den Befehl ein: /webcloner <ziel-url>
3. Das Skill führt die 6 Phasen automatisch aus.
4. Nach Abschluss finden Sie die geklonte Website im angegebenen Ausgabeverzeichnis.

Phasenbeschreibung

1. Erkundung (Recon): Analyse der Ziel-Website (Struktur, Stile, Medien, Layout)
2. Fundament (Foundation): Erstellung des HTML-Grundgerüsts und initiales CSS
3. Spezifikation pro Abschnitt (Spec per Section): Detaillierte Spezifikation für jeden visuellen Abschnitt der Seite
4. Paralleler Aufbau (Parallel Build): Gleichzeitige Erstellung mehrerer Abschnitte für Effizienz
5. Zusammenbau (Assembly): Integration aller Abschnitte in eine vollständige Seite
6. Screenshot-QA (Screenshot QA): Automatischer Vergleich mit dem Original mittels Screenshots

Konfiguration

Umgebungsvariablen:

Variable	Beschreibung	Standard
OUTPUT_DIR	Ausgabeverzeichnis für die geklonte Website	./cloned
RECON_TIMEOUT	Timeout für die Erkundungsphase (ms)	30000

Beispiel

# Website klonen
claude code /webcloner https://example.com

# Mit benutzerdefiniertem Ausgabeverzeichnis
OUTPUT_DIR=./my-clone claude code /webcloner https://example.com

Fehlerbehebung

• Verbindungsprobleme: Stellen Sie sicher, dass die Ziel-URL erreichbar ist.
• Stilabweichungen: Führen Sie die Screenshot-QA erneut aus, um Abweichungen zu identifizieren.
• Timeout: Erhöhen Sie den RECON_TIMEOUT bei großen Websites.

Lizenz

MIT