Blog InfluxIA

Cómo crear aplicaciones con IA usando Google Gemini: guía práctica con imágenes, texto y código en Google AI Studio

Cómo crear aplicaciones con IA usando Google Gemini: guía práctica con imágenes, texto y código en Google AI Studio

Cómo crear aplicaciones con IA usando Google Gemini: guía práctica con imágenes, texto y código en Google AI Studio

Tiempo de lectura estimado: 12 minutos

Key takeaways

  • Construye apps multimodales (imagen + texto + código) desde un único prompt en Google AI Studio (Build).
  • Aprende un flujo repetible: objetivo, inputs, tareas, requisitos de UI y entregable en ZIP.
  • Replica 5 apps reales: fusión de elementos, fichas de producto, estudio fotográfico virtual, storyboard y anuncios inmobiliarios.
  • Exporta el front-end listo (HTML/CSS/JS) y despliega en un hosting estático en minutos.
  • Escala con la API y “Obtener código”; si no programas, considera AppSheet Gemini.

Tabla de contenidos

Conceptos base: aplicaciones multimodales con IA

Crear aplicaciones con IA usando Google Gemini ya no es solo para desarrolladores: con Google AI Studio (Build) puedes combinar generación de imágenes, redacción de textos y creación de código en un solo flujo. En esta guía aprenderás, paso a paso, a construir aplicaciones multimodales con IA para casos reales como generar fichas de producto para e-commerce con IA y crear anuncios inmobiliarios con IA, todo desde una única indicación bien diseñada.

Qué vas a conseguir en esta guía:

  • Entender qué son las aplicaciones multimodales con IA y por qué importan.
  • Seguir un Google AI Studio Build tutorial paso a paso para levantar apps desde una sola indicación.
  • Replicar 5 apps: fusión de elementos, ficha de producto completa, estudio fotográfico virtual, generador de storyboard y anuncios inmobiliarios con IA.
  • Exportar un ZIP con HTML/CSS/JS y desplegarlo en un hosting sencillo.
  • Dominar buenas prácticas de prompting, estilo visual y gestión de cuotas.

Público ideal:

  • Marketing, e-commerce, real estate, makers y equipos de contenido.
  • No necesitas programar. Solo saber describir lo que quieres y probar.

“Sigue leyendo: en minutos pasarás de idea a prototipo útil.”

Una app multimodal combina entrada y salida de imagen + texto + código en un solo flujo. En la práctica:

  • Subes fotos o arrastras imágenes.
  • Escribes un prompt “todo en uno”.
  • Gemini como motor multimodal procesa, genera imágenes, redacta textos y crea la UI.
  • Ves una vista previa y descargas un ZIP con front-end listo.

Ventajas clave:

  • Un solo prompt produce interfaz, lógica y activos descargables.
  • Ahorra tiempo: no cambias de herramienta.
  • Controlas estilo y consistencia con una imagen de referencia.

Casos de uso que verás aquí:

  • Catálogos y fichas de producto.
  • Anuncios inmobiliarios con IA.
  • Storytellers visuales y variaciones creativas para campañas.

Qué lo hace posible:

Nota complementaria: si más adelante quieres llevar esto a procesos sin código, AppSheet Gemini genera apps de negocio desde texto (tablas y pantallas incluidas).

Sigue: ahora mismo vamos a construir tu primera app.

Google AI Studio Build tutorial (paso a paso)

Preparación

  • Entra en Google AI Studio y elige la herramienta Build. Selecciona un modelo Gemini multimodal.
  • Revisa cuotas y límites gratuitos en tu cuenta. Trabaja en lotes pequeños y guarda versiones del prompt conforme iteras con la guía AI Studio Quickstart.
  • Ten a mano:
    • 2–5 imágenes de prueba (producto, escenario, persona).
    • Un texto breve de marca y tono.
    • Una imagen de referencia de estilo (colores, iluminación, encuadre).

Tip: si es tu primera vez, mira un video paso a paso para ver el flujo completo.

Estructura de un prompt “todo en uno”

Piensa en tu prompt como un plano de obra. Debe cubrir:

  1. Objetivo de la app
    Qué debe entregar: “Quiero un ZIP con una página HTML, CSS y JS, más las imágenes generadas, con vista previa integrada.”
  2. Entradas de usuario
    Campos (texto, número, lista). Archivos de imagen (arrastrar/soltar). Idioma de la interfaz: español.
  3. Tareas a realizar
    Procesar/editar imágenes con nanobanana (composición, aislamiento, estilos). Redactar textos con Gemini (nombres, descripciones, testimonios). Generar código front-end (HTML/CSS/JS), formularios y previsualización.
  4. Requisitos de UI
    Formulario simple a la izquierda, vista previa a la derecha. Botón “Descargar ZIP”. Tipografía y colores consistentes.
  5. Salida final
    ZIP con index.html, assets/ (imágenes generadas), css y js. Instrucciones de render y un visor embebido.

