Saltar al contenido principal

Tutorial de Google Antigravity: crea un panel de riesgo financiero

Descubre cómo Google Antigravity convierte prompts en apps completas. Crea un panel financiero con Gemini 3 y pruebas en navegador con IA.
· 12 min leer

Explora con IA

Google Antigravity es un IDE con agentes que combina modelos potentes como Gemini 3 con un flujo de trabajo centrado en agentes. En lugar de configurar manualmente herramientas, terminales y sesiones de navegador, colaboras con un agente de IA que puede planificar el trabajo en tareas, ejecutar comandos, editar código e incluso interactuar con tu navegador para probar y documentar tu app.

En este tutorial, te mostraré cómo crear un panel de riesgo de finanzas personales totalmente funcional con Google Antigravity. Verás cómo:

  • Instalar y configurar Antigravity con desarrollo asistido por agentes
  • Pedir al agente que configure una aplicación con Next.js, Tailwind y shadcn/ui
  • Revisar y perfeccionar el plan de implementación generado automáticamente
  • Dejar que el agente pruebe tu app en el navegador con la extensión de Antigravity
  • Iterar en funciones como el modo oscuro/claro y depuración con uso del ordenador

Al final tendrás un panel multipágina que visualiza niveles de riesgo para Ahorros, Bonos, Fondos índice y Cripto, con controles interactivos y una interfaz fintech moderna, construido a partir de un único prompt. También te recomiendo revisar nuestra guía de la API de Gemini 3 y el tutorial de Gemini 3 Flash.

Aviso legal: Este tutorial es solo para fines educativos y no constituye asesoramiento financiero; investiga por tu cuenta o consulta a un profesional financiero cualificado antes de tomar decisiones de inversión.

¿Qué es Google Antigravity?

Google Antigravity es una plataforma de desarrollo agent-first que convierte tu IDE en un centro de control para agentes de IA. En esencia, otorga a los agentes control sincronizado sobre tu editor, terminal y navegador, para que puedan planificar el trabajo, cambiar código, ejecutar comandos y verificar el comportamiento de extremo a extremo desde un único lugar. 

En lugar de encadenar scripts y herramientas manualmente, describes el resultado que quieres y dejas que los agentes de Antigravity hagan el trabajo pesado. Pueden:

  • Convertir una petición de alto nivel en un plan por tareas o una lista de comprobación
  • Ejecutar comandos en terminal para crear proyectos, instalar dependencias e iniciar servidores de desarrollo
  • Editar código en todo tu espacio de trabajo, desde archivos de layout hasta componentes compartidos
  • Usar una extensión de navegador para abrir tu app, recorrer flujos y capturar capturas de pantalla o grabaciones como Artifacts.

Antigravity se basa en los modelos Gemini 3 de Google, pero también admite otros proveedores como Claude Sonnet 4.5 y GPT-OSS. Incluye dos vistas principales: una vista del editor que se siente como un IDE (si has usado Cursor o VS Code), y una vista de gestor de agentes que actúa como centro de control para tareas más largas y multi-workspace. Juntas, facilitan trabajar a nivel de tarea mientras los agentes se encargan de los detalles de implementación.

Demo de Google Antigravity: creando un panel de riesgo financiero

En esta sección, crearemos un panel de riesgo de finanzas personales con Google Antigravity. El agente convertirá un único prompt en lenguaje natural en un proyecto Next.js que modele distintos productos de inversión y sus perfiles de riesgo.

Al finalizar tendrás:

  • Un panel multipágina para Ahorros, Bonos, Fondos índice y Cripto
  • Deslizadores interactivos para el horizonte temporal
  • Una interfaz pulida con modo oscuro/claro
  • Conocimiento de cómo los agentes de Antigravity planifican, implementan, prueban e iteran una funcionalidad completa

Paso 1: instalar Google Antigravity

Empecemos descargando Google Antigravity desde el sitio web oficial y eligiendo el instalador según las especificaciones de tu máquina.

Haz clic en Download for MacOS (o tu sistema operativo) y llegarás a una pantalla para seleccionar la plataforma y descargar el binario adecuado para tu equipo y completar la instalación.

Download page

Para este tutorial, lo ejecuté en un Mac con Apple Silicon, pero la interfaz no cambia en otras máquinas. 

Una vez descargado, instala Google Antigravity como cualquier otra aplicación e iníciala.

Paso 2: configuración inicial

