Crea webs animadas increíbles con GPT-6 Astra: mi método para diseñar una landing premium con IA

Una web animada premium no empieza con código. Empieza con una dirección visual clara.

En este caso, la idea era crear una landing page para unas antiparras de snowboard con una sensación cinematográfica: nieve, montaña, reflejos de color, un personaje potente y una narrativa que fuera avanzando a medida que se recorre la página.

El resultado no salió de pedirle a una IA que hiciera “una web bonita”. Salió de trabajar por capas: tomar una imagen de referencia, convertirla en un visual útil para la composición, definir una historia, generar movimiento, elegir una referencia de diseño, construir la web en iteraciones y ajustar lo que no funcionaba.

Ese es el método que más me gusta cuando trabajo con herramientas como GPT-6 Astra en Codex. No intento adivinar el prompt perfecto desde el comienzo. Le doy contexto a la IA, le explico adónde quiero llegar y voy construyendo el proyecto con ella.

Tabla de contenido

• 🏔️ El punto de partida: una imagen que ya contiene una historia
• 🧭 Antes de diseñar, define una secuencia de escenas
• 🎬 Genera movimiento con intención, no solo animación
• 🧩 Usa referencias de diseño como punto de partida
• 💻 Construye la primera versión y prueba los assets dentro de la web
• 🔄 Diseña el proyecto como una conversación continua con la IA
• 🥽 Convierte las antiparras en el centro de la página
• 📜 Convierte un video en una secuencia controlada por scroll
• 🧪 Prueba alternativas sin perder una versión que ya funciona
• ✨ Principios para crear una web animada que se sienta premium
• 🛠️ Recursos para aplicar este método en tus propios proyectos
• 🚀 La IA acelera la construcción, pero la dirección sigue siendo tuya

🏔️ El punto de partida: una imagen que ya contiene una historia

Todo comenzó con una imagen encontrada en Pinterest mientras buscaba referencias de antiparras de snowboard. La imagen original era vertical y tenía algo que me interesaba mucho: un personaje con las antiparras como protagonista, una montaña al fondo y una atmósfera que podía convertirse en una marca completa.

Pero una buena imagen no siempre sirve directamente para una landing. Para la primera sección necesitaba un formato horizontal 16:9, con calidad suficiente y, sobre todo, una composición pensada para texto.

La instrucción fue simple: recrear la imagen en formato 16:9, con un look cinematográfico y alta calidad. El detalle clave fue pedir que el personaje quedara hacia la derecha, dejando espacio negativo a la izquierda para el titular, navegación y llamadas a la acción.

Ese tipo de decisión parece pequeña, pero cambia todo. Si el personaje ocupa el centro o se mezcla con el texto, la sección principal pierde impacto y legibilidad. Cuando generes un visual para una web, no pienses solo en si se ve bien como imagen. Piensa dónde irán los textos, los botones, el logo y qué sucederá cuando la pantalla cambie de tamaño.

Una referencia visual no tiene que pertenecer exactamente a la industria del proyecto. Lo importante es identificar qué te gusta de ella. Puede ser el encuadre, la tipografía, el ritmo de una animación, los contrastes, el uso de espacio vacío o la manera en que presenta un producto.

Por ejemplo, puedes tomar una sección de una web tecnológica y adaptarla para una marca de deportes, una cafetería, una aplicación o una consultora. La referencia no define el contenido final. Define la dirección.

Qué debe tener una buena imagen de inicio

• Un protagonista evidente, como una persona, objeto o producto.
• Espacio suficiente para incorporar contenido sin tapar lo importante.
• Una paleta de colores que sirva para todo el sistema visual.
• Profundidad de escena para que el movimiento tenga sentido.
• Detalles que puedan retomarse después en tarjetas, galerías y secciones de producto.

En esta landing, las antiparras no eran solo un accesorio en la cara del personaje. Eran el puente entre el exterior y el interior de la montaña. Esa idea fue la base de toda la secuencia.

🧭 Antes de diseñar, define una secuencia de escenas

Después de conseguir el primer visual, le pedí a Codex una propuesta de landing page basada en una secuencia de storytelling. No quería una página con bloques desconectados. Quería que el recorrido se sintiera como una experiencia: empezar afuera, acercarse al producto, atravesar el lente y terminar dentro del paisaje.

La propuesta se organizó en cinco momentos:

