Una web con el mar en movimiento, una mano que sale del agua para saludar, un globo interactivo y unas olas en 3D puede parecer un proyecto enorme. Pero cuando separas bien las decisiones, el proceso se vuelve mucho más manejable: primero defines una dirección visual, después construyes una buena portada y solo entonces añades movimiento y desarrollas el resto.
Gemini 4 me está gustando mucho para diseñar webs en Antigravity. Aun así, hay algo que tengo clarísimo: ninguna de mis webs sale de un único prompt, ni espero que la IA lo haga todo. La IA propone, genera recursos y escribe código. Yo voy tomando decisiones, descartando lo que sobra y corrigiendo lo que no termina de funcionar.
Para este proyecto voy a crear una landing page relacionada con los nómadas digitales. La idea combina trabajo remoto, destinos costeros y una forma de organizarse más conectada con el lugar donde estás. Partimos de una referencia, preparamos imágenes con IA, animamos el fondo en Google Flow, incorporamos interacciones con Three.js y terminamos publicando en Hostinger.
Lo interesante no es solo el resultado. También están los intentos que salen regular, las instrucciones que se interpretan de otra manera y los pequeños ajustes que convierten una primera propuesta en una página mucho más cuidada.
Tabla de contenido
- 🧭 Primero busco una dirección visual, no un prompt mágico
- 🎨 Preparo la imagen del hero con Gemini
- 🏗️ Uso Dínamo Sites para construir una buena base de diseño
- 🌊 Animo el fondo en Google Flow y corrijo lo que no funciona
- 🎬 Integro el vídeo en Antigravity sin rehacer la portada
- 🌐 Completo la web con animaciones e interacciones en Three.js
- 🔍 Pulo el diseño con correcciones concretas
- 📱 Reviso la versión móvil antes de publicar
- 🚀 Publico la landing page en Hostinger
- 📚 Prompts y recursos para crear tu propia versión
🧭 Primero busco una dirección visual, no un prompt mágico
Antes de abrir el chat y pedir una web espectacular, busco alguna referencia que me ayude a decidir hacia dónde quiero ir. Empezar con la pantalla en blanco y escribir instrucciones al azar suele dejar demasiadas decisiones abiertas.
En este caso comienzo en Pinterest buscando conceptos de cabañas junto a un lago. No tengo todavía una idea cerrada. Voy abriendo imágenes, aparecen otras relacionadas y la búsqueda cambia de rumbo: de las cabañas paso a piscinas frente al mar, palmeras y paisajes de costa.
Entonces aparece una foto de una mano saliendo del agua y haciendo el saludo surfero, el gesto shaka. Ahí encuentro algo que me interesa de verdad.
Vivo en Brasil y trabajo desde aquí, así que esa mezcla de playa y trabajo remoto me resulta muy cercana. Pero no elijo la imagen únicamente por esa conexión. También veo una composición que puede funcionar muy bien como primera sección de una web:
- El agua turquesa aporta una identidad de color clara.
- El cielo deja una zona donde puede respirar el título.
- La mano ofrece un punto de atención reconocible.
- El paisaje transmite una sensación que encaja con viajar y trabajar desde distintos lugares.
Una referencia útil no solo tiene que gustarte: tiene que ayudarte a resolver el diseño. Aquí ya puedo imaginar dónde irá el texto y qué ambiente tendrá la página.
La foto tiene dos problemas para usarla directamente. Es vertical y lleva una palabra escrita sobre la mano. La descargo para preparar una versión horizontal y limpia con IA.
🎨 Preparo la imagen del hero con Gemini
Con el proyecto abierto en Antigravity y Gemini 4 seleccionado, adjunto la referencia. La petición es sencilla: crear una versión en formato 16:9 para utilizarla como fondo de una sección principal, eliminar el texto y mantener una calidad visual cinematográfica.
No necesito explicar todavía toda la web. Estoy resolviendo una tarea concreta: convertir una referencia que me gusta en un recurso que pueda utilizar en el diseño.
Antigravity abre un subagente dedicado a generar la imagen. El resultado conserva la mano en el centro, elimina la palabra y amplía el paisaje hacia los lados. Incluso añade una isla a la derecha que se integra bastante bien con la escena.
Me gusta cómo quedan el agua y el cielo, y la composición ya funciona en horizontal. Con eso puedo avanzar. No hace falta seguir generando variaciones cuando ya tengo una base que resuelve lo que necesito.
En este punto todavía no añado animación. Primero quiero comprobar que la imagen funciona detrás de los textos. Si la composición no convence en una versión estática, ponerla en movimiento no va a solucionar el problema de fondo.
Esta separación me ayuda a evaluar cada decisión sin mezclarlo todo: una cosa es la calidad de la imagen, otra la estructura de la portada y otra el comportamiento del vídeo.
🏗️ Uso Dínamo Sites para construir una buena base de diseño
Ya tengo el recurso visual, pero ahora necesito una estructura que lo acompañe. Para eso entro en Dínamo Sites, mi biblioteca de diseños web con secciones en movimiento, prompts y recursos que se pueden utilizar como punto de partida.
Elijo una propuesta con paisaje costero. Me interesa especialmente la combinación de tipografías, la navegación superior con forma de cápsula y la forma en que el texto se distribuye sobre el fondo.
La base original está pensada para una herramienta de organización de equipos. No pasa nada: lo que me sirve es su composición. Con nuestra imagen del mar podemos llevarla hacia una propuesta para nómadas digitales sin tener que reinventar cada detalle visual.
Primero adapto el contenido y después cambio el fondo
Copio el prompt de la biblioteca y, antes de pegarlo en Antigravity, añado las modificaciones que quiero para este proyecto. Le pido que mantenga el diseño y adapte los textos a la vida nómada. También le indico expresamente que todavía no utilice la imagen que acabamos de generar.
Puede parecer un paso innecesario, pero prefiero hacerlo así. Primero quiero comprobar que la sección funciona con el fondo original y el nuevo contenido. Después sustituiremos la imagen.
El bloque de instrucciones de la base ya incluye las especificaciones de diseño, las tipografías y los enlaces a los recursos originales. Mi intervención se concentra en definir qué debe cambiar y qué debe permanecer.
Gemini adapta la navegación a destinos, rutinas, comunidad y precios. También propone un titular que conecta el trabajo con el movimiento de las olas, manteniendo esa mezcla de letra normal y cursiva que le da tanta personalidad a la portada.
Le pido que arranque el proyecto. El agente inicia el servidor local y abre la página en el navegador. Ahí puedo evaluar una composición real, no solo una descripción de lo que supuestamente ha construido.
Ahora sí, integro nuestra imagen
Con la estructura aprobada, regreso al chat y pido que sustituya el fondo por la imagen preparada. Recargo el navegador y aparece la mano en el mar detrás del título.
Ya puedo comprobar la relación entre el fondo, la tipografía y el botón principal. La página empieza a tener una identidad propia, aunque todavía estemos trabajando solo con la primera sección.
Ir por capas facilita mucho las correcciones. Si cambio el texto, el fondo, la estructura y el movimiento al mismo tiempo, después cuesta más identificar qué decisión ha mejorado o empeorado el resultado.
🌊 Animo el fondo en Google Flow y corrijo lo que no funciona
Con la portada encaminada, toca darle vida al fondo. Mi primer intento es hacerlo desde la herramienta de vídeo del propio entorno. Pido animar la imagen en un bucle de entre cuatro y seis segundos.
El agente revisa la configuración y avisa de que falta la clave de API en esa carpeta. Podría detenerme a configurarla, pero prefiero continuar con otra vía: generar el vídeo directamente en Google Flow.
Como Gemini ya conoce la imagen y el contexto, le pido únicamente un prompt breve para animarla allí. La propuesta incluye una cámara fija, movimiento suave del agua turquesa y reflejos del sol.
Ese criterio es importante: un fondo animado tiene que aportar vida sin pelearse con el contenido. No quiero una cámara recorriendo el paisaje mientras intento leer un título. La escena puede moverse, pero la composición debe seguir siendo estable.
Primer intento: el agua funciona, la mano no tanto
Copio la imagen, la llevo a Flow y utilizo las instrucciones en español. Configuro el formato horizontal y una duración de seis segundos.
El primer resultado mueve el agua con bastante suavidad, pero la mano queda prácticamente congelada. Para que el saludo surfero se sienta natural falta ese pequeño movimiento de muñeca tan característico.
Vuelvo a subir la referencia y pido otra versión, aclarando que debe incorporar el movimiento del shaka. La segunda propuesta mantiene el gesto y mueve algo más los dedos, pero al revisar el resultado se me ocurre una idea mejor.
En lugar de dejar el brazo fijo desde el primer segundo, la escena podría comenzar solo con el agua. Después saldría el brazo, haría el saludo y volvería a sumergirse. Así tendríamos momentos de acción y otros con el mar despejado.
Segundo problema: pierdo el paisaje de referencia
Escribo la nueva secuencia directamente en Flow: comenzar con el agua tranquila, hacer que el brazo emerja, salude con un gesto rápido y se sumerja de nuevo.
Pero esta vez envío solo el texto, sin adjuntar la imagen. El resultado es un lago con montañas en un día nublado. La acción puede tener relación con lo que he pedido, pero nuestra playa ha desaparecido.
La corrección es clara: vuelvo a cargar la imagen y especifico que debe utilizarla como referencia. No cambio toda la idea ni añado un montón de instrucciones nuevas. Recupero el contexto visual que faltaba.
Ahora sí conserva el paisaje. El brazo sale del agua, hace el saludo, salpica de una forma muy realista y vuelve a desaparecer. Durante unos instantes queda solo el mar.
Esta versión me convence mucho más para la web. Tiene una pequeña secuencia que se entiende sin necesitar explicación y mantiene la escena que habíamos elegido desde el principio.
Descargo el vídeo en 720p y regreso a Antigravity. El recorrido deja dos aprendizajes muy prácticos: describir mejor el movimiento cuando algo parece rígido y volver a adjuntar la referencia cuando el resultado pierde la identidad visual.
🎬 Integro el vídeo en Antigravity sin rehacer la portada
Ahora toca llevar ese archivo al proyecto. Aquí hay una comodidad que me gusta mucho: no necesito buscarlo manualmente en Finder y copiarlo a la carpeta correspondiente.
Le indico al agente que tome el último vídeo descargado de la carpeta Descargas. En este entorno, Antigravity localiza el MP4, lo copia al proyecto y lo conecta en el código como un fondo que se reproduce en bucle.
Recargo la página y la diferencia se nota enseguida. El agua se mueve, aparece la mano saludando y después vuelve a quedar el mar despejado detrás del título.
La estructura es la misma que ya habíamos validado. No he pedido una portada nueva. He sustituido un recurso estático por su versión animada, manteniendo la composición y los textos.
Eso hace que la evaluación sea mucho más sencilla. Puedo centrarme en si el movimiento acompaña al diseño, si el gesto funciona y si la escena sigue dejando protagonismo al mensaje.
La animación no tiene que cargar con todo el diseño. Aquí funciona porque ya había una buena base: una imagen con intención, una jerarquía tipográfica clara y una navegación que no llena la pantalla de elementos.
🌐 Completo la web con animaciones e interacciones en Three.js
Hasta ahora he guiado bastante cada paso. Pero la primera sección ya define las tipografías, los colores, la temática y el tono. Con ese contexto, puedo darle más libertad a Gemini para desarrollar el resto.
Para esta fase cambio el nivel de razonamiento de medio a alto. Después envío una petición más amplia, pero apoyada en lo que ya existe. No estoy pidiendo creatividad desde cero, sino una continuación coherente.
Las instrucciones que utilizo se concentran en estos puntos:
- Continuar la temática y el estilo de la portada.
- Incorporar animaciones 3D y animar los textos.
- Utilizar mensajes breves.
- Hacer que cada elemento tenga una intención.
- Crear recursos y eliminar sus fondos cuando ayude a integrarlos.
- Cuidar las conexiones entre secciones, evitando cortes bruscos.
- Prestar atención a los detalles y mantener un diseño de calidad.
Antigravity reparte parte del trabajo entre tres subagentes en paralelo. Uno genera la imagen de una terraza, otro una brújula y otro una pieza de vidrio marino. Después utiliza un script de Python para quitar el fondo de la brújula y del vidrio.
Todo eso sucede dentro del flujo de trabajo, sin que tenga que abrir otra aplicación para recortar los objetos. Cuando termina, reviso la página completa en el navegador.
Destinos con un globo interactivo
La primera propuesta introduce una brújula flotante como transición y después presenta cuatro destinos costeros. Las ciudades aparecen a la izquierda y un globo construido con Three.js queda a la derecha.
Al seleccionar una ciudad, el globo gira hacia su coordenada y la señala. Entre los destinos está Florianópolis, aquí en Brasil.
Lo que me gusta de esta interacción es que conecta directamente con el contenido. Estamos hablando de trabajar desde distintos lugares, así que el globo tiene una función dentro de la propuesta, más allá de ser un objeto en movimiento.
Rutinas representadas con una malla de olas
La siguiente sección plantea una forma de organizar el trabajo inspirada en las mareas. Aparece una malla de olas hecha con Three.js y el pequeño vidrio marino que el agente había recortado.
Los botones permiten cambiar entre distintos estados. Al pulsarlos, se modifican el color y la velocidad de las olas en tiempo real. La sección conserva la temática marina, pero introduce otra clase de movimiento, diferente al vídeo de la portada.
Una terraza, los planes y el cierre
Después aparece una sección que traslada la idea del trabajo remoto a una terraza frente al mar. La imagen mantiene la misma atmósfera y ayuda a desarrollar el concepto sin llenar la página de texto.
Más abajo están los planes Solitario y Archipiélago, y finalmente una despedida relacionada con volver al agua. Ya tenemos un recorrido completo: una apertura visual, destinos, rutinas, un espacio de trabajo, precios y cierre.
La estructura general me gusta. Mantiene los tonos claros y las mismas tipografías a lo largo de la página. Pero una buena primera propuesta no significa que todo deba quedarse tal cual.
🔍 Pulo el diseño con correcciones concretas
Al recorrer la página encuentro tres detalles que quiero cambiar: la brújula me parece innecesaria, la conexión entre el vídeo y la sección del globo podría ser más suave y el cierre necesita respirar mejor.
Al principio pienso en eliminar todos los objetos recortados. Después lo reconsidero: el vidrio marino funciona bien junto a las olas. El problema no es la técnica de recortar objetos, sino la utilidad de cada elemento dentro de la composición.
No todo lo que la IA ha generado merece quedarse. Haber invertido una generación en una brújula no convierte esa brújula en una pieza imprescindible.
Quitar lo que sobra y conectar mejor las secciones
Envío las tres correcciones juntas: retirar la brújula, dar más aire a la última sección y fusionar mejor la primera con la segunda.
La nueva versión elimina el objeto y hace que el borde del mar se desvanezca mediante una especie de neblina clara hacia la zona de destinos. La página se siente más continua.
Son detalles que cambian mucho la percepción del conjunto. Antes había dos bloques colocados uno después del otro. Ahora la transición hace que formen parte del mismo recorrido.
Más espacio no siempre significa espacio en el lugar correcto
El ajuste del cierre, en cambio, no sale como esperaba. Pido más aire y el agente añade un hueco enorme encima del título. Pero el botón sigue demasiado cerca del pie de página.
La instrucción era ambigua. Yo tenía claro qué zona me molestaba, pero no lo había descrito con precisión.
Entonces aclaro que necesito reducir el espacio superior y aumentar el inferior, porque el texto y el botón están demasiado pegados al pie. Después de esa corrección, la distribución funciona mucho mejor.
Este es un buen ejemplo de cómo dar indicaciones útiles: señalar el elemento, explicar el problema y especificar dónde debe producirse el cambio. Pedir que algo se vea más pulido puede orientar, pero no siempre basta para resolver un ajuste concreto.
Corrijo el contraste del texto final
Una vez arreglados los márgenes, detecto otro problema. El título del cierre utiliza blanco y azul claro sobre un degradado, y pierde fuerza.
Pido que el texto sea oscuro. La nueva versión se lee mucho mejor y conserva un acento verde que conecta con los títulos anteriores.
No hay una transformación gigantesca, pero sí una mejora clara. El proceso consiste precisamente en eso: revisar lo que propone Gemini y darle forma hasta que las decisiones encajen entre sí.
📱 Reviso la versión móvil antes de publicar
La página puede verse muy bien en escritorio y seguir teniendo problemas en una pantalla estrecha. Antes de publicarla reduzco la ventana del navegador hasta un formato vertical y recorro todas las secciones.
La portada mantiene la mano centrada. Las olas funcionan y tanto la terraza como los precios se reorganizan en una sola columna. Pero la sección de ciudades tiene un fallo: las tarjetas son demasiado anchas y se recortan por la derecha.
Se lo indico directamente al agente, identificando la sección y el comportamiento: en móvil, el bloque de ciudades se sale del ancho disponible.
Después del ajuste vuelvo a comprobarlo con la ventana estrecha. Ahora las cuatro ciudades y el globo permanecen dentro de la pantalla.
La revisión móvil no consiste en abrir la portada y dar el trabajo por terminado. Hay que recorrer la página, porque cada sección tiene una estructura distinta y puede reaccionar de otra manera al cambio de ancho.
En este proyecto reviso especialmente estos aspectos:
- Que el elemento principal del fondo siga bien situado.
- Que los títulos y botones mantengan una composición legible.
- Que las tarjetas no sobresalgan horizontalmente.
- Que el globo y las olas permanezcan dentro de su sección.
- Que las imágenes y los planes se adapten al formato vertical.
No doy por corregido un problema solo porque el agente diga que lo ha solucionado. Vuelvo al navegador y lo compruebo en el mismo formato donde apareció el fallo.
🚀 Publico la landing page en Hostinger
Con los ajustes visuales y móviles terminados, toca sacar el proyecto del entorno local. Quiero una dirección que pueda compartir con un cliente o añadir a mi portafolio.
Para publicarlo utilizo Hostinger con mi enlace de descuento. En este caso sigo el flujo de subida manual de archivos para una web PHP/HTML.
- Entro en el apartado de sitios web del panel.
- Selecciono la opción para crear un sitio web.
- Elijo el tipo de sitio PHP/HTML.
- Accedo a la configuración manual.
- Utilizo un dominio temporal.
- Selecciono la opción de subir los archivos de la web.
Antes de cargar nada, localizo la carpeta del proyecto en Finder y la comprimo. Así reúno en un único ZIP el HTML y los recursos utilizados, incluidas las imágenes y el vídeo.
Subo el archivo a Hostinger y continúo con la creación del sitio. Cuando termina el procesamiento, abro la vista previa y compruebo la página desde la dirección publicada.
El mar sigue en movimiento, la mano sale para saludar, el globo responde y las olas de Three.js funcionan. Ya no es únicamente una página ejecutándose en mi ordenador: tengo un enlace que puedo copiar y compartir.
Ese último repaso es importante porque cierra el recorrido completo. No me quedo con una captura bonita ni con una propuesta a medio terminar. El proyecto está publicado y puedo recorrerlo en su ubicación final.
📚 Prompts y recursos para crear tu propia versión
Si quieres repetir el proceso sin reconstruir todas las instrucciones desde cero, tienes los pasos y prompts adaptados. Te sirven como guía para entender el orden de las tareas y llevarlo a otra temática.
En mi comunidad de creación con IA encontrarás el código completo y los recursos de esta web para revisarlos y construir tus propias versiones.
También tienes Primera App, con prompts profesionales para crear aplicaciones. Es un recurso adicional si quieres continuar trabajando con instrucciones estructuradas en otros proyectos.
Y, si te interesa comparar este proceso con mis exploraciones anteriores del modelo, puedes consultar una de mis pruebas anteriores de Gemini 4 y otra prueba de Gemini 4.
Más allá de los recursos, lo que me interesa que te lleves es la forma de trabajar. Primero encuentro una dirección, después valido la composición, añado movimiento, desarrollo el resto y corrijo los detalles. No intento resolver toda la web en una sola conversación inicial.
La IA ayuda muchísimo, pero el criterio sigue formando parte del trabajo. Decidir que la cámara debe quedarse quieta, que la brújula sobra, que falta espacio debajo del botón o que unas tarjetas se cortan en móvil es lo que va dando forma al resultado.
Al final tenemos una web animada con identidad, interacciones y una dirección lista para compartir. Y, sobre todo, un proceso que se puede repetir: no para hacer siempre la misma página, sino para construir la que tengas en mente.
Aviso: este artículo puede incluir enlaces promocionales. Si realizas una compra, puedo recibir una comisión sin costo adicional para ti.