Plantilla rápida de prompt (adáptala):

  • Objetivo: “Construye una app en español para [caso de uso] que genere [entregables].”
  • Inputs: “Campos: [nombre, precio…]. Imágenes: [producto, estilo]. Validaciones: [requeridos, formatos].”
  • Tareas: “1) Edita y compón imágenes con estilo [X]. 2) Redacta textos en tono [marca]. 3) Crea HTML/CSS/JS responsive con preview.”
  • UI: “Layout dos columnas. Form a la izquierda, preview a la derecha. Botón ‘Descargar ZIP’.”
  • Salida: “Devuelve un ZIP con index.html, assets/, y un README corto.”

Si luego quieres llevar el prototipo a tu stack, usa “Obtener código” para ver snippets en Python o Node.js y conectarlo a tu app.

Ejecución y prueba

  • Carga imágenes de referencia si aplican (producto, estilo, escenario).
  • Ejecuta el prompt y evalúa la primera versión:
    • ¿La UI está en español?
    • ¿La preview se ve bien en móvil?
    • ¿Los textos reflejan el tono?
  • Ajustes rápidos:
    • Pide “fondos consistentes en clave alta minimalista”.
    • Define “sin marcas de agua ni logos”.
    • Añade “nombres de archivo en kebab-case y carpetas ordenadas”.

App 1: Fusión creativa de elementos (escenario + modelo + vestido + accesorio)

Objetivo

  • Crear dos imágenes finales combinando cuatro entradas y un estilo (por ejemplo, “clave alta minimalista”).

Entradas

  • Imagen 1: escenario (set o fondo).
  • Imagen 2: modelo (persona).
  • Imagen 3: prenda (vestido/camisa).
  • Imagen 4: accesorio (bolso, gafas).
  • Estilo: una imagen o texto guía de iluminación y color.

Salida

  • Imagen compuesta: la modelo en el escenario, con la prenda y el accesorio integrados.
  • Imagen “catálogo”: fondo limpio, elementos claros, ideal para ficha.

Prompt sugerido (resumen)

  • Objetivo: “Fusiona 4 entradas en 2 resultados: ‘escena final’ y ‘catálogo’, estilo [X].”
  • Reglas de edición:
    • Ajuste de escala y perspectiva coherentes.
    • Iluminación uniforme con tonos [fríos/cálidos].
    • Bordes limpios; sin halos ni artefactos.
  • UI: Campos para subir las 4 imágenes + selector de estilo. Preview lado a lado. Botón “Descargar ZIP” con assets/compuestos.
  • Entregable: assets/escena-final.jpg y assets/catalogo.jpg + index.html con visor y comparador.

Uso práctico
Variaciones masivas de lookbooks para e-commerce: intercambia modelos, prendas y fondos sin repetir sesiones.

Tip de consistencia
Usa siempre la misma imagen de estilo para series de productos. Esto reduce saltos de color y luz.

Para ver cómo mezclar imágenes y texto en AI Studio, revisa la guía oficial y experimenta con prompts multimodales.

App 2: De foto casera a ficha de producto completa (generar fichas de producto para e-commerce con IA)

Objetivo

  • Transformar una foto casera en una ficha completa con 4 imágenes, descripción y testimonios.

Prompt base (componentes esenciales)

  • Entregable: ZIP con un único HTML que incluya CSS/JS, layout de dos columnas.
  • Galería: visor de 4 imágenes en la columna izquierda (ángulos y fondos consistentes).
  • Contenido: nombre del producto, precio, descripción redactada por IA en la derecha.
  • Extra: carrusel horizontal con 3–5 opiniones generadas por IA (contexto realista).
  • Idioma: español en interfaz y textos.
  • Preview + botón “Descargar ZIP”.

Inputs del usuario

  • Imagen del producto (foto casera).
  • Nombre y precio.
  • Imagen de referencia de estilo (opcional).

Salida demostrada

  • Ejemplo: “Chocolate artesanal 70% cacao”.
    • 4 imágenes coherentes (pack frontal, lateral, detalle de textura, lifestyle).
    • Descripción clara y breve, optimizada para SEO.
    • Testimonios con tonos naturales, sin exagerar.

