Crea tu app GRATIS con Google Antigravity y Qwen Code: guía práctica y ejemplos

Vista clara de la pantalla Ajustes de FitTrack mostrando tema (Claro/Oscuro), unidad de peso y tiempo de descanso

Si estás buscando una forma rápida y económica de crear aplicaciones web usando IA como motor de generación de código, hay una combinación que merece tu atención: Qwen Code junto con Google Antigravity. Esta pairing te permite trabajar con una CLI poderosa, conectarla a un agente dentro de un entorno como Antigravity (o VS Code) y aprovechar hasta 1000 requests gratuitos al día para prototipar, generar funcionalidades y poner en marcha proyectos sin pagar de entrada.

En esta guía detallada te explico qué es Qwen Code, por qué es una alternativa interesante frente a otras opciones, cómo instalarlo y conectarlo con Antigravity usando un flujo de trabajo tipo vibe coding, y te muestro dos ejemplos prácticos: un juego 2D estilo 8-bit y una app de seguimiento de entrenamientos (FitTrack) que guarda datos en local storage. Todo explicado paso a paso y con recomendaciones para sacarle el máximo provecho.

Tabla de contenidos

🚀 ¿Qué es Qwen Code y por qué te interesa?

Qwen Code es una herramienta/orientada a desarrolladores que funciona como una CLI y ofrece modelos de lenguaje optimizados para generación de código. La gran ventaja que resalta es la política de créditos gratuitos: en el momento de revisar esta integración puedes obtener hasta 1000 requests al día, lo que permite experimentar, iterar y construir prototipos sin incurrir en costos inmediatos.

Esto convierte a Qwen Code en una opción muy útil como:

  • Respaldo cuando te quedas corto de créditos en otras plataformas.
  • Alternativa económica para proyectos personales o pruebas rápidas.
  • Motor de agentes en entornos como Antigravity, donde un agente puede automatizar la instalación y tareas repetitivas.

Una sola línea lo resume: con Qwen Code tienes un motor de IA para generar código y un plan gratuito lo suficientemente generoso para prototipar muchas ideas.

Enlaces importantes:

Qwen Code: https://qwen.ai/qwencode

🛠️ Cómo encajar Qwen Code dentro de tu flujo con Antigravity (o VS Code)

La integración entre Qwen Code y un entorno tipo Antigravity (un workspace con agentes) facilita automatizar pasos que normalmente harías manualmente. En lugar de pegar comandos uno por uno en la terminal, un agente puede ejecutar la instalación, configurar autenticación y dejar todo listo en cuestión de minutos.

Conceptualmente, el flujo es este:

  1. Clonar o acceder al repositorio/CLI de Qwen Code.
  2. Ejecutar el instalador o comando de setup desde la terminal.
  3. Conectar Qwen Code con el agente en Antigravity para que gestione la interacción y permisos.
  4. Autenticar usando la opción gratuita (Hot World free en la demostración) o mediante proveedores como Alibaba Cloud si prefieres pasar una API key.
  5. Comenzar a enviar prompts/requests y dejar que el agente genere carpetas, componentes, servidores y el boilerplate necesario.

La experiencia con un agente tiene ventajas clave:

  • El agente guarda contexto de la conversación, por lo tanto puedes referirte a pasos previos sin repetir instrucciones.
  • Puedes permitir que el agente ejecute comandos en tu máquina de forma interactiva para acelerar la instalación.
  • Ideal para quienes aprenden o para quienes quieren acelerar el setup inicial de un proyecto.

🔧 Instalación paso a paso: mantenerlo simple

No necesitas ser un experto para comenzar. La instalación se puede dividir en pasos sencillos y, si usas un entorno como Antigravity o Vibe Coding, el propio agente puede encargarse de la mayor parte del trabajo. Aquí tienes la versión simplificada del proceso de instalación que se sigue en el flujo presentado:

  1. Clonar o abrir el repositorio de Qwen Code desde el link oficial.
  2. Seguir las instrucciones del README: ejecutar el comando de instalación inicial (normalmente un script o un npm/pip install según la herramienta).
  3. Aceptar permisos cuando el instalador lo solicite.
  4. Verificar que la CLI quedó disponible ejecutando el comando de help o la comprobación indicada (por ejemplo, un qwen-code --help o qwen --version dependiendo del nombre).
  5. Instalar la extensión o complemento en Antigravity/VS Code si quieres una experiencia integrada con consola y paneles de conversación.

Si en algún momento estás perezoso de copiar comandos, los agentes pueden automatizarlo: basta con pegar el enlace del repositorio al workspace del agente, y este hará el resto (ejecutará la instalación y te pedirá confirmaciones cuando sea necesario).

