Construir una landing page interactiva con capacidades de IA hoy puede ser un proceso sorprendentemente rápido y repetible. Aquí presento un flujo práctico y probado para pasar desde un prompt hasta una web publicada en Hostinger Cloud con deploy automático desde GitHub. La receta combina Google AI Studio (para generar diseño y lógica con Gemini), Antigravity (para clonar, ajustar y añadir integraciones), Supabase (para capturar leads) y Hostinger Cloud (para deploy y dominio). Todo esto con mínimas fricciones y replicable si usas VS Code, Cursor u otros editores.
Tabla de contenidos
- 🧭 Qué vas a obtener con este flujo
- 🧩 Paso 1 — Diseñar el prompt y la estructura de la landing
- 🛠️ Paso 2 — Crear la landing en Google AI Studio con Gemini
- 📦 Paso 3 — Llevar el proyecto a Antigravity y gestionar el repositorio
- 💾 Paso 4 — Integrar Supabase para captura de leads
- 🔐 Paso 5 — Configurar la API Key de Gemini y las variables de entorno
- 🚀 Paso 6 — Deploy automático: GitHub → Hostinger Cloud
- 🌐 Paso 7 — Conectar dominio y actualizar DNS
- ⚠️ Errores comunes y cómo resolverlos
- 🧾 Checklist antes de publicar
- 🔍 Buenas prácticas y recomendaciones
- 📈 Ejemplo práctico: búsqueda de ideas con grounding
- 🧰 Recursos y enlaces finales
- ✅ Conclusión
🧭 Qué vas a obtener con este flujo
Al final del proceso tendrás:
- Una landing page interactiva con búsquedas apoyadas por Gemini y resultados con fuentes.
- Captura de leads mediante formularios conectados a Supabase.
- Repo en GitHub con control de versiones y despliegues automáticos.
- Deploy automático en Hostinger Cloud que reconstruye la app con cada push.
- Dominio personalizado apuntado y funcionando con DNS.
Links útiles mencionados a lo largo del flujo:
Hostinger (descuento recomendado): https://hostinger.com/rodrigo
Google AI Studio: https://aistudio.google.com
Google Antigravity: https://antigravity.google
Supabase: https://supabase.com
Playlist con más contenido: https://www.youtube.com/playlist?list=PLBTuX25MUpdo9YuMzu-o9c80p1q40EBfI
🧩 Paso 1 — Diseñar el prompt y la estructura de la landing
Todo comienza con un prompt pensado. Dedicar tiempo a detallar el copy, las funcionalidades y la experiencia de usuario acelera el resto del proceso. En este caso la landing que se propone es simple pero poderosa: un buscador de ideas que usa la API de Gemini para generar resultados y mostrar fuentes, más un par de CTAs para unirse a la lista de espera.
Consejos para el prompt:
- Especifica el objetivo principal: capturar leads, generar miniaturas, o proponer ideas.
- Menciona el estilo visual: en el ejemplo se eligió brutalista para personalidad y contraste.
- Define las funcionalidades mínimas: búsqueda con grounding (fuentes), generación de miniaturas y formularios de captura.
Un fragmento de copy o especificación dentro del prompt puede ser: “Landing page brutalista con buscador de ideas apoyado por la API de Gemini; mostrar fuentes; formularios para capturar email; integración con Supabase; deploy desde GitHub a Hostinger Cloud”. Esa claridad ayuda a la generación en Google AI Studio y a la posterior integración.
🛠️ Paso 2 — Crear la landing en Google AI Studio con Gemini
Google AI Studio facilita crear prototipos y generar código gracias a Gemini y a las herramientas de exportación. El flujo consiste en:
- Crear el proyecto y pegar el prompt con la estructura y el copy.
- Elegir estilo visual (por ejemplo brutalista) y ajustar secciones: header, buscador, lista de resultados, CTAs, footer.
- Incluir las llamadas a la API de Gemini donde corresponda: búsqueda con grounding y generación de miniaturas.
- Exportar o conectar con un repositorio para clonar el proyecto en Antigravity.
Un detalle valioso: al usar Gemini para búsquedas y grounding puedes pedir que la IA incluya fuente por cada resultado. Eso aporta confianza al usuario y evita afirmaciones sin soporte. En la práctica se ve cómo la búsqueda retorna resultados sobre “colonización de Marte”, “turismo espacial” y añade las fuentes correspondientes, lo que es clave para productos que necesitan verificación.
📦 Paso 3 — Llevar el proyecto a Antigravity y gestionar el repositorio
Antigravity actúa como puente para editar, instalar dependencias y preparar la app para producción. En este punto la idea es no descargar un ZIP sino mantener el control con GitHub:
- Desde AI Studio, conectar con GitHub y crear un repositorio privado o público según prefieras.
- Clonar ese repo en Antigravity o en tu entorno local.
- Revisar la estructura: React + Bit (o el framework que se haya generado), archivos de configuración y llamadas a APIs.
Ejemplo de pasos concretos dentro de Antigravity:
- Clonar desde GitHub: seleccionar el repositorio y carpeta de destino.
- Ejecutar un análisis rápido del proyecto para que la IA entienda la estructura (analiza el proyecto brevemente).
- Instalar paquetes adicionales que necesites, por ejemplo la librería cliente de Supabase.
- Preparar commits: stage, commit y push hacia GitHub para que todo quede versionado.
Al clonar se mantiene el control de los archivos generados automáticamente. Es buen momento para revisar llamadas a APIs y preparar puntos de extensión como formularios o endpoints que vayan a interactuar con Supabase.
💾 Paso 4 — Integrar Supabase para captura de leads
Supabase funciona aquí como la base de datos y backend ligero para guardar emails, nombres y cualquier dato que quieras capturar. Integrar Supabase desde Antigravity facilita exponer todas las herramientas (auth, database, storage) para que la IA y el equipo las entiendan.
Pasos para integrar Supabase correctamente:
- Crear un proyecto en Supabase (nombre y password). Guarda las claves de conexión en un lugar seguro.
- Instalar e importar la librería cliente de Supabase en tu proyecto (npm install @supabase/supabase-js o equivalente).
- Crear tablas y reglas mínimas: por ejemplo una tabla leads con campos (id, email, nombre, origen, created_at).
- Configurar endpoints o funciones que inserten registros desde los formularios de la landing.
- En Antigravity, exponer las tools de Supabase para que la IA las reconozca y te ayude a configurar flujos.
Consejo práctico: crea un proyecto llamado claro y breve (por ejemplo CursosVideosIA) para mantener orden cuando reutilices plantillas o clones para otros proyectos.
🔐 Paso 5 — Configurar la API Key de Gemini y las variables de entorno
La pieza crítica para que Gemini responda es la API Key. Sin ella, la funcionalidad de búsqueda o generación fallará o no mostrará contenido.
Cómo obtener y configurar la API Key de Gemini:
- Ingresar a la consola que maneje las claves (por ejemplo Google AI Studio).
- Crear una nueva clave, copiarla y guardarla de forma segura.
- En Antigravity o en tu repo, definir una variable de entorno con el nombre esperado por la app (por ejemplo GEMINI_API_KEY o el nombre que use tu proyecto).
- En la plataforma de deploy (Hostinger Cloud en este caso) añadir esa variable de entorno en la sección correspondiente para que el build y el runtime la usen.
Si la interfaz local no muestra resultados, revisa primero que la API Key esté presente y sea la correcta. Ese suele ser el fallo más común cuando la IA no pinta o la API retorna errores.
🚀 Paso 6 — Deploy automático: GitHub → Hostinger Cloud
Hostinger Cloud ofrece planes optimizados para Node.js y aplicaciones frontend con backend. La ventaja es que permite deploy desde GitHub y ofrece un dominio temporal al publicar. El flujo general:
- En Hostinger Cloud seleccionar la opción para añadir un sitio web y elegir front end o Node.js según tu stack.
- Conectar con GitHub: autorizar a Hostinger para acceder al repo que creaste.
- Seleccionar el repositorio y la rama que se va a desplegar.
- Configurar variables de entorno importantes (por ejemplo la API Key de Gemini y las credenciales de Supabase si no usas funciones seguras).
- Iniciar el primer deploy y revisar los logs de compilación para detectar errores.
Detalles prácticos para evitar errores:
- Hostinger reconoce automáticamente la tecnología en muchos casos; deja que identifique el framework en vez de forzar opciones.
- Si aparece un error relacionado con permisos o un intento de build estático cuando esperas Node.js, confirma que elegiste el plan Cloud preparado para Node.js y que la configuración de la app indica un starter script correcto en package.json.
- Si el deploy falla, revisar el log y hacer pequeños commits para iterar si es necesario. A veces un ajuste menor en scripts o variables resuelve el problema.
En varios casos el deploy se completa correctamente y Hostinger entrega una URL temporal. Esa URL permite validar funcionalidad antes de apuntar un dominio definitivo.
🌐 Paso 7 — Conectar dominio y actualizar DNS
Apuntar un dominio propio implica actualizar los nameservers o añadir registros A/CNAME según el requerimiento del proveedor. En Hostinger Cloud el proceso típico es:
- En Hostinger, en la sección del sitio, elegir conectar un dominio personalizado e indicar que el dominio te pertenece.
- Hostinger mostrará los nameservers que debes configurar en tu registrador de dominio (por ejemplo Namecheap, GoDaddy, Google Domains, etc.).
- Ir al panel del registrador y reemplazar los nameservers por los que Hostinger indicó, o bien añadir registros DNS específicos si se prefiere mantener el control de DNS en el registrador.
- Volver a Hostinger y confirmar que los registros fueron cambiados. La propagación puede tardar desde minutos hasta 24 horas.
- Una vez propagado, el dominio debe resolver hacia la web desplegada y aparecer en el panel de Hostinger como conectado.
Sugerencia: toma nota de los valores previos de DNS por si necesitas revertir cambios. Algunos registradores tardan más en aplicar los cambios, por lo que la paciencia ayuda.
⚠️ Errores comunes y cómo resolverlos
Problema: El deploy falla y el log muestra un build estático cuando esperabas Node.js
Posibles causas y soluciones:
- Hostinger detectó incorrectamente que se requiere un build estático. Asegúrate de seleccionar el plan Cloud que soporta Node.js y de definir correctamente el comando de start en package.json.
- Revisar la configuración de build en Hostinger y establecer el comando de build y start adecuados (por ejemplo npm run build y npm start o node server.js según tu app).
- Si el sistema interpreta que es hosting compartido, forzar la configuración indicando explícitamente Node.js y los scripts requeridos.
Problema: La API Key de Gemini no funciona
Soluciones rápidas:
- Verifica que la clave copiada coincida exactamente con la que está guardada en la consola de Google AI Studio.
- Asegúrate de que la variable de entorno en Hostinger tenga exactamente el nombre que tu proyecto espera.
- Revisar límites de uso o cuotas en la cuenta que genera la clave; a veces hay límites gratuitos o restricciones que obligan a cambiar a otra versión de modelo.
Problema: No llegan registros a Supabase
Revisión y pasos:
- Comprobar que la URL y la API Key de Supabase están configuradas como variables de entorno y que el cliente usa esos valores.
- Verificar reglas de seguridad o Row Level Security en Supabase; si están activas, habilitar las políticas necesarias para inserciones desde la app.
- Probar una petición directa desde Postman o curl para confirmar que la conexión y credenciales funcionan.
🧾 Checklist antes de publicar
- Prompt y copy finalizados en AI Studio.
- Repo en GitHub con commit inicial y estructura clara.
- Clonación y ajustes en Antigravity completados.
- Supabase configurado con tablas y permisos adecuados.
- Variables de entorno añadidas: GEMINI_API_KEY, SUPABASE_URL, SUPABASE_KEY, etc.
- Hostinger Cloud configurado con conexión a GitHub y deploy automático.
- Dominio configurado y DNS actualizado.
🔍 Buenas prácticas y recomendaciones
Mantener un flujo sólido te ahorra tiempo a futuro. Aquí algunos principios que aceleran el trabajo:
- Versiona desde el inicio: no descargues ZIPs sin control. GitHub da trazabilidad y facilita rollback.
- Variables de entorno: nunca publiques claves en el repositorio. Usa las herramientas de la plataforma de deploy para gestionarlas.
- Pruebas rápidas: usa la URL temporal para validar rutas, formularios y queries antes de tocar DNS.
- Políticas de seguridad: si usas Supabase, revisa Row Level Security y políticas CORS para evitar accesos no deseados.
- Automatiza: cada push debe desencadenar un deploy. Eso permite iterar y ver cambios en segundos.
📈 Ejemplo práctico: búsqueda de ideas con grounding
En la landing se implementó un buscador de ideas que consulta Gemini y muestra fuentes. El proceso funciona así:
- Usuario escribe una consulta, por ejemplo “ideas para canales faceless sobre espacio”.
- La app envía la consulta a Gemini pidiendo que incluya fuentes y un resumen conciso.
- Gemini devuelve resultados con frases cortas y una sección de fuentes que la app muestra debajo de cada resultado.
- Opcionalmente, se ofrece generar una miniatura o guardar la idea en la base de datos.
Mostrar fuentes aporta contexto y confiabilidad, sobre todo cuando la app cruza datos reales (por ejemplo, eventos o shows recientes). El grounding es clave para que la IA no invente datos.
🧰 Recursos y enlaces finales
Herramientas y enlaces mencionados:
- Hostinger Cloud: https://hostinger.com/rodrigo
- Google AI Studio: https://aistudio.google.com
- Google Antigravity: https://antigravity.google
- Supabase: https://supabase.com
- Playlist con más tutoriales: https://www.youtube.com/playlist?list=PLBTuX25MUpdo9YuMzu-o9c80p1q40EBfI
✅ Conclusión
Este flujo combina velocidad y control: prompt bien definido, generación y prototipo en Google AI Studio, edición y ajustes en Antigravity, backend ligero con Supabase y deploy automático en Hostinger Cloud. Con práctica, el tiempo desde idea hasta web publicada se reduce drásticamente y permite iterar sobre funcionalidades en minutos.
“Esto es todo real, todo con información cruzada y validada.”
Si reutilizas esta plantilla para otros proyectos, procura mantener una convención clara de nombres en GitHub y en tus proyectos de Supabase, y automatiza variables de entorno para facilitar despliegues repetibles.
