AI Website Cloner Template es una plantilla de código abierto que convierte a tu agente de IA en un clonador de sitios: le das una URL y reconstruye el sitio como una aplicación Next.js limpia y editable. Te explicamos cómo funciona, qué necesitas y cuándo conviene usarlo.

La plantilla a usar es ai-website-cloner-template, de JCodesMore en GitHub, con licencia MIT. Está diseñada para trabajarse junto a agentes de código: la recomendación oficial es usarla con Claude Code y el modelo Opus 5.5, aunque también soporta Codex CLI, OpenCode y Cursor. Si aún no dominas alguno de estos agentes, en el sitio ya tienes una guía para usar Claude Code sin pagar a Anthropic.

¿La plantilla está en español o en inglés?º

La plantilla está en inglés y así debe usarse: no existe una versión oficial en español. Su README, el archivo de instrucciones AGENTS.md y la habilidad /clone-website están escritos en inglés, y los comandos se ejecutan tal cual (npm run dev, npm run check, /clone-website). Traducirlos rompería el funcionamiento.

Eso sí, el idioma de la plantilla no afecta al resultado: el sitio clonado conserva el idioma del sitio original — si clonas una web en español, la réplica queda en español con sus textos intactos. Y cuando después le pidas cambios al agente, puedes hacerlo en español sin problema: el agente entiende tus instrucciones y solo respeta los comandos internos en inglés.

¿Qué hace exactamente esta plantilla?

No se trata de un “guardar página como” del navegador: el objetivo es generar código fuente moderno y mantenible. El stack resultante incluye Next.js 16 con App Router, React 19, TypeScript en modo estricto, componentes de shadcn/ui, Tailwind CSS v4 con tokens de diseño y la librería de iconos Lucide React, que el proceso sustituye por los SVG reales extraídos del sitio original.

La habilidad /clone-website sigue cuatro pasos documentados: primero mapea las URLs del sitio de origen a rutas locales preservando el trabajo existente; luego observa las páginas en versión escritorio y móvil, extrayendo recursos y tipografías reales; después construye componentes editables con interacciones funcionales; y finalmente compara el sitio original con la copia local en tamaños y estados equivalentes, reparando diferencias visibles y ejecutando la verificación de producción con npm run check.

¿Qué agentes de IA son compatibles?

El proyecto mantiene una única habilidad portable de agente que Codex, Cursor y OpenCode leen directamente; Claude Code usa un pequeño puente de comandos para que /clone-website siga funcionando igual. Además de la opción de Claude Code, puedes probar el flujo completo con OpenCode siguiendo la guía de instalación del agente de IA para tu terminal o repasar los fundamentos con la guía de uso de Cursor para generar código con eficiencia.

¿Cómo empezar paso a paso?

1. Instala Node.js 24 o superior y tu agente de IA favorito.
2. Obtén la plantilla: en GitHub entra a JCodesMore/ai-website-cloner-template y pulsa Use this template → Create your copy para crear tu propio repositorio, o simplemente pide a tu agente que la clone.
3. Pide a tu agente que deje el proyecto listo: clonar tu copia de la plantilla, eliminar el remote de origen, instalar dependencias y ejecutar npm run check.
4. Abre el proyecto en tu agente con acceso a navegador habilitado.
5. Ejecuta /clone-website https://ejemplo.com sustituyendo la URL por el sitio que quieras recrear.
6. Cuando termine, pide a tu agente los cambios que quieras: colores, textos, componentes.

Para desarrollo local la plantilla incluye los comandos npm run dev (servidor de desarrollo), npm run build (compilación de producción), npm run lint y npm run typecheck, además de soporte para Docker si prefieres contenedores.

¿Cuándo tiene sentido clonar un sitio con IA?

• Migración de plataforma: reconstruir un sitio propio desde WordPress, Webflow o Squarespace hacia una base de código Next.js moderna.
• Código fuente perdido: tu sitio sigue en línea pero el repositorio desapareció, el desarrollador se fue o el stack quedó obsoleto.
• Aprendizaje: desmontar cómo los sitios en producción logran layouts, animaciones y comportamientos responsivos trabajando con código real.

¿Qué usos están prohibidos?

El propio proyecto traza la línea: no debe usarse para phishing, suplantación ni cualquier actividad ilegal; los logos, recursos de marca y textos originales pertenecen a sus dueños, así que no sirve para apropiarse del diseño de terceros; y algunos sitios prohíben expresamente el scraping o la reproducción en sus términos de servicio, por lo que conviene revisarlos antes. En resumen: úsalo con sitios propios o con fines de estudio, nunca para engañar.