Extensiones útiles

  • Cohesión visual entre fichas: misma paleta, iluminación y encuadre.
  • Personalización de tono: joven (frases cortas) o gourmet (vocabulario sensorial).
  • SEO: incluye 3–5 palabras clave relevantes por producto.
  • Integración: conecta la salida a tu catálogo vía API de Gemini para automatizar por lotes.

Referencia práctica: AI Studio permite combinar imagen + texto para crear fichas y obtener el código base para integrarlo en tu sitio.

Tip escalable: si tu equipo no codea, AppSheet Gemini también puede estructurar apps de inventario y catálogos a partir de texto. Para código inicial de apps web, explora Gemini Coder y ejemplos en video.

Despliegue rápido del entregable

Qué incluye el ZIP

  • index.html con la UI (formulario + preview).
  • assets/ con las imágenes generadas.
  • css/ y js/ embebidos o en archivos separados.
  • README con instrucciones cortas.

Cómo subirlo a un hosting estático

  • Opción 1: arrastra la carpeta a un hosting estático (Netlify, Vercel, GitHub Pages o tu servidor).
  • Opción 2: súbelo a un bucket público en tu proveedor cloud y expón index.html.
  • Asegura rutas relativas: ./assets/imagen-1.jpg

Verificación rápida

  • Abre la URL en móvil y desktop.
  • Revisa que:
    • Cargan todas las imágenes.
    • El carrusel/visor responde y no se rompe al redimensionar.
    • Los metadatos básicos (title, description) están presentes.

Consejo final
Guarda el ZIP como versión 1. Itera tu prompt para mejorar estilo, microcopys y rendimiento. Cuando estés feliz, clona la app y crea variantes por categoría.

Sigue bajando: en la Parte 2 montaremos un estudio fotográfico virtual, un generador de storyboard y, sí, anuncios inmobiliarios con IA potentes y listos para publicar. Visita AI Studio para inspirarte.

Apps 3 y 4 en conjunto: Estudio fotográfico virtual + generador de storyboard

Estas dos apps se complementan. Primero creas fotos consistentes de una persona o prenda. Luego multiplicas ángulos y planos para contar una historia visual.

App 3: Estudio fotográfico virtual

Objetivo

  • Producir 4 fotos de la misma persona/prenda en estilos distintos, listas para campaña.

Entradas

  • Foto de la persona (retrato o cuerpo completo).
  • Imagen o texto de la prenda (camisa, chaqueta).
  • Referencia de estilo (iluminación, color, fondo).

Salidas

  • Cuerpo completo con fondo neutro.
  • Detalle de textura/tejido.
  • Escena urbana (exterior).
  • Escena natural (parque o campo).

Prompt base

  • Objetivo: “Genera 4 fotos consistentes de [persona] vistiendo [prenda] en estilos definidos.”
  • Reglas:
    • Mantener rasgos y proporciones de la persona.
    • Integrar la prenda sin deformaciones ni artefactos.
    • Fondo y luz coherentes por serie.
  • UI: Cargador de imagen de persona y prenda. Selector de estilo y presets de encuadre. Preview 2×2 y botón “Descargar ZIP”.
  • Entregable: assets/cuerpo-completo.jpg, assets/detalle.jpg, assets/urbano.jpg, assets/natural.jpg + index.html con visor.

Tips de consistencia

  • Usa siempre la misma imagen de referencia de estilo.
  • Pide “misma pose base + microvariaciones” para evitar cambios drásticos.
  • Si notas cambios de rostro, refuerza con “conservar rasgos, tono de piel y pelo” y añade ejemplo de color de piel/pelo.

Edición de imagen
Para recorte, limpieza de fondo o relight, apóyate en la capacidad de edición demostrada en los videos de AI Studio (“nanobanana”). Ejecuta en Google AI Studio con modelo Gemini multimodal y valida en la preview.

Uso práctico
Moda y retail: crea líneas completas sin rehacer sesiones. Personal branding: packs de fotos consistentes para redes y web.

App 4: Generador de storyboard

Objetivo

  • Convertir una imagen base en una secuencia de planos clave para video o campaña.

Entradas

  • Imagen base (persona o producto).
  • Guion breve de 1–3 frases (mensaje principal).
  • Estilo visual (cine, lifestyle, tech).

Salidas

  • Cuatro planos: medio, primer plano, lateral y cenital.
  • Texto breve por plano (qué comunicar).
  • Archivos con nombres claros y alt-text listos para SEO.