Al abrirlo por primera vez, Antigravity te guía con un asistente de bienvenida.

Paso 2.1: elige el flujo de configuración

Si eres usuario avanzado de Cursor o VS Code y quieres usar su configuración para montar Antigravity, elige esas opciones. Yo prefiero empezar desde cero, así que selecciona Start fresh y haz clic en Next.

Set up

Paso 2.2: configura el agente de Antigravity

A continuación verás una pantalla sobre el uso del agente. Para este tutorial, elige:

  • Desarrollo asistido por agente (recomendado): el agente hace la mayor parte del trabajo, pero mantiene a una persona en el circuito para que puedas revisar planes y cambios sobre la marcha.
  • Ejecución en terminal (Auto): permite al agente ejecutar automáticamente comandos seguros y rutinarios sin pedir permiso cada vez.
  • Política de revisión (decide el agente): deja que el agente decida cuándo necesita revisión explícita de una persona y cuándo puede continuar solo.
  • Usar la lista de permitidos por defecto para el navegador: limita el acceso del agente al navegador a un conjunto de dominios y acciones preaprobadas para mayor seguridad.

Haz clic en Next para terminar la configuración.

Set up

Cuando termines, el siguiente paso es crear un espacio de trabajo para nuestro experimento.

Paso 3: crear un nuevo espacio de trabajo

Al completar la configuración, llegarás a la pantalla de inicio de Antigravity. Para continuar, haz clic en Open Folder y crea/selecciona un directorio nuevo para este proyecto. Por ejemplo: ~/Antigravity/personal-finance-dashboard. Esta carpeta será tu app de Next.js.

A la derecha verás el panel del agente donde puedes seleccionar un modelo y enviar prompts.

Set up

Paso 4: crea la app

Con el espacio de trabajo abierto, elige un modelo (por ejemplo, Gemini 3 Pro o Claude Sonnet 4.5, o GPT OSS 120B) en el panel del agente. Luego, pega el siguiente prompt:

Build me a Next.js app called “Personal Finance Risk Dashboard” that shows different risk profiles for Savings, Bonds, Index Funds, and Crypto, each on its own page. 
For every product, display risk level, volatility, and projected returns (with a slider for time horizon), 
and use Tailwind plus shadcn/ui to make the UI look like a polished, responsive fintech dashboard

Nota: en el momento de escribir este tutorial, probé con el modelo Gemini 3 Pro (low), pero dio algunos errores. No obstante, usa el modelo que mejor encaje con tu caso. 

Verás que el agente responde con algo parecido a esto:

Inmediatamente después, Antigravity propondrá un comando de terminal para crear el esqueleto del proyecto. Simplemente haz clic en Accept para que el agente lo ejecute y realice algunos pasos en segundo plano para generar una checklist completa de la app.

Abajo tienes una captura de esos pasos en segundo plano ejecutándose en la terminal lateral, empezando por la instalación de dependencias.

Puedes dejarlo corriendo mientras observas los registros.

Paso 5: revisar el artifact de la lista de tareas

Cuando finaliza el esqueleto, el agente genera un artifact de lista de tareas para todo el proyecto.

Cada sección incluye casillas como:

  • Inicializar proyecto Next.js con TypeScript y Tailwind CSS
  • Configurar la librería de componentes shadcn/ui
  • Página de Ahorros/Bonos/Fondos índice/Cripto con perfil de riesgo
  • Implementar modo oscuro, animaciones y diseño responsive
  • Probar la navegación y el funcionamiento de los deslizadores

Con esta lista lista, el agente empieza a cubrir cada tarea una por una. En este punto puedes abrir la barra lateral del Explorador para ver lo que ha creado el agente:

image7.png

Ahora tienes una estructura estándar de archivos de Next.js, Tailwind y shadcn/ui lista para personalizar para esta aplicación.

Paso 6: revisar el plan de implementación

Junto con la checklist, Antigravity genera un artifact de Plan de implementación más detallado:

