AI Website Cloner: reconstrui cualquier sitio web con IA en minutos
Un template de Next.js que le da a tu agente de IA las instrucciones para clonar cualquier sitio web. Screenshots, tokens de diseño, componentes paralelos — todo automatizado con un solo comando.
Recurso de la comunidad zeltra
Descarga el proyecto completo, úsalo y personalízalo para tu negocio. Seleccionado y adaptado por Benjamin para la comunidad.
Que es esto
Un template listo para usar que le da a tu agente de IA un pipeline completo para clonar cualquier sitio web.
Apuntas a una URL, corres /clone-website, y el agente hace todo solo:
- Saca screenshots y extrae los tokens de diseño (colores, tipografias, espaciados)
- Descarga todos los assets (imagenes, videos, iconos SVG)
- Escribe specs detalladas de cada componente con valores CSS exactos
- Lanza builders en paralelo para reconstruir cada seccion
- Ensambla todo en un proyecto Next.js moderno
Sin adivinar. Sin copiar y pegar. Sin perder horas en CSS.
git clone https://github.com/benjaminromero5631/ai-website-cloner.git mi-clon
cd mi-clon
npm install
claude --chrome
Luego dentro de Claude Code:
/clone-website https://sitio-que-queres-clonar.com
Para que sirve
Migracion de plataforma
Tenes un sitio en WordPress, Webflow o Squarespace y queres pasarlo a Next.js sin rehacerlo desde cero. El cloner extrae el diseno existente y lo reconstruye en codigo moderno.
Codigo perdido
El sitio esta online pero el repositorio desaparecio, el desarrollador no esta mas, o el stack es legacy. Recuperas el codigo en formato moderno sin tocar el servidor original.
Aprendizaje
Queres entender como un sitio de produccion logra ciertos layouts, animaciones o comportamiento responsive. El cloner te da el codigo real para estudiar.
Como funciona por dentro
El skill /clone-website corre en 5 fases:
1. Reconocimiento — screenshots, extraccion de tokens, scroll, clicks, hover, responsive en distintos breakpoints.
2. Fundacion — actualiza fuentes, colores y globals. Descarga todos los assets al proyecto.
3. Specs de componentes — escribe archivos de especificacion en docs/research/components/ con valores getComputedStyle() exactos, estados, interacciones y contenido.
4. Build paralelo — lanza un agente builder por seccion/componente usando git worktrees. Todos trabajan al mismo tiempo.
5. Ensamblado y QA — mergea los worktrees, conecta la pagina y corre un diff visual contra el original.
Stack del template
- Next.js 16 — App Router, React 19, TypeScript strict
- shadcn/ui — Radix primitives + Tailwind CSS v4
- Tailwind CSS v4 — design tokens oklch
- Lucide React — iconos base (se reemplazan con los SVGs extraidos)
Agentes compatibles
Funciona con cualquiera de estos:
| Agente | Estado |
|---|---|
| Claude Code (recomendado — Opus 4.6) | Optimo |
| Cursor | Soportado |
| Windsurf | Soportado |
| GitHub Copilot | Soportado |
| Gemini CLI | Soportado |
| Codex CLI | Soportado |
| Cline, Continue, Amazon Q, Aider, Augment | Soportados |
Para mejores resultados usa Claude Code con Opus 4.6. El pipeline de build paralelo esta disenado para aprovechar los sub-agentes de Claude al maximo.
Requisitos
- Node.js 24+
- Un agente de IA (ver tabla arriba)
- Para Claude Code:
claude --chromepara que el agente pueda ver el navegador
Lo que NO es esto
- No es para phishing ni suplantacion de identidad
- No reemplaza el diseno original — los assets, logos y copy siguen siendo de sus duenos
- Verifica los terminos de servicio del sitio que vas a clonar antes de usarlo
Descarga el proyecto
Tenes dos opciones:
# Opcion 1 — clonar desde GitHub
git clone https://github.com/benjaminromero5631/ai-website-cloner.git
# Opcion 2 — descargar el ZIP desde esta pagina
Descomprimis, corres npm install y ya estas listo para clonar tu primer sitio.