Cómo clonar un sitio web con Claude Code (2026): el pipeline real y dónde se rompe
Guía para builders sobre clonar un sitio con Claude Code: el pipeline agéntico de cinco fases que mide una página viva y la reconstruye como React y Tailwind editable, el setup necesario, los casos que fallan sin supervisión y cuándo conviene usar un cloner alojado.
Clonar un sitio con Claude Code no es hacer una captura ni usar "guardar como". Es un pipeline agéntico: apuntas Claude Code a una URL viva, mide la página real en un navegador — CSS calculado, breakpoints, assets — y la reconstruye sección por sección como React y Tailwind editable.
La diferencia decisiva es que el método mide en lugar de adivinar. Por eso el resultado es código que puedes editar y rebrandear, no una copia plana de la página de otra persona.
Un bucle agéntico: medir la página viva, reconstruir por secciones y comparar contra el original.
TL;DR
| Pregunta | Respuesta |
|---|---|
| ¿Qué es? | Claude Code mide una URL y la reconstruye como React + Tailwind editable. |
| ¿Qué necesitas? | Claude Code con acceso de navegador, un modelo capaz, Node y un prompt o skill de clonación. |
| ¿Una sola orden? | Con una skill instalada, algo como /clone-website <url>; sin skill, un prompt guiado por fases. |
| ¿Qué obtienes? | Componentes reales, tokens, spacing y breakpoints; no una captura. |
| ¿Dónde falla? | Animación pesada, WebGL, fuentes comerciales, assets lazy-loaded o detrás de CDN. |
| ¿Puedes saltarte el setup? | Clonesite corre el mismo pipeline alojado: pegas una URL, preview gratis, clon desde $2. |
Lo que realmente ocurre
Una URL da al agente mucha más información que una captura. En un navegador real, Claude Code puede leer getComputedStyle(), observar comportamiento responsive, descargar assets y detectar las fuentes que se renderizan de verdad.
Después convierte esa medición en especificaciones por sección. En vez de un único prompt gigante, cada sección se construye contra medidas y estados concretos. El resultado es un punto de partida que posees: layout que puedes mover, componentes que puedes editar y tokens que puedes reemplazar.
El pipeline en cinco fases
- Reconocimiento. Abrir la URL, tomar screenshots por breakpoint, hacer scroll, hover y clics, y leer CSS calculado.
- Base. Instalar fuentes legales, crear tokens de color y tipo, y descargar imágenes, videos e iconos.
- Specs de componentes. Escribir una especificación por sección con spacing, escala, estados y reglas responsive.
- Construcción paralela. Lanzar builders por sección en worktrees aislados.
- Ensamblaje y QA. Unir todo y hacer visual diff contra el original hasta que la copia sea fiel.
La razón por la que funciona es aburrida pero fuerte: cada valor viene de algo observado en la página real.
Setup propio
Para hacerlo en tu máquina necesitas Claude Code con acceso a Chrome o Playwright MCP, un modelo con buena memoria de trabajo, Node y una skill o prompt que estructure las fases. Plantillas abiertas como ai-website-cloner-template empaquetan este flujo, normalmente con salida Next.js.
Eso está bien si quieres Next.js. Si solo necesitas una landing editable y portable, ese scaffold puede ser más grande de lo necesario. Clonesite genera una Vite SPA en React y Tailwind, y puede adaptarse a TanStack Start u otro framework cuando ese sea tu stack.
Dónde se rompe
Los clones sin supervisión fallan en casos conocidos:
- Sitios con animaciones, timelines GSAP o WebGL.
- Fuentes comerciales que el agente ve pero tú no puedes redistribuir.
- Assets lazy-loaded o servidos desde CDN que terminan en 404.
- Páginas solo JavaScript, con poco HTML renderizado.
- Páginas detrás de login.
- Sitios muy grandes que consumen muchas vueltas de agente.
Esto no invalida el flujo. Lo convierte en un workflow con revisión humana, que es justo lo que la fase de visual diff debe sostener.
Legalidad y opción alojada
Clonar es legal cuando el resultado es un scaffold. Los patrones de layout son comunes; logos, copy, fotos, nombres de producto y frases registradas no lo son. La regla práctica: conserva estructura, reemplaza identidad y publica solo cuando la página sea tuya. La guía legal está en clonar un sitio de forma segura.
Ejecutar Claude Code tú mismo te da control total, pero también te deja el setup, el coste de tokens, el QA y los casos frágiles. Un clon alojado corre el mismo pipeline, te da preview gratuita y te entrega código editable cuando estás listo para descargar.
Usa Claude Code si quieres experimentar y controlar cada pieza. Usa Clonesite si quieres saltarte el setup, manejar sitios frágiles o clonar más de una página. En ambos casos, la disciplina es la misma: conserva el layout, reemplaza la marca y convierte el resultado en una página propia.
FAQ
¿Qué significa clonar un sitio con Claude Code?+
Significa apuntar Claude Code a una URL viva, hacer que mida la página real en un navegador y reconstruirla como código React y Tailwind editable.
¿Claude Code puede clonar cualquier sitio?+
Puede trabajar con páginas públicas que un navegador puede abrir. Landing pages y sitios simples funcionan mejor; animaciones pesadas, WebGL, fuentes comerciales y assets lazy-loaded suelen necesitar revisión humana.
¿Cuánto tarda?+
Una landing page es una sesión moderada de agente. Un sitio de muchas secciones es un trabajo largo. En Clonesite, un clon alojado suele tardar una a tres horas con preview gratuita primero.
¿Necesito saber programar?+
Para correr Claude Code por tu cuenta, sí: instalas la herramienta, le das acceso de navegador, revisas specs y corriges assets. Un clonador alojado ejecuta el mismo pipeline y te entrega código editable.
¿Es legal clonar con Claude Code?+
Sí, si tratas el resultado como scaffold. Conserva patrones de layout, reemplaza logos, nombres, copy, imágenes y claims, y publica solo cuando la página sea tuya.
Guías relacionadas
Clonación de URL vs captura de pantalla a código: qué cambia de verdad en el resultadoLa clonación de URL lee la estructura real de una página en vivo (DOM, CSS, fuentes, enlaces y breakpoints responsive) y la reconstruye como código editable. La captura de pantalla a código solo ve píxeles, así que infiere el layout y pierde fuentes, enlaces y responsividad. La diferencia se nota directamente en lo utilizable que es el resultado.
Los mejores clonadores de sitios web con IA en 2026El mejor clonador de sitios web es aquel cuya entrada y salida encajan con tu tarea: de URL a código para reutilizar un layout real, de captura de pantalla a código para un mockup estático y de prompt a sitio para construir desde cero. Compáralos por tipo de entrada, editabilidad y calidad de exportación antes de elegir.
Clona un sitio web con una API — pensada para agentesGuía para desarrolladores de la Clone API de Clonesite por REST o MCP alojado. Crea una API key o usa login OAuth para agentes, añade un secreto de webhook solo si necesitas callbacks y deja que el agente haga preflight, cree solicitudes, consulte el estado y descargue código React y Tailwind editable.