ai-website-cloner-template

1. Projektübersicht

ai-website-cloner-template ist eine Open-Source-GitHub-Vorlage, die es einem KI-Codierungsagenten ermöglicht, jede bestehende Website als saubere, moderne Next.js-Anwendung neu zu erstellen – ausgehend von nichts weiter als einer Ziel-URL. Damit wird das Problem gelöst, die Benutzeroberfläche einer Website neu aufzubauen, ohne deren Markup, Styles und Assets manuell per Hand nachzuentwickeln.

2. Hintergrund & Positionierung

Das Projekt wurde erstellt, um „Klonen Sie diese Website“ von einer mehrtägigen manuellen Reverse-Engineering-Aufgabe in einen geführten, weitgehend automatisierten KI-Workflow zu verwandeln. Statt dass ein Entwickler HTML/CSS per Hand kopiert, Schriften und Symbole mühsam sucht und Pixelunterschiede mit dem Auge vergleicht, bündelt die Vorlage einen wiederholbaren Fünf-Phasen-Pipeline – Aufklärung, Fundament, Komponentenspezifikation, paralleler Build und Qualitätssicherung – die ein KI-Agent Schritt für Schritt ausführt und so eine strukturierte, typisierte Next.js-Codebasis erzeugt, statt einer einmaligen, ausgescrapten Momentaufnahme.

Im Vergleich zu generischen Web-Scraping- oder „Laden Sie diese Seite herunter“-Werkzeugen erfasst dieses Projekt nicht nur statisches HTML – es führt einen KI-Agenten durch die Extraktion von Design-Tokens (Schriften, Farben, Breakpoints), den Download von Assets (Bilder, Videos, SVG-Symbole) und den Neuaufbau auf Komponentenebene in TypeScript mit shadcn/ui und Tailwind CSS und validiert das Ergebnis anschließend mit einem visuellen Vergleich gegen die Originalseite. Es ist außerdem agentenunabhängig, mit erstklassiger Unterstützung für Claude Code und Konfiguration für ein Dutzend weiterer KI-Codierungsagenten, statt an das Werkzeug eines einzelnen Anbieters gebunden zu sein.

3. Funktionskategorien

• 🔍 Aufklärungswerkzeuge – 3 Kernfunktionen: Ganzseiten-Screenshot-Erfassung, Design-Token-Extraktion und Kartierung von Interaktionen/Zuständen. Zweck: Erstellt ein genaues Bild der Quellseite, bevor Code geschrieben wird.
• 🏗️ Fundament-Einrichtung – umfasst Schrift- und Farbkonfiguration, globales Tailwind/Next.js-Setup und Massendownload von Assets (Bilder, Videos, SVGs). Zweck: Schafft das Basis-Projektgerüst, auf dem spätere Komponenten aufbauen.
• 🧩 Komponentenspezifikation – generiert pro Komponente eine Dokumentation mit berechneten CSS-Werten, responsiven Zuständen und Interaktionsverhalten. Zweck: Gibt der Build-Phase eine eindeutige, maschinenlesbare Spezifikation zur Umsetzung.
• ⚙️ Parallele Konstruktion – verteilt Komponenten-Builds auf isolierte Git-Worktrees, sodass mehrere Teile der Benutzeroberfläche gleichzeitig implementiert werden können. Zweck: Beschleunigt den Neuaufbau großer Websites mit vielen Komponenten.
• ✅ Zusammenbau & Qualitätssicherung – integriert die gebauten Komponenten und führt visuelle Vergleichsdiffs gegen die Originalseite durch. Zweck: Erkennt Layout-, Abstands- und Styling-Regressionen, bevor der Klon als fertig gilt.

4. Wichtigste Highlights

