Una web con IA no tiene por qué quedarse en una portada bonita. Partí de una sola sección con un video de fondo y la fui convirtiendo en una página completa: imágenes de la misma protagonista, biografía, blog, planes, testimonios, un formulario y un panel para administrar contenidos. Después añadí una secuencia donde el video avanza o retrocede según el desplazamiento de la página.
Lo importante no fue conseguir todo con una única instrucción. Fue construir por etapas, revisar cada resultado y corregir lo que no funcionaba. Hubo elementos decorativos que sobraban, un botón de eliminar que no respondía y una animación cuyo final no quedaba fluido. Esas correcciones también forman parte de crear una web con inteligencia artificial.
El recorrido combina Dínamo Sites, Google AI Studio, Firebase, Google Flow, GitHub y Hostinger. Cada herramienta entra en un momento concreto. Primero definí una dirección visual, luego completé la página, después incorporé funcionalidades y, al final, la publiqué con un enlace que podía compartir.
Tabla de contenido
- 🌸 Empezar con una sección que marque la dirección
- 🧩 Convertir la portada en una página completa
- 🎨 Añadir lo que falta y quitar lo que sobra
- 🗂️ Conectar Firebase y administrar el contenido
- 🛠️ Probar el blog y corregir un botón que no responde
- 🎬 Preparar una secuencia visual antes de integrarla
- 🌿 Generar el video en Google Flow
- 📜 Hacer que el video responda al desplazamiento
- 📱 Revisar la página completa en móvil
- 🚀 Pasar a GitHub y publicar en Hostinger
- 📚 Recursos para repetir el proceso con tu proyecto
🌸 Empezar con una sección que marque la dirección
El punto de partida fue la biblioteca de Dínamo Sites, donde busqué secciones con movimiento. Elegí Entre Flores y copié su prompt. Esa base ya incluía las instrucciones para construir la primera sección y utilizar un video como fondo.
Esto me permitió empezar con una referencia concreta, en lugar de pedir simplemente una web moderna o una página minimalista. Ya tenía una composición, una protagonista y una relación entre el texto y la imagen. A partir de ahí podía adaptar el diseño a la marca de ejemplo.
Me fui a Google AI Studio, abrí la parte de creación de aplicaciones y pegué el prompt. El título elegido fue “Dale espacio a lo que importa”. Añadí una indicación tipográfica precisa: solo la palabra importa debía utilizar Playfair Display en cursiva.
También pedí que la sección se adaptara a móvil sin cortar el contenido. Quería que esa condición estuviera presente desde el principio, no intentar resolverla cuando toda la página estuviera terminada.
Las decisiones iniciales fueron pocas, pero claras:
- Usar la sección Entre Flores como base.
- Adaptar el mensaje a la marca personal de ejemplo.
- Destacar una palabra con Playfair Display en cursiva.
- Mantener el video de fondo y la legibilidad del título.
- Contemplar la presentación en pantallas estrechas.
Pulsé Build y esperé el primer resultado. Bien, ya tenía la portada: el video aparecía detrás del texto y la composición dejaba espacio para leer el mensaje. Esa primera sección se convirtió en la referencia para todo lo que vino después.
La portada no era solo una pieza terminada. Era una guía de diseño. Me daba la protagonista, el tono visual, la tipografía y una manera de presentar el contenido. El siguiente paso debía continuar esa dirección, no empezar otra distinta.
🧩 Convertir la portada en una página completa
Una vez que la primera sección funcionaba, le pedí a AI Studio que completara la web. El encargo era una página personal con blog, nuevas imágenes, un formulario de captura de contactos y una guía como recurso gratuito.
La instrucción no se limitaba a añadir bloques. También pedía crear imágenes individuales de la misma protagonista trabajando en su computador y en el campo de flores, desde diferentes ángulos. Para mí, esa continuidad era importante: no quería bajar por la página y sentir que había cambiado de persona o de proyecto.
La idea del prompt, reformulada para reutilizarla, era esta:
Amplía esta página personal con nuevas secciones y un blog. Genera imágenes independientes de la misma protagonista trabajando en su computador y en el campo de flores desde distintos ángulos. Añade un formulario para captar contactos y una guía gratuita. Conserva la dirección visual de la portada.
Hay dos partes distintas en ese pedido. Una define qué necesita la página: contenido, blog y formulario. La otra define cómo debe relacionarse con lo que ya existe: misma protagonista, misma estética y recursos visuales coherentes.
El resultado incorporó el blog, el formulario de la guía y otras secciones. También aparecieron la biografía de Clara, la protagonista de la marca de ejemplo, y los planes. Listo, ya podía recorrer una página completa y evaluar su conjunto.
Pedir imágenes como archivos individuales también era parte del encargo. No necesitaba una única imagen que representara toda la página, sino recursos que pudieran ocupar distintos lugares: una escena junto al texto de presentación y otra relacionada con el contenido del blog.
Esta etapa cambia la manera de trabajar. Mientras solo existe la portada, revisas una composición. Cuando aparecen varias secciones, puedes revisar el recorrido: qué información llega primero, qué falta y si la página conserva su identidad de principio a fin.
No di por bueno todo lo generado. La primera versión completa era una base para seguir ajustando. Tener más contenido ayuda a detectar problemas que no eran visibles en una sola sección.
🎨 Añadir lo que falta y quitar lo que sobra
Al recorrer la página vi que faltaban testimonios. Pedí una sección con tres tarjetas de citas de clientes, manteniendo una estética minimalista y profesional. Quería una tipografía limpia y una composición despejada, acorde con el resto del sitio.
Además, la página se veía demasiado gris. Le pedí incorporar dos colores de acento. Aparecieron detalles de color en botones e insignias, sin sustituir la base visual que ya tenía.
Los testimonios eran de ejemplo. Servían para comprobar la composición y el espacio que ocuparía esa sección, pero no eran experiencias reales de clientes. En una web real, ese contenido hay que reemplazarlo por material propio.
Después apareció otro problema: había demasiadas etiquetas, líneas, flechas e iconos que no aportaban mucho. La IA había completado la página, sí, pero también había añadido adornos que hacían más ruido del necesario.
La corrección fue más específica que pedir un diseño mejor. Le indiqué que eliminara etiquetas innecesarias, quitara flechas decorativas de apartados como el blog y las notas personales, redujera el uso de iconos y conservara solo los que tuvieran una intención clara.
También recuperé una decisión que ya funcionaba en la portada: Playfair Display en cursiva. Me gustaba cómo se veía en la palabra importa, así que pedí utilizarla en otros títulos para relacionarlos mejor con la primera sección.
Los ajustes se concentraron en cuatro objetivos:
- Reducir el ruido: eliminar elementos que no ayudaban a entender el contenido.
- Dar espacio: dejar respirar a las imágenes y al texto.
- Conectar los títulos: recuperar el recurso tipográfico de la portada.
- Usar el color con intención: mantener los acentos sin llenar todo de detalles.
La página quedó más limpia. No hizo falta cambiar el concepto ni generar otra web desde cero. Fue una revisión sobre lo construido, conservando lo que funcionaba y retirando lo que distraía.
Para mí, esta es una parte central del proceso: crear con IA también implica decidir qué no debe estar. La herramienta puede proponer muchos elementos, pero la cantidad de elementos no determina la calidad del diseño.
🗂️ Conectar Firebase y administrar el contenido
Probé el blog antes de añadir el panel. Al abrir un artículo, el contenido aparecía en una ventana dentro del mismo sitio. Ya existía una experiencia de lectura, pero todavía necesitaba una forma de administrar esos contenidos sin tocar el código cada vez.
Abrí el menú de integraciones de Google AI Studio, elegí Firebase y activé Firestore y Authentication. Firestore era la base para guardar los artículos, los planes y los testimonios que después editaría desde la web.
Son dos necesidades diferentes: presentar información en la página y disponer de un lugar donde guardar el contenido administrable. Hasta ese momento había trabajado principalmente en la primera. Con Firebase preparé la segunda.
Después de habilitar la integración, primero necesitaba recuperar una vista que funcionara. Recién entonces tenía sentido pedir el panel. No quería sumar otra funcionalidad sobre una página que todavía necesitara ajustes para mostrarse correctamente.
El nuevo pedido fue directo: habilitar la creación de artículos, la administración de planes y la incorporación de testimonios. El resultado añadió un botón Administrar y un panel con tres pestañas:
- Artículos.
- Planes.
- Testimonios.
La idea era que el contenido dejara de depender exclusivamente de las instrucciones del chat. Una vez construido el panel, podía probar la creación de una entrada desde la propia interfaz y comprobar cómo llegaba a la página.
Activar servicios y obtener un panel no sustituye las pruebas. El siguiente paso no fue añadir más secciones, sino utilizar las funciones recién creadas. Necesitaba comprobar si publicar y eliminar artículos hacía realmente lo que esperaba.
En este proyecto, el panel se centró en esos tres tipos de contenido. El formulario de la guía formaba parte del diseño de la web, pero no conviene confundir su presencia visual con una comprobación de todo el proceso de entrega del recurso gratuito.
🛠️ Probar el blog y corregir un botón que no responde
Entré en Artículos y creé una entrada de prueba. Completé el título, la categoría, el tiempo de lectura, la imagen y un extracto corto. Después pulsé Publicar artículo y comprobé que apareciera en la página.
Creé una segunda entrada para revisar cómo se iba llenando el blog. Una sola tarjeta permite comprobar que algo aparece; varias ayudan a revisar la relación entre contenidos y la distribución de la sección.
La prueba de publicación funcionó, pero al intentar borrar uno de los artículos apareció un fallo: el botón de la papelera no respondía. Era un buen recordatorio de que una interfaz puede verse terminada y aun así tener acciones pendientes de corregir.
Para señalar el problema utilicé el inspector visual. Seleccioné el botón concreto y escribí que la eliminación de artículos no funcionaba. Así marqué el elemento que necesitaba revisión sin tener que localizarlo ni explicar su posición dentro del código.
La precisión estuvo en señalar la acción que fallaba. No pedí arreglar todo el blog ni rehacer el panel. El problema estaba en eliminar una entrada, y la corrección debía concentrarse ahí.
El ajuste añadió una confirmación antes de borrar. Volví a probar y, esta vez, el artículo sí se eliminó. Bien, ahora podía continuar con una función comprobada, no solo con un botón que parecía correcto.
El ciclo de revisión fue sencillo:
- Crear contenido desde el panel.
- Comprobar que apareciera en la página.
- Probar la eliminación.
- Señalar el botón que fallaba con el inspector visual.
- Pedir la corrección y repetir la prueba.
Después pedí generar artículos de demostración. Con más entradas podía revisar el comportamiento del blog y su composición. Ese contenido cumplía una función de prueba, igual que los testimonios y los planes de ejemplo.
En una web propia, el siguiente trabajo sería sustituir esos materiales. La IA puede ayudar a completar una estructura, pero una estructura con contenido de muestra todavía no representa una marca real.
🎬 Preparar una secuencia visual antes de integrarla
Con la página y el panel construidos, pasé a la sección de scrollytelling: una secuencia visual controlada por el desplazamiento. Quería ubicarla justo antes de los planes, como transición entre las secciones de contenido y esa parte final.
Primero necesitaba dos recursos: una imagen para el fotograma inicial y un prompt de animación que describiera los movimientos, los pasos y la duración. La animación la iba a generar fuera de la web y luego regresaría con el archivo terminado.
Ahí hubo una confusión. AI Studio interpretó que debía crear inmediatamente la sección dentro de la página. No era lo que necesitaba todavía. Le aclaré que solo me entregara la imagen y la guía de animación, sin montar la sección.
La herramienta retiró ese bloque y dejó los recursos por separado. Este ajuste parece pequeño, pero define una diferencia importante: preparar un recurso no es lo mismo que incorporarlo al sitio. Si mezclas ambas tareas, puedes terminar revisando una sección que aún no tiene el material definitivo.
El primer paisaje generado tenía otro problema: faltaba la protagonista. Hasta ese momento, la web había construido su identidad alrededor de ella. Quitarla justo en la parte más visual rompía la continuidad.
Pedí una nueva imagen que la incluyera y una secuencia que la mostrara desde diferentes ángulos, con rotación y movimiento. También indiqué que se mantuvieran las flores y su apariencia.
La siguiente versión ya incorporaba a la protagonista, pero todavía quise acercarla más a la portada. Añadí una referencia concreta: debía conservar sus pecas y utilizar como guía el primer fotograma del video de la sección inicial.
Con esa corrección aparecieron facciones más reconocibles. Listo, ya tenía el fotograma que quería animar. Lo descargué desde los archivos del proyecto y copié el prompt de movimiento preparado por AI Studio.
El aprendizaje aquí no fue pedir más detalles por pedirlos. Fue identificar qué rasgo sostenía la continuidad y dar una referencia visual para conservarlo. En este caso, las flores no bastaban: también debía reconocerse a la misma persona.
🌿 Generar el video en Google Flow
Con la imagen y el prompt listos, fui a Google Flow. Elegí el modo Ingredientes, cargué la imagen como referencia y dejé el formato en 16:9. En la interfaz que utilicé aparecía el modelo Omni 1.1 Flash.
Pegué el prompt de animación y generé un clip de diez segundos. Después descargué el resultado como MP4 en 720p. Esta parte ocurrió por separado: primero produje el video y luego volví al proyecto web para incorporarlo.
El orden me permitía revisar el recurso antes de conectarlo al desplazamiento. Una animación puede funcionar como clip y tener, aun así, un momento que no conviene usar en una sección interactiva.
Al revisar el video encontré una transición rara al final. La protagonista quedaba de espaldas y el cambio no se veía fluido. Decidí aprovechar solo el tramo que sí funcionaba, en lugar de integrar los diez segundos completos.
Esto era especialmente importante por la forma en que iba a utilizarse. En una reproducción continua, una transición pasa y el clip sigue. En una secuencia controlada por el desplazamiento, una persona puede detenerse exactamente en ese punto y dejar el defecto visible.
No necesitaba usar todo el archivo para aprovechar el resultado. El video contenía un tramo útil; bastaba con delimitarlo bien al integrarlo.
Volví a Google AI Studio, abrí la pestaña Código y subí el MP4 desde el explorador de archivos. Después pulsé Guardar para que quedara dentro del proyecto. Con el recurso disponible en la carpeta de archivos visuales, ya podía pedir la integración final.
📜 Hacer que el video responda al desplazamiento
La instrucción de integración incluyó una condición muy concreta: utilizar el video solo hasta los 7,22 segundos. A partir de ahí aparecía la transición que quería evitar.
No pedí simplemente poner el video en la página. Expliqué dónde estaba el archivo, cuál era el tramo válido y por qué había que limitarlo. Esa información conectaba la revisión del clip con la construcción de la sección.
El resultado vinculó el tiempo del video al desplazamiento. Al bajar por la página, la secuencia avanzaba. Al subir, retrocedía. Si dejaba de moverme, la imagen permanecía en el fotograma correspondiente.
Además, los textos cambiaban a lo largo de la secuencia. Los momentos se organizaban alrededor de ritmo consciente, espacio mental y propósito y calma. El desplazamiento controlaba tanto la evolución de la imagen como la aparición del contenido.
Esta es la diferencia con el video de la portada. Allí, el movimiento funciona como fondo. En la nueva sección, no se trata de una reproducción en bucle: la posición dentro de la página determina el momento de la secuencia.
La sección tenía una función dentro del recorrido. No la añadí únicamente para conseguir más movimiento, sino para enlazar el contenido anterior con los planes, conservando a la protagonista y el paisaje floral.
Una vez integrada, recargué la web y recorrí esa parte hasta llegar a los planes. Quería revisar la secuencia dentro de su contexto, no solo confirmar que el archivo se veía.
Ese contexto importa porque una sección puede funcionar aislada y no conectar bien con lo que tiene antes o después. Aquí la comprobación consistía en avanzar, retroceder y continuar hasta el bloque siguiente, verificando que el tramo elegido evitara el final problemático.
📱 Revisar la página completa en móvil
Antes de publicar, volví a la vista móvil. La adaptación a pantallas estrechas estaba en el primer pedido, pero ahora había mucho más que revisar: imágenes, testimonios, planes, artículos, formulario y una secuencia controlada por desplazamiento.
Recorrí de nuevo la página. No bastaba con que la portada conservara el título. Necesitaba comprobar cómo se presentaba el conjunto cuando había menos espacio horizontal.
En esta revisión, cada tipo de sección plantea una pregunta distinta:
- Portada: ¿el título sigue visible junto al video?
- Presentación: ¿el texto y las imágenes mantienen una relación clara?
- Testimonios y planes: ¿las tarjetas se pueden recorrer con comodidad?
- Blog: ¿las entradas mantienen una lectura ordenada?
- Secuencia visual: ¿se entiende el contenido en el formato estrecho?
- Formulario: ¿sus elementos permanecen accesibles dentro de la composición?
La intención no era diseñar una segunda web, sino comprobar que la misma página se entendiera en otra proporción. La dirección visual debía seguir siendo reconocible, aunque la distribución cambiara.
Esta revisión cerró la fase de construcción. Ya había probado contenido, corregido una acción del panel y limitado el video a su tramo útil. El siguiente paso era sacar el proyecto del entorno de creación y dejarlo disponible online.
🚀 Pasar a GitHub y publicar en Hostinger
Para publicar, le pedí a AI Studio que preparara el proyecto para pasarlo a GitHub. Abrí la sincronización, creé un repositorio privado y subí los cambios. Así conservaba el proyecto en un repositorio y podía seguir modificándolo después.
Luego fui a Hostinger y elegí crear una web desde GitHub. Seleccioné el repositorio que acababa de subir. El despliegue partía de ese proyecto, no de una reconstrucción manual de las secciones.
Como la web utilizaba Firebase, también añadí sus variables de entorno. Copié los nombres y valores desde el archivo .env del proyecto e incluí el identificador de la base de datos creada.
Publicar el código era solo una parte del paso. La configuración de Firebase también debía estar presente en el entorno donde iba a ejecutarse la página. Por eso revisé esas variables antes de implementar.
El recorrido de publicación quedó así:
- Preparar el proyecto para GitHub.
- Crear el repositorio privado y subir los cambios.
- Elegir en Hostinger la creación desde GitHub.
- Seleccionar el repositorio del proyecto.
- Añadir las variables de entorno de Firebase.
- Revisar los ajustes de compilación.
- Implementar y abrir el dominio temporal.
Cuando terminó, abrí el dominio temporal y comprobé que la web estuviera disponible online. Ya tenía un enlace para compartir o incorporar a un portafolio.
Si quieres utilizar el mismo servicio para publicar tus proyectos, puedes acceder mediante mi enlace de descuento de Hostinger. Usarlo también apoya mi trabajo.
📚 Recursos para repetir el proceso con tu proyecto
Para seguir este recorrido, dejé los pasos y las instrucciones en el documento de prompts y pasos. El prompt inicial está planteado como un recurso público y gratuito para crear tu propia versión.
El proyecto completo, con código y archivos visuales, lo compartiré en mi comunidad de creación de apps con IA. También tienes Primera App como recurso de prompts profesionales para crear aplicaciones.
Lo que conviene copiar no es únicamente la apariencia de esta web. Es el orden de trabajo: empezar con una referencia clara, ampliarla sin perder continuidad, limpiar el diseño, conectar los contenidos, probar las acciones y preparar la animación antes de incorporarla.
Las correcciones fueron tan importantes como las generaciones iniciales. Quitar etiquetas mejoró la composición. Señalar una papelera que no respondía permitió corregir una función. Recuperar las pecas de la protagonista reforzó la continuidad. Limitar el video a 7,22 segundos evitó una transición que habría quedado demasiado expuesta.
Crear webs con IA consiste en dirigir, comprobar y ajustar. Una buena primera sección te da una base. El trabajo posterior la convierte en una página coherente, administrable y lista para compartir. No hace falta que la herramienta acierte todo a la primera; hace falta reconocer qué funciona y saber cuál es el siguiente cambio que necesita el proyecto.
Aviso: este artículo puede incluir enlaces promocionales. Si realizas una compra, puedo recibir una comisión sin costo adicional para ti.
