Soy Rodrigo Olivares y en este artículo te explico, paso a paso y con todos los detalles, cómo crear una aplicación web completa usando Google AI Studio —totalmente gratis—. Aquí verás desde la idea del proyecto hasta la exportación y consejos para convertir ese prototipo en una aplicación que puedas vender a gimnasios, entrenadores personales o como un SaaS simple para negocios locales.
Tabla de contenidos
- 🚀 ¿Por qué usar Google AI Studio?
- 🏋️ Demo práctico: Entrena Pro, una app para personal trainers
- 👥 Autenticación y paneles: alumno y entrenador
- 📅 Cómo mejorar el calendario y la reserva de sesiones
- 🎨 Diseño visual: imágenes, colores y tipografías
- ⚙️ Modelos, plantillas e instrucciones: elegir Gemini y React
- 🛠️ Pruebas, errores y iteración: ¿qué esperar?
- ☁️ Exportar, desplegar y opciones de hosting
- 🔁 Cómo usar datos demo y migrar a base de datos
- 💸 Estrategias de monetización y casos de uso rentable
- 🧰 Mis prompts, herramientas y recursos recomendados
- ✅ Checklist para lanzar tu prototipo con Google AI Studio
- 📌 Consejos finales y lecciones aprendidas
- 📣 ¿Qué sigue? Recursos y cómo contactarme
🚀 ¿Por qué usar Google AI Studio?
Google AI Studio es una plataforma que te permite generar aplicaciones web apoyándote en modelos de lenguaje y de código. Lo más atractivo de esta herramienta es que puedes crear prototipos funcionales sin necesidad de programar todo desde cero. Algunas razones por las que me gusta y por las que recomiendo probarla:
- Gratis (o con acceso sin coste inicial): Ideal para prototipado y pruebas de concepto sin riesgo económico.
- Acceso a modelos potentes: Puedes utilizar modelos como Gemini (por ejemplo Gemini 2.5 Pro) que son muy rápidos para generación de código.
- Generación integrada de UI y lógica: Además del front-end, la IA puede generar lógica para autenticación, paneles, formularios y estados básicos.
- Soporta generación de imágenes: Se pueden utilizar generadores como «nano banana» (u otros) para obtener imágenes de fondo o assets visuales.
- Exportación y despliegue: Puedes descargar el proyecto, guardarlo en Google Drive o GitHub, e incluso desplegarlo en Google Cloud o en tu propio VPS.
En resumen: Google AI Studio es ideal para crear prototipos robustos, validar ideas, construir MVPs y ponerlos frente a potenciales clientes sin invertir semanas o meses en programación manual.
🏋️ Demo práctico: Entrena Pro, una app para personal trainers
Para ejemplificar el proceso usé un proyecto llamado Entrena Pro, una aplicación pensada para personal trainers. La idea fue construir una landing page y una aplicación con autenticación y paneles para dos roles: alumno y entrenador.
Componentes principales del prototipo:
- Landing page en español.
- Sección de servicios y paquetes.
- Testimonios de alumnos.
- Formulario de contacto y botón de WhatsApp.
- Autenticación con selección de tipo de cuenta (Alumno/Entrenador).
- Panel para alumnos (agenda, comprar paquetes) y panel para entrenadores (ingresos, alumnos activos, calendario).
Este tipo de aplicación funciona perfecto como un MVP para ofrecer a gimnasios locales o entrenadores que quieren digitalizar su negocio sin una inversión grande. Puedes verlo como una SaaS sencilla o como una solución que vendes directamente a cada negocio.
👥 Autenticación y paneles: alumno y entrenador
Uno de los puntos más importantes de cualquier aplicación que tenga usuarios diferentes es la autenticación y la separación de roles. En Entrena Pro pedí explícitamente que la aplicación incluyera autenticación y paneles distintos para alumnos y entrenadores. Esto te permite ofrecer funcionalidades distintas según el tipo de cuenta y escalar luego a una solución SaaS o a instalaciones directas para gimnasios.
Flujo básico implementado en el prototipo:
- Registro: formulario donde el usuario elige si quiere crear una cuenta como alumno o entrenador.
- Inicio de sesión: acceso con correo y contraseña.
- Panel de alumno: agenda, compra de paquetes, historial de sesiones.
- Panel de entrenador: métricas (ingresos del mes, alumnos activos), listado y edición de alumnos, calendario y administración de paquetes.
En la demo que generé, los datos (por ejemplo “Ingresos del mes: 300 dólares” o “Alumnos activos: 11”) vienen de un set de datos de demostración. Al pedirle a la IA que genere “datos de demostración” obtienes tablas y métricas prellenadas para revisar visualmente la interfaz antes de implementar una base de datos real.
Importante: en la ejecución inicial la autenticación y el almacenamiento de usuarios se manejan en localStorage del navegador (almacenamiento temporal). Esto es normal en prototipos: funciona para pruebas pero no es seguro ni escalable para producción. Más adelante te explico cómo migrar a una base de datos real.
📅 Cómo mejorar el calendario y la reserva de sesiones
Una parte crucial del sistema para Entrena Pro es el calendario y la posibilidad de agendar sesiones. En la generación inicial detecté un comportamiento extraño: el calendario mostraba que no había sesiones o que todo estaba lleno, cuando en realidad prefería que por defecto estuviera disponible para agendar.
Qué le pedí al modelo para corregirlo:
- Que por defecto todos los horarios estén disponibles hasta que el entrenador los marque como ocupados.
- Que sea fácil seleccionar una hora con una interfaz clara (ej.: picker o lista de horarios).
- Que la selección muestre la fecha y hora confirmada antes de aceptar la reserva.
Problemas comunes y cómo solucionarlos:
- Horarios marcados incorrectamente como llenos: Aclarar en el prompt que por defecto los slots deben mostrarse como libres.
- Falta de persistencia: El prototipo usa localStorage, por lo que las reservas se pierden si se borra el almacenamiento o se cambia de navegador. Para producción necesitas una base de datos y endpoints.
- Interfaz confusa: Pedir que el flujo de reserva muestre confirmación y opción de cancelar o editar antes de guardar la sesión.
Si estás generando esto con la IA, incluye ejemplos concretos en el prompt (por ejemplo: “muestra el selector de hora en formato 24h, permite seleccionar rangos de 30 minutos, por defecto muestra mañana y los próximos 7 días, y muestra confirmación antes de guardar”). Ese nivel de detalle evita que la IA genere comportamientos inesperados.
🎨 Diseño visual: imágenes, colores y tipografías
Un detalle simple pero muy evidente: el aspecto visual. Yo pasé una imagen de fondo (que encontré en Unsplash) para darle identidad a la landing. Si bien Google AI Studio puede generar el layout y colocar la imagen, es mejor pasar un enlace directo a la imagen que quieras usar como background para asegurar coherencia visual.
Consejos sobre assets y estilo:
- Imágenes: usa recursos libres como Unsplash para prototipos. Cuando pases a producción, hospeda las imágenes en tu propio hosting o CDN para evitar problemas de disponibilidad.
- Colores y tipografías: si no los especificas, la IA tomará decisiones por defecto. Para mantener una línea visual consistente, define la paleta de colores (HEX) y la familia tipográfica en el prompt.
- Tamaño de letra y jerarquía: pide ajustes concretos (por ejemplo: aumentar la fuente principal en 1 punto o usar fuente proporcional) si quieres un aspecto más atractivo y profesional.
- Accesibilidad: solicita contraste suficiente para botones y texto, y especifica tamaños mínimos para pantallas móviles.
Ejemplo de instrucción a incluir en tu prompt de diseño: “Usa una paleta basada en #0F172A (oscuro) y #10B981 (accent), fuente principal Inter o Roboto, incremento tipográfico de +1 para títulos y asegura contraste AAA para textos.”
⚙️ Modelos, plantillas e instrucciones: elegir Gemini y React
En Google AI Studio puedes seleccionar el modelo y la plantilla de “instrucciones” para la generación. En mi caso elegí Gemini 2.5 Pro, que es rápido y eficiente para generar código, especialmente para prototipos. También es posible usar templates como React o Angular según prefieras.
Consejos para elegir modelo y plantilla:
- Gemini 2.5 Pro: rápido y muy buena opción para tareas de programación en prototipos.
- Modelos más nuevos: si están disponibles (por ejemplo versiones 4.x o 4.5), pueden ofrecer mejor comprensión y generación, pero compara costos y velocidad.
- Template: elige React si quieres portabilidad y ecosistema (componentes, hooks). Angular es útil si prefieres una arquitectura más opinada. También puedes pedir que te genere una versión en Next.js si planeas SSR o SSG.
Cuando generes tu prompt, sé claro en el framework y la estructura de carpetas que esperas. Ejemplo: “Genera una app en React con Vite, carpetas src/components, src/pages, y configuración para deploy en Netlify/Hostinger.” Entre más específico seas, más cercano será el resultado a lo que esperas.
🛠️ Pruebas, errores y iteración: ¿qué esperar?
La IA no es perfecta. En mi primera ejecución hubo errores visuales —por ejemplo, una imagen de perfil salió con un recorte extraño (“le cortó totalmente la cabeza a la chica” en un ejemplo) y la barra de la cabecera no quedó bien alineada. Estas cosas son normales y se corrigen con iteraciones simples en el prompt.
Cómo iterar correctamente:
- Revisa el prototipo: identifica lo que no funciona o no se ve bien.
- Describe el problema con detalle: no solo “arregla la cabecera”, sino “centrar y alinear los botones de login y registrarse, aumentar el tamaño del botón ‘Empieza hoy mismo’ y quitar la etiqueta ‘popular’ en el plan medio”.
- Pide cambios puntuales: solicita tamaños exactos, márgenes y alineaciones si es necesario (“centra el botón horizontalmente y añade un margen superior de 24px”).
- Prueba de nuevo: ejecuta el run y revisa. Si hay errores de lógica, pide que los corrija o que deje los puntos marcados para la integración manual.
La clave es pedir mejoras pequeñas y medibles. Evita prompts vagos que solo digan “mejorar el diseño” sin especificar qué. Yo pedí algo sencillo: centrar un botón, remover un tag “popular” y aumentar la fuente en 1 punto. La IA aplicó esos cambios y el resultado fue notablemente mejor.
☁️ Exportar, desplegar y opciones de hosting
Cuando tu prototipo está listo o lo suficiente como para mostrarlo a clientes, tienes varias opciones para exportarlo y desplegarlo. Google AI Studio ofrece opciones integradas:
- Guardar en Google Drive: ideal para no perder el proyecto.
- Download App: descarga todo el proyecto en un zip con todos los archivos generados.
- Guardar en GitHub: conecta tu cuenta y sube el proyecto directamente, útil para mantener versionado y facilitar importaciones en otras herramientas.
- Deploy a Google Cloud: opción integrada para publicar directamente, aunque puede tener costos asociados.
Mi recomendación personal para producción:
- Si es un MVP o demo para un cliente: hospeda en un VPS económico o en servicios como Hostinger (https://hostinger.com/rodrigo) para control total y costos bajos.
- Si quieres integración continua: guarda en GitHub y establece un pipeline de CI/CD (por ejemplo, GitHub Actions) para desplegar automáticamente a tu hosting elegido.
- Si prefieres un deploy rápido y escalable: Google Cloud puede ser una opción, pero revisa costos y configuración (Cloud Run, App Engine, etc.).
Recuerda: el archivo zip que descargas contiene todo el front-end y la lógica generada. Si el prototipo usó localStorage y quieres persistencia real, vas a necesitar integrar una base de datos y endpoints antes de publicar para un uso serio.
🔁 Cómo usar datos demo y migrar a base de datos
En la generación inicial pedí explicitamente “generar set completo de datos demo” para poder revisar visualmente las tablas y los paneles. Esto es una práctica que recomiendo: pide datos de ejemplo en el prompt para ver cómo se comporta la UI y la lógica antes de integrar una base de datos real.
Pasos para migrar de demo/localStorage a una base de datos real:
- Elegir la base de datos: Supabase, Firebase, o una base PostgreSQL/MySQL en tu VPS. Supabase es una excelente opción para prototipos porque proporciona autenticación, API y base de datos en un solo servicio.
- Crear el esquema: define tablas para usuarios, sesiones, paquetes, pagos y reservas. Usa los datos demo como guía para crear el seed inicial.
- Crear endpoints o usar API directa: si usas Supabase, puedes usar la API REST que provee; si usas tu backend, crea endpoints REST o GraphQL para CRUD.
- Reemplazar llamadas a localStorage: en el código generado, sustituye las operaciones de localStorage por llamadas a tus endpoints o a la librería cliente de tu servicio elegido.
- Autenticación segura: usa tokens y sesiones en el backend; evita confiar únicamente en localStorage para autenticar usuarios en producción.
- Sincronización de calendario: gestiona conflictos y bloqueos para evitar overbooking; usa transacciones o validaciones en la API.
Ejemplo conceptual de tablas mínimas:
- users (id, email, password_hash, role, name, created_at)
- packages (id, trainer_id, name, price, sessions, created_at)
- sessions (id, trainer_id, student_id, start_time, end_time, status)
- payments (id, user_id, package_id, amount, status, created_at)
Si quieres integrar Supabase, ten en cuenta que en algunas herramientas (no necesariamente en Google AI Studio) la integración puede ser de un clic. En Google AI Studio tendrías que hacerlo manualmente: configurar Supabase, copiar las variables de entorno y ajustar el código generado para usar la librería cliente.
💸 Estrategias de monetización y casos de uso rentable
Crear aplicaciones como Entrena Pro no es solo un ejercicio técnico: es una oportunidad de negocio. Aquí algunas formas realistas de monetizar este tipo de prototipos y convertirlos en ingresos:
- Venta directa a negocios locales: gimnasios, estudios de yoga, estudios de pilates y entrenadores personales suelen preferir soluciones personalizadas y están dispuestos a pagar por ellas.
- SaaS por suscripción: ofrece la plataforma como servicio con planes mensuales y límites por número de alumnos o funcionalidades premium (reportes avanzados, integración de pagos, SMS/WhatsApp automatizado).
- Implementación y mantenimiento: tarifa inicial por implementación y luego un fee mensual por hosting, mantenimiento y soporte.
- Marketplace de plantillas: crea templates para diferentes nichos (entrenadores, nutricionistas, salones de belleza) y véndelos como kits personalizables.
- Integraciones pagas: cobros adicionales por integrar pagos, calendario con Google Calendar/Calendly o sincronizaciones con CRMs.
Consejos para ventas locales:
- Empieza pequeño: ofrece una demo funcional y personalizada al cliente (ej.: su logo y su primer mes gratis).
- Presenta ROI claro: muestra cómo la app reduce la fricción para reservar, mejora la retención y facilita cobrar por paquetes.
- Ofrece onboarding: muchos dueños de gimnasios valoran que tú te encargues de la configuración inicial.
- Precios sugeridos: implementación inicial de $200–$800 (dependiendo de personalización) y suscripción mensual $20–$80 por local/entrenador.
🧰 Mis prompts, herramientas y recursos recomendados
Si te interesa replicar mi flujo de trabajo, estoy creando una plataforma con prompts optimizados y un método paso a paso para generar aplicaciones con IA. Allí encontrarás los prompts en un formato profesional que funciona bien no solo en Google AI Studio sino en otras herramientas como Cursor o Windsurf.
Enlaces útiles mencionados en el proyecto:
Google AI Studio: https://aistudio.google.com
Gemini: https://gemini.google.com
Prompt completo del proyecto (documento): https://docs.google.com/document/d/1dPUYGijb1ieJTmVw29T7LoKrmlfC64hK4pMrrBP1rT4/edit?usp=sharing
Accede a mi plataforma «PrimeraApp«: https://rodrigoolivares.com
¿Dónde alojo mis proyectos web? https://hostinger.com/rodrigo
Recomendaciones de uso de prompts:
- Divide las instrucciones: un bloque para funcionalidades (auth, calendario, pagos), otro para diseño (colores, fuentes), y otro para datos (demo, validaciones).
- Incluye ejemplos de datos: si quieres tablas con alumnos, inserta unas 8–12 filas de ejemplo en tu prompt para que la IA genere tablas coherentes.
- Itera por pasos: primero genera la estructura básica, luego pide mejoras en UI, y al final pide optimizaciones para performance y accesibilidad.
✅ Checklist para lanzar tu prototipo con Google AI Studio
Para que no se te escape nada, aquí tienes una checklist práctica que uso cuando voy de prototipo a demo funcional.
- Definir el alcance del prototipo (features mínimas viables).
- Elegir modelo y plantilla (ej.: Gemini 2.5 Pro + React).
- Preparar un prompt detallado (funcionalidades, diseño, datos demo).
- Ejecutar la generación y revisar UI/UX básica.
- Probar flujos principales: registro, login, reserva, compra.
- Ajustar prompt para corregir errores visuales o lógicos.
- Solicitar datos demo para validar tablas y dashboards.
- Decidir hosting y exportar el proyecto (Descargar o guardar en GitHub).
- Planificar migración a base de datos (Supabase/Firebase/SQL).
- Implementar endpoints y reemplazar localStorage por persistencia real.
- Integrar pagos y notificaciones (Stripe, PayPal, WhatsApp Business).
- Realizar pruebas con usuarios y recoger feedback.
- Preparar propuesta comercial y go-to-market para clientes locales.
📌 Consejos finales y lecciones aprendidas
He trabajado más de 20 años creando sitios web y aplicaciones. Lo que me encanta de usar Google AI Studio es la velocidad para iterar y validar ideas. No pretende reemplazar un producto final con una arquitectura robusta, pero sí te permite:
- Validar ideas en horas o días.
- Mostrar demos funcionales a clientes rápidamente.
- Crear múltiples variantes del mismo producto para tests A/B rápidos.
- Reducir costos iniciales de desarrollo.
Mi flujo recomendado cuando trabajas con IA para prototipos:
- Comienza con un prompt claro y estructurado.
- Solicita datos demo para poder revisar visualmente.
- Itera con instrucciones concretas para corregir errores pequeños.
- Exporta y prueba localmente; luego integra la base de datos y endpoints.
- Ofrece la solución como MVP y añade características premium a medida que el cliente lo demande.
📣 ¿Qué sigue? Recursos y cómo contactarme
Si quieres recibir mis prompts optimizados y acceso temprano a la plataforma que estoy construyendo (PrimeraApp), regístrate en:
Registro y acceso a PrimeraApp: https://rodrigoolivares.com
Además, te dejo de nuevo los recursos clave para comenzar ya:
Google AI Studio: https://aistudio.google.com
Gemini: https://gemini.google.com
Prompt completo del proyecto: https://docs.google.com/document/d/1dPUYGijb1ieJTmVw29T7LoKrmlfC64hK4pMrrBP1rT4/edit?usp=sharing
Hosting recomendado para proyectos: https://hostinger.com/rodrigo
Un último empujón
Si te gustó este enfoque, implementa un prototipo y muéstralo a un negocio local. Muchas veces la venta es más sencilla de lo que piensas cuando tienes algo funcional que mostrar. Además, seguir este flujo te permitirá obtener feedback real y ajustar tu producto antes de grandes inversiones.
Nos vemos en el próximo tutorial y, si quieres, puedes revisar otros contenidos relacionados para profundizar en integración con Supabase, despliegues y estrategias comerciales para vender aplicaciones a negocios locales.
¡A crear y monetizar! — Rodrigo Olivares