🔐 Autenticación y créditos gratis: cómo aprovechar los 1000 requests

Uno de los puntos más atractivos es la opción de autenticación gratuita que permite acceder al plan con hasta 1000 requests al día. En el flujo de demostración se eligió la opción «Hot World free» para autenticarse, y la aplicación confirmó que la cuenta quedó registrada con el plan gratuito.

Opciones de autenticación típicas:

  • Autenticación gratuita con proveedor propio de Qwen Code (ideal para comenzar rápido).
  • Pasar una API Key desde Alibaba Cloud u otro proveedor si necesitas un control más riguroso o si ya tienes infraestructura allí.

Recomendaciones:

  • Monitorea tu consumo de requests si trabajas con prompts muy grandes o pipelines que hacen muchas llamadas por cada cambio.
  • Usa la cuenta gratuita para prototipos y pruebas; si el proyecto escala o requiere SLA, evalúa planes de pago.
  • Combina Qwen Code con caching o almacenamiento local (por ejemplo local storage en el cliente) para reducir llamadas innecesarias durante la iteración local.

🤖 Agentes en Antigravity: cómo te facilitan la vida

Los agentes funcionan como asistentes automáticos que pueden ejecutar comandos, mantener conversaciones contextuales y generar artefactos de proyecto. En la práctica, permiten:

  • Instalar dependencias y configurar tu máquina sin tener que escribir cada comando.
  • Generar la estructura inicial de un proyecto con prompts específicos (por ejemplo crear una app React + juego 2D).
  • Responder dudas sobre la herramienta porque guardan el contexto de lo que ya se hizo.

Un flujo típico con agente en Antigravity:

  1. Pegar el repositorio o el comando de instalación en la interfaz del agente.
  2. Dejar que el agente ejecute los comandos; cuando requiera una confirmación, responder desde la interfaz.
  3. Permitir que el agente ejecute tareas adicionales (crear componentes, ejecutar el servidor dev) marcando «always allowed» si confías en la sesión.
  4. Interactuar con el agente usando prompts para pedirle nuevas funcionalidades o cambios en el proyecto.

Esto reduce fricción, acelera prototipos y es especialmente útil para personas que están aprendiendo o quieren experimentar sin configurar todo manualmente.

🎮 Demo 1: Generar un juego 2D estilo 8-bit (Pixel Adventure)

Una de las pruebas más divertidas es pedirle al agente que genere un juego 2D en React con estética 8-bit. En pocos pasos se puede tener:

  • Un proyecto generado con componentes de juego.
  • Assets básicos de pixel art o placeholders.
  • Un servidor local corriendo para probar en el navegador.

En la demo, el agente creó un proyecto llamado Pixel Adventure que se podía ejecutar y jugar directamente en el navegador. El flujo fue:

  1. Enviar el prompt «crear aplicación web en React Bit con un juego de 2D tipo 8bit».
  2. El agente desplegó comandos y generó la estructura del proyecto.
  3. Se permitió la ejecución automática y se arrancó el servidor de desarrollo.
  4. Se abrió la URL local donde se podía jugar el prototipo.

Resultados prácticos:

  • Un prototipo funcional en minutos.
  • Una base para iterar: cambiar colores, añadir niveles o mejorar la física del juego.
  • Perfecto para aprender a integrar motores de juego simples dentro de React o para crear demos rápidas.

📱 Demo 2: FitTrack — una app de fitness simple con local storage

El segundo ejemplo muestra cómo usar Qwen Code para generar una aplicación de seguimiento de entrenamientos. En vez de conectar una base de datos compleja, se decide mantener todo en local storage del navegador para acelerar la prueba del flujo CRUD y la experiencia de usuario.

Requisitos básicos que se pidieron al agente para FitTrack:

  • Interfaz para registrar entrenamientos.
  • Listado de ejercicios con series, peso y repeticiones.
  • Pantallas de progreso, records y ajustes.
  • Guardar datos en local storage para no depender de un backend.

El agente generó la app con la siguiente lógica:

  1. Generar una estructura React con rutas para entrenamientos, ejercicios y ajustes.
  2. Componentes para añadir series y registrar repeticiones.
  3. Uso de local storage para persistir los datos del usuario entre sesiones.
  4. Servidor de desarrollo corriendo y página accesible desde la dirección local.

Beneficios de empezar con local storage:

  • Iteras rápido sin configurar backend o autenticación.
  • Perfecto para pruebas de UX y flujo de negocio.
  • Cuando necesites escalar, puedes reemplazar el storage local por una base de datos o servicio (por ejemplo Convex, Firebase o tu propio backend).