• KI-Agenten-gesteuerte Pipeline – ein strukturierter Fünf-Phasen-Prozess (Aufklärung → Fundament → Spezifikation → Build → Qualitätssicherung) ersetzt ad-hoc manuelles Klonen durch einen wiederholbaren Workflow.
• Multi-Agenten-Kompatibilität – funktioniert mit Claude Code (empfohlen, gepaart mit Opus-Klasse-Modellen), Codex CLI, Cursor, Windsurf, Gemini CLI, GitHub Copilot, Cline, Roo Code, Continue, Amazon Q, Augment Code, Kiro und OpenCode.
• Moderne, typisierte Ausgabe – erzeugt eine Next.js 16 + React 19 + TypeScript (Strict Mode)-Codebasis, kein rohes gescraptes HTML.
• Designsystem-Treue – extrahiert echte Design-Tokens (Schriften, Farben, Breakpoints) in Tailwind CSS v4 mit oklch-Farbwerten und baut die Benutzeroberfläche auf shadcn/ui + Radix-Primitiven auf.
• Automatisierte Asset-Verwaltung – lädt Bilder und Videos herunter und extrahiert SVG-Symbole automatisch, unterstützt durch Lucide React für fehlende Standard-Symbole.
• Visuelle Diff-Validierung – die Qualitätssicherungsphase vergleicht den fertigen Klon mit der Originalseite, um Genauigkeit zu verifizieren, statt sich auf das bloße Auge zu verlassen.

5. Anwendungsfälle nach Rolle

• Allgemeine Entwickler – schnell eine moderne, wartbare Next.js-Version eines bestehenden Website-Designs aufsetzen, statt ein Layout von Grund auf neu zu bauen.
• Projektmanager / Technische Leiter – die Migration einer Altsystem-Website auf einen aktuellen Technologie-Stack (Next.js, TypeScript, Tailwind) mit einem schnelleren, strukturierten Proof-of-Concept-Weg evaluieren.
• Studierende / Selbstlerner – untersuchen, wie Produktionswebsites bestimmte Layouts, Animationen und responsives Verhalten implementieren, indem der Agent sie in untersuchbare Komponenten zerlegt.

(Nicht direkt anwendbar auf DevOps/SRE-, Sicherheitsengineering- oder Daten-/Forschungswissenschafts-Workflows, daher weggelassen.)

6. Erste Schritte

Finden Sie, was Sie brauchen – lesen Sie die README und die unter docs/research/ generierten Dokumente nach Ausführung der Aufklärungsphase, um die Extraktionsausgabe und Komponentenspezifikationen zu verstehen.

Installieren / integrieren

# 1. Klicken Sie auf „Use this template“ auf GitHub, um Ihr eigenes Repository zu erstellen, dann:
git clone https://github.com/YOUR-USERNAME/YOUR-REPO.git
cd YOUR-REPO
npm install

# 2. Starten Sie einen KI-Codierungsagenten (Claude Code gezeigt, --chrome aktiviert Browserzugriff)
claude --chrome

# 3. Führen Sie die Klon-Fähigkeit innerhalb der Agentensitzung aus
/clone-website <target-url>

# Alltägliche Skripte
npm run dev     # Startet den Entwicklungsserver
npm run build   # Produktions-Build
npm run check   # Lint, Typprüfung und Build kombiniert

Mitwirken – forken Sie das Repository, nehmen Sie Änderungen auf einem Feature-Branch vor und eröffnen Sie einen Pull-Request gegen JCodesMore/ai-website-cloner-template gemäß dem MIT-lizenzierten Open-Contribution-Modell des Projekts.

7. Projektstruktur

src/
  app/              # Next.js-Routen
  components/       # React/TypeScript-UI-Komponenten
  hooks/, types/, utils/
public/
  images/, videos/  # heruntergeladene Website-Assets
  seo/              # SEO-bezogene Assets
docs/
  research/         # Aufklärungsausgabe & Komponentenspezifikationen
.cline/ .kiro/ .roo/ # plattformspezifische KI-Agentenkonfiguration

Wichtige Elemente: docs/research/ enthält die Artefakte aus den Aufklärungs- und Spezifikationsphasen (Screenshots, Design-Tokens, Komponentenspezifikationen), die spätere Phasen konsumieren; die plattformspezifischen Punktverzeichnisse (.cline/, .kiro/, .roo/ usw.) ermöglichen es, dieselbe Vorlage mit verschiedenen KI-Codierungsagenten zu betreiben, ohne das Kernprojekt zu ändern.

8. Verwandtes Ökosystem

