Una web con una bicicleta sobre un paisaje de montaña puede quedar bien. Pero si al desplazarnos la cámara se acerca al neumático, el texto acompaña el recorrido y el paisaje se funde con las siguientes secciones, ya estamos construyendo una experiencia bastante más interesante.
Eso es lo que vamos a crear con Brava, un concepto de bicicleta eléctrica de montaña. Partiremos de una referencia de diseño, prepararemos las imágenes y la animación en Flow, montaremos la landing en Google AI Studio y terminaremos publicándola con GitHub y Hostinger.
No te voy a prometer que al terminar vas a vender webs a diez mil dólares. Aunque, si alguien quiere pagártelos, tampoco hace falta llevarle la contraria. El objetivo aquí es más concreto: aprender un proceso para pasar de una idea visual a una web animada que puedas compartir con un posible cliente o incorporar a tu portafolio.
Y hay algo importante: el resultado no sale de escribir una única instrucción y aceptar lo primero que aparece. Vamos a preparar recursos, revisar composiciones y pedir ajustes concretos. Ahí está buena parte del trabajo.
Tabla de contenido
- 🛠️ Prepara el proyecto en Google AI Studio
- 🎨 Usa una referencia de diseño sin empezar desde cero
- 🚲 Genera la imagen principal pensando en la web
- ✍️ Apóyate en Gemini para preparar los prompts
- 🎬 Crea una animación entre dos fotogramas
- 🧩 Lleva los archivos a AI Studio sin reinterpretar el producto
- 📸 Prepara las vistas de producto sobre fondo blanco
- 🧭 Convierte las piezas en una landing continua
- 🌫️ Afina el espacio y las transiciones entre secciones
- 📱 Revisa el móvil como una composición distinta
- 🔗 Guarda el proyecto en GitHub y conecta Hostinger
- 🚀 Configura la compilación y publica la web
- 💡 El acabado está en las decisiones, no solo en el modelo
🛠️ Prepara el proyecto en Google AI Studio
Dentro de Google AI Studio, abrimos el apartado para crear aplicaciones. El funcionamiento es directo: describimos lo que necesitamos, dejamos que genere una primera versión y vamos solicitando cambios sobre esa base.
Tenemos el chat a un lado y la vista previa al otro. Esto nos permite comprobar si una instrucción se ha traducido en el resultado que buscábamos. No basta con que la herramienta confirme que ha terminado: hay que recorrer la página, pulsar los botones y revisar cómo se comporta.
Desde el engranaje de la parte superior derecha puedes cambiar el modelo. Para este proyecto trabajo con Gemini 4 Argon, disponible en la configuración utilizada con Google AI Pro y también incluido en Ultra. Si en tu cuenta aparece Gemini 3.8 Flash u otro modelo, puedes seguir el mismo planteamiento con el que tengas disponible.
Lo importante del proceso no es depender de un único modelo, sino saber qué pedir y cómo evaluar lo que devuelve. Vamos a separar el trabajo en bloques:
- Una referencia para definir la dirección visual.
- Una imagen principal del producto.
- Una animación de cámara entre dos encuadres.
- Fotografías adicionales para presentar el modelo y sus detalles.
- Una landing continua con navegación interna.
- Una revisión de escritorio y móvil antes de publicar.
Esta separación ayuda a no mezclar decisiones. Primero necesitamos saber qué aspecto tendrá Brava. Después nos ocuparemos de cómo se mueve y de cómo encaja todo dentro de una página.
🎨 Usa una referencia de diseño sin empezar desde cero
Para la base abro Dínamo Sites, mi biblioteca de secciones, referencias y prompts para crear webs. La idea es revisar una composición que tenga algo que nos interese, copiar sus indicaciones y llevarlas al constructor.
En este caso elijo Corsa, una sección con un automóvil, una fotografía protagonista y un título de gran tamaño. No quiero conservar el coche ni construir una web de automoción. Me interesan sus tipografías y la jerarquía del texto.
Es una distinción útil: una referencia puede servir por su composición, aunque el producto no tenga nada que ver con el tuyo. Aquí tenemos una forma de organizar una imagen potente, un mensaje principal y una llamada a la acción.
Abro la sección y copio su prompt. Ese bloque ya reúne las instrucciones de composición, los estilos y los enlaces de referencia. Lo pego en AI Studio para generar una primera base funcional.
No estoy redactando desde cero todas las decisiones de diseño. Estoy utilizando una dirección visual preparada para después adaptarla. Cuando termina la generación, ya podemos comprobar la escala del título, el peso de la fotografía y la relación entre los elementos.
A partir de ahí transformaremos esa composición en Brava. Mantendremos Anton y DM Sans, las tipografías utilizadas en la base, pero cambiaremos el producto, la paleta y la distribución para que la bicicleta tenga su propio protagonismo.
La referencia nos ahorra el arranque en blanco. No sustituye la revisión ni significa que tengamos que conservar cada elemento de la primera propuesta.
🚲 Genera la imagen principal pensando en la web
Ahora pasamos a Flow para preparar el producto. Busco una bicicleta eléctrica de montaña robusta, con un cuadro voluminoso y neumáticos anchos. La referencia me sirve para comunicar esa presencia, pero quiero un diseño nuevo en verde bosque y grafito, con pequeños detalles en lima.
Para generar las imágenes selecciono Nano Banana 2.1 y un formato horizontal de 16:9. Adjunto la referencia y describo tres cosas: la bicicleta, el entorno y el encuadre.
El encuadre importa tanto como el aspecto del producto. La bicicleta tiene que verse completa y quedar hacia la derecha. A la izquierda necesito espacio para colocar el título, el texto de apoyo y el botón.
Si generamos una imagen sin pensar en su uso final, después podemos encontrarnos peleando con el diseño para introducir un título donde no cabe. Aquí hacemos lo contrario: preparamos la fotografía para la composición que vamos a construir.
- La bicicleta debe aparecer completa.
- El producto ocupa principalmente el lado derecho.
- El lado izquierdo queda disponible para el contenido.
- El paisaje aporta profundidad sin esconder la bicicleta.
- La imagen no incluye textos, botones ni elementos de interfaz.
Ese último punto es importante. El título y el botón los construiremos dentro de la web. No queremos que formen parte de la fotografía, porque necesitamos poder colocarlos y adaptarlos al diseño.
Corrige la luz sin cambiar lo que ya funciona
El primer resultado me gusta por la forma de la bicicleta y el paisaje, pero está demasiado oscuro. El verde del cuadro apenas se distingue y las piezas negras se mezclan con el fondo.
No hace falta tirar toda la imagen. Pido conservar la bicicleta y el encuadre, pero cambiar la iluminación por una luz de montaña más clara, como después de la lluvia, con algo de sol atravesando las nubes.
Busco que se aprecien la pintura, el neumático y la roca. Con ese cambio seguimos teniendo niebla y profundidad, pero el producto se entiende mucho mejor.
Esta será nuestra referencia aprobada. A partir de ahora, las nuevas imágenes y la animación deben conservar su diseño y sus colores. Ya no estamos explorando bicicletas diferentes: estamos construyendo los recursos de un mismo producto.
✍️ Apóyate en Gemini para preparar los prompts
Si te cuesta redactar las indicaciones para animar una imagen, puedes utilizar AI Studio como apoyo. Adjunto la bicicleta elegida y le pido, en español, que prepare los prompts en inglés para trabajar en Flow.
La petición reúne los recursos que voy a necesitar: un recorrido de cámara desde un plano general hasta un detalle y dos fotografías sin paisaje, una lateral y otra trasera. También dejo claro que debe mantener el diseño de la bicicleta y no añadir textos.
Después afino la solicitud. Para las fotografías pido fondo blanco puro y la bicicleta completa. Para el vídeo, un acercamiento suave hacia la horquilla y el neumático delantero, con la bicicleta quieta.
La IA nos ayuda a redactar las instrucciones, pero seguimos decidiendo qué tiene que suceder. Antes de llevar esos prompts a Flow conviene comprobar que describen exactamente el movimiento, el fondo y el encuadre que necesitamos.
En particular, reviso estas condiciones:
- Que no cambie el diseño del cuadro.
- Que se mantengan el verde bosque, el grafito y los detalles lima.
- Que las fotografías no corten ruedas ni otras partes importantes.
- Que el movimiento corresponda a la cámara y no a la bicicleta.
- Que no aparezcan textos añadidos sobre el producto.
Es una forma práctica de repartir el trabajo: explicas tu intención con claridad y utilizas Gemini para convertirla en indicaciones más desarrolladas. Si además buscas recursos de prompts profesionales para crear aplicaciones, tienes Primera App como recurso complementario. Para Brava, la clave sigue siendo trabajar con la imagen aprobada y unas restricciones consistentes.
🎬 Crea una animación entre dos fotogramas
Para el vídeo utilizo una imagen inicial y otra final. La primera muestra la bicicleta completa dentro del paisaje. La segunda se acerca a la parte delantera para destacar la horquilla, el cuadro y la textura del neumático.
En Flow selecciono la opción de fotogramas e incorporo ambas referencias. Después describo un acercamiento suave de cámara con un pequeño desplazamiento lateral hasta alcanzar el plano de detalle.
La instrucción central es sencilla: la bicicleta permanece quieta; la cámara es la que se acerca. Además, debe conservar su forma durante toda la toma.
También pido un movimiento continuo y sin cortes. No estamos preparando un montaje con planos independientes. Necesitamos una toma que después podamos recorrer con el desplazamiento de la página, avanzando o retrocediendo por el mismo movimiento.
La configuración utilizada en esta generación fue v3.1 Quality y el resultado dura ocho segundos. En ese momento, la interfaz mostraba un coste de 100 créditos. Tómalo como el dato de esta prueba y revisa lo que indique tu cuenta antes de generar.
Cuando termina, reviso la toma completa. No me quedo solo con un fotograma atractivo. Compruebo que el acercamiento sea coherente, que la bicicleta mantenga su geometría y que no aparezcan cambios extraños entre el inicio y el final.
El destino del archivo condiciona esta revisión. Como la persona podrá detener el recorrido al dejar de desplazarse, cualquier posición del vídeo puede quedar visible. Por eso interesa comprobar toda la secuencia, no únicamente sus extremos.
Cuando tengo la versión que quiero, descargo el archivo para incorporarlo al proyecto. Ya tenemos la imagen principal y el movimiento que dará carácter a la landing.
🧩 Lleva los archivos a AI Studio sin reinterpretar el producto
De vuelta en AI Studio, hago la adaptación en dos pasos. Primero convierto la composición inicial en el diseño de Brava utilizando la fotografía. Después incorporo el recorrido con el vídeo.
Conservo Anton y DM Sans y describo la distribución: una marca discreta arriba, un título grande hacia la izquierda y la bicicleta ocupando la parte derecha. También defino los colores y la frase de apoyo que acompaña al botón.
Hay una indicación que conviene repetir siempre que adjuntemos recursos definitivos: debe utilizar exactamente nuestros archivos, sin redibujarlos ni generar una nueva versión del producto.
No queremos una bicicleta parecida. Queremos la que acabamos de aprobar. Si la herramienta reinterpreta el cuadro o cambia las ruedas, perdemos la continuidad entre portada, vídeo y fotografías.
Al incorporar la animación, la primera propuesta organiza el recorrido en varios capítulos sobre una misma escena. Mientras bajamos, cambian los textos y avanza el acercamiento. La dirección visual empieza a funcionar, pero todavía se siente más como un visor del producto que como una landing completa.
Este es un buen momento para no confundir una interacción llamativa con una página terminada. Tenemos una pieza interesante, pero necesitamos una estructura que presente el modelo, dé espacio al producto y conecte sus detalles.
En lugar de seguir acumulando mensajes sobre la misma escena, preparo nuevas vistas. Así podremos alternar el paisaje con secciones más limpias y construir un recorrido con diferentes ritmos.
📸 Prepara las vistas de producto sobre fondo blanco
En Flow vuelvo a utilizar la bicicleta aprobada como referencia. Primero solicito una fotografía lateral completa sobre blanco. Después preparo una vista trasera de tres cuartos para la sección de detalles.
Las dos imágenes deben conservar el verde, el cuadro robusto y las ruedas. Además, pido margen alrededor del producto. Necesitaremos colocarlo dentro de una sección sin cortar partes importantes ni dejarlo pegado a los bordes.
El fondo blanco tiene una función dentro del diseño. Al colocar estas fotografías sobre una zona clara, busco que el rectángulo de la imagen deje de llamar la atención y que la bicicleta se sienta integrada en la composición.
La fotografía lateral nos permite entender la silueta. La vista trasera de tres cuartos aporta otro ángulo para hablar de las partes. No son dos imágenes intercambiables: cada una tiene una tarea dentro de la página.
Con ambas preparadas, las adjunto a AI Studio y vuelvo a insistir en que utilice esos archivos exactos. A estas alturas ya tenemos una pequeña colección coherente: una escena principal, un vídeo de acercamiento y dos vistas limpias del mismo modelo.
🧭 Convierte las piezas en una landing continua
Ahora sí pido que Brava se convierta en una única landing continua. La portada debe mantenerse arriba, el botón principal tiene que llevar a la sección del modelo y la navegación debe desplazarnos a distintas partes de la misma página.
Defino el orden para que AI Studio no tenga que adivinar la estructura:
- Portada: paisaje de montaña, bicicleta protagonista, título y llamada a la acción.
- Presentación del modelo: vista lateral grande, un poco de texto y bastante espacio alrededor.
- Recorrido animado: vídeo controlado por el desplazamiento de la página.
- Detalles: segunda fotografía y contenido para explorar las partes del producto.
La sección lateral debe actuar como una pausa entre la portada y el vídeo. Nos permite salir del paisaje, entender el modelo y volver después a una experiencia más inmersiva.
Cuando termina, recorro la página completa. Compruebo que las secciones estén conectadas y que el botón no se limite a parecer un botón: tiene que llevar al lugar indicado. Hago lo mismo con los enlaces de navegación.
Comprueba cómo responde el vídeo al desplazamiento
En el tramo animado, bajar hace avanzar la toma y subir la hace retroceder. Cuando dejamos de desplazarnos, el vídeo conserva esa posición.
Ese comportamiento es lo que une el movimiento de cámara con la navegación. No se trata simplemente de colocar un vídeo que se reproduce solo en medio de la landing. El acercamiento responde al recorrido por la página.
Lo pruebo en ambos sentidos. Al bajar deben aparecer los detalles de la parte delantera; al volver hacia arriba, recuperamos el plano más abierto. También compruebo qué ocurre al detenerme entre dos posiciones.
La animación tiene que formar parte de la página, no obligar a la página a convertirse en un reproductor. Por eso era importante desarrollar las secciones que la rodean.
🌫️ Afina el espacio y las transiciones entre secciones
La primera landing continua todavía tiene dos problemas: algunos cambios de fondo resultan demasiado marcados y la bicicleta lateral necesita más aire.
Las uniones se perciben como bandas de degradado. Hay una franja verde oscura entre el paisaje y el fondo claro, y el borde del vídeo sigue siendo reconocible. Aunque cada sección funcione por separado, esas costuras hacen que el conjunto se sienta menos integrado.
En lugar de pedir algo genérico como “hazlo más profesional”, describo el problema y el resultado que busco:
- Dar más espacio alrededor de la bicicleta lateral.
- Convertir esa sección en una pausa clara entre la portada y el vídeo.
- Desvanecer el paisaje directamente hacia el fondo claro.
- Eliminar la franja verde oscura.
- Evitar que se note el borde rectangular del vídeo.
- Mantener las imágenes y el resto del diseño tal como están.
Esta última condición evita abrir otra vez decisiones que ya estaban resueltas. Estamos corrigiendo las uniones y el espaciado, no solicitando un rediseño completo.
Con el ajuste, el producto lateral respira mejor y el paisaje se integra con la siguiente zona. Es un cambio menos espectacular que generar la animación, pero tiene mucho peso en el acabado.
La sensación cinemática no depende únicamente del movimiento. También depende de cómo entramos en una escena, cuánto espacio dejamos antes de la siguiente y si los fondos se conectan sin cortes que distraigan.
📱 Revisa el móvil como una composición distinta
Después paso a la vista móvil. Aquí no basta con comprobar que todo se haya estrechado. Hay que revisar cómo se acumulan las imágenes, el texto y los controles en vertical.
En la sección de detalles, los puntos y las etiquetas terminan encima de la bicicleta. En escritorio pueden tener espacio, pero en una pantalla estrecha tapan el producto.
La petición es concreta: en móvil, quitar los puntos y las etiquetas superpuestas, dejar limpia la fotografía y colocar debajo la lista para explorar las partes.
No estamos eliminando la información, sino cambiando su ubicación para que siga siendo útil. La imagen muestra el producto y la lista permite consultar los detalles sin competir con él.
También solicito suavizar el borde superior de la imagen y del vídeo. Todavía se percibe un corte rectangular al pasar del texto al paisaje, así que vuelvo a señalar ese problema en lugar de darlo por resuelto porque ya lo habíamos ajustado en escritorio.
Después reviso que las ruedas se vean completas en las secciones de producto y que los botones y enlaces sigan siendo cómodos de usar. Una composición puede parecer correcta y, aun así, dejar una parte importante de la fotografía fuera del encuadre.
Para terminar, ajusto un poco la posición del título y del botón en escritorio. También compruebo que la imagen lateral se cargue completa antes de mostrarse.
La revisión va y viene entre tamaños de pantalla. No doy por hecho que una corrección en una vista haya solucionado automáticamente la otra.
🔗 Guarda el proyecto en GitHub y conecta Hostinger
Con la página lista, necesitamos un enlace para compartirla. Para ello paso el proyecto a GitHub y después lo conecto al alojamiento.
Desde la opción de publicación de AI Studio abro la integración con GitHub. Creo un repositorio con un nombre corto, Brava, y lo dejo privado. Así guardo el código en mi cuenta y puedo utilizar ese mismo proyecto para desplegar la web.
Una vez vinculadas las cuentas, envío los cambios y compruebo que AI Studio y GitHub aparezcan sincronizados. Antes de continuar interesa confirmar que el repositorio contiene la versión que acabamos de revisar, no una etapa anterior del diseño.
Después entro en Hostinger. En mi panel aparece Business porque utilizo un plan antiguo; en la oferta mostrada para esta prueba, esa gama pasa a llamarse Unlimited o Ilimitado. Puedes revisar los planes y las condiciones vigentes desde mi enlace de descuento de Hostinger.
Dentro del panel elijo crear un sitio y selecciono la opción de aplicación web de Node.js. Continúo con la configuración manual y utilizo un dominio temporal.
El dominio temporal nos permite obtener una dirección para enseñar el proyecto sin conectar todavía un dominio propio. Para esta fase, en la que queremos compartir una propuesta o una pieza de portafolio, nos sirve para completar el recorrido.
🚀 Configura la compilación y publica la web
Al importar desde GitHub, busco Brava y selecciono el repositorio. Hostinger detecta una configuración para el proyecto y, antes de implementar, reviso que corresponda a sus archivos.
En este caso los valores utilizados son:
- Framework: Vite.
- Rama:
main. - Versión de Node.js: 22.
- Directorio raíz: el directorio del proyecto.
- Comando de compilación:
npm run build. - Carpeta de salida:
dist.
No hace falta cambiar valores que ya están detectados correctamente. Tampoco conviene copiarlos sin revisar: tienen que coincidir con el proyecto que estamos publicando.
Con la configuración lista, pulso implementar y espero a que termine la compilación. Cuando aparece la confirmación, abro la dirección temporal. Brava ya está fuera del constructor.
Haz una última revisión en la dirección publicada
Vuelvo a bajar desde la portada para comprobar la presentación lateral, el vídeo y la sección de detalles. Después regreso hacia arriba para revisar también el recorrido inverso de la animación.
Repito la pasada en móvil: cómo se apilan el texto y las imágenes, cómo se desarrolla el acercamiento dentro del formato vertical y si los controles siguen funcionando como esperamos.
La lista final es sencilla, pero merece hacerse completa:
- La portada mantiene la composición elegida.
- El botón principal lleva a la sección del modelo.
- La navegación conecta las partes de la misma página.
- Las fotografías muestran el producto sin recortes importantes.
- El vídeo avanza, retrocede y se detiene con el desplazamiento.
- Las transiciones no introducen bordes o franjas que distraigan.
- En móvil, las etiquetas no tapan la bicicleta.
Ahora sí tenemos una landing animada y un enlace que podemos compartir.
💡 El acabado está en las decisiones, no solo en el modelo
Brava empieza con una referencia, pero el resultado se construye con decisiones sucesivas: reservar espacio para el título, corregir una iluminación demasiado oscura, mantener el mismo producto y utilizar una toma continua para el recorrido animado.
Después vienen las decisiones menos vistosas, que también cuentan: dar aire a una fotografía, eliminar una franja de degradado, mover una lista en móvil y comprobar la web una vez publicada.
Crear webs con IA no consiste únicamente en generar más, sino en reconocer qué funciona, conservarlo y corregir lo que todavía estorba. Google AI Studio, Flow, GitHub y Hostinger cubren distintas partes del proceso. La dirección del conjunto sigue estando en tus manos.
Si quieres seguir practicando este tipo de proyectos conmigo, puedes unirte a mi comunidad de creación de aplicaciones con IA. El siguiente paso es aplicar este mismo proceso a una idea propia y llevarla hasta una dirección publicada, no dejarla a medias dentro del constructor.
Aviso: este artículo puede incluir enlaces promocionales. Si realizas una compra, puedo recibir una comisión sin costo adicional para ti.