💡 Buenas prácticas y recomendaciones para usar Qwen Code + Antigravity

Para sacar el máximo provecho a esta combinación te dejo una lista de recomendaciones basadas en la experiencia práctica:

1) Planifica las llamadas y optimiza prompts

Evita prompts excesivamente largos que generen muchas respuestas parciales. Si tu pipeline hace múltiples llamadas por cada cambio, considera:

  • Hacer menos llamadas pero más completas.
  • Usar caches intermedios o local storage para datos que no requieren regeneración.

2) Usa agentes para tareas repetitivas, no para todo

Los agentes son ideales para setup, scaffolding y tareas repetitivas. Para cambios finos en UI o lógica de negocio probablemente es más rápido editar manualmente o usar la ayuda del agente como referencia.

3) Divide el proyecto en módulos

Solicita generación por partes (componentes, rutas, servicios) en lugar de pedir un monolito. Esto facilita la revisión y reduce la cantidad de requests innecesarios.

4) Controla la factura y el límite gratuito

Aunque 1000 requests al día son muchos para prototipos, si tu equipo escala, monitoriza el consumo. Mantén alertas o logs que te permitan ver cuántas llamadas haces por feature.

5) Mantén un entorno híbrido

Empieza con local storage o mock databases. Cuando la app esté estable, integra una base de datos real o un servidor backend. Así reduces riesgos y costos iniciales.

📚 Alternativas y cómo elegir

En el ecosistema hay varias opciones: Gemini, otros modelos y plataformas con planes gratuitos o freemium. Algunas consideraciones para elegir:

  • Créditos gratuitos: compara número de requests y límites por tamaño de prompt.
  • Latencia y velocidad: algunos modelos responden más rápido que otros, importante para agentes interactivos.
  • Compatibilidad con herramientas: verifica si la plataforma ofrece una CLI o SDK que puedas integrar fácilmente con Antigravity o VS Code.
  • Gestión de keys y seguridad: opciones que permiten pasar API keys de proveedores cloud pueden facilitar integraciones empresariales.

Qwen Code destaca por su plan gratuito y por ser fácil de integrar con agentes que automatizan la mayor parte del setup, lo que lo hace ideal para prototipos y proyectos personales.

🔁 Flujo recomendado para crear una app con este setup

Si quieres repetir el proceso en tus propios proyectos, este es el flujo que recomiendo:

  1. Preparar el prompt y el PRD básico del feature que quieres generar (por ejemplo: «FitTrack: registrar entrenamientos, ejercicios, series y progreso»).
  2. Iniciar un workspace en Antigravity o abrir VS Code y clonar el repo de Qwen Code.
  3. Permitir que el agente ejecute la instalación y autenticación con la cuenta gratuita.
  4. Solicitar la generación del proyecto por módulos: UI, rutas, almacenamiento y tests básicos.
  5. Arrancar el servidor dev, probar localmente y ajustar manualmente los detalles finos.
  6. Cuando esté listo, cambiar el storage local por un backend si lo necesitas y desplegar en un host.

Para desplegar una demo o publicar tu app, puedes usar servicios de hosting que facilitan subir aplicaciones estáticas o Node apps rápidamente.

Enlaces útiles para desplegar y aprender más:

Hosting donde publico mis apps web: https://hostinger.com/rodrigo

Maratón de videos sobre cómo crear apps web con IA (playlist): https://www.youtube.com/playlist?list=PLBTuX25MUpdo9YuMzu-o9c80p1q40EBfI

📦 Recursos y enlaces prácticos

Aquí están los links mencionados y otras referencias que te ayudan a arrancar:

  • Qwen Code: https://qwen.ai/qwencode
  • Comunidad Vibe Coding en Skool (herramientas, prompts y recursos): https://www.skool.com/vibe-coding-crea-apps-con-ia-5930
  • Hosting y despliegue: https://hostinger.com/rodrigo
  • Playlist con tutoriales para crear apps con IA: https://www.youtube.com/playlist?list=PLBTuX25MUpdo9YuMzu-o9c80p1q40EBfI

✅ Conclusión: ¿por qué probar Qwen Code con Antigravity?

Si valoras rapidez para prototipar, acceso a una buena cantidad de requests gratuitos y la posibilidad de automatizar el setup con agentes, esta combinación es una opción muy atractiva. Algunos puntos finales a considerar:

  • Ideal para aprender y prototipar: automatiza tareas repetitivas y deja tiempo para iterar en UX y lógica.
  • Plan gratuito generoso: 1000 requests al día permite muchos experimentos sin coste.
  • Escalable: cuando el proyecto crezca, puedes migrar partes a infraestructuras más tradicionales.
  • Flexible: funciona tanto con Antigravity (agentes) como directamente en VS Code si prefieres ese flujo.
