Crear una web con inteligencia artificial no significa escribir un prompt, aceptar lo primero que aparece y entregárselo al cliente. Yo hago este trabajo todos los días y sigo queriendo decidir cómo se presenta el negocio, qué tiene que entender una persona al entrar y qué puede hacer después.
Para este ejemplo preparo Clara Agua, una web de limpieza y mantenimiento de piscinas. Creo la imagen de portada y su animación con Google Flow, construyo la página con Google Antigravity, añado un formulario que prepara una solicitud para compartir por WhatsApp y publico los archivos en Hostinger.
La parte importante no es solamente conseguir una portada bonita. Es conectar las decisiones: una imagen con espacio para el titular, un movimiento que no distraiga, unos servicios fáciles de distinguir y un botón que lleve a una acción concreta.
Tampoco uso el modelo de Gemini más avanzado para todo. Cuando haces webs con frecuencia, recurrir siempre a los modelos más potentes puede encarecer mucho el proceso. Aquí utilizo un modelo disponible en el plan gratuito de Antigravity y aprovecho los créditos diarios de Flow para probar las generaciones. Prefiero dirigir bien el trabajo antes que intentar resolverlo todo con un modelo más caro.
Tabla de contenido
- 🎯 Primero decido qué necesita entender el cliente
- 🖼️ Creo la foto de portada pensando en el texto
- 🌊 Animo la imagen sin convertir el fondo en protagonista
- 🛠️ Le doy a Antigravity instrucciones que pueda comprobar
- 🎨 Ajusto la portada en lugar de aceptar la primera versión
- 📝 Convierto el botón de presupuesto en una herramienta útil
- 💬 Resuelvo dudas antes de pedir los datos
- ✅ Pruebo el formulario con un caso concreto
- 📸 Genero fotos de apoyo con una función distinta
- 📱 Integro las imágenes y defino el orden en móvil
- 📦 Preparo el ZIP y publico la web en Hostinger
- 🔍 Comparo otra portada y reviso el recorrido completo
- 🚀 Recursos para aplicar este proceso a otros proyectos
🎯 Primero decido qué necesita entender el cliente
Parte de vender páginas web consiste en escuchar. Hay clientes que prefieren referencias tradicionales y otros que buscan algo más cinematográfico. Ninguna de esas opciones es automáticamente mejor: depende del negocio y de lo que tenga que comunicar.
Para un servicio local de piscinas quiero que la propuesta se entienda rápido. La persona debe reconocer el servicio, encontrar información que le ayude a situar su necesidad y poder preparar una solicitud de presupuesto sin complicarse.
Eso me da una dirección bastante clara para organizar la página:
- Una portada con un titular directo y una llamada a la acción principal.
- Servicios que expliquen las diferencias entre los tipos de visita.
- Un bloque que muestre cómo se trabaja.
- Información de cobertura y disponibilidad.
- Preguntas frecuentes antes de solicitar presupuesto.
- Un formulario que transforme los datos en un mensaje útil.
Como referencia visual elijo Cause, una sección de mi biblioteca Dínamo Sites. Me interesa su título grande y el menú superior sencillo. No necesito trasladar literalmente toda la referencia. La uso para fijar una jerarquía y una composición sobre las que tomar mis propias decisiones.
Antes de pedir código ya sé qué quiero destacar. Eso evita que la primera propuesta de la IA termine definiendo el proyecto por mí.
🖼️ Creo la foto de portada pensando en el texto
En Google Flow preparo una imagen horizontal con Nano Banana y solicito un solo resultado. La escena es una piscina residencial vista desde el borde, con agua turquesa y luz suave de mañana. Pero la parte decisiva de la instrucción no es el estilo: es dónde coloco cada elemento.
El técnico queda a la derecha. La zona superior central debe mantenerse despejada para poder colocar un titular oscuro. La pértiga atraviesa parte de la piscina y permite entender que la persona está limpiando el agua.
Si pusiera al técnico en el centro, después tendría que elegir entre taparlo con el título o mover todo el contenido. Con este encuadre puedo conservar las dos cosas: una actividad reconocible y una zona útil para la información principal.
La imagen de una portada no se diseña aislada del texto que va encima. Puede ser una fotografía atractiva y, aun así, funcionar mal como fondo si todos sus detalles importantes ocupan el mismo lugar que el titular y el botón.
También pienso desde el principio en reutilizarla. Esta misma foto será el punto de partida de la animación y la imagen fija de respaldo de la web. Así mantengo la composición tanto si se reproduce el vídeo como si solo aparece la fotografía.
No estoy generando una ilustración para llenar un espacio vacío. Estoy preparando una pieza que tiene un trabajo concreto dentro de la página. Esa diferencia cambia lo que le pido a Flow y lo que reviso al recibir el resultado.
🌊 Animo la imagen sin convertir el fondo en protagonista
Con la foto elegida paso a la generación de vídeo mediante fotogramas. Utilizo una opción Flash y configuro un clip horizontal de proporción 16:9, con 720 píxeles de alto, seis segundos de duración y un solo resultado.
Selecciono la misma fotografía como fotograma inicial y final. Eso le da al modelo un punto desde el que empezar y otro al que regresar. Ayuda a enlazar el final con el principio, aunque después hay que comprobar cómo queda la repetición.
La instrucción de movimiento es contenida:
- Mantener fija la cámara.
- Conservar la perspectiva y la iluminación de la fotografía.
- Mover lentamente la pértiga hacia delante y hacia atrás.
- Añadir pequeñas ondulaciones en el agua.
No necesito una cámara que recorra la piscina ni cambios de plano. El vídeo va detrás de un texto inmóvil. Si todo se mueve demasiado, la portada pierde estabilidad y el mensaje deja de tener prioridad.
Al revisar el clip me fijo especialmente en el brazo del técnico, el desplazamiento de la red y los reflejos del agua cuando vuelve a empezar. Un movimiento puede parecer correcto durante unos segundos y resultar extraño justo en la unión del bucle.
Descargo el original en 720 y guardo también la foto fija. En la carpeta del proyecto reúno los recursos dentro de assets. Cuando se los paso a Antigravity, indico el nombre y la ruta de cada archivo para que no tenga que adivinar qué material debe utilizar.
🛠️ Le doy a Antigravity instrucciones que pueda comprobar
El primer encargo a Antigravity es construir una página completa en español con HTML y CSS, utilizando JavaScript donde sea necesario. La entrada del sitio debe ser index.html.
No me quedo en una petición genérica de “haz una web para piscinas”. Le doy la estructura, las tipografías, el titular exacto, el texto del botón para solicitar presupuesto y las secciones que tiene que construir.
También explico cómo debe usar los archivos. La fotografía funciona como poster, es decir, la imagen que aparece mientras carga el vídeo. Además, debe servir como respaldo si el navegador bloquea la reproducción o si la persona tiene activada la preferencia de reducir movimiento.
Para el vídeo solicito que empiece sin sonido, se repita y se reproduzca dentro de la propia página. Esto último importa especialmente en el teléfono: quiero que el fondo conviva con el titular y el botón, no que interrumpa el recorrido.
“Responsive” no es una especificación suficiente
Añado tres requisitos que después puedo revisar:
- Contraste: los textos y controles tienen que distinguirse del fondo.
- Foco de teclado: debe quedar claro qué elemento está seleccionado al navegar sin ratón.
- Sin desplazamiento lateral: el contenido no debe desbordarse horizontalmente en móvil.
Si solo digo que quiero una página adaptable, tendré que decidir después qué significa que funcione bien. Prefiero expresar desde el principio algunas de las condiciones que me importan.
Eso no elimina la revisión. Lo que hace es darme una base para comprobar el resultado y corregirlo con intención. La IA puede construir una primera versión, pero sigue siendo mi responsabilidad decidir si esa versión representa bien el servicio.
Para seguir el mismo proceso tienes disponibles los prompts utilizados en el tutorial. Lo útil es entender qué resuelve cada uno y adaptar las instrucciones al proyecto.
🎨 Ajusto la portada en lugar de aceptar la primera versión
La primera propuesta ya tiene la estructura, pero el técnico queda demasiado disimulado. Cuesta distinguir qué está haciendo. Por eso reduzco el velo blanco, quito una etiqueta y dejo una sola llamada a la acción en la portada.
El cambio permite reconocer mejor el movimiento sin perder la lectura del titular. No se trata de eliminar toda protección del texto, sino de encontrar un equilibrio entre legibilidad y presencia de la imagen.
Después reviso la posición del conjunto formado por título, párrafo y botón. Primero me parece que está demasiado alto y pido bajarlo como un solo bloque. Al hacerlo, el párrafo queda sobre las plantas y pierde claridad, así que vuelvo a subir el conjunto hasta situarlo sobre una zona más limpia.
Este ajuste es una buena muestra de cómo trabajo con IA: doy una instrucción, compruebo lo que provoca y corrijo. No considero una orden acertada solo porque la herramienta la haya ejecutado bien. También tiene que mejorar la página.
El botón principal necesita otro cambio. Su verde se parece demasiado al de la navegación, así que pido un tono más vivo, relacionado con el agua, manteniendo el texto fácil de leer. También retiro las etiquetas visuales que sobran en portada y servicios.
Son cambios pequeños, pero cada uno tiene un motivo: aclarar la acción principal, mejorar la lectura o dejar que el servicio se reconozca mejor.
📝 Convierto el botón de presupuesto en una herramienta útil
Una llamada a la acción no termina en el texto del botón. Si pone “Solicitar presupuesto”, quiero que lleve a algo concreto. En este caso, a un formulario que ayuda a preparar la información antes de compartirla.
Le pido a Antigravity cuatro campos:
- Zona: dónde se encuentra la piscina.
- Tipo de servicio: qué clase de trabajo se necesita.
- Tamaño aproximado: una referencia inicial sobre la piscina.
- Detalles opcionales: información adicional sobre el estado o la necesidad.
Con esos datos se construye un mensaje visible. La persona puede leerlo antes de copiarlo o compartirlo. No quiero un botón que haga algo poco claro, sino una pequeña herramienta que muestre el resultado de lo que se está preparando.
Copiar debe significar copiar
Pido que el botón explique que copia el mensaje y que aparezca una confirmación cuando la copia se realiza. Si la copia automática falla, debe existir una forma de seleccionar el texto manualmente.
Esto evita confundir una acción local con un envío. Copiar un mensaje no significa que el negocio haya recibido una solicitud. La interfaz tiene que dejar clara esa diferencia.
WhatsApp abre el texto preparado
Después añado un botón para compartir por WhatsApp. Debe abrir el mismo mensaje y permitir elegir a quién enviarlo. En este ejemplo, esa es la función que estoy construyendo y comprobando.
También pido retirar promesas de respuesta y certificaciones que no puedo respaldar. Una página generada puede sonar muy convincente y añadir afirmaciones que nadie ha confirmado. Prefiero una explicación sencilla y cierta a un texto comercial lleno de garantías inventadas.
La solicitud debe quedar preparada, pero la web no debe presentar como realizado un envío que todavía depende de la persona.
💬 Resuelvo dudas antes de pedir los datos
Antes del formulario incorporo tres preguntas frecuentes: qué incluye una visita, cómo preparar la piscina y qué información conviene tener a mano.
La posición es intencionada. Las respuestas ayudan a llegar al formulario con algo concreto que contar. También permiten explicar para qué sirven las medidas aproximadas o por qué puede ser útil indicar si la piscina utiliza cloro o sal.
No quiero que la persona tenga que interpretar por su cuenta qué datos interesan. La página puede acompañar esa preparación sin convertir el formulario en un cuestionario interminable.
Al mismo tiempo simplifico los textos de los tres servicios. Pido que expliquen qué se hace en cada visita y que permitan distinguir entre:
- Una limpieza puntual.
- Una visita de mantenimiento.
- Un tratamiento para un problema del agua.
Los nombres ayudan, pero no bastan si las descripciones dicen prácticamente lo mismo. La diferencia tiene que entenderse al leer el contenido, no solo al comparar los títulos.
Para una web de servicios, esta claridad forma parte del diseño. Una composición ordenada sirve de poco si la persona no sabe qué opción se parece a lo que necesita.
✅ Pruebo el formulario con un caso concreto
Vuelvo al navegador y pulso el botón de la portada. Primero compruebo algo básico: que llegue directamente al bloque de presupuesto.
Después relleno un caso de prueba. Escribo un barrio de ejemplo, selecciono tratamiento del agua, elijo una piscina pequeña y añado en los detalles que el agua está turbia.
Reviso el mensaje generado para confirmar que recoge la zona, el servicio, el tamaño y la observación que acabo de introducir. No me basta con que aparezca un bloque de texto: tiene que corresponder a las elecciones del formulario.
Al pulsar “Compartir por WhatsApp” se abre la página con ese mismo contenido y las opciones para continuar en la aplicación o en la versión web.
Hasta aquí puedo comprobar que la solicitud se abre preparada y contiene los datos correctos. No necesito completar un envío real para validar ese paso, ni voy a afirmar que el negocio ya ha recibido el mensaje.
La prueba tiene un alcance claro: el botón lleva al lugar esperado, los datos forman el mensaje y WhatsApp recibe ese texto para compartirlo.
📸 Genero fotos de apoyo con una función distinta
La portada ya presenta el servicio. Para los bloques interiores necesito imágenes que expliquen detalles del trabajo, no más versiones de la misma escena general.
Regreso a Flow y utilizo la fotografía original como referencia de estilo. Quiero conservar la luz suave, el agua turquesa y la uniformidad del técnico. Así las imágenes pertenecen al mismo conjunto visual.
Una foto horizontal para hablar del agua
Para servicios elijo proporción 16:9 y un solo resultado. Pido un primer plano de una mano con un vial transparente sobre el agua.
El encuadre horizontal deja espacio alrededor de la mano y permite reconocer la comprobación del agua. Al integrarlo, ajusto el título del bloque para que empiece por esa idea. La imagen y el texto explican lo mismo desde dos lugares diferentes.
Una foto vertical para mostrar el proceso
Para el bloque de proceso cambio a proporción 3:4. Solicito al mismo técnico agachado junto al borde, con las manos visibles y una luz lateral suave.
El resultado lo muestra levantando la cesta del skimmer. La orientación vertical permite incluir al técnico y la tarea en una sola imagen, conservando la relación entre su cara, sus manos y el nivel del agua.
La proporción la decido antes de generar. No es un ajuste menor que dejo para el final: determina cuánto espacio tengo para mostrar la acción. Descargo ambas fotos en su tamaño original y las mantengo separadas del fondo animado, porque cumplen funciones distintas dentro del sitio.
📱 Integro las imágenes y defino el orden en móvil
De vuelta en Antigravity, indico qué archivo descargado debe copiar a assets y en qué bloque colocarlo. Para la foto vertical doy instrucciones diferentes según el ancho de pantalla.
En escritorio quiero la imagen a la derecha de los pasos. Así puedo ver la escena mientras leo la secuencia. En móvil prefiero colocarla debajo del título y antes de los pasos, dejando después todo el ancho disponible para cada explicación.
Adaptar una web no consiste únicamente en estrechar las columnas. También hay que decidir en qué orden se entiende mejor la información cuando los elementos dejan de estar uno al lado del otro.
Reviso además el texto alternativo. La imagen muestra una cesta junto al borde de la piscina, así que pido una descripción que corresponda a eso: un técnico revisando la cesta del skimmer junto a la piscina.
No me sirve una descripción genérica si puedo identificar la tarea. Tampoco quiero que el texto alternativo conserve una idea del prompt que no coincide con el resultado final. Se describe lo que realmente aparece.
Con estas indicaciones compruebo dos cosas distintas: que la composición tenga sentido y que la información asociada a las imágenes sea precisa.
📦 Preparo el ZIP y publico la web en Hostinger
Cuando termino la revisión, le pido a Antigravity que prepare el ZIP de Clara Agua para Hostinger. La instrucción tiene tres condiciones: index.html debe estar en la raíz, el paquete debe incluir solo los archivos públicos y el ZIP debe guardarse en la carpeta de salida.
Esta web ya está formada por archivos que el navegador puede abrir. No necesito convertirla en otro tipo de proyecto para subirla.
Yo utilizo Hostinger para mis sitios. Si vas a seguir este mismo camino, tienes mi enlace de descuento de Hostinger.
En hPanel sigo estos pasos:
- Entro en la sección de sitios web y selecciono crear un sitio.
- Elijo la opción de sitio web PHP/HTML.
- Selecciono un dominio temporal para obtener una dirección de prueba.
- Marco la opción de subir los archivos del sitio.
- Cargo el ZIP de Clara Agua y continúo.
- Espero la confirmación y abro la dirección pública.
El dominio temporal me permite compartir y revisar la web sin tener que resolver todavía una dirección definitiva. Al abrirlo, comparo el resultado publicado con la versión que tenía en mi Mac.
La publicación no es el final de la revisión. Es el momento de comprobar que los recursos y la composición también aparecen correctamente desde la dirección que voy a compartir con el cliente.
🔍 Comparo otra portada y reviso el recorrido completo
Me gusta probar una segunda versión. La primera portada tiene el vídeo dentro de un marco, así que pido a Antigravity una copia en la que ocupe toda la pantalla.
La publico y la comparo. En este caso me gusta más la versión amplia porque el movimiento del agua se percibe mucho mejor. No significa que una portada a pantalla completa sea siempre superior. Aquí favorece la escena que he preparado.
Desde la dirección pública recorro después el resto del sitio: los servicios, el vial sobre el agua, el proceso con el técnico, las preguntas y el presupuesto.
Por último abro la vista adaptable de Chrome con un tamaño de iPhone. Compruebo que aparece el botón de navegación y que la llamada a la acción sigue visible en la portada.
Continúo hasta el final. El formulario, que en escritorio presenta los datos a un lado y el mensaje al otro, ahora se lee de arriba abajo. La foto del proceso aparece antes de los pasos, tal como había pedido.
Lo que reviso no es solo si todo cabe. Compruebo si se conserva el recorrido que quería construir y si cada sección sigue apareciendo en un momento lógico.
Ese es mi criterio para dar la web por preparada para compartir: una portada comprensible, servicios diferenciados, imágenes con sentido y una solicitud que puede prepararse y abrirse en WhatsApp con sus datos.
🚀 Recursos para aplicar este proceso a otros proyectos
Si quieres seguir trabajando con este enfoque, en Primera App tienes prompts profesionales para crear tu app. También puedes encontrar más sobre mi trabajo en mi sitio web y sumarte a la comunidad de creación de apps con IA.
La idea que me interesa trasladar no es una combinación cerrada de herramientas. Flow me ayuda a crear los recursos visuales, Antigravity a construir y modificar la web, y Hostinger a publicarla. Pero las decisiones que conectan todo eso siguen siendo mías.
Si aplicas el proceso a otro servicio, empieza por dos preguntas: ¿qué necesita entender alguien cuando entra y qué puede hacer después? La imagen, los textos, el formulario y la revisión deberían trabajar para responderlas.
Aviso: este artículo puede incluir enlaces promocionales. Si realizas una compra, puedo recibir una comisión sin costo adicional para ti.
