Introducción
Este manual sistematiza el flujo de trabajo utilizando herramientas gratuitas de Google AI para idear, validar, prototipar, desarrollar, publicar y difundir una aplicación funcional, sustituyendo roles tradicionales (investigador, diseñador, desarrollador, marketer) con inteligencia artificial.
Filosofía: Antes se necesitaba un equipo completo y grandes recursos. Hoy, con una visión clara y la combinación estratégica de herramientas de IA, una sola persona puede emprender proyectos complejos.
Paso 1: Validación de la Idea e Investigación con Notebook LM
Objetivo: Transformar una idea inicial en un concepto validado con datos reales (científicos, de mercado y de usuarios).
Herramienta: Notebook LM
Proceso:
Definir la Idea: Ejemplo: una app para mantener la constancia en los entrenamientos deportivos ("Fitnavi").
Crear una Investigación Profunda:
Abre Notebook LM y crea un nuevo cuaderno.
Utiliza un Prompt estructurado para solicitar una investigación en tres pilares:
Pilar 1 (Científico): "Investiga estudios científicos sobre la adherencia al entrenamiento, cómo estructurar rutinas, mantener la constancia y progresar."
Pilar 2 (Competencia): "Analiza aplicaciones de éxito en el sector fitness."
Pilar 3 (Necesidades de Usuario): "Identifica necesidades reales y funcionalidades deseadas (pero inexistentes) comentadas por usuarios en foros y redes."
Ejecuta la investigación en modo "Deep Research" para que la IA consulte más de 20 fuentes.
Analizar Resultados:
Notebook LM generará un informe consolidado con hallazgos clave.
Podrás explorar las fuentes individuales (artículos científicos, reviews de apps, hilos de Reddit).
Resultado: Tienes un "equipo de investigación" que te provee datos para fundamentar tu app.
Paso 2: Prototipado Rápido y Visual con Stitch
Objetivo: Transformar los requisitos investigados en un prototipo visual e interactivo.
Herramienta: Stitch (Google)
Proceso:
Extraer Requisitos Funcionales:
Vuelve a Notebook LM.
Usa un Prompt que solicite: "A partir de las fuentes investigadas, genera una lista detallada de funcionalidades que debe tener la aplicación [Nombre de tu App] para posicionarse como líder en [tu sector]."
Copia el informe generado.
Diseñar en Stitch:
Abre Stitch. Elige el tipo de proyecto (App Móvil o Web).
Pega el informe de requisitos de Notebook LM en el chat de Stitch.
Indica a la IA (basada en Gemini) que diseñe las pantallas basándose en esos requisitos. Ejemplo: pantalla de objetivos, analíticas, rutinas, logros, comunidad.
Stitch generará las pantallas en formato imagen.
Crear un Prototipo Interactivo:
En Stitch, selecciona todas las pantallas generadas.
Haz clic en "Generar" y luego en "Prototipa".
Resultado: Obtendrás un prototipo navegable (haz clic en "Interactuar") que simula el flujo de la app. Puedes modificar elementos directamente.
Paso 3: Desarrollo Funcional con Google AI Studio
Objetivo: Convertir el prototipo visual en una aplicación web funcional con lógica e IA integrada.
Herramienta: Google AI Studio
Proceso:
Exportar desde Stitch:
En tu prototipo de Stitch, ve a "More" (Más) > "Export" (Exportar).
Elige la opción "With Google AI Studio". Esto enviará el diseño (HTML) a AI Studio.
Iterar y Añadir Funcionalidad:
AI Studio abrirá tu proyecto. Usa el chat para pedir mejoras:
Cambios de UI: "Pon el menú en la barra lateral."
Funcionalidades de IA: Busca e integra componentes como "AI Powered Chatbot". Pídele que actúe como un coach virtual.
Comportamiento: Especifica cómo deben funcionar botones, formularios y flujos de datos. Ej: "Al finalizar la configuración, que la IA genere un plan de entrenamiento personalizado."
Solución de Problemas: Si una pantalla no se renderiza bien, copia el código HTML específico desde Stitch (clic derecho en la pantalla > "Copy as HTML") y pégaselo a la IA para que lo corrija.
Probar la Aplicación:
Usa el botón "Preview" o "Build" para generar y probar la app dentro de AI Studio.
Resultado: Una aplicación web funcional con front-end, lógica básica y capacidades de IA integradas (como el chatbot coach).
Paso 4: Backend y Escalabilidad con Google Antigravity
Objetivo: Añadir backend robusto (autenticación, base de datos, APIs) para hacer la app completamente real y escalable.
Herramienta: Google Antigravity (IDE con IA para desarrolladores).
Proceso:
Preparar el Proyecto:
Desde AI Studio, descarga el proyecto (ZIP) o súbelo a GitHub.
En Antigravity, abre la carpeta del proyecto (File > Open Folder).
Configura las variables de entorno (archivo
.env) con tus API Keys (ej: de Gemini).
Integrar Backend con MCPs (Model Context Protocols):
El poder de Antigravity está en los MCP Servers, que conectan la IA con herramientas reales.
Ve a "MCP Server" en Antigravity e instala uno, por ejemplo, para Supabase (backend como servicio).
Prompt de Ejemplo (en el chat de Antigravity):
@mcpserver supabase Integra Supabase para añadir login/registro a nuestra app y una base de datos para guardar las rutinas personalizadas. El nombre del proyecto en Supabase es [Tu_Nombre_Proyecto].La IA modificará tu código, configurará las variables y conectará tu app a Supabase.
Verificar la Integración:
Ejecuta la app localmente (
npm run devo pídeselo a la IA).Comprueba que el registro/login funcione y que los datos se guarden en las tablas de Supabase.
Añadir Más Características:
Puedes pedir a la IA que cree nuevas páginas (ej: una landing page de ventas) o integre más servicios (pagos con Stripe, búsqueda con Perplexity, etc.) usando otros MCPs.
Resultado: Una aplicación full-stack con autenticación, base de datos en la nube y capacidad de integrar servicios complejos fácilmente.
Paso 5: Publicación en un Servidor Propio
Objetivo: Desplegar la aplicación en internet para que cualquiera pueda usarla.
Herramientas: Hostinger, Google Cloud, Firebase, Vercel, etc.
Proceso (Ejemplo con Hostinger/VPS):
Empaquetar la App:
Comprime la carpeta de tu proyecto de Antigravity en un archivo ZIP.
Subir a un Hosting:
En tu panel de hosting (ej: Hostinger), crea un "App Web" (Node.js).
Sube el archivo ZIP.
Configurar el Entorno:
Es CRUCIAL configurar las Variables de Entorno en el panel del hosting.
Copia TODAS las variables del archivo
.envde tu proyecto (claves de API de Gemini, Supabase, etc.) y pégalas una a una en la sección correspondiente del hosting.
Implementar:
Inicia el despliegue. El servicio detectará automáticamente el framework (Vite, Next.js).
Una vez completado, obtendrás una URL pública para acceder a tu aplicación.
Nota: Para proyectos serios con tráfico, considera servicios profesionales (Google Cloud, AWS) que tienen costos asociados.
Paso 6: Difusión y Marketing con IA
Objetivo: Crear materiales y estrategias para dar a conocer la aplicación.
Herramientas: Gemini (Canvas), Pomogi, etc.
Proceso:
Crear Presentaciones Profesionales (Para Inversores/Socios):
Ve a Gemini.
Usa un Prompt como: "Crea una presentación para inversores reales sobre mi aplicación [Nombre], destacando su valor, mercado y potencial."
Activa la función "Canvas" y adjunta el prototipo descargado de Stitch o imágenes de tu app.
Gemini generará una presentación completa y con diseño coherente con tu marca.
Generar Contenido de Marketing (Redes Sociales, Anuncios):
Con Pomogi:
Ingresa la URL pública de tu aplicación.
La IA analizará tu sitio, extraerá colores, fuentes y valores de marca.
Generará automáticamente diseños para posts, banners e incluso vídeos animados listos para usar en campañas.
Con Gemini (Plan de Lanzamiento):
Usa un Prompt extenso que pida actuar como un "equipo senior de marketing y ventas".
Solicita un plan de lanzamiento, estrategia de contenidos, análisis financiero y plan de negocio.
Adjunta toda la información de tu proyecto para contexto.
Listado de Herramientas
Flujo Consolidado: Idea → Notebook LM (Validar) → Stitch (Prototipar) → AI Studio (Desarrollar Frontend+IA) → Antigravity (Añadir Backend) → Hosting (Publicar) → Gemini/Pomogi (Difundir).
Lista de Herramientas Gratuitas de Google AI Utilizadas:
Notebook LM: Investigación y síntesis de información.
Stitch: Prototipado visual e interactivo.
Google AI Studio: Desarrollo de aplicaciones con IA integrada.
Google Antigravity: Desarrollo full-stack avanzado con integración de servicios (MCPs).
Gemini (en busca de Google): Creación de contenido, presentaciones y planificación estratégica.
Pomogi: Generación de assets de marketing y vídeos promocionales.
Recordatorio Final: Este proceso demuestra que las barreras técnicas para crear software se han reducido drásticamente. La clave ahora es la visión clara, la curiosidad para aprender y la habilidad para guiar a las herramientas de IA de forma efectiva. El intento siempre te dejará con un producto funcional o un aprendizaje invaluable.
Ejemplo: PROMP para CREAR CURSOs con aistudio
PROMPT 1: Creación de la app
Quiero que actúes como:
Diseñador instruccional senior
Diseñador de producto / UX
Desarrollador front-end con React + TypeScript
Tu misión es crear una mini web-app llamada “ProfesorIA – Aula Virtual” dentro de este proyecto de Google AI Studio.
Objetivo:
Que, a partir de unos datos básicos que introduce el usuario (tema, nivel, perfil, objetivo, tiempo disponible), la app genere un CURSO COMPLETO con la sensación de aula virtual real: rutas de aprendizaje, módulos, lecciones, bloques, barra de progreso y evaluación final. Todo en español.
Quiero que cuides tanto el CONTENIDO como la EXPERIENCIA VISUAL.
FUNCIONALIDAD GENERAL
La app tendrá dos grandes vistas:
PANTALLA DE DISEÑO DEL CURSO (“Home”)
Hero en la parte superior con título y subtítulo:
Título: “Crea tu aula virtual en minutos”
Subtítulo: algo corto explicando que la IA diseña un plan de estudio completo con lecciones, actividades y evaluaciones.
Card central con un formulario con estos campos:
Tema del curso (input de texto)
Nivel del alumno (select: Principiante / Intermedio / Avanzado)
Perfil del alumno (input de texto corto, ej. “Estudiante de bachillerato”, “Profesional de marketing”, “Estudiante de 1º de Química”)
Objetivo principal (input de texto, centrado en resultado: “aprobar la EBAU”, “entender los mecanismos básicos”, “organizar mejor mi tiempo”, etc.)
Tiempo disponible (input de texto, ej. “4 semanas, 30 min al día”)
Formato preferido (select: “Lecturas breves”, “Lecturas + ejercicios”, “Esquemas + problemas”, “Mixto”)
Botón principal: “Diseñar curso ahora”.
Cuando el usuario envía, se llama al modelo Gemini (con Google Search activado) usando un prompt interno que definas tú, y se genera la estructura completa del curso.
PANTALLA DE AULA VIRTUAL (“Course view”)
Cuando el modelo responde, muestras una vista de aula virtual con esta estructura:
Cabecera del curso:
Título atractivo del curso
Subtítulo / descripción corta (2–3 frases)
Etiquetas con nivel, duración estimada y perfil objetivo.
Bloque de “Objetivos de aprendizaje” en formato lista (5–7 bullets).
Mapa general del curso:
6 a 8 “Unidades” (o “Rutas de aprendizaje”).
Cada unidad tiene:
Un título atractivo (no genérico).
Una frase resumen muy clara.
Entre 3 y 5 lecciones.
Navegación de aula:
Una columna lateral izquierda con:
Lista de unidades.
Dentro de cada unidad, las lecciones con numeración (1.1, 1.2… etc.).
Indicador de cuál está activa.
En la parte superior, una barra de progreso que muestre el % de curso completado según bloques marcados como vistos.
Contenido de lección (zona principal):
Para la lección seleccionada, muestra varios “bloques” en tarjetas apiladas. Para cada lección, el modelo debe generar:
1 bloque de “Idea clave”
Explicación de 4–8 frases, adaptada al nivel del alumno y al objetivo.
1 bloque de “Ejemplo aplicado”
Explica cómo se ve ese concepto en la realidad. Si es Historia, puede ser un caso concreto; si es Química, un ejemplo de reacción; si es Productividad, un día real de un estudiante, etc.
1 bloque de “Actividad práctica”
Consigna clara para que el alumno haga algo en su vida real o resuelva un pequeño ejercicio.
1 bloque de “Test rápido”
3 preguntas tipo test con 4 opciones (A,B,C,D) y la respuesta correcta indicada de forma clara en los datos (aunque no se muestre resaltada en la UI por defecto).
Cada bloque debe ir etiquetado con un icono (teoría, ejemplo, actividad, test) y tener una tarjeta visual limpia.
Al final del curso:
Sección “Evaluación final”
8–10 preguntas sobre todo el temario (igualmente tipo test).
Sección “Proyecto final”
2 propuestas de proyecto práctico que obliguen a integrar los contenidos del curso.
Sección “Fuentes y referencias”
Lista de fuentes que el modelo haya usado gracias a Google Search (libros, webs serias, artículos…). Esto es importante para demostrar que el contenido está conectado con información real, no solo inventada.
Botones de navegación:
“Siguiente lección”
“Lección anterior”
Al marcar una lección como completada, avanza la barra de progreso.
PROMPT INTERNO PARA GENERAR EL CURSO
Dentro del código, crea una constante (por ejemplo `COURSE_BUILDER_PROMPT`) que use el modelo Gemini para generar el curso. Ese prompt interno debe decir algo del estilo:
Que actúa como profesor y diseñador instruccional experto en el TEMA indicado.
Que adapte la dificultad al NIVEL y al PERFIL del alumno.
Que utilice el OBJETIVO principal y el TIEMPO disponible para ajustar la profundidad y el número de unidades.
Que siempre devuelva el curso en un formato estructurado (puede ser JSON) con:
título, descripción, nivel, duración
objetivos de aprendizaje
lista de unidades
lecciones por unidad
bloques de cada lección (idea clave, ejemplo, actividad, test)
evaluación final
propuestas de proyecto
fuentes
Indícale explícitamente que:
Debe usar un tono didáctico, cercano y claro.
Evite párrafos gigantes; mejor frases cortas y bien puntuadas.
Cuando el tema sea complejo (ej. química orgánica o mecánica cuántica), utilice analogías y ejemplos intuitivos, pero sin perder rigor.
NO hable de “modelo” ni de “IA”; que se exprese como un profesor humano.
El idioma SIEMPRE debe ser español.
DISEÑO / UI
Usa React + TypeScript.
Estilo moderno, limpio y agradable:
Mucho espacio en blanco.
Tarjetas con bordes redondeados y sombras suaves.
Colores base en gama violeta / azul, combinados con tonos neutros.
Tipografía clara y jerarquías bien marcadas (títulos, subtítulos, texto normal).
La app debe verse bien tanto en pantallas grandes como en portátiles estándar.
Todo el texto de la interfaz (labels, botones, mensajes) en español de España.
IMPORTANTE
Prefiero que el código sea sencillo y fácil de entender antes que hiper-complejo.
No expliques tu proceso en la respuesta, simplemente genera la estructura de archivos y el código necesario para que la app funcione con la experiencia descrita arriba.
Cuando tengas la base hecha, puedes proponer pequeñas mejoras visuales o de UX, pero sin romper la simplicidad.
Tu primera respuesta debe ser el código completo inicial de la app para que yo pueda probarla directamente.
PROMPT 2: Mejorar el diseño y la UI
Quiero que tomes la app web que acabas de crear llamada “ProfesorIA” y mantengas EXACTAMENTE la misma funcionalidad y estructura de datos (mismos campos del formulario inicial, misma lógica para generar el curso con IA, mismos bloques de contenido: unidades, lecciones, idea clave, ejemplo aplicado, actividad práctica, test rápido, evaluación final, proyectos y fuentes).
Tu tarea ahora es REDISEÑAR la interfaz de usuario para que parezca un aula virtual moderna, clara y agradable de usar. No cambies la lógica ni el contenido que se genera, solo el diseño, el layout y los estilos. Mantén la tecnología que ya estás usando (no cambies de framework).
Quiero que apliques estos cambios concretos:
Mejora de lectura y jerarquía visual
Usa una maquetación más aireada, con más espacio en blanco y márgenes generosos.
Organiza la pantalla del curso en tres zonas claras:
Cabecera superior del curso.
Barra lateral izquierda con el plan de estudios (unidades y lecciones).
Zona principal de contenido con las tarjetas de la lección actual.
Haz que el plan de estudios de la izquierda sea más estrecho y que la lección actual destaque claramente con un fondo más intenso y un indicador visual (por ejemplo una barra o un punto).
Convierte “Idea Clave”, “Ejemplo Aplicado”, “Actividad Práctica” y “Test Rápido” en tarjetas bien diferenciadas, con:
Bordes redondeados.
Sombra suave.
Iconos simples arriba a la izquierda que representen cada tipo de bloque.
Títulos más grandes y claros.
Mejora la legibilidad del texto: títulos de sección bien jerarquizados, subtítulos claros, párrafos cortos y buen interlineado.
Gamificación y sensación de aula virtual real
En la cabecera del curso (parte superior de la zona principal) añade un bloque con:
Título del curso.
Nivel (principiante / intermedio / avanzado).
Duración estimada (horas / semanas).
Número de unidades y número total de lecciones.
Añade una barra de progreso global del curso que muestre el porcentaje completado y un texto del estilo “X de Y lecciones completadas”.
Incluye un botón muy visible de “Continuar donde lo dejé” que lleve directamente a la siguiente lección pendiente.
En la barra lateral, marca con un icono o check las lecciones completadas y deja clara la que está en progreso.
Tema visual y modo oscuro
Mantén el color morado principal de la marca como color de acento (botones, elementos activos, barra de progreso, etc.), pero con un estilo moderno y consistente.
Define dos temas:
Tema claro (por defecto), con fondo muy claro y tarjetas ligeramente sombreadas.
Tema oscuro, con fondo oscuro, tarjetas algo más claras y textos con buen contraste.
Añade un interruptor (toggle) arriba a la derecha para alternar entre “Modo claro” y “Modo oscuro”. El cambio debe afectar a toda la app (formulario inicial, página de curso, evaluaciones, etc.).
Detalles de interacción
Añade estados hover en botones, elementos del plan de estudios y tarjetas para que la app se sienta más viva.
Asegúrate de que el diseño sea responsive y se vea correctamente tanto en pantallas grandes como en portátiles.
Muy importante:
No elimines ninguna funcionalidad existente ni cambies la forma en la que se llama al modelo de IA.
No simplifiques la estructura del curso; solo mejora la presentación.
Devuélveme el código completo actualizado de la app con estos cambios de diseño aplicados.