• Upstream-Abhängigkeiten: Next.js 16, React 19, TypeScript, Tailwind CSS v4, shadcn/ui, Radix-UI-Primitive, Lucide-React-Symbole, Node.js 24+.
• KI-Codierungsagenten, mit denen es integriert: Claude Code, Codex CLI, Cursor, Windsurf, Gemini CLI, GitHub Copilot, Cline, Roo Code, Continue, Amazon Q, Augment Code, Kiro, OpenCode.
• Komplementäre Nutzung: passt natürlich zu Standard-Next.js-Bereitstellungsplattformen (z. B. Vercel), sobald ein Klon fertig ist.

9. Lizenz

MIT-Lizenz.

• ✅ Kostenlos nutzbar, kopierbar, modifizierbar, zusammenführbar, veröffentlichbar und verteilbar, einschließlich für kommerzielle Projekte.
• ✅ Verwenden Sie die Vorlage, um Ihre eigene Altsystem-Website zu migrieren oder um zu lernen, wie eine Website aufgebaut ist.
• ❌ Verwenden Sie das Werkzeug nicht für betrügerische Zwecke, Identitätstäuschung oder Aktivitäten, die gegen das Gesetz verstoßen – die Projektrichtlinien verbieten dies ausdrücklich.
• ℹ️ MIT stellt die Software „wie besehen“ ohne Gewährleistung bereit; behalten Sie die ursprüngliche Lizenz- und Urheberrechtshinweis in weiterverteilten Kopien bei.

10. FAQ

F: Benötige ich ein kostenpflichtiges KI-Codierungsagenten-Abonnement, um dies zu nutzen?
A: Sie benötigen Zugriff auf einen unterstützten KI-Codierungsagenten (Claude Code wird empfohlen, gepaart mit einem Opus-Klasse-Modell); die meisten anderen unterstützten Agenten wie Cursor oder Gemini CLI funktionieren ebenfalls, jeweils unter ihrer eigenen Preisgestaltung.

F: Was, wenn ich nur eine statische Kopie möchte, keinen vollständigen Next.js-Neuaufbau?
A: Diese Vorlage ist speziell darauf ausgelegt, eine strukturierte Next.js/TypeScript-Codebasis auszugeben, keine statische HTML-Momentaufnahme – wenn Sie nur rohes HTML benötigen, könnte ein einfacheres Scraping-Werkzeug besser passen.

F: Ist das Klonen beliebiger Websites mit diesem Werkzeug legal?
A: Sie sind für die Rechtmäßigkeit dessen verantwortlich, was Sie klonen; das Projekt verbietet ausdrücklich betrügerische oder identitätstäuschende Nutzung. Bleiben Sie also bei Websites, die Sie besitzen, für die Sie eine Erlaubnis haben oder die Sie für persönliches Lernen nutzen.

F: Welches Verzeichnis sollte ich prüfen, um zu sehen, was der KI-Agent extrahiert hat?
A: Schauen Sie nach der Aufklärungsphase unter docs/research/ – dort befinden sich die Design-Tokens, Screenshots und Komponentenspezifikationen, die die späteren Build-Phasen verwenden.

F: Kann ich einen anderen Agenten als Claude Code verwenden?
A: Ja – die Vorlage enthält Konfiguration für über ein Dutzend Agenten (Codex CLI, Cursor, Windsurf, Gemini CLI, GitHub Copilot und mehr), obwohl Claude Code mit einem Opus-Klasse-Modell die empfohlene Kombination ist.

11. Schnelllinks

• Repository: https://github.com/JCodesMore/ai-website-cloner-template
• Lizenz: MIT (siehe LICENSE-Datei im Repository)
• Mitwirken: Eröffnen Sie einen Pull-Request gegen den Standard-Branch des Repositorys
• Community/Diskussionen: Nutzen Sie den GitHub-Issues/Discussions-Tab des Repositorys

12. Zusammenfassung

ai-website-cloner-template verwandelt Website-Klonen in eine strukturierte, KI-Agenten-gesteuerte Pipeline, die eine moderne, typisierte Next.js-Codebasis ausgibt, statt eines gescrapten HTML-Dumps. Es ist am wertvollsten für Entwickler und Teams, die eine Altsystem-Website auf einen aktuellen Stack migrieren, den Quellcode einer bereitgestellten Website wiederherstellen oder untersuchen, wie ein Produktionslayout aufgebaut ist – für alle, die einen getreuen, wartbaren Neuaufbau möchten, ohne jede Komponente manuell per Reverse-Engineering zu analysieren.