Prompt base

  • Objetivo: “Genera storyboard de 4 planos a partir de esta imagen y guion.”
  • Reglas: Mantener estilo y paleta del input; en cada plano, incluir alt-text descriptivo; evitar elementos nuevos no presentes, salvo fondos mínimos.
  • UI: Grid 2×2 con títulos de plano. Botón para descargar ZIP con assets y JSON de escenas.

Combinación ganadora
Usa las fotos de la App 3 como base de la App 4. Obtendrás campañas coherentes con múltiples ángulos, listos para social ads, landing pages y presentaciones. Puedes obtener el código e integrarlo en tu web desde “Obtener código” en AI Studio.

App 5: Anuncios inmobiliarios con IA (texto + edición de imágenes)

Objetivo
Leer un lote de fotos de un inmueble, redactar un anuncio claro y editar imágenes con staging virtual o vaciado.

Flujo de la app

  • Inputs:
    • 6–12 fotos del piso/casa.
    • Datos básicos: ubicación, m², precio, habitaciones, baños, garaje, planta.
    • Opciones por imagen: staging virtual, vaciado, o sin cambios.
    • Controles de redacción: público objetivo, extensión (1–2 párrafos), tono (cálido, profesional).
  • Procesos:
    • Análisis visual: detectar terraza, luz natural, AC, calefacción, suelos, ventanas.
    • Edición: aplicar staging o vaciado respetando geometría y luz.
    • Copy: descripción basada en lo visible y datos estructurados.
  • UI:
    • Subida múltiple de imágenes con switches de edición por archivo.
    • Campos de datos y selector de tono.
    • Preview con slider Antes/Después para cada foto.
    • Botón “Descargar ZIP”.

Salida

  • Texto del anuncio con:
    • Encabezado atractivo con ubicación y tipo de vivienda.
    • 1–2 párrafos descriptivos, sin promesas no visibles.
    • Lista de características (m², habitaciones, orientación, extras).
    • Llamada a la acción clara.
  • Assets: assets/originales/ y assets/editadas/ + before-after.html con slider por imagen.

Prompt sugerido (resumen)
“Lee las fotos y confirma lo que es visible. No inventes atributos. Redacta un anuncio para [público], tono [X], 1–2 párrafos + bullet points. Aplica staging o vaciado según la opción marcada, mantén proporciones y sombras.”

Mejores prácticas

  • Añade campos estructurados para precisión: año de construcción, eficiencia energética, gastos de comunidad.
  • Evita exageraciones no sustentadas por las fotos.
  • Incluye una nota de transparencia: “Algunas imágenes incluyen staging virtual para mostrar posibilidades del espacio.”
  • Para procesar por lotes, usa la API de Gemini y el botón “Obtener código” para integrar en tu backend, además de explorar AI Studio.

Caso de uso
Portales y agencias pueden generar anuncios inmobiliarios con IA en minutos, con copy homogéneo y fotos coherentes.

Buenas prácticas de prompting y diseño en Build

Estructura recomendada del prompt

  • Objetivo claro y entregable: “Devuelve un ZIP con index.html, assets/ y preview integrada.”
  • Inputs definidos:
    • Campos con etiquetas en español y validaciones (requeridos, formatos).
    • Arrastrar/soltar para imágenes, con límite de tamaño/formatos.
  • Tareas en orden:
    • 1) Procesar/editar imágenes con la capacidad de edición mostrada en demos (“nanobanana”).
    • 2) Redactar textos con Gemini, tono y longitud específicos.
    • 3) Generar HTML/CSS/JS responsive con preview y botón de descarga.
  • Requisitos:
    • Accesibilidad: alt-text, contraste AA, labels.
    • Responsive móvil/desktop.
    • Estructura de carpetas y nombres en kebab-case.

Consistencia visual
Incluye una imagen de referencia de estilo o guía de color y tipografía. Define presets: “fondo clave alta, sombra suave, 35 mm, f/2.8”. Pide “balance de blancos estable, exposición uniforme y sin ruido”.

Control de calidad
Indica “sin marcas de agua, sin logos de terceros”. Pide bordes limpios, sin halos; revisa al 100% en la preview. Si falla una generación, especifica el paso a reintentar (imágenes o copy) y guarda versiones del prompt con cambios menores.

Rendimiento y límites
Trabaja en lotes pequeños al inicio y revisa tus cuotas gratuitas en AI Studio. Usa “Obtener código” para mover el flujo a Python/Node y programar colas o reintentos.

  • Derechos de imagen: Ten permiso para usar fotos de personas y propiedades. Mantén consentimientos y contratos.
  • Propiedad intelectual: Comprueba licencias de fondos, logos y marcas en tus insumos.
  • Veracidad del copy: No atribuyas cualidades que no se ven o no están confirmadas por datos.
  • Privacidad: Cuidado con fotos de interiores con datos sensibles (documentos, matrículas). Difumina o recorta cuando sea necesario.
  • Transparencia: Señala “edición con IA” o “staging virtual” cuando aplique.