La sección Revisión del usuario requerida suele incluir:

  • Enfoque de diseño: incluye información sobre modo oscuro, degradados, animaciones y diseño responsive.
  • Modelo de datos: contiene todas las métricas de riesgo (ahorros, bonos, fondos índice y cripto) para nuestra aplicación de riesgo financiero.
  • Estructura principal de la aplicación: describe cómo se modificarán los archivos de layout para configurar estilos globales, tipografía, metadatos, la página de inicio y el tema de modo oscuro.
  • Páginas de producto: enumera las páginas de Next.js dedicadas como /savings, /bonds, /index-funds, /crypto y la información de riesgo, volatilidad y rentabilidad que mostrará cada una.
  • Componentes compartidos: define componentes reutilizables como la barra de navegación, tarjetas de perfil de riesgo, calculadora de rentabilidad y tarjetas de resumen de producto usadas en la home y páginas de producto.
  • Utilidades y tipos: cubre las utilidades TypeScript en lib/financial-data.ts que contienen datos de productos, perfiles de riesgo, cálculos de rentabilidad proyectada y funciones para formatear dinero y porcentajes.
  • Plan de verificación: detalla cómo se probará la app: iniciar el servidor de desarrollo, comprobar manualmente cada página y deslizador, validar modo oscuro y responsive, y usar el agente del navegador para grabar un recorrido con capturas.

Podemos ajustar las cifras de riesgo si queremos datos más realistas o añadir requisitos extra. Por último, añade comentarios en los artifacts de Tareas/Plan de implementación si quieres que el agente ajuste el rumbo.

image12.png

Cuando el plan te convenza, haz clic en Proceed en la pestaña del Plan de implementación. Al hacerlo, el agente empezará a modificar y crear archivos fuente en el directorio src/. Creará páginas individuales para Ahorros, Bonos, Fondos índice y Cripto. 

Por el camino creará componentes reutilizables para tarjetas, deslizadores y gráficos, y aplicará estilos de Tailwind y shadcn/ui en toda la app.

Por último, verás nuevos pasos en segundo plano y actualizaciones de progreso por cada cambio de código.

Paso 7: pruebas y verificación 

Cuando termina la implementación, Antigravity pasa a pruebas y verificación. Verás un nuevo elemento de progreso donde Antigravity solicitará usar el navegador mediante los botones Setup o Deny. Simplemente haz clic en Setup para continuar.

image6.png

Antes de que el agente pueda interactuar con el navegador, necesitas la extensión oficial.

Visita la ficha en la Chrome Web Store y haz clic en Add to Chrome.

Tras la instalación, cuando el agente controle el navegador notarás un resplandor alrededor de la pantalla como se muestra a continuación:

image29.png

Ese resplandor indica que el agente de Antigravity está usando activamente el navegador, es decir, haciendo clic, desplazándose y probando la app como parte de la verificación.

Paso 8: revisar el artifact de recorrido

Cuando acaban las pruebas, verás un resumen final de actualizaciones de progreso como este:

image10 (2).png

El artifact de recorrido suele incluir:

  • Capturas de cada página
  • Una sesión de navegador grabada del agente haciendo clic por la app
  • Una descripción narrativa de lo probado (ejemplo: «Se verificó que el deslizador de la página de Ahorros actualiza la rentabilidad proyectada en tiempo real»)

Si todo está bien, haz clic en Accept all para aplicar los cambios.

Así queda nuestra app final:

image25.png

image2 (1).png

image13.png

image28.png

image4.png

Paso 9: editar el panel

Ahora vamos a iterar sobre la interfaz. Supongamos que quieres un interruptor de modo oscuro/claro en la cabecera del panel y añadir algunos gráficos en cada página. En la lista de tareas o en el Plan de implementación, o directamente en el panel del agente, puedes pedir:

image15.png

Antigravity hará lo siguiente:

  • Actualizar los componentes de layout para incluir un cambio de tema (probablemente con las utilidades de tema de shadcn/ui)
  • Añadir, reemplazar o eliminar componentes de gráficos
  • Volver a ejecutar la app y probar el interruptor en el navegador

Ahora haz clic en Submit y tanto nuestro comentario anterior como este se implementarán.

Paso 10: revisar errores y depuración 

En la práctica, puede que observes que las revisiones a veces provocan bastantes errores, quizá por el modelo, pero Antigravity sigue trabajando con Computer Use.

Incluso cuando el agente se encuentra con errores, puede:

  • Leer el mensaje de error en la terminal
  • Abrir la app en el navegador y reproducir el problema
  • Tomar capturas y grabaciones del estado roto
  • Usar esas pistas visuales y logs para corregir el error

image27.png

Puedes seguir el proceso abriendo el recorrido o consultando las nuevas actualizaciones de progreso de los pasos de depuración.

