1. Introdução e configuração
Olá!
Olá! Bem-vindo ao Coding Jam. Nos próximos 75 minutos, você vai criar um app da Web de IA real e funcional.
Confira o site aqui: Site do Coding Jam
O que você criará
Um web app com tecnologia de IA baseado no briefing do projeto desta semana. Execução no navegador. Usa a IA do Gemini do Google. Totalmente seu até o final da sessão.
Instalar o Antigravity
O Antigravity é o assistente de IA que vamos usar para tudo. É um app que fica no seu computador.
Etapa 1: baixar
👉 Acesse https://antigravity.google/download no navegador.
👉 Clique no botão de download do seu sistema operacional (Mac, Windows ou Linux).
👉 Execute o instalador que você baixou. As configurações padrão estão boas: clique nelas.
Etapa 2: iniciar e fazer login
👉 Inicie o Antigravity na pasta "Aplicativos" (Mac) ou no menu "Iniciar" (Windows).
👉 Clique em Fazer login quando solicitado.
👉 Use sua Conta do Google.
Etapa 3: verificar a tela de boas-vindas
A tela inicial do Antigravity vai aparecer com três botões grandes:
- Abrir pasta: abre uma pasta como um espaço de trabalho.
- Abrir o Gerenciador de agentes: vai para o painel do agente, onde a maior parte do nosso trabalho vai acontecer.
- Clonar repositório: baixa um projeto do GitHub. Vamos usar isso na seção 3A.
Mais documentos em https://antigravity.google/ se você quiser se aprofundar.
✅ Ponto de verificação:o Antigravity está instalado, você fez login e a tela de boas-vindas com três botões aparece.
2. Instalar as ferramentas necessárias (via Antigravity)
O Antigravity precisa de duas ferramentas auxiliares no seu computador:
Ferramenta | O que é (linguagem simples) |
uv | Gerencia o Python, a linguagem por trás do back-end do app. |
git | Faz o download dos arquivos do projeto da Internet. O Antigravity usa isso para clonagem. |
Você não vai digitar comandos de instalação. Você vai perguntar para o Antigravity em inglês, e ele faz o resto.
Etapa 1: abrir um espaço de trabalho temporário
O Antigravity precisa de uma pasta aberta para ter um chat. (Sem pasta = sem chat.)
👉 Na tela inicial, clique em Abrir pasta.
👉 Crie ou escolha uma pasta vazia. Sugestão: uma nova pasta chamada coding-jam-setup em algum lugar conveniente (a área de trabalho está bom).
👉 Clique em Abrir ou Selecionar pasta.
A visualização do Gerenciador de agentes é aberta com o novo espaço de trabalho (vazio) selecionado.
Etapa 2: pedir para o Antigravity verificar e instalar ferramentas
👉 Pressione Cmd+L (Mac) ou Ctrl+L (Win/Linux) para focar na entrada de texto do chat.
👉 Confirme se o seletor de modelos na parte de baixo mostra Gemini 3 Flash (padrão, o que é adequado para isso).
📝 Comando mais simples: cole isto no 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.
📝 Versão mais detalhada (se quiser):
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.
👉 Pressione Enter para enviar.
🤖 Assista o agente trabalhar e clique em "Permitir" em pop-ups
Etapa 3: ler o resumo
Quando o agente terminar, você verá algo assim:
✅ Setup complete:
- uv 0.4.18 ✅ (installed)
- git 2.42.0 ✅ (already had it)
- Node.js: skipped (will install later if needed)
Se algo der errado
✅ Checkpoint:o agente confirma que uv e git estão instalados. Tempo total: de 3 a 5 minutos (ou 7 minutos se o Homebrew precisar ser instalado primeiro no Mac).
Clonar seu projeto
1 — Escolha o projeto da semana
O Coding Jam é um programa de oito semanas com um miniprojeto diferente a cada semana. O facilitador vai informar qual semana estamos fazendo hoje. Encontre essa linha e copie o URL.
Semana | Projeto | URL do repositório |
1 | Provador Virtual de Penteados com IA |
|
2 | Gerador de avatar de IA |
|
3 | Minha agenda especial do ano |
|
4 | Da geladeira ao roteiro |
|
5 | Pote de humor com IA |
|
6 | Portfólio de uma página |
|
7 | Resume Tailor |
|
8 | Chat com personagens de IA |
|
2 — Voltar para a tela inicial
Precisamos voltar à tela de inicialização para usar o botão "Clonar repositório".
👉 No Antigravity, clone o projeto da sua escolha. Exemplo de clonagem da semana 1, mas você precisa inserir o repositório correto.
📝 Comando de referência
Git clone ⚠️ PASTE_YOUR_PROJECT and save to my local folder: ⚠️ PASTE_YOUR_PROJECT
3 — Conhecer o projeto
Confira a lista de arquivos. Você verá:
Arquivo / pasta | O que é |
BRIEF.md | A ideia do produto: o que estamos criando, em inglês simples |
reference/ | Uma pasta com um exemplo de app funcional. A IA vai ler isso ao escrever seu código, então seu app vai corresponder aos padrões. |
.gitignore | Uma lista de arquivos que o Git deve ignorar (técnico: ignore isso). |
👉 Clique em
BRIEF.md para abrir e aqui está a ideia do projeto.
✅ Ponto de verificação:você clonou o projeto, abriu como um espaço de trabalho e leu BRIEF.md.
3. Instalar habilidades do workshop
Uma habilidade é um conjunto de instruções armazenadas no GitHub que você pode entregar à sua IA.
Etapa 1: pedir para o Antigravity instalar as habilidades
📝 Cole este comando no 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.
Etapa 2: clique em "Permitir" nos dois pop-ups
🤖 Você vai 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
Permita qualquer ação se o agente solicitar.
👉 Confira sua lista de arquivos. Agora você vai ver uma nova pasta .agent/. Clique para expandir e verifique se há várias habilidades nessas pastas, como skills-garden e gemini-skills.
O que cada habilidade faz (para referência, nenhuma ação é necessária)
Skill | O que faz? |
| Escreve o documento de design do produto |
| Escreve o documento de design de UX |
| Escreve o documento de design de engenharia (com a seção de estratégia de teste) |
| Escreve e executa testes, corrigindo falhas automaticamente (máximo de três tentativas). |
| Skill oficial do Google: como usar a API Gemini corretamente |
| Um backup mais simples se a skill oficial não estiver disponível |
| Referências de estilo visual |
✅ Checkpoint:sua lista de arquivos mostra uma nova pasta .agent/skills/ com skills-garden/ e gemini-skills/ dentro.
4. The Spec Talk
O Spec Talk é uma conversa de dois minutos em que você diz à IA o que quer criar. Nenhum código, nenhum documento, nada criado ainda. Estamos apenas conversando sobre isso.
A única pergunta obrigatória
O mais importante que a IA precisa saber:
"O que entra, o que sai?"
🎯 MODELO: Gemini 3 Flash (padrão) — perguntas e respostas simples.
📝 Cole isto:
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.
🤖 Converse com a IA e refine seu plano
Não gere documentos ainda
Ao final da conversa, o agente NÃO deve ter gerado nenhum arquivo. Se você vir product.md ou outros arquivos novos, diga ao agente: "Pare. Exclua todos os documentos que você acabou de criar. Ainda estamos na fase de conversa sobre especificações".
Dicas
✅ Checkpoint:você teve uma conversa rápida com o Antigravity sobre sua ideia de produto, e ele entendeu as entradas e saídas. Nenhum arquivo foi gerado ainda.
5. Gerar três documentos de design
Agora, a IA escreve três planos no papel antes de qualquer código. Fazemos as três coisas em um comando usando as três habilidades de documento de design em sequência.
Os 3 documentos
Arquivo | O que ele contém? | Habilidade usada |
product.md | Quem é o usuário, o que estamos resolvendo, quais recursos |
|
ui.md | Como as telas aparecem, cores, fontes, layout |
|
engineering.md | Pilha de tecnologia, estrutura de arquivos, + seção de estratégia de teste |
|
Etapa 1: gerar todos os três documentos de uma só vez
🤖 Mudar para o Gemini 3.1 Pro com baixa capacidade de raciocínio (recomendado)
📝 Cole isto: um comando faz tudo:
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.
Etapa 2: verificar os arquivos salvos
👉 Verifique sua lista de arquivos. Agora você vai ver (além do que já estava lá):
codingjam-week-1/
├── product.md ← NEW
├── ui.md ← NEW
├── engineering.md ← NEW
├── BRIEF.md
├── reference/
└── .agent/
Etapa 3: revisar e iterar
Você é quem manda. A IA escreveu o plano. Agora você lê e pede mudanças.
O hábito mais importante
Quando quiser fazer uma mudança, mude o DOC, não o código. O documento é a fonte da verdade.
🤖 Leia e analise os três documentos
👉 Abra cada um deles (clique na lista de arquivos), de cima para baixo:
product.md— Isso descreve o que eu quero?ui.md— As telas e a aparência estão corretas?engineering.md— A estratégia de teste faz sentido? Não é preciso entender a tecnologia, apenas verifique se há um plano.
🤖 Agora que os documentos estão prontos, siga para as próximas etapas.
6. Implementar e testar
A maior seção do codelab. A IA pega os três documentos e cria o app: código E testes juntos, de uma só vez.Quando esta seção terminar, você terá uma base de código funcional que passa nos próprios testes.
Por que codificar e testar juntos?
Seu engineering.md já especifica quais testes devem existir (seção "Estratégia de teste"). A implementação não será concluída até que esses testes sejam aprovados. Então, fazemos as duas coisas em uma etapa.
🤖 Mudar para o Gemini 3.1 Pro com raciocínio avançado (recomendado)
Etapa 1: pedir à IA para criar o código E os testes
📝 Cole isto:
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.
🤖 Clique em Permitir em "Pop-ups (vários)".
Etapa 2: leia o relatório final
Quando terminar, verifique:
- ✅ Uma pasta
backend/existe com código promocional - ✅ Uma pasta
frontend/existe com código promocional - ✅ Uma pasta
tests/existe com arquivos de teste - ✅ O resumo diz "todos os testes aprovados" (não "falhou após três tentativas")
- ✅ O agente NÃO iniciou nenhum servidor
E se todas as três novas tentativas de teste falharem?
Raro, mas possível. Isso geralmente significa que a estratégia de teste do documento de engenharia é irrealista para o que foi criado.
📝 Cole isto:
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.
E se algo parecer estranho?
👉 Se a IA criar algo que não corresponda à documentação, volte ao documento. Não peça à IA para "corrigir o código" isoladamente.
Exemplo:
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.
Sempre: o documento é a fonte de verdade.
✅ Ponto de verificação:o código e os testes existem e são aprovados. Pronto para configurar a chave de API.
7. Configuração do Google Cloud + chave de API
Etapa 1: receba sua chave da API Gemini no AI Studio (1 minuto)
- Abra https://aistudio.google.com/app/apikey em uma nova guia do navegador.
- Faça login com a mesma Conta do Google.
- Clique em Criar chave de API (canto superior direito).
- Uma caixa de diálogo é aberta com um menu suspenso de projetos:
- Se você já tiver um projeto do Google criado, selecione-o e clique em Criar chave de API em um projeto atual.
- Se NÃO estiver na lista:clique em Criar projeto.
- Copie a chave de API que aparece. Começa com
AIza..., aproximadamente 40 caracteres.
✏️ Cole em um lugar seguro. Você vai dar esse código para a Antigravity em seguida.
Etapa 2: diga ao Antigravity para configurar .env (30 segundos)
De volta ao Antigravity, abra o chat.
⚠️ PARE. LEIA ISTO ANTES DE COLAR.
O comando abaixo contém marcadores de posição PASTE_YOUR_API_KEY_HERE e PASTE_YOUR_PROJECT_ID_HERE.
Você PRECISA substituir esses valores pelos reais das etapas 1. Caso contrário, o arquivo .env vai conter o texto literal ⚠️ PASTE_..., e o app não vai funcionar.
Antes de clicar em "Enviar", leia o comando e confirme se você vê:
GEMINI_API_KEY=AIzaSy...(começa comAIzaSy, aproximadamente 40 caracteres)
Se você ainda vir
⚠️ PASTE_...
em qualquer lugar do comando, NÃO envie ainda. Substitua primeiro.
📝 Comando para colar (substitua o
⚠️ PASTE_...
primeiro os marcadores):
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 + ...).
🤖 Esperado:o agente cria .env, instala google-genai (clique em "Permitir") e confirma com a chave editada:
✅ .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. Visualizar e verificar
O código é criado. Os testes são aprovados. Chave de API configurada. Agora, abra o app e clique em vários lugares.
O que os humanos detectam (e os testes não)
Testes de captura | Humans Catch |
Valores de retorno incorretos | Cores feias |
Chamadas de função com problemas | Texto confuso |
Importações ausentes | Botões em lugares estranhos |
Erros de desvio por um | A animação parece instável |
Bugs de lógica | A vibe está ruim |
Etapa 1. Pedir ao Antigravity para iniciar o servidor de desenvolvimento
🎯 MODEL: Default (Flash) is fine.
📝 Cole isto:
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.
🔔 Pop-up: uv run uvicorn main:app --reload (ou semelhante) → Clique em Permitir
Etapa 2: abrir o URL de visualização
🤖 O agente informa:
Backend running at: http://localhost:8000
Frontend served at: http://localhost:8000 (backend serves it)
O URL geralmente é http://localhost:8000 ou http://localhost:5173.
👉 Clique no URL no chat ou copie e cole em uma nova guia do navegador.
Etapa 3: clique em vários lugares
Use como um usuário real faria:
- Clique em todos os botões
- Digite as coisas
- Passe o cursor sobre os itens
- Teste o fluxo principal do início ao fim
Se tudo estiver certo, vá para a etapa 9.7 (escrever README). As etapas 9.4 a 9.6 só são necessárias se você encontrar problemas.
Etapa 4: escrever um README
Depois que o app funcionar, bloqueie-o:
📝 Cole isto:
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.
🤖 Esperado : README.md aparece na lista de arquivos.
Por que o README é importante
✅ Checkpoint:você clicou no app, corrigiu os problemas (se houver) e salvou um README.
9. 🎉 Você lançou um MVP!
Você conseguiu!
O que você criou
- ✅ Um web app com tecnologia de IA
- ✅ Três documentos de design (
product.md,ui.md,engineering.md) - ✅ Um conjunto de testes real que é executado sempre que você muda o código
- ✅ Um
README.mdpara você voltar a isso quando quiser - ✅ Uma conexão com a IA do Gemini do Google
Você transformou uma ideia em um app funcional sem escrever uma única linha de código. Isso é incrível.
O que você aprendeu
Skill | Por que isso é importante? |
Especificação → Código+Teste → Verificar | Planeje primeiro. Crie códigos e testes juntos. Clique por último. Sempre nessa ordem. |
Corrija o documento, não o código | Quando algo estiver errado, mude o plano e reconstrua. Não faça isso. |
Testes como um portão de segurança | Integrada à implementação, a IA detecta as coisas mais simples antes que você precise fazer isso. |
A regra de regressão | Cada bug encontrado por humanos se torna um teste. O bug nunca mais vai aparecer. |
Tabelas dinâmicas baseadas em documentos | Quando a direção muda, mude o documento. A IA cuida do resto. |
Fluxo de três camadas do Antigravity | Inglês no chat → o agente escolhe um comando → você aprova. |
Vai voltar na semana que vem?
- Escolher outra linha na tabela de oito semanas
- Clone o repositório da semana usando o botão Clonar repositório do Antigravity.
- As habilidades são instaladas do zero em cada espaço de trabalho (escopo do espaço de trabalho = sem estado restante).
- É possível reutilizar o mesmo projeto do Google Cloud
- Todo o restante é o mesmo fluxo de trabalho que você acabou de aprender.
A seguir
- Publicar seu projeto:publique seu projeto no site Coding Jam.
- Construa em casa:seus três documentos são portáteis. Abra em qualquer ferramenta de IA e continue criando
- Traga um amigo:faça o pareamento com alguém novo neste codelab. Ensinar é a maneira mais rápida de aprender