1. La apertura: el snowboarder aparece frente a la montaña y presenta la energía de la marca.
2. El recorrido: el movimiento lleva la atención hacia el paisaje y crea la sensación de avance.
3. El reflejo: las antiparras se vuelven el punto de transición visual entre la persona y la montaña.
4. El producto: aparecen sus detalles, ángulos y componentes.
5. El cierre: la página termina con una galería de uso y una frase que extiende el concepto de marca.

Esto es mucho más útil que pedir una lista genérica de secciones. Cuando defines escenas, cada bloque tiene un propósito. La primera sección atrae. La siguiente cambia el punto de vista. Después se presenta el producto. Finalmente, se deja una sensación.

La historia también evita que las animaciones estén ahí solo porque sí. Cada transición tiene que responder una pregunta: ¿por qué la página se mueve ahora? En este caso, el acercamiento al lente tenía sentido porque las antiparras eran el elemento que conectaba al personaje con la montaña.

Si estás diseñando otra clase de negocio, aplica la misma lógica. Una app puede partir de un problema, mostrar el flujo de uso, revelar una función central y cerrar con el resultado. Un estudio creativo puede pasar de la idea inicial al proceso y luego a los proyectos terminados. Una marca de producto puede ir del contexto de uso al detalle material.

🎬 Genera movimiento con intención, no solo animación

Una vez definida la historia, generé dos ideas de video. La primera era una animación corta para el hero: un pequeño movimiento de cabeza del personaje. La segunda debía acompañar el scroll, acercándose a las antiparras, cruzando hacia el paisaje y recorriendo la montaña.

Para eso, Codex ayudó a traducir la intención visual a prompts en inglés. Esto es útil porque muchas veces tienes clarísimo lo que buscas, pero necesitas convertirlo en instrucciones que una herramienta de generación de video pueda interpretar: movimiento de cámara, velocidad, punto focal, duración, orientación y resultado final.

El primer video era deliberadamente sutil. En una sección principal no siempre necesitas una cámara girando sin parar ni movimientos espectaculares. El texto debe poder leerse y el visual tiene que seguir funcionando como fondo. Un personaje que mueve apenas la cabeza puede ser suficiente para dar vida a la escena.

Para la animación larga, en cambio, pedí más dinamismo: una cámara más rápida, un giro alrededor del personaje con sensación de dron y una transición clara hacia la montaña. La propuesta se dividió en varias escenas: acercamiento, giro alrededor del personaje, descenso hacia el paisaje, regreso a las antiparras y plano final.

Ahí aparece una diferencia importante: no es lo mismo pedir “haz un video cinematográfico” que describir la progresión de planos. Cuanto más claro tengas el recorrido, más fácil será evaluar si el material generado sirve para una web.

Qué especificar al pedir un video para una landing

• La relación de aspecto, en este caso 16:9.
• El sujeto que debe mantenerse como foco visual.
• El tipo de movimiento: giro, zoom, descenso, paneo o movimiento sutil.
• La dirección de la cámara y el punto donde debe terminar.
• La velocidad del movimiento.
• El espacio que debe quedar libre para la interfaz y los textos.
• Qué elementos no deben cambiar, como distancia de cámara, pose o tamaño del personaje.

El proceso tuvo fallos. Una primera generación en Google Flow no resultó y una prueba posterior con v3.1 fast tampoco funcionó. Finalmente, el video se generó desde otra plataforma usando v3.1 fast en formato 16:9 y resolución 1080.

Esto también forma parte del método. Cuando una herramienta falla, no significa que la dirección creativa esté equivocada. A veces debes probar otro modelo, otra plataforma, otra configuración o ajustar la instrucción. La clave es no atascarse demasiado pronto en una sola alternativa.

Además, el resultado de video para el scroll no fue exactamente tan dinámico como lo imaginaba. Aun así, se acercaba a las antiparras y terminaba en la montaña, así que decidí probarlo dentro de la web antes de seguir generando versiones. Esa decisión ahorra tiempo. Un asset imperfecto puede funcionar perfecto cuando se combina con tipografía, ritmo, overlays y transiciones.

🧩 Usa referencias de diseño como punto de partida

Con los visuales encaminados, el siguiente paso fue encontrar una estructura de landing que tuviera la energía adecuada. Para eso usé Dínamo Sites, una biblioteca de secciones animadas y fondos que sirve como punto de partida para construir webs con más personalidad.

Lo que más me gusta de trabajar así es que no necesitas encontrar una plantilla idéntica a tu proyecto. Puedes elegir un diseño por su composición y luego pedirle a la IA que lo adapte. En este caso, elegí la referencia Vanguard porque tenía tipografía enorme, contenido alineado hacia la izquierda y un espacio visual ideal para la imagen del snowboarder.