A estas alturas has:

  • Pedido a un agente que cree una app completa de Next.js + Tailwind + shadcn/ui
  • Revisado y editado un Plan de implementación estructurado
  • Dejado que Antigravity gestione la configuración, el código, las pruebas y la verificación en navegador
  • Iterado sobre la interfaz con comentarios y prompts adicionales
  • Visto al agente depurar problemas mediante uso del ordenador y capturas

Ahora nuestra app final está lista para revisión.

Paso 11: resultado final

Tras iterar en el interruptor y el layout, acabarás con una aplicación final donde se han eliminado los gráficos y el modo claro/oscuro funciona en todo el panel.

Modo oscuro:

image25.png

Modo claro:

image9.png

Puedes ver nuestro panel en acción en el vídeo de abajo: 

Reflexiones finales

Google Antigravity cambia el desarrollo: de programar manualmente en un editor a colaborar con un agente que puede planificar, implementar y verificar funcionalidades completas.

En un único flujo vimos:

  • Planificación: incluye una lista de tareas y un artifact de plan de implementación
  • Ejecución: la mayor parte la realizó el agente con comandos de terminal, ediciones de archivos y construcción de UI
  • Verificación: para esto se requirió automatización del navegador, grabaciones del recorrido y resúmenes de pruebas
  • Iteración: principalmente refinamientos guiados por comentarios (modo oscuro/claro, ajustes de layout), donde el agente trabajó sobre indicaciones del usuario.
  • Depuración: finalmente, una investigación automatizada de errores mediante uso del ordenador facilitó la depuración

Ahora puedes reutilizar el mismo patrón para otras apps de demostración:

  • Un panel de intensidad de entrenamiento
  • Un explorador del ruido en la ciudad
  • Una interfaz de entrega de comida con todas las funciones

Si quieres aprender más sobre cómo crear agentes de IA, te recomiendo el curso Building AI Agents with Google ADK.

FAQs de Google Antigravity

¿Google Antigravity admite lenguajes de programación además de JavaScript y Next.js?

Sí. Aunque gran parte del enfoque inicial de Antigravity está en frameworks web como JavaScript, TypeScript, React y Next.js, está diseñada para flujos multilenguaje. Los agentes de la plataforma pueden planificar y ejecutar comandos en diferentes tipos de proyectos, por lo que se espera que el soporte de lenguajes se amplíe con el tiempo.

¿Cuáles son los límites de uso actuales o el modelo de precios de Google Antigravity?

Google Antigravity está actualmente en vista previa pública y es gratuita. Ofrece límites de uso generosos para tareas impulsadas por Gemini 3 Pro y otros modelos compatibles. Estos límites se restablecen periódicamente y aún no se han anunciado detalles de precios para futuros planes de pago.

¿Cómo garantiza Antigravity que el trabajo del agente de IA sea correcto y auditable?

Antigravity genera automáticamente “Artifacts” que documentan cada etapa del trabajo del agente, incluidas listas de tareas, planes de implementación, registros de terminal, capturas de pantalla y recorridos grabados en el navegador. Esta trazabilidad ayuda a los desarrolladores a verificar y revisar cada paso de lo que ha hecho el agente.

¿Pueden ejecutarse varios agentes en paralelo dentro de Antigravity?

Sí. Antigravity permite crear y gestionar varios agentes de IA simultáneamente. Cada agente puede centrarse en distintas tareas o espacios de trabajo (por ejemplo, uno implementa código mientras otro prueba funciones o actualiza documentación), habilitando verdaderos flujos en paralelo.

¿Qué requisitos de hardware o sistema operativo tiene Antigravity?

Antigravity está disponible para macOS, Windows y Linux. Funciona mejor en sistemas modernos con suficiente RAM y potencia de proceso para tareas asistidas por IA. En macOS se recomiendan versiones Monterey o posteriores, y en Windows se requiere instalación de 64 bits.

Aashi Dutt

Autor

Aashi Dutt

LinkedInTwitter

Soy experta Google Developers en ML (Gen AI), triple experta en Kaggle y embajadora de Women Techmakers, con más de tres años de experiencia en el sector tecnológico. Cofundé una startup de salud en 2020 y actualmente curso un máster en informática en Georgia Tech, con especialización en aprendizaje automático.

Temas

Agentes de IAInteligencia ArtificialGrandes modelos lingüísticos

Relacionado

blog

10 maneras de utilizar ChatGPT para las finanzas

Ver más →