AI-First
Hay sitios web que valen 100 000 euros. No porque el código sea complejo, sino porque alguien se tomó el tiempo de entender las animaciones, los efectos de scroll, el parallax, y de ensamblarlos con cuidado. Claude Code puede ayudarte a desmontar esos sitios pieza por pieza y a reconstruir tu propia versión. Así es como.
- 🔑 Clonar un sitio premiado en cinco pasos con Claude Code para aprender diseño front-end.
- 🎯 Tear down completo: HTML mediante Ctrl+U, CSS y JavaScript recuperados por web fetch automático.
- 💡 Animaciones frame-by-frame: generar un vídeo con Veo sobre fondo verde y luego extraer cada frame.
- ⚠️ El resultado queda al 90% del original, ajusta mediante comparación iterativa de capturas de pantalla.
- 🚀 Awards, Nano Banana y GSAP se convierten en tus herramientas para firmar una identidad visual distintiva.
Esto no es plagio. Es aprendizaje por imitación, el método más eficaz que existe para progresar en diseño front-end.
Por qué copiar un sitio de 100 000 euros
La mayoría de los sitios generados por IA se parecen entre sí. Misma estructura, mismas plantillas, mismo aburrimiento. Si quieres crear algo que destaque, primero tienes que exponerte a lo mejor que existe.
Ahí es donde entra Awards (awwwards.com). Es una plataforma donde diseñadores de todo el mundo presentan sus creaciones más ambiciosas. Verás animaciones de scroll que ni sabías que existían, efectos de parallax impresionantes, transiciones que cambian tu percepción de lo que un sitio puede hacer.
El objetivo no es robar. Es entender cómo los profesionales ensamblan sus creaciones y luego añadir tu propia identidad.
Aquí tienes los 5 pasos para transformar cualquier inspiración en tu propio sitio.
Paso 1: Encontrar la inspiración
Ve a Awards y recorre las nominaciones recientes. Busca un sitio cuya estética te guste y que puedas imaginar adaptar a tu universo. No hace falta que sea perfecto, solo algo que te dé ganas de entender cómo está hecho.
En el vídeo fuente, la elección recayó en Moon, un sitio para un bar de cócteles en Roma con una animación de scroll magistral: la luna pasa de plena luz a sombra completa según la posición del cursor. Exactamente el tipo de detalle que no sabes reproducir sin desmontarlo.
Paso 2: El site tear down
Este es el paso clave. Para que Claude Code pueda reproducir los efectos de un sitio, necesita tres cosas: el HTML (la estructura), el CSS (el estilo) y el JavaScript (las interacciones).
El HTML es accesible directamente: Ctrl+U en cualquier página web te da el código fuente completo. Lo copias y lo pegas en Claude Code. Después, tomas capturas de pantalla de los efectos que quieres reproducir.
Para el CSS y el JavaScript, Claude Code puede recuperarlos por sí mismo mediante web fetch, a partir de los archivos referenciados al final del HTML. Se recomienda usar un skill dedicado al site tear down para maximizar la calidad de la extracción.
Lo que Claude Code necesita | Cómo obtenerlo |
|---|---|
HTML de la página | Ctrl+U → copiar/pegar |
CSS y JavaScript | Claude Code lo recupera mediante web fetch |
Capturas de los efectos | Capturas de pantalla de las animaciones clave |
URL del sitio | Proporcionarla directamente en el prompt |
Paso 3: Crear los assets
Claude Code no crea imágenes. Tienes que proporcionarle los visuales. Y para animaciones complejas como una luna que cambia de sombra progresivamente, la técnica es sorprendente.
Creas dos imágenes: la luna en plena luz, la luna en sombra total. Generas un vídeo de transición entre ambas (con Google Veo o equivalente). Luego le pides a Claude Code que extraiga cada frame del vídeo. Cada frame corresponde a un estado de la luna según la posición del cursor.
La regla de oro para el vídeo: fondo verde. Sin movimiento de cámara, sin zoom, sin deriva. La estabilidad es crítica porque cada frame se convierte en una imagen independiente cargada por el navegador.
Para las imágenes de inicio y final, Nano Banana + un simple prompt basta: elimina el texto, pon el fondo en verde. Eso es todo.
Paso 4: La fase de build
Le devuelves todo a Claude Code: el resultado del site tear down, tus assets, tus capturas de pantalla. Y le dices que construya tu versión.
Lo que obtienes no será un clon perfecto, y es lo esperado. El sitio original fue creado por un estudio entero. Lo que obtienes es una solución al 90%, con las mismas mecánicas: parallax, scroll animation, efectos de sombra. La estructura está ahí.
Para los ajustes: compara tu versión y el original en capturas de pantalla, dale ambas a Claude Code y pídele que identifique las diferencias y las corrija. Es un proceso iterativo.
Paso 5: Hazlo tuyo
Aquí es donde el trabajo se vuelve interesante. No eres un bar de cócteles en Roma. ¿Qué quieres poner en lugar de la luna? ¿Cuál es tu identidad visual? ¿Cómo adaptar esta mecánica de scroll a tu producto?
Este es el verdadero valor del ejercicio. Después de clonar un sitio con animaciones de scroll, entiendes cómo funcionan. Ya no te intimida este tipo de efecto. Sabes que puedes crear uno similar para tu propio uso.
El lenguaje natural es el nuevo lenguaje de programación. Pero para usarlo bien, primero hay que entender lo que estás pidiendo. Copiar a los profesionales es el atajo más honesto hacia esa comprensión.
Cada sitio clonado es una lección. GSAP, ScrollTrigger, las animaciones frame-by-frame: son herramientas que quizás hoy no conoces. Después de este ejercicio, al menos habrás oído hablar de ellas en un contexto concreto. Así es como se progresa.