1. Introducción y configuración
Te damos la bienvenida
¡Hola! Te damos la bienvenida a Coding Jam. En los próximos 75 minutos, crearás una app web de IA real y funcional.
Consulta el sitio web aquí: Sitio web de Coding Jam
Qué compilará
Una app web potenciada por IA basada en el resumen del proyecto de esta semana. Se ejecuta en tu navegador. Usa la IA de Gemini de Google. Será completamente tuyo al final de la sesión.
Cómo instalar Antigravity
Antigravity es el asistente de IA que usaremos para todo. Es una app que se instala en tu computadora.
Paso 1: Descarga
👉 Ve a https://antigravity.google/download en tu navegador.
👉 Haz clic en el botón de descarga de tu sistema operativo (Mac, Windows o Linux).
👉 Ejecuta el instalador descargado. La configuración predeterminada es adecuada: Haz clic en ella.
Paso 2: Inicia la app y accede
👉 Inicia Antigravity desde la carpeta Aplicaciones (Mac) o el menú Inicio (Windows).
👉 Haz clic en "Acceder" cuando se te solicite.
👉 Usa tu Cuenta de Google.
Paso 3: Verifica la pantalla de bienvenida
Deberías ver la pantalla de bienvenida de Antigravity con tres botones grandes:
- Open Folder: Abre una carpeta existente como espacio de trabajo.
- Open Agent Manager: Abre el panel del agente (aquí es donde se realizará la mayor parte de nuestro trabajo).
- Clone Repository: Descarga un proyecto de GitHub (lo usaremos en la sección 3A).
En https://antigravity.google/, encontrarás más documentación si quieres profundizar en el tema.
✅ Punto de control: Antigravity está instalado, accediste y ves la pantalla de bienvenida con tres botones.
2. Instala las herramientas necesarias (a través de Antigravity)
Antigravity necesita dos herramientas auxiliares en tu computadora:
Herramienta | Qué es (en lenguaje sencillo) |
uv | Administra Python, el lenguaje detrás del backend de tu app |
git | Descarga archivos del proyecto desde Internet (Antigravity usa esto para la clonación). |
No tendrás que escribir comandos de instalación. Le harás la pregunta a Antigravity en inglés, y ella se encargará del resto.
Paso 1: Abre un espacio de trabajo temporal
Antigravity necesita una carpeta abierta para chatear. (Sin carpeta, no hay chat).
👉 En la pantalla de bienvenida, haz clic en "Abrir carpeta".
👉 Crea o elige cualquier carpeta vacía. Se sugiere crear una carpeta nueva llamada coding-jam-setup en un lugar conveniente (tu escritorio está bien).
👉 Haz clic en Abrir (o Seleccionar carpeta).
Se abrirá la vista del Administrador de agentes con tu nuevo espacio de trabajo (vacío) seleccionado.
Paso 2: Pídele a Antigravity que revise e instale las herramientas
👉 Presiona Cmd + L (Mac) o Ctrl + L (Windows/Linux) para enfocar la entrada de chat.
👉 Confirma que el selector de modelos en la parte inferior muestre Gemini 3 Flash (predeterminado, adecuado para este caso).
📝 Instrucción más simple: Pega esto en el chat:
Install uv and git on my computer if they're not already there.
Don't install Node.js. Ask permission before each install command.
📝 Versión más detallada (opcional):
Check whether uv and git are installed by running their --version commands.
For any tool that's missing, install it using the best method for my OS:
- Mac: prefer `brew install` (install Homebrew first if missing)
- Windows: prefer `winget install`
- Linux: prefer `apt install` or `dnf install`
Ask permission before each install command.
Do NOT install Node.js — we'll install it later only if needed.
When done, give me a summary of what's installed.
👉 Presiona Intro para enviar.
🤖 Mira cómo trabaja el agente y haz clic en Permitir en las ventanas emergentes
Paso 3: Lee el resumen
Cuando el agente termine, verás algo como lo siguiente:
✅ Setup complete:
- uv 0.4.18 ✅ (installed)
- git 2.42.0 ✅ (already had it)
- Node.js: skipped (will install later if needed)
Si algo sale mal
✅ Punto de control: El agente confirma que se instalaron uv y git. Tiempo total: Entre 3 y 5 minutos (o 7 minutos si Homebrew se tiene que instalar primero en Mac).
Clona tu proyecto
1: Elige el proyecto de esta semana
Coding Jam es un programa de 8 semanas con un miniproyecto diferente cada semana. El facilitador te indicará qué semana haremos hoy. Busca esa fila y copia la URL.
Semana | Proyecto | URL del repositorio |
1 | Probador de peinados con IA |
|
2 | Generador de avatares con IA |
|
3 | Mi calendario especial del año |
|
4 | Del refrigerador a la receta |
|
5 | Frasco de ambiente con IA |
|
6 | One-Page Portfolio |
|
7 | Resume Tailor |
|
8 | Chat de personajes de IA |
|
2: Vuelve a la pantalla de bienvenida
Debemos volver a la pantalla de inicio para usar el botón "Clonar repositorio".
👉 En Antigravity, clona el proyecto que elijas. Ejemplo de clonación de la semana 1, pero debes ingresar el repo correcto.
📝 Instrucción de referencia
Git clone ⚠️ PASTE_YOUR_PROJECT and save to my local folder: ⚠️ PASTE_YOUR_PROJECT
3: Recorre el proyecto
Observa la lista de archivos. Deberías ver lo siguiente:
Archivo o carpeta | De qué se trata |
BRIEF.md | La idea del producto: Lo que estamos creando, en lenguaje sencillo |
reference/ | Una carpeta con una app de ejemplo que funciona. La IA leerá esto cuando escriba tu código, por lo que tu app coincidirá con los patrones. |
.gitignore | Lista de archivos que Git debe ignorar (técnico, ignóralo) |
👉 Haz clic aquí
BRIEF.md para abrirlo y aquí está la idea del proyecto.
✅ Punto de control: Clonaste el proyecto, lo abriste como un espacio de trabajo y leíste BRIEF.md.
3. Instala habilidades de taller
Una "habilidad" es un conjunto de instrucciones almacenadas en GitHub que puedes entregarle a tu IA.
Paso 1: Pídele a Antigravity que instale las habilidades
📝 Pega esta instrucción en el chat:
Please install the workshop skills into this workspace's .agent/skills/
folder. Run these two git clones from the project root:
1. git clone https://github.com/cuppibla/skills-garden .agent/skills/skills-garden
2. git clone https://github.com/google-gemini/gemini-skills .agent/skills/gemini-skills
When Antigravity asks permission to run each command, I'll click Allow.
When done, list the skills that are now available in this workspace.
Paso 2: Haz clic en Permitir en las dos ventanas emergentes
🤖 Deberías ver algo como
I'll create the .agent/skills/ folder and clone both repos into it.
Running: git clone https://github.com/cuppibla/skills-garden .agent/skills/skills-garden
Permite cualquier acción si el agente lo solicita.
👉 Revisa tu lista de archivos. Ahora deberías ver una nueva carpeta .agent/. Haz clic para expandirla y asegúrate de que haya varias habilidades en esta carpeta, como skills-garden y gemini-skills.
Qué hace cada habilidad (solo como referencia, no se requiere ninguna acción)
Skill | Qué hace |
| Escribe el documento de diseño del producto |
| Escribe el documento de diseño de UX |
| Escribe el documento de diseño de ingeniería (con la sección de estrategia de pruebas) |
| Escribe pruebas, las ejecuta y corrige automáticamente los errores (máximo 3 intentos). |
| Habilidad oficial de Google: Cómo usar la API de Gemini correctamente |
| Una copia de seguridad más simple si la habilidad oficial no está disponible |
| Referencias de estilo visual |
✅ Punto de control: En la lista de archivos, se muestra una nueva carpeta .agent/skills/ con skills-garden/ y gemini-skills/ dentro.
4. La charla sobre especificaciones
La Spec Talk es una conversación de 2 minutos en la que le dices a la IA lo que quieres crear. No hay código, no hay documentos, no hay nada compilado aún. Solo estamos analizando la situación.
La única pregunta obligatoria
Lo más importante que la IA necesita saber:
"¿Qué ENTRA y qué SALE?"
🎯 MODELO: Gemini 3 Flash (predeterminado): Preguntas y respuestas simples.
📝 Pega lo siguiente:
Here's what's in @BRIEF.md. Before we lock the spec, ask me 3 short
questions to refine it:
1. What's the one input I want the user to provide?
2. What's the magical moment for the user?
3. What are we deliberately NOT building (to keep scope tight)?
DO NOT generate any plans, docs, or code yet. Just ask me the questions
and wait for my answers.
🤖 Habla con la IA y define mejor tu plan
Aún no generes documentos
Al final de la charla de especificaciones, el agente NO debería haber generado ningún archivo. Si ves que aparecen product.md o cualquier otro archivo nuevo, puedes decirle al agente: "Detente y borra los documentos que acabas de crear. Aún estamos en la fase de Spec Talk".
Sugerencias
✅ Punto de control: Tuviste una conversación breve con Antigravity sobre tu idea de producto, y esta comprendió las entradas y las salidas. Aún no se generó ningún archivo.
5. Genera 3 documentos de diseño
Ahora la IA escribe tres planes en papel antes de que se escriba cualquier código. Hacemos las tres acciones en una sola instrucción usando las tres habilidades de diseño de documentos en secuencia.
Los 3 documentos
Archivo | Qué contiene | Habilidad utilizada |
product.md | Quién es el usuario, qué problema estamos resolviendo y qué funciones |
|
ui.md | Cómo se ven las pantallas, los colores, las fuentes y el diseño |
|
engineering.md | Pila tecnológica, estructura de archivos y sección de estrategia de pruebas |
|
Paso 1: Genera los tres documentos a la vez
🤖 Cambiar a Gemini 3.1 Pro con baja capacidad de pensamiento (recomendado)
📝 Pega esto. Una instrucción hace las tres cosas:
Apply all three design-doc skills in this order:
1. pm-design-doc from .agent/skills/skills-garden/design-doc-skills/pm-design-doc/
→ Generates product.md
2. ux-design-doc from .agent/skills/skills-garden/design-doc-skills/ux-design-doc/
→ Generates ui.md (based on the product.md you just created)
3. eng-design-doc from .agent/skills/skills-garden/design-doc-skills/eng-design-doc/
→ Generates engineering.md (based on product.md, ui.md, and @BRIEF.md)
→ MUST include a "Testing strategy" section with real content
(specific functions to unit-test, one integration test per major flow,
and what's deliberately NOT being tested)
Use the patterns in @reference/ as guidance for the engineering doc
(but vary if the brief justifies it).
Save all three files in the project root. After each one is saved,
briefly confirm what you saved before moving to the next.
When all three are done, give me a final summary listing the section
titles in each file.
Paso 2: Verifica los archivos guardados
👉 Revisa tu lista de archivos. Ahora deberías ver lo siguiente (además de lo que ya estaba):
codingjam-week-1/
├── product.md ← NEW
├── ui.md ← NEW
├── engineering.md ← NEW
├── BRIEF.md
├── reference/
└── .agent/
Paso 3: Revisa y realiza iteraciones
Tú eres el jefe. La IA escribió el plan. Ahora, léelo y solicita cambios.
El hábito más importante
Cuando quieras un cambio, cambia el DOC, no el código. El documento es la fuente de información.
🤖 Lee y revisa los tres documentos
👉 Abre cada uno (haz clic en la lista de archivos), de arriba hacia abajo:
product.md: ¿Esto describe lo que quiero?ui.md: ¿Las pantallas y el aspecto son correctos?engineering.md: ¿La estrategia de prueba tiene sentido? (No es necesario que comprendas la tecnología, solo verifica que HAYA un plan).
🤖 Ahora que la documentación está lista, continúa con los siguientes pasos.
6. Implementación y pruebas
Es la sección más grande del codelab. La IA toma los tres documentos y compila la app: código Y pruebas juntos, de una sola vez. Cuando finalice esta sección, tendrás una base de código funcional que supera sus propias pruebas.
¿Por qué escribir código y pruebas juntos?
Tu engineering.md ya especifica qué pruebas deben existir (la sección Estrategia de pruebas). La implementación no se completa hasta que se aprueban esas pruebas. Por lo tanto, hacemos ambas cosas en una sola etapa.
🤖 Cambiar a Gemini 3.1 Pro con High Thinking (recomendado)
Paso 1: Pídele a la IA que cree el código Y las pruebas
📝 Pega lo siguiente:
You're going to do two things in one shot.
PART 1 — IMPLEMENT THE APP CODE
- Build it according to @engineering.md (stack, file structure)
- Match the UI described in @ui.md
- Use the patterns in @reference/ as guidance for code style
- Backend: use Python with `uv` for dependency management
- If your chosen stack requires Node.js and it isn't installed on my
system, install it via Antigravity (use brew/winget/apt) — ask
permission first
- DO NOT start any dev servers — that's a later section
PART 2 — APPLY THE TEST-GATE SKILL
After the code is written, apply the test-driven-dev skill from
.agent/skills/skills-garden/eng-skills/test-driven-dev.md.
Use the "Testing strategy" section in @engineering.md as the test plan.
IMPORTANT: Mock the Gemini API calls in tests — use a stub that returns
fake response data. The real API key isn't set up yet, and tests should
be deterministic and free anyway (best practice).
The skill should:
1. Write the tests described in the Testing strategy
2. Run them (use pytest for Python, Vitest or Jest for JS)
3. If any fail, fix the CODE (not the tests) and re-run
4. Up to 3 retry attempts max
5. If still failing after 3 tries, STOP and tell me what's broken
When Antigravity asks permission to run commands (uv sync, uv pip
install, pytest, etc.), click Allow.
Report results when both parts are done.
🤖 Haz clic en Permitir en Ventanas emergentes (varias)
Paso 2: Lee el informe final
Cuando termines, verifica lo siguiente:
- ✅ Existe una carpeta
backend/con código - ✅ Existe una carpeta
frontend/con código - ✅ Existe una carpeta
tests/con archivos de prueba - ✅ El resumen indica que "todas las pruebas se aprobaron" (no que "fallaron después de 3 reintentos").
- ✅ El agente NO inició ningún servidor.
¿Qué sucede si fallan los 3 reintentos de prueba?
Es poco frecuente, pero posible. Por lo general, significa que la estrategia de pruebas del documento de ingeniería no es realista para lo que se creó.
📝 Pega lo siguiente:
The auto-fix loop hit the 3-try cap. Pull up @engineering.md and look
at the Testing strategy section. Is the strategy realistic for what
got built? Suggest updates to the doc so the tests align with reality.
Don't change the code yet — update the doc, then re-apply the
test-driven-dev skill.
¿Qué sucede si algo parece extraño?
👉 Si la IA creó algo que no coincide con la documentación, vuelve al documento y no le pidas a la IA que "corrija el código" de forma aislada.
Ejemplo:
I see you built the chat as a popup, but @ui.md says it should be a
full page. Either update ui.md if a popup is actually better, OR
rebuild the chat as a full page to match the current ui.md.
Siempre: El documento es la fuente de información.
✅ Punto de control: El código existe, las pruebas existen y las pruebas se aprueban. Todo listo para configurar la llave de API.
7. Configuración de Google Cloud y la clave de API
Paso 1: Obtén tu clave de API de Gemini en AI Studio (1 min)
- Abre https://aistudio.google.com/app/apikey en una pestaña nueva del navegador.
- Accede con la misma Cuenta de Google.
- Haz clic en "Crear clave de API" (en la esquina superior derecha).
- Se abrirá un diálogo con un menú desplegable de proyectos:
- Si ya creaste un proyecto de Google, puedes seleccionarlo y hacer clic en "Crear clave de API en un proyecto existente".
- Si NO está en la lista: Haz clic en "Crear proyecto".
- Copia la clave de API que aparece. Comienza con
AIza...y tiene alrededor de 40 caracteres.
✏️ Pégalo en un lugar seguro, ya que se lo darás a Antigravity a continuación.
Paso 2: Dile a Antigravity que configure .env (30 s)
De vuelta en Antigravity, abre el chat.
⚠️ DETENTE. LEE ESTO ANTES DE PEGAR.
El siguiente mensaje contiene marcadores de posición PASTE_YOUR_API_KEY_HERE y PASTE_YOUR_PROJECT_ID_HERE.
DEBES reemplazar estos valores por los valores reales del paso 1. De lo contrario, el archivo .env contendrá texto literal de ⚠️ PASTE_... y tu app no funcionará.
Antes de hacer clic en Enviar, analiza la instrucción y confirma que ves lo siguiente:
GEMINI_API_KEY=AIzaSy...(comienza conAIzaSy, alrededor de 40 caracteres)
Si aún ves
⚠️ PASTE_...
en cualquier parte de la instrucción, NO los envíes aún, primero reemplázalos.
📝 Instrucción para pegar (reemplaza el
⚠️ PASTE_...
primero los marcadores de ):
Apply the gemini-api-dev skill from .agent/skills/gemini-skills/skills/gemini-api-dev/.
(If that skill isn't found, fall back to .agent/skills/skills-garden/eng-skills/gemini-api.md)
Create a .env file in the backend folder with these settings:
- GEMINI_API_KEY= ⚠️ PASTE_YOUR_API_KEY_HERE
- Any other env vars the app needs based on @engineering.md
Also verify:
- .env is in .gitignore so the key never gets committed
- The backend code reads GEMINI_API_KEY at startup
- The Gemini SDK is initialized correctly (use google-genai for Python)
When Antigravity asks permission to install Python packages, click Allow.
When done, show me the .env contents with the KEY redacted (just first 6 chars + ...).
🤖 Resultado esperado: El agente crea .env, instala google-genai (haces clic en Permitir) y confirma con la clave oculta:
✅ .env created at backend/.env
GEMINI_API_KEY=AIzaSy... (40 chars, redacted)
.env is already in .gitignore ✓
Backend reads GEMINI_API_KEY via os.getenv() ✓
Gemini client initialized ✓
8. Vista previa y verificación
Se compiló el código. Se superan las pruebas. Se configuró la clave de API. Ahora, abre la app y haz clic en diferentes lugares.
Qué detectan los humanos (que las pruebas no detectan)
Pruebas de captura | Atrapa humanos |
Valores de devolución incorrectos | Colores feos |
Llamadas a funciones dañadas | Texto confuso |
Faltan importaciones | Botones en lugares extraños |
Errores de desajuste | La animación se siente entrecortada |
Errores de lógica | El ambiente no es bueno |
Paso 1: Pídele a Antigravity que inicie el servidor de desarrollo
🎯 MODEL: El valor predeterminado (Flash) está bien.
📝 Pega lo siguiente:
Please start the dev server(s) so I can preview the app in my browser.
Tell me the URL when it's ready. When Antigravity asks permission to
run the server command, I'll click Allow.
🔔 Ventana emergente: uv run uvicorn main:app --reload (o similar) → Haz clic en Permitir
Paso 2: Abre la URL de vista previa
🤖 El agente informa lo siguiente:
Backend running at: http://localhost:8000
Frontend served at: http://localhost:8000 (backend serves it)
Por lo general, la URL es http://localhost:8000 o http://localhost:5173.
👉 Haz clic en la URL del chat o cópiala y pégala en una nueva pestaña del navegador.
Paso 3: Explora la cuenta
Úsala como lo haría un usuario real:
- Haz clic en todos los botones.
- Escribir
- Coloca el cursor sobre los elementos
- Prueba el flujo principal de principio a fin
Si todo se ve y se siente bien, ve al paso 9.7 (escribe el archivo README). Los pasos del 9.4 al 9.6 solo son necesarios si encuentras problemas.
Paso 4: Escribe un archivo README
Una vez que la app funcione, haz lo siguiente:
📝 Pega lo siguiente:
The app works! Please create a README.md in the project root that explains:
- What this app does (in plain English)
- How to install it on a new machine (uv sync, etc.)
- How to run the dev server(s)
- The 3 design docs (@product.md, @ui.md, @engineering.md) are the
source of truth — anyone can read them to understand the system
Save it as README.md.
🤖 Resultado esperado: README.md aparece en la lista de archivos.
Por qué es importante el archivo README
✅ Punto de control: Hiciste clic en la app, corregiste los problemas (si los había) y guardaste un archivo README.
9. 🎉 Lanzaste un MVP.
Lo lograste.
Qué compilaste
- ✅ Una app web potenciada por IA
- ✅ Tres documentos de diseño (
product.md,ui.md,engineering.md) - ✅ Un paquete de pruebas real que se ejecuta cada vez que cambias el código
- ✅ Un
README.mdpara que puedas volver a consultar esta información en cualquier momento - ✅ Una conexión a la IA de Gemini de Google
Pasaste de la idea a la app funcional sin escribir una sola línea de código. Qué increíble.
Qué aprendiste
Skill | Por qué es importante |
Especificación → Código y prueba → Verificación | Primero, planifica. Compila código y pruebas en conjunto. Haz clic en el último. Siempre en ese orden. |
Corrige el documento, no el código | Cuando algo no funcione, cambia el plan y vuelve a compilar. No parches. |
Las pruebas como puerta de seguridad | Integrada en la implementación: La IA detecta los errores antes de que tengas que hacerlo tú. |
La regla de regresión | Cada error que encuentra un humano se convierte en una prueba. El error no puede volver a ocurrir. |
Cambios basados en documentos | Cuando cambie la dirección, cambia el documento. La IA se encarga del resto. |
Flujo de 3 capas de Antigravity | Inglés en el chat → el agente elige el comando → tú lo apruebas. |
¿Volverás la próxima semana?
- Elige una fila diferente de la tabla de 8 semanas.
- Clona el repo de esa semana con el botón "Clonar repositorio" de Antigravity.
- Las habilidades se instalan de forma nueva en cada espacio de trabajo (con alcance del espacio de trabajo, sin estado residual).
- Puedes volver a usar el mismo proyecto de Google Cloud.
- Todo lo demás es el mismo flujo de trabajo que acabas de aprender.
Pasos siguientes
- Publica tu proyecto: Publica tu proyecto en el sitio de Coding Jam.
- Construye en casa: Tus tres documentos son portátiles. Ábrelos en cualquier herramienta de IA y sigue creando.
- Trae a un amigo: Realiza este codelab con alguien nuevo. La enseñanza es la forma más rápida de aprender
Recursos
- Documentación de Antigravity
- Documentación sobre las habilidades de Antigravity
- Vista de conversación de Antigravity
- Habilidades oficiales de Gemini (Google)
- Coding Jam Starter (todas las 8 semanas)
- Skills Garden (las habilidades que usamos)
- Documentación de la API de Gemini
- Documentación de FastAPI