Checklist final para crear aplicaciones con IA usando Google Gemini

  • Define el caso de uso: catálogo o anuncios inmobiliarios.
  • Prepara imágenes de entrada y una referencia de estilo.
  • Redacta un prompt “todo en uno” con: objetivo, inputs, tareas, UI y entregable ZIP.
  • Ejecuta en Google AI Studio (Build). Prueba y ajusta: UI en español, responsive, sin marcas de agua.
  • Exporta ZIP y despliega en un hosting estático.
  • Valida UX, SEO (titles, alt-text), accesibilidad y consistencia visual.
  • Si necesitas escalar, usa la API y “Obtener código” para integrarlo en tu stack.

Próximos pasos y extensiones

  • Campos estructurados: Añade SKU, categorías, metadatos SEO y breadcrumbs en las fichas.
  • Internacionalización: Plantillas multilenguaje con selector (es/en/pt).
  • Automatización por lotes: Procesa catálogos completos con la API de Gemini y tus scripts en Python/Node.
  • Integración con CMS/tienda: Importa las fichas y assets en tu CMS o plataforma e-commerce.
  • Sin código: Crea apps de negocio y catálogos con AppSheet Gemini a partir de texto.
  • Para devs: Arranca proyectos con Gemini Coder y ajusta el front-end a tu guía de marca.

Conclusión

Construir aplicaciones multimodales con IA es ya parte del día a día. Con Google AI Studio (Build) pasas de idea a ZIP desplegable en minutos, mezclando imágenes, texto y código en un solo flujo. Desde un estudio fotográfico virtual hasta anuncios inmobiliarios con IA, el método es el mismo: un prompt “todo en uno”, pruebas cortas y exportación limpia.

Da el siguiente paso hoy: abre AI Studio, copia uno de los prompts y crea tu primer prototipo. Cuando necesites escalar, la API y AppSheet están ahí para ayudarte a crecer con orden.

FAQ

1) ¿Necesito programar para usar Build?

No. Puedes armar el prototipo completo con prompts y la UI de Build. Luego, si quieres integrar o automatizar, usa “Obtener código” en Python/Node.

2) ¿Cuánto cuesta?

Hay un nivel gratis con límites. Revisa cuotas y uso en tu cuenta y ajusta el tamaño de tus lotes para no agotarlas con la guía AI Studio Quickstart.

3) ¿Qué es “nanobanana” en esta guía?

Es el nombre usado en demos para la capacidad de generación/edición de imágenes dentro del flujo de AI Studio. Te permite componer, recortar o reiluminar imágenes en el mismo proyecto. Mira el demo en este video.

4) ¿Puedo usar estas apps con fines comerciales?

Sí, pero revisa los Términos del servicio, derechos de imagen y licencias de tus recursos. Sé transparente si aplicas staging virtual o generas partes de la imagen con IA.

5) ¿Cómo aseguro consistencia visual en catálogos?

Usa una imagen de referencia de estilo, fija paleta y tipografías, pide fondos y encuadres repetibles, y define nombres de archivo y preset de iluminación en el prompt.

6) ¿Cómo automatizo generar fichas de producto para e-commerce con IA por cientos?

Usa la API de Gemini, procesa una hoja de cálculo con imágenes/atributos y ejecuta el mismo prompt por fila. Controla estados y reintentos en tu script.

7) ¿Puedo integrarlo con AppSheet sin escribir código?

Sí. AppSheet Gemini crea apps de negocio desde texto. Úsalo para inventarios, checklists o catálogos internos y conéctalo a tus datos.

8) ¿Cuál modelo de Gemini elijo?

Selecciona un modelo multimodal en AI Studio para mezclar texto e imagen y seguir este Google AI Studio Build tutorial con precisión.

9) ¿Cómo evito inventar detalles en anuncios inmobiliarios con IA?

Pide explícitamente: “Solo describe lo visible en las fotos y lo confirmado por los campos.” Añade validaciones para que el copy no agregue atributos no presentes.

10) ¿Gemini Coder me sirve si soy dev?

Sí. Es ideal para generar el esqueleto de apps a partir de prompts y acelerar tu front-end. Luego lo personalizas y despliegas donde prefieras. Inspírate con este video.

Cover Image