Interfaz de Antigravity mostrando la verificación de instalación con 'qwen --version' y el número de versión

📎 Ejemplo práctico: prompt base para FitTrack (útil para empezar)

Proyecto: FitTrack (React)
Requisitos:
- Página principal con listado de entrenamientos.
- Form para crear nuevo entrenamiento: nombre, fecha, ejercicios.
- Ejercicio: nombre, series (peso y repeticiones).
- Guardar todo en localStorage.
- Rutas: /, /entrenamientos/:id, /ajustes
- Componentes: EntrenamientosList, EntrenamientoForm, EjercicioItem, Progress
- Estilos simples, mobile-first.
- Añadir un botón para exportar/backup JSON de localStorage.

Con este prompt puedes pedir al agente que genere el scaffolding inicial y te deje listo para iterar. Recuerda indicar que uses local storage si no quieres configurar aún una base de datos.

📌 Últimos consejos antes de empezar

  • Empieza con objetivos pequeños: crea un componente, luego otra pantalla.
  • Usa agentes para ahorrar tiempo, pero valida siempre el código generado manualmente.
  • Documenta lo que generas: guarda prompts y PRD en el repositorio para repetir procesos.
  • Monitorea el consumo de requests si trabajas en equipo.

Si quieres experimentar ahora, copia el link de Qwen Code y prueba conectarlo a tu workspace. Con unos pocos prompts puedes tener prototipos jugables y apps funcionales en cuestión de minutos.

Editor VS Code / Antigravity con documento de instrucciones, características del juego y panel de agente visible

📂 Enlaces finales y recursos

Links nuevamente para tu comodidad:

  • Qwen Code: https://qwen.ai/qwencode
  • Comunidad Vibe Coding en Skool: https://www.skool.com/vibe-coding-crea-apps-con-ia-5930
  • Hosting donde publico mis apps web: https://hostinger.com/rodrigo
  • Playlist de videos sobre apps web con IA: https://www.youtube.com/playlist?list=PLBTuX25MUpdo9YuMzu-o9c80p1q40EBfI
  • Video original con walkthrough y demos (referencia rápida): https://www.youtube.com/watch?v=A-KO6R7O6kk

🎯 Próximos pasos sugeridos

  1. Regístrate en Qwen Code y revisa el plan gratuito.
  2. Clona el repo en un workspace con Agentes (Antigravity) o abre VS Code.
  3. Prueba primero con un micro-proyecto: un componente o una página.
  4. Guarda tus prompts y aprendizajes en un documento para reproducir resultados.

¿Listo para crear?

Si lo que buscas es acelerar la construcción de ideas sin invertir en infraestructura desde el minuto cero, Qwen Code junto con agentes en un workspace son una ruta práctica y potente. Te permiten iterar con velocidad y mantener control sobre las decisiones técnicas a medida que tu proyecto madura.

¡Anímate a experimentar y a documentar tus prompts! Cada proyecto te dará más contexto y mejores resultados con menor número de requests.

📎 Recursos adicionales

Comunidad y herramientas para seguir aprendiendo:

  • Skool Vibe Coding: https://www.skool.com/vibe-coding-crea-apps-con-ia-5930
  • Hostinger: https://hostinger.com/rodrigo
  • Playlist de tutoriales prácticos: https://www.youtube.com/playlist?list=PLBTuX25MUpdo9YuMzu-o9c80p1q40EBfI
  • Qwen Code: https://qwen.ai/qwencode

👋 Cierre

Crear apps con IA ya no es solo una idea: con herramientas como Qwen Code y agentes automatizadores puedes transformar prompts en proyectos concretos de forma rápida y con costos iniciales bajos. Empieza con algo pequeño, aprende a optimizar prompts y aprovecha los 1000 requests diarios para iterar sin presión.

Sección Gestión de Datos en Ajustes de FitTrack con botones para borrar Entrenamientos, Rutinas, Récords y botón rojo 'Todo'

📌 Código de ejemplo: exportar localStorage en JSON

function exportLocalStorage() {
  const data = {};
  for (let i = 0; i < localStorage.length; i++) {
    const key = localStorage.key(i);
    data[key] = JSON.parse(localStorage.getItem(key));
  }
  const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = 'backup_localstorage.json';
  a.click();
  URL.revokeObjectURL(url);
}

Este snippet te sirve para añadir una opción de exportar/backup en apps que usan local storage, como FitTrack en la demo.

Enlace rápido de referencia

Qwen Code: https://qwen.ai/qwencode

Entradas relacionadas