Copié el prompt completo de esa referencia y le agregué una instrucción clara: crear la primera sección con ese lenguaje visual, pero hablando de antiparras de snowboard, ignorando los textos del ejemplo y usando temporalmente el fondo disponible. Después reemplazaríamos ese fondo por el video generado.

Este enfoque es muchísimo más preciso que pedir una landing abstracta. La IA recibe una referencia concreta de composición, jerarquía tipográfica y tono visual, mientras que el proyecto conserva una identidad propia por el contenido, los assets y los ajustes que vas dando.

Cómo adaptar una referencia sin copiarla literalmente

Cuando encuentres una sección que te gusta, identifica los componentes que realmente quieres rescatar:

• El tamaño y la ubicación de los titulares.
• La relación entre texto, imagen y espacio vacío.
• El contraste general de colores.
• La forma en que aparecen las capas en el scroll.
• La estructura del menú, indicadores o llamadas a la acción.
• El ritmo entre una sección intensa y una sección más limpia.

Luego explícale a la IA qué debe conservar y qué debe transformar. Por ejemplo: conserva la tipografía grande, la composición izquierda y la intensidad visual, pero llévalo a una marca de montaña; no uses los textos originales; incorpora un video propio como fondo; mantén legibilidad sobre la imagen.

Así el resultado deja de ser una copia y se convierte en una dirección de diseño aplicada a tu propio universo.

💻 Construye la primera versión y prueba los assets dentro de la web

Codex creó la primera sección y abrió una versión local de la web. Cuando estuvo listo el video del personaje, lo descargué, lo dejé en la carpeta del proyecto y pedí reemplazar el fondo de la sección principal por ese archivo.

Con eso ya apareció el hero con el personaje en movimiento. No era una animación exagerada, pero para esa sección funcionaba. El reto no era mostrar que podíamos animar algo, sino mantener el mensaje claro sobre un fondo vivo.

Este es un buen criterio para cualquier web animada: la animación debe reforzar el contenido, no competir con él. Si el fondo se mueve demasiado, el usuario no sabe dónde mirar. Si el texto pierde contraste, la experiencia se ve premium, pero comunica poco. Si todo tiene el mismo nivel de intensidad, nada destaca.

En la primera sección, el movimiento de cabeza deja claro que no es una imagen estática, mientras el titular mantiene todo el protagonismo. El personaje permanece a la derecha, el texto tiene aire a la izquierda y el paisaje completa la escena.

También es recomendable trabajar con versiones locales mientras construyes. Puedes revisar los cambios rápidamente, confirmar si el video carga bien, comprobar si los textos siguen siendo legibles y detectar transiciones bruscas antes de avanzar demasiado.

🔄 Diseña el proyecto como una conversación continua con la IA

Una de las cosas más importantes de este proceso fue no tratar cada instrucción como una petición aislada. Mientras Codex trabajaba en las secciones de producto, le conté que después quería transformar el video de scroll en una secuencia de imágenes.

En ese momento no le estaba pidiendo todavía la implementación final de la secuencia. Solo le estaba dando contexto sobre cómo pensaba unir la web después. Eso permite que las siguientes propuestas tengan en cuenta el rumbo general del proyecto.

Me gusta trabajar así porque una web no se arma en una sola orden. Se construye a partir de objetivos, pruebas y decisiones. Le cuentas a la IA qué quieres conseguir, qué te gustó de la versión anterior, qué todavía no te convence y qué ideas quieres probar más adelante. Después usas sus propuestas para seguir afinando tu propia visión.

En vez de escribir prompts desconectados, usa un hilo de trabajo como este:

1. Explica la meta de la experiencia completa.
2. Entrega la referencia visual y los assets disponibles.
3. Pide una primera versión funcional.
4. Señala lo que funciona y lo que debe cambiar.
5. Adelanta las próximas integraciones importantes.
6. Construye nuevas secciones respetando las decisiones previas.
7. Prueba variantes sin destruir la versión que ya te gusta.

Este tipo de diálogo es especialmente útil cuando estás creando con IA. No necesitas tener todas las respuestas desde el principio. Necesitas saber qué sensación buscas, poder reconocer cuándo algo funciona y ser capaz de comunicar ajustes específicos.

🥽 Convierte las antiparras en el centro de la página

