Quería crear una web en la que el personaje principal no estuviera simplemente colocado sobre un fondo bonito. Quería que respondiera al movimiento del mouse: al llevar el cursor hacia la izquierda, el robot miraría hacia la izquierda; al moverlo hacia la derecha, giraría hacia ese lado. Además, la página tendría otras secciones animadas y permitiría cambiar entre modo oscuro y modo claro.
La idea parecía sencilla al describirla, pero había varias piezas que resolver. Necesitaba una imagen con la composición adecuada, un movimiento corto que funcionara bien, un fondo fácil de quitar y una implementación que conservara el efecto visual tanto en la sección principal como en el resto de la página. Después había que revisar detalles de diseño, probar las dos versiones de color y publicarla.
Este fue mi proceso completo con ChatGPT, Google Flow, Codex y Hostinger. También puedes consultar los pasos y prompts adaptados del proyecto si quieres seguirlo con tus propios recursos.
Tabla de contenido
- 🎨 Primero encontré una imagen que valía la pena convertir en web
- 🎬 Una animación corta era suficiente para crear la interacción
- 🤖 Cómo llevé el movimiento del robot a Codex
- 🌓 Probé el modo claro sin perder la versión oscura
- 🧩 Una página completa, no solo un héroe interactivo
- 🚀 De una web local a un enlace que podía compartir
- 🛠️ Qué hizo que este flujo de trabajo funcionara
- 💡 Cuándo vale la pena hacer una web así
🎨 Primero encontré una imagen que valía la pena convertir en web
Empecé buscando referencias visuales en Pinterest. Entre las imágenes encontré un robot con gorro naranja, hoodie del mismo color y una mano apoyada en el mentón. Tenía una pose reconocible y una silueta que podía funcionar como protagonista de una página. No necesitaba imaginar toda la web desde cero: esa imagen ya me daba una dirección estética.
La descargué para usarla como referencia, pero había un problema inmediato. Era una imagen vertical y la sección principal que tenía en mente necesitaba una composición más ancha. Si intentaba colocarla directamente en un espacio horizontal, iba a tener menos margen para trabajar el fondo, el título y la posición del personaje.
La llevé a ChatGPT y pedí una versión en proporción 16:9 que mantuviera al robot y su ropa naranja. Mi primera idea era usar un fondo blanco puro. Mientras se generaba, cambié de opinión: un fondo verde probablemente facilitaría separar al personaje cuando llegara el momento de ponerlo en la web.
Detuve esa generación y reformulé la solicitud para pedir el verde típico de una pantalla verde. La respuesta tuvo un pequeño giro inesperado: salió una imagen horizontal, pero con fondo transparente en vez de verde. Pedí otra versión para conservar también la alternativa verde.
Ese detalle fue más importante de lo que parecía. No estaba preparando una imagen solo para que se viera bien aislada. La imagen iba a convertirse en video, y después el personaje tendría que quedar separado del fondo en todos los fotogramas. Pensar en ese paso desde el comienzo me permitió elegir mejor el material con el que seguiría trabajando.
🎬 Una animación corta era suficiente para crear la interacción
Con la imagen preparada, pasé a Google Flow. Mi objetivo no era producir una secuencia larga ni una escena con muchos movimientos. Necesitaba una toma breve en la que el robot comenzara en su pose original y terminara mirando hacia el otro lado. Si ese movimiento resultaba fluido, después podría relacionarlo con la posición horizontal del cursor.
Primero probé con la imagen que no tenía fondo verde. Le pedí a Flow que animara solamente al robot, desde la pose inicial hasta una mirada hacia la izquierda, con la duración más corta posible. Usé cuatro segundos. La toma comenzaba con el personaje mirando hacia la derecha y terminaba mirando hacia la izquierda. Le había entregado una sola imagen, así que Flow resolvió el movimiento intermedio.
Me gustó el resultado. El giro tenía la suavidad que buscaba, por lo que abrí Codex, adjunté el video y expliqué el comportamiento deseado: una sección principal con el robot centrado en primer plano, cuyo movimiento pudiera controlarse con el mouse. También pedí que quitara el fondo.
Pero agregué una instrucción fundamental: que revisara el video y me dijera si era posible antes de ejecutar. Todavía no sabía si el fondo de esa primera toma se podía eliminar limpiamente. Prefería detectar una limitación del recurso antes de construir el resto de la página alrededor de él.
Codex confirmó que el movimiento podía controlarse con el cursor, pero señaló el problema del recorte. El fondo negro era difícil de separar porque el propio robot tenía cables y piezas negras. Quitar todo lo oscuro podía eliminar partes del personaje; conservarlo todo dejaba el fondo visible.
Ahí entendí por qué la versión verde no era solo una alternativa visual. Era una forma de distinguir con mayor claridad qué parte de cada imagen pertenecía al fondo y cuál al robot. Un video puede verse muy bien como video y, aun así, no servir para la implementación que uno necesita.
Repetir el movimiento, esta vez pensando en el recorte
Volví a Flow con la imagen de fondo verde. Quería repetir el giro que me había gustado, pero con una condición más precisa: el verde debía permanecer uniforme durante toda la toma. Pedí que solo se moviera el robot, de derecha a izquierda, con un movimiento suave, sin cambios ni variaciones en el tono del fondo.
La razón era práctica. Si el verde cambiaba mucho entre un fotograma y otro, quitarlo de manera consistente podía resultar más complicado. Cuando el resultado final depende de separar un personaje del fondo, la uniformidad del material de partida importa tanto como la calidad del movimiento.
Con esa nueva toma ya tenía un recurso mucho más apropiado para Codex. El proceso no fue generar una imagen, generar un video y esperar que todo encajara por arte de magia. Fue probar una versión, encontrar el obstáculo y volver a preparar el recurso con la siguiente etapa en mente.
🤖 Cómo llevé el movimiento del robot a Codex
Adjunté a Codex el video con fondo verde y le indiqué que usara esa versión. Revisó la toma y preparó 96 fotogramas transparentes. Con esos fotogramas, el personaje podía aparecer sin el verde y responder al movimiento del cursor dentro de la sección principal.
La idea visual era que la posición del mouse controlara el momento del giro. Al desplazarse hacia un extremo, el robot miraría hacia ese lado; al moverse hacia el otro, recorrería la secuencia en sentido contrario. Lo importante para mí no era exhibir el video original, sino convertir ese movimiento en una interacción.
La primera versión ya respondía, pero todavía no estaba terminada. Al bajar por la página apareció una zona negra que parecía cortar la sección. Pedí el ajuste y volví a revisar. Este tipo de detalle es fácil de pasar por alto si uno se queda únicamente con la primera prueba del héroe: una web debe funcionar como página completa, no solo como una captura atractiva de su parte superior.
Después me concentré en la relación entre el robot y el título. Las letras estaban demasiado juntas y la palabra costaba entenderla. Ajusté el espaciado hasta recuperar la lectura sin perder la composición. Quería que el texto quedara detrás del personaje, pero no tanto que el robot lo tapara en exceso.
La solución que más me gustó fue dejar solo la gorra ligeramente por delante de las letras. Si colocaba el título demasiado arriba, el personaje y la palabra parecían elementos separados. Si lo bajaba demasiado, se perdía legibilidad. Ese pequeño cruce hacía que ambas piezas se sintieran parte de la misma escena.
Para mí, ahí está una parte importante de trabajar con IA en diseño web. La herramienta puede producir una primera solución y aplicar cambios, pero decidir si un elemento está demasiado arriba, si una palabra se entiende o si una superposición transmite lo que buscas sigue requiriendo mirar y corregir.
🌓 Probé el modo claro sin perder la versión oscura
Cuando la versión oscura empezó a gustarme, quise comprobar cómo funcionaba la misma composición sobre blanco. Le pedí a Codex una alternativa con fondo blanco y texto oscuro, pero fui explícito en algo: no debía sobrescribir la versión existente. Tenía que copiarla y crear una nueva.
Me interesaba comparar las dos opciones de verdad. Es distinto imaginar una página con otros colores que tener ambas versiones delante. En la clara, el movimiento era el mismo, pero otras partes del robot se notaban más. La elección de fondo cambiaba la percepción del personaje y de la composición, aunque la interacción siguiera intacta.
En ese momento no necesitaba decidir cuál reemplazaría a la otra. Las dos podían formar parte del proyecto. Conservar versiones separadas durante la exploración me permitió probar sin miedo a perder un resultado que ya funcionaba. Más adelante, cuando estuviera conforme con el resto de la página, podría reunirlas en un selector de modo claro y oscuro.
🧩 Una página completa, no solo un héroe interactivo
La sección principal ya tenía el efecto que buscaba, pero una web no termina después del primer desplazamiento. Le pedí a Codex que creara tres secciones adicionales y que primero me las mostrara en modo oscuro. Si el conjunto me gustaba, entonces unificaríamos la página y añadiríamos el modo claro.
La instrucción mantuvo un orden deliberado. Antes de multiplicar el trabajo en dos temas de color, quería comprobar la estructura y la dirección visual de las nuevas secciones. Resulta más fácil evaluar una cosa a la vez que pedir toda la página en ambas versiones y después intentar identificar qué parte necesita cambios.
Codex reutilizó los fotogramas que ya había preparado. En una de las secciones aparecen tres poses del robot: mirando hacia la izquierda, de frente y hacia la derecha. También incorporó movimiento cuando las secciones entran en escena. El mismo material estaba cumpliendo dos funciones: dar respuesta al cursor en el héroe y aportar imágenes para desarrollar el resto de la web.
Eso me parece especialmente valioso en un proyecto visual. No siempre hace falta generar un recurso nuevo para cada bloque. Si una secuencia ya contiene varias poses útiles, puede servir como punto de partida para otras composiciones. Aquí el robot mantenía la identidad de la página mientras cambiaba su presentación de una sección a otra.
Las secciones ya me convencían, pero hice otra comprobación antes de cerrar el diseño. Abrí la sección principal en una pantalla grande y noté que la gorra casi no tapaba el título. El robot se veía un poco más pequeño de lo que había imaginado. En una vista anterior la relación parecía correcta, pero en ese tamaño de pantalla había cambiado la sensación de la composición.
Pedí a Codex que agrandara un poco al robot y que conservara el texto levemente detrás de la gorra. No buscaba rediseñar el héroe, sino mantener ese detalle que había hecho funcionar la escena. Volví a recorrer las secciones y, cuando estuve conforme con el modo oscuro, pedí la versión clara.
Entonces Codex reunió todo en una sola página con un selector de claro y oscuro. Ya no tenía que abrir dos variantes independientes. Podía cambiar de modo y revisar la página completa, desplazándome por las secciones y regresando al inicio para comprobar cómo se sentía el conjunto.
El resultado final conservó la idea original: una sección principal interactiva, otras secciones que continúan el lenguaje visual y dos modos de color integrados. Llegar ahí no consistió en encontrar un único prompt perfecto. Consistió en avanzar por etapas y corregir lo que cada nueva prueba hacía visible.
🚀 De una web local a un enlace que podía compartir
Hasta ese punto, la página funcionaba en local. Para terminar el proyecto necesitaba publicarla. Una web interactiva puede estar muy bien resuelta en mi computadora, pero tenerla online permite compartirla mediante un enlace o incluirla en un portafolio.
Entré a Hostinger y agregué un nuevo sitio HTML. Después abrí el administrador de archivos y subí los archivos de la web: el índice, la carpeta de fotogramas y los demás recursos del proyecto. Cuando terminó la subida, abrí el dominio temporal para comprobar que la página publicada funcionara correctamente.
Ese último paso también formaba parte de la revisión. No quería dar por terminado el trabajo únicamente porque la versión local se veía bien. Comprobé que el sitio estuviera online, que la composición apareciera como esperaba y que pudiera seguir recorriendo la página.
Si también quieres publicar las webs que vas creando, puedes usar mi enlace de descuento de Hostinger. Si contratas a través de él, apoyas mi trabajo sin coste adicional para ti.
🛠️ Qué hizo que este flujo de trabajo funcionara
Lo más interesante del proyecto no fue que una herramienta generara una página de una sola vez. Fue la forma en que cada herramienta resolvió una parte distinta del problema. La referencia visual me dio una dirección. ChatGPT ayudó a preparar la imagen horizontal. Google Flow produjo el giro del personaje. Codex convirtió ese movimiento en una interacción, desarrolló las secciones y permitió ajustar el diseño. Hostinger hizo posible dejar la web publicada.
Si tuviera que repetir este proceso con otro personaje, prestaría especial atención a estas decisiones:
- Elegir una referencia con una silueta clara. El robot tenía una pose y una vestimenta reconocibles, lo que ayudó a sostener la identidad visual en distintas secciones.
- Preparar el recurso para su uso final. La primera animación me gustaba, pero el fondo negro dificultaba separar al personaje. La versión verde respondió a esa necesidad concreta.
- Pedir una revisión antes de implementar cuando haya dudas. La consulta inicial a Codex reveló un problema real del material antes de seguir construyendo sobre él.
- Controlar la consistencia del fondo en el video. Mantener el verde uniforme era importante porque debía desaparecer de toda la secuencia, no de una sola imagen.
- Conservar las versiones que funcionan. Al pedir el modo claro como copia, pude comparar sin perder la composición oscura.
- Revisar la página en distintos tamaños. El tamaño del robot y su relación con el título cambiaron al abrir el héroe en una pantalla grande.
- Comprobar el resultado publicado. Subir los archivos no era el final; faltaba abrir el dominio y confirmar que todo funcionara online.
También aprendí a separar dos tipos de corrección. Algunas eran técnicas, como conseguir un fondo que pudiera quitarse o evitar que una franja negra cortara visualmente la sección. Otras eran decisiones de diseño, como cuánto debía crecer el robot o qué parte de la gorra convenía superponer al título. Ambas importaban. Una interacción puede funcionar perfectamente y, aun así, necesitar ajustes para sentirse bien resuelta.
💡 Cuándo vale la pena hacer una web así
No todas las webs necesitan un robot que siga el mouse, varias secciones animadas y un cambio de tema. Si una página para un negocio local debe explicar sus servicios con claridad y posicionarse bien, probablemente este tipo de diseño no sea la opción más adecuada. Agregar complejidad visual solo porque podemos hacerlo no siempre ayuda al objetivo de la página.
En cambio, para una campaña o un lanzamiento donde la identidad visual tiene mucho peso, una experiencia así puede aportar mucho valor. El movimiento convierte al personaje en algo más que una ilustración, y las secciones posteriores mantienen esa idea sin abandonar el lenguaje del proyecto. Por eso me parece útil aprender a crear este tipo de webs, aunque no vayamos a usarlas en todos los encargos.
Lo que antes me habría tomado bastante más tiempo pudo avanzar mediante una cadena de pruebas y correcciones: partir de una imagen, prepararla para animación, detectar que el primer fondo no servía, repetir la toma, transformar el video en fotogramas transparentes, ajustar la interacción, completar las secciones y publicar el resultado. La velocidad ayuda, pero el criterio para decidir qué conservar y qué corregir es lo que termina dando forma a la web.
Si quieres explorar otras formas de crear páginas, puedes conocer Dínamo Sites. Para proyectos de aplicaciones, también comparto prompts profesionales para crear tu app. El código completo y los recursos de este proyecto están disponibles en mi comunidad de creación de apps con IA. Y si tienes un proyecto en el que te gustaría que trabajemos juntos, puedes enviarme tu solicitud.
Aviso: este artículo puede incluir enlaces promocionales. Si realizas una compra, puedo recibir una comisión sin costo adicional para ti.
