AI Website Cloner Template: ein Next.js-Rückbau-Template für KI-Coding-Agenten
Die AI Website Cloner-Vorlage führt Programmieragenten durch die Neuerstellung einer Referenzseite als strukturiertes Next.js-Projekt.
Auf einen Blick
- Was ist das?
- Ein Template-Repository, das aus einer Ziel-URL mithilfe eines KI-Agenten eine Next.js-Codebasis erzeugt, hier anhand der README beschrieben.
- Für wen ist es gedacht?
- Die README stellt das Projekt als Vorlage dar, nicht als fertiges Produkt: zuerst GitHub-Button Use this template, dann /clone-website ausführen und anschließend anpassen. Die MIT-Lizenz deckt den Code so ab, wie er ist, und die README grenzt ausdrücklich ein, wofür das Werkzeug nicht verwendet werden soll.
- Darf ich es kommerziell nutzen?
- Ja. MIT ist eine freizügige Lizenz: Sie dürfen darauf aufbauende Software nutzen, verändern und verkaufen, solange Sie die Urheberrechts- und Lizenzhinweise beibehalten.
- Wird es noch gepflegt?
- Ja. Die letzten Commits kamen vor 32 Tagen.
- In welcher Sprache ist es geschrieben?
- Hauptsächlich TypeScript, laut der Sprachstatistik von GitHub.
Die Antworten beruhen auf den GitHub-Daten des Projekts (zuletzt abgeglichen am 15. September 2026) und auf unserer Analyse. Sie sind keine Rechtsberatung.
TIEFGEHENDE OPEN-SOURCE-ANALYSE
Ein Workflow, der mit dem Kopieren beginnt
Die Anleitung des Repositorys beginnt mit einer Warnung: Zuerst mit dem GitHub-Button Use this template ein separates Repository anlegen und dann diese Kopie klonen. Die README sagt ausdrücklich, das Template-Repository nicht direkt für ein Website-Projekt zu klonen und keine Pull Requests mit einer generierten Website zu eröffnen. Nach dem Kopieren ist der dokumentierte Weg: neues Repository klonen, npm install, Agent mit claude --chrome starten, dann /clone-website mit einer oder mehreren Ziel-URLs ausführen. Die README merkt an, dass die meisten Agenten AGENTS.md automatisch aufnehmen.
Was /clone-website in fünf Phasen tut
Der Skill läuft als Pipeline, die die README in fünf Stufen beschreibt. Die Aufklärung erstellt Screenshots, extrahiert Design-Tokens und prüft Interaktionen über Scrollen, Klicken, Hover und responsive Breiten. Die Grundlage aktualisiert Schriften, Farben und globale Einstellungen und lädt alle Assets herunter. Komponentenspezifikationen werden mit berechneten CSS-Werten, Zuständen, Verhalten und Inhalt nach docs/research/components/ geschrieben. Der parallele Build setzt Builder-Agenten in Git-Worktrees ein, einen pro Abschnitt. Zusammenbau und QA führen die Worktrees zusammen, verdrahten die Seite und machen einen visuellen Abgleich mit der Originalseite. Die README sagt, jeder Builder erhalte exakte getComputedStyle()-Werte, Interaktionsmodelle, Inhalte mit mehreren Zuständen, responsive Breakpoints und Asset-Pfade. Wie der visuelle Abgleich implementiert ist und wo die Bestehensgrenze liegt, wird nicht angegeben.
Agenten und Voraussetzungen
Die Tabelle der unterstützten Plattformen nennt dreizehn Agenten: Claude Code, Codex CLI, OpenCode, GitHub Copilot, Cursor, Windsurf, Gemini CLI, Cline, Roo Code, Continue, Amazon Q, Augment Code und Aider. Claude Code ist der einzige, der als empfohlen markiert ist, mit Opus 4.8 als Modell für beste Ergebnisse. Voraussetzungen sind Node.js 24 oder neuer und einer der genannten Agenten. Die README enthält keine Vergleichsbenchmarks, keine agentenspezifischen Konfigurationsdetails über den AGENTS.md-Mechanismus hinaus und keinen Grund, warum die anderen zwölf als unterstützt, aber nicht empfohlen gelten.
Technik-Stack und Projektaufbau
Das Template ist ein Next.js-16-Projekt mit App Router, React 19 und striktem TypeScript. UI-Primitive kommen von shadcn/ui über Radix, gestylt mit Tailwind CSS v4 und oklch-Design-Tokens. Lucide React liefert Standard-Icons, die der Klonprozess durch aus der Zielseite extrahierte SVGs ersetzt. Die Struktur trennt src/app-Routen, src/components mit einem ui/-Ordner und icons.tsx, src/lib/utils.ts, src/types und src/hooks, dazu public/-Ordner für Bilder, Videos und SEO-Assets sowie docs/research für Extraktionsergebnisse. AGENTS.md ist die einzige Quelle für Agentenanweisungen; CLAUDE.md und GEMINI.md importieren sie.
Befehle und docker
Fünf npm-Skripte sind dokumentiert: npm run dev für den Entwicklungsserver, npm run build für den Produktionsbuild, npm run lint, npm run typecheck und npm run check, das lint, typecheck und build zusammen ausführt. Für docker nennt die README docker compose up app --build zum Bauen und Ausführen sowie docker compose up dev --build für den Entwicklungsmodus auf Port 3001. Für den normalen npm run dev-Pfad wird kein Port angegeben.
Agentenregeln synchron halten
Zwei Dateien sind die Quelle der Wahrheit für die Plattformunterstützung. AGENTS.md enthält die Projektanweisungen, .claude/skills/clone-website/SKILL.md den Skill /clone-website selbst. Zwei Skripte erzeugen die plattformspezifischen Kopien neu: bash scripts/sync-agent-rules.sh für Anweisungen und node scripts/sync-skills.mjs für den Skill. Die README sagt, Agenten, die die Quelldateien nativ lesen, brauchen keine Neugenerierung, nennt aber nicht, welche Agenten das sind.
Verwendungszwecke, Grenzen und Lizenz
Die README nennt drei beabsichtigte Verwendungen: eine eigene Website von WordPress, Webflow oder Squarespace migrieren; Quellcode wiederbeschaffen, wenn das Repository weg ist und nur die Live-Seite bleibt; und lernen, wie Produktionsseiten Layouts, Animationen und responsives Verhalten umsetzen. Danach folgt, wofür das Projekt nicht gedacht ist: Phishing oder Identitätsmissbrauch, die Übernahme fremder Designs und die Verletzung von Nutzungsbedingungen. Die Lizenz ist MIT, Copyright 2025 JCodesMore, mit Rechten zur Nutzung, Kopie, Änderung, Zusammenführung, Veröffentlichung, Verteilung, Unterlizenzierung und zum Verkauf. Die Software wird wie sie ist ohne Garantie bereitgestellt; der Lizenztext sagt nichts zu Support oder Wartung. Bei diesem Template sollte der Startbefehl aus der README mit der tatsächlichen `.env`-Konfiguration und den verwendeten API-Schlüsseln geprüft werden. Entscheidend ist, ob die erzeugten Dateien in der vorgesehenen Struktur landen und ob die Zielseite ohne nicht dokumentierte Dienste gebaut werden kann.
Redaktionelles Fazit
Die README stellt das Projekt als Vorlage dar, nicht als fertiges Produkt: zuerst GitHub-Button Use this template, dann /clone-website ausführen und anschließend anpassen. Die MIT-Lizenz deckt den Code so ab, wie er ist, und die README grenzt ausdrücklich ein, wofür das Werkzeug nicht verwendet werden soll. Bei diesem Template sollte der Startbefehl aus der README mit der tatsächlichen `.env`-Konfiguration und den verwendeten API-Schlüsseln geprüft werden. Entscheidend ist, ob die erzeugten Dateien in der vorgesehenen Struktur landen und ob die Zielseite ohne nicht dokumentierte Dienste gebaut werden kann.
Community-Notizen