Después del hero, el foco pasó al producto. Pedí dos secciones adicionales con textos animados e imágenes cuadradas de las antiparras, dando libertad para proponer, pero manteniendo el estilo que ya había quedado definido.

El resultado creó una zona de producto en la que se puede alternar entre el lente, el perfil y el interior, donde se aprecia la correa. Esto resuelve una necesidad visual importante: el personaje muestra cómo se ven las antiparras puestas, pero no permite inspeccionar bien los detalles del objeto.

Una buena landing de producto necesita ambas escalas:

• Producto en contexto: una persona usándolo en una situación aspiracional.
• Producto aislado: vistas limpias para apreciar forma, material, lente y detalles.
• Producto desde distintos ángulos: frontal, lateral, interior o cualquier parte que ayude a entenderlo.
• Producto en distintos perfiles de uso: aquí se incorporaron hombres y mujeres en la nieve para ampliar la sensación de marca.

Después se sumó una galería con distintos modelos en la nieve. Esa sección ayuda a extender la narrativa: no se trata solo de vender un objeto aislado, sino de mostrar una forma de vivir la montaña.

La frase “La misma montaña. Tu propia mirada.” resume bien ese concepto. El paisaje puede ser el mismo, pero la experiencia cambia según el punto de vista. Y las antiparras se convierten en la pieza que visualmente hace posible ese cambio.

📜 Convierte un video en una secuencia controlada por scroll

El video que se acercaba a las antiparras y terminaba en la montaña se convirtió en una secuencia de imágenes que avanza con el scroll. Este recurso funciona muy bien cuando quieres que el recorrido de la página se sienta conectado y controlado.

En vez de dejar un video reproduciéndose sin relación con la navegación, el movimiento aparece progresivamente a medida que se avanza por la sección. Así, el usuario no solo pasa de un bloque a otro. Siente que está cruzando de una escena a la siguiente.

En esta landing, el recorrido tenía una lógica visual clara:

1. El personaje aparece en el paisaje.
2. La atención se acerca hacia las antiparras.
3. El lente ocupa la pantalla y funciona como transición.
4. La montaña se revela detrás del reflejo.
5. La página entra en una nueva escena con el mensaje “Ahora estás dentro”.

Lo importante es cuidar el cambio de una sección a otra. No quería que el hero terminara y la sección siguiente apareciera de golpe. La transición debía sentirse como parte del mismo viaje.

Si implementas una secuencia similar, prioriza la continuidad. La última imagen de una sección debería conversar con la primera de la siguiente. Puedes repetir colores, mantener una dirección de movimiento, usar un elemento compartido o dejar que un objeto, como el lente en este caso, ocupe ambas escenas.

La animación con scroll no necesita ser técnicamente complicada para ser efectiva. Lo que la hace potente es la relación entre el movimiento y la historia que estás contando.

🧪 Prueba alternativas sin perder una versión que ya funciona

Hasta ese punto, la primera versión de la web ya me gustaba. Pero mientras la recorría apareció una duda: ¿qué pasaría si el personaje estuviera al centro y los textos quedaran a ambos lados?

En lugar de reemplazar la versión original, decidí experimentar. Pedí una nueva imagen horizontal conservando la pose, pero con el personaje centrado. También pedí un prompt para animarlo en loop y una propuesta de textos distribuidos a izquierda y derecha.

La primera opción iba en la dirección correcta, pero aún faltaba algo: quería que el personaje estuviera completamente de frente. Pedí ajustar la posición y que moviera la cabeza hacia cada lado, manteniendo la misma distancia respecto de la cámara.

Ese último detalle era muy importante. Si el personaje se acerca, su cara crece y empieza a invadir el espacio destinado a las letras. A veces una corrección visual concreta, como “mantén la distancia de cámara”, tiene más valor que una descripción larga y vaga sobre estética.

Con la nueva imagen frontal, se generó un video de diez segundos. Luego lo dejé en la carpeta del proyecto y pedí crear una copia de la web para aplicar esa alternativa solo a la sección principal.

Duplicar la versión fue la decisión correcta. La primera propuesta ya era sólida y no tenía sentido perderla antes de comparar. La IA copió la web, incorporó el nuevo video y distribuyó los textos a los lados. Después pude recorrer la página completa y evaluar cómo se sentía esa apertura en relación con todo lo demás.

Qué aprender de esta comparación

No compares solo capturas estáticas. Una sección principal puede verse increíble por sí sola y, aun así, sentirse fuera de lugar cuando continúa el resto de la página. Evalúa el ritmo completo:

