Clona Cualquier Página Web
Le das una URL a Claude y él se encarga de todo — analiza el diseño, baja las imágenes y te construye la página entera en código limpio con Next.js. Un solo comando.
JCodesMore/ai-website-cloner-template
Proyecto de la comunidad — open source
01 qué hace
Un comando que clona diseños
¿Alguna vez viste una página web y dijiste "quiero algo así"? Normalmente tendrías que copiar a mano los colores, las fuentes, la estructura... tardas horas. Este skill lo hace por ti en minutos.
Le das el link de cualquier página y Claude la abre con un navegador real. La analiza como lo haría un diseñador humano — revisa los colores, la tipografía, las imágenes, el layout — y te construye una réplica en Next.js con código limpio y organizado.
Importante: No copia el contenido ni las imágenes con copyright. Clona el diseño — los colores, la estructura, el layout. Tú pones tu propio contenido después.
02 cómo instalarlo
Tres comandos y listo
Necesitas tener Claude Code instalado en tu computadora. Si aún no lo tienes, checa la guía de cómo instalar Claude Code.
Paso 1 — Descarga el proyecto
git clone https://github.com/JCodesMore/ai-website-cloner-template.git mi-clonPaso 2 — Entra a la carpeta e instala
cd mi-clon && npm installPaso 3 — Abre Claude con Chrome
claude --chrome¿Por qué --chrome? Claude necesita abrir un navegador real para inspeccionar la página — ver los colores, tomar capturas, revisar la estructura. Sin ese flag, no puede ver la página y no funciona.
03 cómo usarlo
Un solo prompt
Ya con Claude abierto y el proyecto cargado, solo tienes que escribir esto:
Clona una página
Cambia la URL por la página que quieras clonar. Puedes poner cualquier sitio público.
/clone-website https://nike.com
🔍
Claude abre la página
Usa Chrome para verla como un humano — con todos los estilos cargados.
🧩
Analiza todo
Extrae colores, fuentes, imágenes, estructura y componentes.
🚀
Te construye el código
Genera componentes Next.js con Tailwind listos para usar.
04 qué pasa por dentro
5 fases automáticas
Cuando corres el comando, Claude sigue un pipeline de 5 fases. No tienes que hacer nada — solo esperar.
Reconocimiento
Claude abre la página con Chrome, toma capturas de pantalla y extrae los colores, fuentes, imágenes y estructura completa.
Fundamentos
Crea el proyecto Next.js, configura Tailwind y define los design tokens basados en lo que encontró en la página original.
Spec de componentes
Genera una lista detallada de cada sección que necesita construir — navbar, hero, cards, footer — con los CSS exactos.
Construcción paralela
Lanza múltiples agentes que construyen los componentes al mismo tiempo, cada uno en su propia rama de git.
Ensamblaje y QA
Junta todas las piezas, revisa que todo se vea bien comparando con la original y ajusta lo que haga falta.
La fase 4 es la más interesante. Claude lanza varios agentes que trabajan al mismo tiempo, cada uno en su propia rama de git. Es como tener un equipo de desarrolladores construyendo tu página en paralelo.
05 para qué sirve
Cuatro cosas que puedes hacer
Migrar una página vieja
Tienes una página en WordPress o HTML y quieres pasarla a Next.js sin empezar de cero.
Aprender de los mejores
Quieres estudiar cómo está hecha una página que te gusta — colores, tipografía, estructura.
Extraer un design system
Necesitas los tokens de diseño de una página (colores, fuentes, espaciados) para tu propio proyecto.
Prototipar rápido
Tu cliente te manda un link y dice "quiero algo así". En vez de empezar de cero, lo clonas y adaptas.
Este proyecto es gratuito, open source y tiene más de 6,700 estrellas en GitHub.
Funciona con Claude Code y con otros 12 agentes de IA. Lo instalas una vez, lo usas para siempre. Sígueme en @soyenriquerocha y compártelo con alguien que lo necesita.