Claude Code clona una página web completa en 10-15 minutos: analiza el diseño original con Chrome DevTools, extrae el CSS real y reconstruye el sitio componente a componente en Next.js. El resultado es un proyecto funcional con rutas reales que navega, recarga y se despliega en Vercel o Netlify. No es una maqueta — es un clon operable.
Qué es AI Website Cloner Template: la herramienta open source para clonar webs con IA
AI Website Cloner Template es un repositorio open source de JCodesMore (8.700+ estrellas en GitHub) que convierte cualquier página web en un proyecto moderno de Next.js mediante agentes IA. No captura un screenshot y lo convierte en código — abre Chrome, inspecciona el CSS calculado real de la página original con getComputedStyle() y lanza varios agentes en paralelo, cada uno en su propio git worktree, para reconstruir cada sección del sitio de forma independiente. Los agentes se fusionan al final en un proyecto instalable y desplegable.
Lo que sí hace:
- Clonar la página principal con fidelidad visual alta (imágenes, logos, tipografía)
- Generar rutas internas funcionales (navegación real entre páginas)
- Crear un proyecto Next.js instalable y desplegable
Lo que no hace:
- Copiar el backend ni la base de datos (es solo frontend)
- Garantizar resultado pixel-perfect — siempre hay detalles menores que ajustar
Cómo clonar una web con Claude Code: 5 pasos
Clonar una web con Claude Code requiere 5 pasos y entre 15 y 25 minutos: clonar el repositorio, instalar dependencias, lanzar Claude Code con el flag --chrome, ejecutar /clone-website <url> y revisar el resultado en local.
Paso 1: Clona el repositorio
git clone https://github.com/JCodesMore/ai-website-cloner-template.git mi-clon
cd mi-clon
Paso 2: Instala las dependencias
npm install
Next.js, shadcn/ui, Tailwind CSS v4 y todas las herramientas necesarias quedan instaladas en 1-2 minutos. Requiere Node.js 24 o superior.
Paso 3: Lanza Claude Code con Chrome
El flag --chrome activa la integración con Chrome DevTools, que permite a Claude Code abrir y controlar el navegador para analizar la web original:
claude --chrome
Si quieres que todo el proceso sea autónomo sin confirmaciones, combínalo con --dangerously-skip-permissions.
Paso 4: Ejecuta /clone-website con la URL
Dentro de Claude Code, escribe el comando con la URL directamente como argumento:
/clone-website https://ejemplo.com
No hace falta confirmar ni pegar nada más — el agente toma el control desde aquí.
Paso 5: Revisa el resultado en local
El proceso completo tiene 5 fases: reconocimiento (captura y análisis de tokens de diseño), fundación (fuentes, colores, recursos), especificaciones (documentación técnica por componente), construcción paralela (agentes en worktrees git independientes) y ensamblaje con QA visual. Cuando termina, levanta un servidor local en localhost:3000. Desde ahí puedes navegar el clon, comprobar qué ha salido bien y pedirle a Claude Code que corrija los detalles.
El clon como punto de partida: 3 estrategias de backend
El proyecto Next.js generado por Clone es un frontend completo. Para convertirlo en un sitio de producción, existen tres estrategias según el nivel de complejidad:
1. Archivos Markdown (sin backend)
Next.js lee archivos Markdown de una carpeta local y genera las páginas del blog automáticamente. Sin base de datos, sin coste de servidor. Desplegable en Vercel gratis.
2. CMS headless
El proyecto Next.js se conecta a un CMS externo (Sanity, Contentful o Notion). Cada vez que publicas un artículo en el CMS, el sitio se regenera. Más complejidad inicial; gestión editorial sin tocar código después.
3. WordPress headless
WordPress actúa como backend — gestiona el contenido con la interfaz habitual — y el proyecto Next.js consume su API REST como frontend. El sitio público gana la velocidad de Next.js sin abandonar el flujo de trabajo de WordPress.
Limitaciones reales de clonar webs con Claude Code
Clone clona solo el frontend. El backend, la base de datos y la lógica de servidor no se copian — hay que construirlos o conectarlos después.
Márgenes, fondos y centrado de elementos necesitan ajustes manuales. Claude Code los corrige si se los pides directamente tras revisar el clon en localhost:3000.
Chrome no siempre se abre automáticamente. Ábrelo manualmente cuando Clone te lo pida — no es un error, es una limitación de permisos del sistema.
Clone crea solo la página principal por defecto. Para clonar páginas internas o artículos, pídeselo a Claude Code explícitamente después del primer clonado.
Agentes IA compatibles con AI Website Cloner Template
El repositorio está optimizado para Claude Code con Opus 4.6, pero funciona con cualquier agente IA: GitHub Copilot, Cursor, Windsurf, Gemini CLI, Cline, Roo Code, Continue, Amazon Q, Augment Code, Aider y OpenCode. Para usar otro agente, edita AGENTS.md y ejecuta el script de sincronización del repositorio.
Para qué está pensado (y para qué no)
Los casos de uso válidos que define el propio repositorio son tres: migrar una web propia de plataforma (por ejemplo, de WordPress a Next.js), recuperar el código fuente de un sitio propio que se perdió, y aprender deconstruyendo cómo están construidos sitios en producción. No está pensado para copiar diseños ajenos sin permiso ni para crear sitios de phishing.
Preguntas frecuentes
¿Cuánto tarda clonar una web con Claude Code?
Entre 10 y 20 minutos para la página principal, dependiendo de la complejidad del sitio.
¿El clon funciona sin conexión a internet?
No durante el proceso de clonado — Clone necesita acceder a la URL original. Una vez generado el proyecto, funciona en local sin conexión.
¿Se puede clonar cualquier web?
Cualquier web con frontend accesible públicamente. Webs con autenticación obligatoria o contenido dinámico cargado vía JavaScript complejo pueden dar resultados parciales.
¿Tiene coste usar Clone?
Clone es gratuito y open source. El coste real es el uso de tokens de Claude Code (API de Anthropic) durante el proceso de clonado.
Conclusión
Clonar una web con Claude Code produce un proyecto Next.js funcional en minutos. El proceso tiene limitaciones concretas — solo frontend, ajustes manuales necesarios — pero el resultado es un punto de partida real, no una maqueta. Con la estrategia de backend adecuada, el clon se convierte en un sitio de producción sin escribir una línea de código desde cero.
Para ver cómo crear una plantilla de WordPress con este mismo enfoque, tengo otro vídeo que cubre ese flujo.