• ¿La nueva apertura prepara bien la siguiente escena?
• ¿El texto sigue siendo claro?
• ¿El personaje compite con los titulares o los potencia?
• ¿El cambio de composición altera el tono de marca?
• ¿La versión nueva funciona igual de bien en formatos más estrechos?

Guardar versiones no es indecisión. Es parte de diseñar bien. Las mejores soluciones muchas veces aparecen después de comparar dos ideas reales, no antes.

✨ Principios para crear una web animada que se sienta premium

Este proyecto se puede resumir en algunos principios que puedes llevar a cualquier landing construida con IA:

1. Parte desde una dirección visual, no desde una página vacía

Una imagen, un producto, una paleta, una referencia de composición o una sensación cinematográfica pueden ser suficientes para comenzar. La IA responde mucho mejor cuando recibe una base concreta.

2. Da instrucciones espaciales

No digas solo qué debe aparecer. Explica dónde debe estar. Personaje a la derecha, texto a la izquierda, producto centrado, zona limpia para la navegación, lente en primer plano. En diseño web, la composición es tan importante como el contenido.

3. Piensa en escenas, no solo en secciones

Una landing premium tiene ritmo. Cada parte debe provocar una transición emocional o visual: presentar, acercar, revelar, explicar, cerrar.

4. Usa movimiento para guiar la atención

La animación debe llevar la mirada hacia algo: el producto, una frase, un cambio de contexto o una llamada a la acción. Si no guía ni comunica, probablemente sobra.

5. Mantén contexto durante todo el proyecto

Cuéntale a la IA qué vas a hacer después, aunque todavía no sea el siguiente paso. Eso hace que las decisiones actuales tengan más coherencia con las futuras.

6. Prueba lo generado en contexto antes de descartarlo

Un video puede parecer menos dinámico al verlo aislado, pero funcionar perfectamente dentro de una narrativa con scroll. La web completa es el lugar donde se evalúan los assets.

7. Conserva versiones antes de experimentar

Cuando una idea ya funciona, duplícala. Esto te permite arriesgarte, comparar de verdad y volver atrás sin miedo.

🛠️ Recursos para aplicar este método en tus propios proyectos

Si quieres replicar este flujo, puedes partir por los prompts utilizados en este proyecto y adaptarlos a tu industria, producto o estética.

Para encontrar referencias de secciones animadas, composiciones y fondos listos para llevar a tu flujo de trabajo con IA, explora Dínamo Sites. No necesitas usar cada diseño tal como está. Úsalos como una biblioteca de ideas para crear una dirección propia.

Si tu objetivo es avanzar desde webs hacia productos digitales, también tienes prompts profesionales para crear tu app, pensados para estructurar proyectos con más claridad desde el inicio.

Cuando la web esté lista para publicarse, puedes revisar el descuento de Hostinger para alojar tu proyecto. Tener una buena landing en local es solo una parte del proceso. El siguiente paso es llevarla a producción y convertirla en una experiencia real.

Y si quieres compartir procesos, pedir feedback y aprender a construir proyectos con este enfoque, puedes unirte a la comunidad de vibe coding y creación de apps con IA.

Para quienes tengan una idea concreta y quieran trabajarla en conjunto, está disponible el formulario para trabajar en tu proyecto.

🚀 La IA acelera la construcción, pero la dirección sigue siendo tuya

La parte más interesante de crear webs animadas con GPT-6 Astra, Codex, generadores de imagen y video no es que una herramienta haga todo automáticamente. Es que puedes pasar mucho más rápido de una intuición a una versión real.

Empiezas con una imagen de Pinterest. La conviertes en un visual horizontal pensado para una landing. Defines una narrativa. Generas un movimiento corto y una transición larga. Tomas una referencia de diseño. Construyes una primera versión. Ajustas los detalles de producto. Conviertes un video en scroll. Pruebas otra composición. Comparas.

Eso es diseñar. La IA te ayuda a producir, explorar y corregir con velocidad, pero el criterio sigue estando en decidir qué conservar, qué cambiar y qué sensación quieres provocar.

Parte por una idea visual clara. Dale contexto a la herramienta. Trabaja por iteraciones. No te enamores de la primera generación. Y, sobre todo, convierte cada animación, imagen y sección en parte de una historia.

Aviso: este artículo puede incluir enlaces promocionales. Si realizas una compra, puedo recibir una comisión sin costo adicional para ti.