Vibecoding 1o1 — Gabi Surita

O ponto de partida

Você conhece essa sensação?

A gente gosta de começar pelo problema, antes de falar da solução.

Você chega no trabalho, abre o computador — e trava. Por onde começo? O que é mais urgente? Tinha alguma reunião logo cedo? Quantos e-mails acumularam desde ontem?

Essa paralisia é muito comum em trabalhos onde somos bombardeadas de informação vinda de todo lado: e-mails, calendário, Slack, Jira, reuniões... A sensação é de que tem muita coisa, mas você não consegue ver o todo.

O que falta é um ponto de partida claro — uma visualização rápida do que te espera naquele dia. É exatamente isso que vamos construir: um dashboard de início de dia, conectado ao seu Gmail e Calendar, que te ajuda a responder "por onde começo hoje?" assim que você abre o computador.

"Vibecoding é programar focando no produto, não no código. Você descreve o que quer, a IA constrói — e você itera até ficar certo."

É exatamente isso que vamos fazer aqui. Você vai construir esse dashboard — do zero, com IA como co-piloto. Não precisa saber programar. Precisa saber descrever o que quer.

Pré-requisitos

Antes de Começar

Antes de escrever qualquer linha de código, vamos garantir que você tem tudo configurado. São dois passos rápidos — e eles são essenciais para o restante do curso funcionar.

0.1

Instale o Antigravity

O Antigravity é a ferramenta de IA que vamos usar durante todo o curso. Ele roda direto no seu computador e funciona como um assistente de código que entende o contexto do seu projeto.

ℹ️

O que é o Antigravity?
É uma ferramenta do Google DeepMind que combina um editor de código com um assistente de IA integrado. Você descreve o que quer construir e ele gera, revisa e corrige o código com você.

💻

Windows, Mac ou Linux?
O Antigravity funciona nos três sistemas. Os prints deste tutorial foram feitos no Mac, então alguns ícones ou menus podem aparecer em posições ligeiramente diferentes no Windows ou Linux — mas o fluxo é o mesmo. Se travar em algum passo, descreva o que está vendo para a IA e ela te ajuda.

↓ Baixar o Antigravity

Após instalar, abra o aplicativo e faça login com sua conta Google. Você vai ver uma tela parecida com essa:

Interface do Antigravity — editor de código com painel de IA

A interface do Antigravity: editor à esquerda, assistente de IA à direita.

0.2

Ative a verificação em 2 etapas (2FA) na sua conta Google

Para usar as APIs do Gmail e Calendar mais adiante, sua conta Google precisa ter a verificação em 2 etapas ativada. Isso é um requisito de segurança do Google para projetos que acessam dados pessoais.

⚠️

Por que isso importa?
Sem o 2FA ativo, não é possível criar as credenciais OAuth necessárias para conectar seu app ao Gmail e Calendar. Faça isso antes de continuar.

1

Acesse myaccount.google.com/security

2

Procure por "Verificação em 2 etapas" e clique em "Ativar"

3

Siga as instruções na tela

4

Pronto! Volte aqui quando estiver com o 2FA ativo ✓

✅

Checkpoint! Se você instalou o Antigravity e ativou o 2FA, continue para o próximo passo.

0.3

Opcional: mude o idioma para português

Por padrão, o Antigravity abre em inglês. Para usar em português, é preciso instalar um pacote de idioma — um processo rápido feito direto dentro do Antigravity.

1

Abra o painel de Extensões clicando no ícone de grade na barra lateral esquerda, ou use o atalho Cmd+Shift+X (Mac) / Ctrl+Shift+X (Windows/Linux).

2

Na caixa de busca, digite Portuguese Language Pack. Você vai ver dois pacotes oficiais da Microsoft (publicador MS-CEINTL):

Portuguese (Brazil) — para Português do Brasil ✓
Portuguese — para Português Europeu

3

Clique em Instalar. O Antigravity vai pedir confirmação para confiar no publicador MS-CEINTL — clique em "Confiar no Publicador e Instalar".

4

Reinicie o Antigravity quando solicitado. A interface vai aparecer em português automaticamente.

📖

Tutorial completo: antigravity.codes/pt/blog/change-language

✅

Tudo pronto! Com o Antigravity instalado, o 2FA ativo e o idioma configurado, você está pronta para começar. Vamos lá!

Parte 1

Conhecendo o Antigravity

Agora que está instalado, vamos explorar o Antigravity. A ideia é simples: você descreve o que quer, a IA sugere o código, e vocês constroem juntas. Não precisa saber tudo de antemão — o erro faz parte do processo.

1.1

Abrindo o Antigravity pela primeira vez

Ao abrir o Antigravity, você vai ver essa tela de boas-vindas. Vamos entender o que é cada área antes de continuar.

Interface do Antigravity aberta com editor e painel de IA

A tela inicial do Antigravity: barra lateral à esquerda, área central de boas-vindas e painel de IA à direita.

As principais áreas que você vai usar:

①

Barra lateral de ícones — a coluna fina à esquerda com ícones empilhados. Cada ícone abre um painel diferente:

📄 Explorador — lista todos os arquivos do seu projeto. É aqui que você vai encontrar o index.html depois que a IA criar.
🔍 Busca — procura por texto dentro dos arquivos do projeto.
🔀 Git — controle de versão (salva o histórico das mudanças). Não precisamos disso agora.
🔌 Extensões — adiciona funcionalidades extras ao editor. Também não precisamos agora.

②

Área central — tela de boas-vindas — quando nenhum projeto está aberto, você vê três opções:

Abrir Pasta (botão azul) — abre uma pasta do seu computador como projeto. É isso que vamos usar.
Open Agent Manager — gerencia agentes de IA rodando em paralelo. Avançado, ignore por enquanto.
Clonar Repositório — baixa um projeto do GitHub. Também não precisamos agora.

Abaixo ainda aparece a seção Workspaces — atalhos para pastas que você já abriu antes.

③

Painel de IA — Antigravity Agent — o painel à direita é onde acontece a mágica. É aqui que você conversa com a IA em linguagem natural. Repare nos elementos:

Campo de texto — onde você digita seus pedidos. Aceita texto livre, sem precisar de sintaxe especial.
Modelo selecionado — indica qual modelo de IA está ativo (ex: Gemini 3.1 Pro). Pode deixar o padrão.
Botão Plan — modo de planejamento, onde a IA propõe o que vai fazer antes de executar. Útil para tarefas grandes.

④

Barra inferior — na base da tela aparecem ícones de status: erros, avisos e notificações do editor. O X azul no canto esquerdo indica que o Antigravity está conectado e funcionando normalmente.

1.2

Seu primeiro prompt

Vamos fazer o Antigravity nos apresentar. No painel de IA, digite exatamente:

✦ Prompt para o Antigravity

Olá! Vou criar um dashboard de início de dia que vai se conectar com Gmail e Google Calendar para me ajudar a não perder tempo quando chego no trabalho.

Por enquanto, me mostre um arquivo HTML simples com "Hello, World!" para garantir que tudo está funcionando. Só isso por enquanto.

🧠

Por que começar simples?
Iniciar com um "Hello World" garante que seu ambiente está funcionando antes de adicionar complexidade. É muito mais fácil corrigir problemas quando o código é pequeno.

O Antigravity vai criar um arquivo index.html no seu projeto. Veja onde ele aparece e como abrir no navegador:

①

Olhe o Explorador de Arquivos à esquerda — o arquivo index.html vai aparecer lá.

②

Clique com o botão direito no arquivo → "Mostrar no Explorador" (Windows) ou "Revelar no Finder" (Mac) para ver onde ele está salvo no computador.

③

Dê dois cliques no arquivo index.html — ele vai abrir direto no seu navegador. Você deve ver "Hello, World!" na tela.

🙋

Preciso ter conta no GitHub?
Não! Por enquanto, o arquivo fica salvo só no seu computador. GitHub e deploy são opcionais — você consegue fazer tudo localmente.

⚠️

Deu erro? Tudo bem! Copie a mensagem de erro e cole no painel da IA do Antigravity. Diga: "Apareceu esse erro: [cole o erro aqui]. O que devo fazer?" — ela vai te guiar.

✅

Checkpoint 1! Se quiser ver como o código deveria ficar nesta etapa, confira o Exemplo 1: Hello World.

🚀

Para ir além
Personalize a página: peça ao Antigravity para mostrar a data de hoje e uma saudação com o seu nome (ex: "Bom dia, Gabi!"). Experimente mudar as cores ou a fonte também.

Conceito

Então, o que é Vibecoding?

Você já tem um arquivo HTML funcionando e sabe como o Antigravity trabalha. Antes de construir o dashboard, vamos nomear o que estamos fazendo — porque isso vai mudar como você pensa sobre o processo.

"Vibecoding é programar focando no produto, não no código. Você descreve o que quer, a IA constrói — e você itera até ficar certo."

Não é sobre não saber programar. É sobre mudar onde você coloca a atenção: menos em sintaxe e configuração, mais em o que o produto deve fazer e como ele deve se comportar. A IA vira uma camada de abstração — como um compilador, mas para intenções.

🎯

Foco no produto

Em vez de pensar em como implementar, você pensa no que o usuário precisa. A IA cuida dos detalhes técnicos.

🔄

Iteração rápida

Você não precisa acertar de primeira. Vibe coding é um ciclo: pede, vê o resultado, ajusta o pedido, repete.

🚀

Velocidade real

Coisas que levavam dias agora levam horas. Protótipos que antes exigiam um time inteiro, agora uma pessoa consegue.

🧠

Conhecimento ainda importa

Saber programar te dá superpoderes no vibecoding. Você consegue guiar a IA, identificar erros e entender o que está sendo gerado.

⚡

O potencial é enorme

Vibecoding está mudando quem consegue construir software. Estudantes, designers, jornalistas, pesquisadoras — qualquer pessoa com uma ideia clara pode agora criar ferramentas que antes precisariam de uma equipe de engenharia.

Mas — e esse mas é importante — essa tecnologia tem limitações sérias que precisam ser entendidas antes de ser usada em contextos reais.

Ver limitações →

Parte 2

Dashboard com Dados Falsos

Agora vamos construir o dashboard do zero — do layout inicial aos gráficos e agenda do dia. Tudo ainda com dados inventados, mas ao final vai parecer um painel de verdade. A IA vai escrever tudo; você só precisa saber pedir.

2.1

Pedindo o dashboard para a IA

Vamos descrever pro Antigravity como queremos o nosso dashboard. Seja específica sobre o visual — quanto mais detalhe você der, melhor o resultado.

✦ Prompt para o Antigravity

Transforma o index.html num dashboard de início de dia com visual moderno e escuro. O objetivo é que eu abra essa página quando chego no trabalho e saiba imediatamente por onde começar.

Quero ver:
- Um cabeçalho com a saudação "Por onde começo hoje?" e a data de hoje
- Três cards de resumo: "Emails não lidos", "Reuniões hoje" e "Tarefas pendentes" — com números falsos por enquanto
- Usa uma paleta escura, fonte bonita do Google Fonts, e deixa responsivo

Não precisa de JavaScript ainda — só HTML e CSS.

💡

Dica de prompt: Mencionar o objetivo do dashboard ("saber por onde começar") ajuda a IA a tomar decisões de design mais alinhadas com o que você quer. Dizer "dados falsos por enquanto" e "não precisa de JavaScript ainda" evita que ela adicione complexidade desnecessária antes da hora.

🎨

Por que pedir "paleta escura e fonte bonita" sem ser mais específica?
É intencional! Parte do vibecoding é dar liberdade para a IA interpretar. Resultados diferentes são esperados — e na próxima etapa você vai ver exatamente isso. Se não gostar do que saiu, você itera.

2.2

O que deve aparecer

A IA vai gerar um HTML completo. Abra o arquivo no navegador — você deve ver algo parecido com isso:

Dashboard construído com Antigravity — Tema escuro e cards de métricas

Como seu dashboard deve ficar: tema escuro, layout responsivo e cards iniciais.

🤔

Por que o meu resultado está diferente? Modelos de linguagem (LLMs) como o que roda no Antigravity são estocásticos. Isso significa que eles têm um fator de aleatoriedade embutido: se você e eu mandarmos exatamente o mesmo prompt, vamos receber códigos e visuais ligeiramente (ou muito) diferentes. Isso é normal e esperado! O código do exemplo é só uma referência.

Se o visual não ficou do seu jeito, não apague tudo — itere. Exemplos de ajustes que você pode pedir:

↗

"Aumenta o tamanho dos números nos cards, quero ver de longe"

↗

"Adiciona uma mensagem de boas-vindas embaixo do título, tipo 'Vamos nessa! 💪'"

↗

"Adiciona um ícone em cada card usando emojis que façam sentido para o contexto"

✅

Checkpoint 2! Você tem um dashboard com visual no navegador? Perfeito — agora vamos adicionar gráficos e listas.

→ Ver o código de exemplo desta etapa

🔧

Por que especificar Chart.js no prompt?
O agente seria capaz de adicionar um gráfico sozinho — mas provavelmente escolheria uma solução mais simples ou uma biblioteca diferente. Quando você conhece as ferramentas disponíveis, seus prompts ficam mais precisos e os resultados, melhores. Vibecoding não é sobre abrir mão do conhecimento técnico — é sobre usá-lo de forma diferente: para guiar a IA, não para escrever cada linha você mesma.

2.3

Adicionando um gráfico de barras

Vamos pedir pra IA adicionar um gráfico que mostra o volume de emails dos últimos 7 dias — útil para entender se hoje é um dia movimentado ou tranquilo. Vamos usar a biblioteca Chart.js — gratuita e fácil de usar.

✦ Prompt para o Antigravity

Adiciona ao dashboard um gráfico de barras mostrando "Volume de emails na semana" nos últimos 7 dias — para eu ter contexto se hoje é um dia cheio ou tranquilo.

Usa a biblioteca Chart.js via CDN (sem instalar nada).
Os dados podem ser inventados por enquanto — tipo [12, 5, 8, 20, 3, 15, 9].
O gráfico deve ter o mesmo estilo escuro do restante do dashboard.

📦

O que é uma biblioteca?
É um conjunto de código já pronto que resolve um problema específico — no nosso caso, desenhar gráficos. Em vez de escrever tudo do zero, usamos uma biblioteca que alguém já criou e testou. A Chart.js é uma das mais populares para gráficos na web.

E CDN?
É uma forma de usar essa biblioteca sem precisar instalar nada — o navegador baixa direto da internet quando a página carrega. Muito útil para protótipos!

Dashboard com gráfico de barras e lista de próximos eventos

Evolução do dashboard: agora com a seção de gráficos (à esquerda) e a lista de eventos (à direita).

🐛

O gráfico não apareceu?
É muito comum. Cole o erro no chat e pergunte: "O gráfico não está aparecendo. O erro no console é: [erro]. Me ajuda a corrigir?"
Abrir o console do navegador: F12 → aba Console.

2.4

Adicionando uma lista de próximos eventos

Agora uma lista das reuniões do dia — ainda fake, mas já com a estrutura que vamos preencher com dados reais na próxima parte. Ver a agenda logo cedo é essencial para saber quanto tempo livre você tem.

✦ Prompt para o Antigravity

Adiciona uma seção "Agenda de hoje" com uma lista de 4 eventos falsos, simulando um dia de trabalho típico.

Cada evento deve mostrar:
- Horário (ex: "09:30")
- Título do evento (ex: "Daily da equipe")
- Duração (ex: "15 min")

Estilo: lista com linhas separadas, tema escuro, ícone de calendário em cada item.

✅

Checkpoint 2! Agora você tem cards, gráfico e agenda do dia — tudo com dados falsos, mas o dashboard já começa a parecer útil. Na próxima parte, vamos conectar com os dados reais do seu Gmail e Calendar.

→ Ver o código de exemplo completo desta etapa

🚀

Para ir além
Escolha um dos dois desafios:
A) Adicione um contador de horas em reunião — some a duração de todos os eventos do dia e mostre o total (ex: “2h30 em reuniões”).
B) Calcule uma estimativa de tempo para ler os emails — considere ~1 minuto por email e exiba o resultado no dashboard.

Parte 3

Integrando com Gmail e Google Calendar

Esta é a parte mais poderosa do curso. Vamos conectar o dashboard com as APIs reais do Google — e a partir daqui, quando você abrir essa página de manhã, verá seus próprios dados. Tem três etapas: preparar o ambiente (1 minuto), criar as credenciais no Google Cloud, e pedir pra IA integrar tudo.

3.1

Servindo o projeto localmente

Até agora, você estava abrindo o arquivo HTML direto do seu computador. Mas para a integração com o Google funcionar, precisamos que o site esteja rodando em um servidor local. Como estamos fazendo vibecoding, vamos pedir para o Antigravity fazer isso por nós.

✦ Prompt para o Antigravity

Sirva este projeto usando um servidor na porta 8000.

💻

Como isso funciona?
O Antigravity vai abrir um terminal e rodar um comando (como python -m http.server 8000). Depois que ele confirmar que o servidor está rodando, você pode acessar seu projeto abrindo o navegador em http://localhost:8000.

3.2

Criando as credenciais no Google Cloud

Para acessar o Gmail e o Calendar com a conta do próprio usuário, vamos criar um ID de cliente OAuth no Google Cloud Console. É o que permite que o dashboard peça permissão à conta Google da pessoa que acessar. Não precisa saber o que isso significa agora — só siga os passos.

1

Acesse console.cloud.google.com e faça login com sua conta Google.

2

Crie um novo projeto: clique no seletor de projetos → Novo Projeto → nome: meu-dashboard.

3

No menu lateral, vá em APIs e Serviços → Biblioteca e ative a Gmail API e a Google Calendar API.

4

Vá em Tela de consentimento OAuth. Escolha "Externo" e clique em Criar. Preencha o Nome do App e os campos de e-mail de suporte.

5

Na etapa de "Usuários de Teste", clique em "Add Users" e digite o seu próprio e-mail do Google (aquele que você vai usar para fazer login). Se você não fizer isso, o Google não vai deixar você logar no seu próprio dashboard!

6

Vá em Credenciais → Criar Credenciais → ID do cliente OAuth.

7

Tipo de aplicativo: Aplicativo da Web. Adicione as seguintes origens em Origens JavaScript autorizadas:

http://localhost:8000
http://127.0.0.1:8000

(Esses são os endereços do servidor local que acabamos de iniciar.)

8

O Google vai gerar um ID do Cliente (Client ID) — uma chave longa terminada em .apps.googleusercontent.com. Copie e guarde essa chave — é ela que vamos colocar no código.

O Client Secret não vai para o código. Ele só é usado em backends (servidores). Para apps de browser, o Client ID é suficiente.

⚠️

Segurança do seu Client ID
O Client ID vai aparecer no seu código HTML — e tudo bem, ele é público por design. O que protege sua conta é a restrição de Origens autorizadas (passo 7): só os domínios que você listou podem usar esse Client ID para pedir permissão.

3.3

Integrando os dados reais

Agora que você tem o Client ID, é hora de pedir para o Antigravity fazer o trabalho pesado de conectar as APIs do Google ao seu código.

✦ Prompt para o Antigravity

Agora vamos integrar o Google Sign-In no dashboard para buscar dados reais.

Usa este Client ID: [COLE SEU CLIENT ID AQUI]

Quero que você:
- Adicione um botão "Entrar com Google" ao iniciar o dashboard.
- Após o login, substitua os dados falsos do dashboard (número de emails, reuniões) pelas informações reais da minha conta do Gmail e do Google Calendar para o dia de hoje.
- Use as bibliotecas oficiais do Google para a web (GSI e GAPI).

🐛

Erros são quase garantidos aqui!
Integração de APIs raramente funciona de primeira. Se o login falhar, o botão não aparecer ou a tela ficar em branco, abra o Console do navegador (F12 ou Inspecionar → aba Console), copie qualquer erro vermelho e mande para a IA: "Apareceu esse erro no console: [erro]. Como consertar?"

🎉

Parabéns! Se chegou até aqui, você construiu do zero um dashboard que resolve um problema real do seu dia a dia — e fez isso com IA como co-piloto, sem escrever código diretamente, mas sim descrevendo o que você queria, errando e corrigindo pelo caminho.

Parte 4 (Opcional)

Publicando seu Dashboard no GitHub

Por enquanto, seu dashboard mora só no seu computador. Se você quiser poder acessar de qualquer lugar — pelo celular ou de outro computador — vamos publicá-lo gratuitamente na internet usando o GitHub Pages.

4.1

Criando conta e Repositório

1

Acesse github.com e crie uma conta gratuita, se ainda não tiver uma.

2

No canto superior direito, clique no + e depois em New repository.

3

Escolha um nome para o repositório (ex: meu-dashboard).

4

Deixe a visibilidade como Public (necessário para o Pages funcionar na versão gratuita).

5

Nota sobre Licença: (O que é isso?) Recomendamos marcar a opção "Choose a license" e escolher a MIT License. Isso diz para as outras pessoas que elas têm permissão para usar e aprender com o seu código livremente!

6

Clique em Create repository.

Tela de criação de um novo repositório no GitHub

Preencha o nome do repositório, deixe como público e adicione a licença.

4.2

Subindo os arquivos

A forma mais fácil de colocar seus arquivos no GitHub é usando o painel de Controle de Código-Fonte do próprio Antigravity:

1

Na barra lateral esquerda do Antigravity, clique no terceiro ícone (o ícone com nós de rede, chamado Controle do Código-Fonte).

2

Clique no botão azul Publicar no GitHub.

3

Se o Antigravity pedir permissão para fazer login no GitHub, clique em Permitir e autorize o acesso no seu navegador.

4

Uma barra de pesquisa vai aparecer no topo da tela. Escolha a opção Publish to GitHub public repository (Publicar em repositório público) — é importante ser público para o Pages funcionar depois!

5

Selecione os arquivos do seu projeto e confirme. O Antigravity vai fazer o upload de tudo sozinho!

Painel de Controle de Código-Fonte do Antigravity

Use o painel lateral do Antigravity para publicar seu código diretamente no GitHub.

🔄

Como atualizar o site depois? (Commit e Push)
Toda vez que você fizer alterações no código e quiser que elas apareçam no site, você precisa:
1. Voltar neste mesmo painel de Controle de Código-Fonte.
2. Digitar uma mensagem curta resumindo o que mudou (ex: "primeira versao" ou "mudei a cor").
3. Clicar no botão azul Confirmação (isso é o Commit).
4. Clicar no botão azul Sincronizar Alterações que vai aparecer no mesmo lugar (isso é o Push).

Digite a mensagem do que foi alterado e clique em Confirmação para salvar a versão.

4.3

Configurando o GitHub Pages

Agora vamos transformar esse repositório em um site público.

1

Vá na aba Settings do seu repositório.

2

No menu lateral esquerdo, clique em Pages.

3

Em "Build and deployment", na opção "Source", deixe "Deploy from a branch".

4

Abaixo, em "Branch", troque "None" por main e clique em Save.

No painel Pages, selecione 'Deploy from a branch' e escolha a branch 'main'.

🌐

Seu site está no ar!
Aguarde 1 ou 2 minutos e atualize a página de configurações. O GitHub vai mostrar uma mensagem no topo com o link do seu site (ex: https://seu-usuario.github.io/meu-dashboard/).

⚠️

Último detalhe importante!
Para que o login do Google funcione no seu site publicado, você precisa voltar no Google Cloud Console e adicionar a URL nova nas Origens JavaScript autorizadas (mesmo lugar do Passo 3.2).

👥

Quer compartilhar com os amigos?
Como o seu app está em modo de "Teste" no Google Cloud, outras pessoas não vão conseguir fazer login por padrão. Para que elas possam usar o seu dashboard, você tem duas opções: voltar na Tela de consentimento OAuth e adicionar os e-mails delas em "Usuários de Teste", ou clicar no botão Publicar aplicativo para liberar o acesso a qualquer conta Google.

💡 A nossa recomendação é deixar o aplicativo em modo Teste e adicionar manualmente quem for usar. Isso garante o controle de quem está acessando sua ferramenta e evita que o consumo estoure os limites das quotas gratuitas de API do Google Cloud!

⚠ Atenção

Vibecoding pode ser perigoso

Vibecoding é uma ferramenta poderosa — e como toda ferramenta poderosa, pode causar dano quando usada sem cuidado. Antes de sair construindo tudo com IA, você precisa entender os riscos.

🙈

Sem conhecimento, você não vê os problemas

A IA gera código que parece funcionar — mas que pode ter bugs sutis, lógica errada, ou comportamentos inesperados em casos de borda. Sem entender o mínimo do que foi gerado, você não consegue identificar quando algo está errado.

Exemplo real Um sistema de login gerado por IA pode parecer funcionar perfeitamente mas deixar uma brecha onde qualquer email passa como válido — e você só descobre quando alguém explora isso em produção.

🗑️

Risco de slop: código que funciona mas é ruim

"Slop" é o nome dado ao código gerado por IA que é tecnicamente funcional, mas mal estruturado, difícil de manter e impossível de evoluir. Código com duplicação excessiva, sem organização, cheio de gambiarras que resolvem o sintoma mas não o problema.

Sinal de alerta Se você está copiando e colando código da IA sem entender nada, seu projeto vai virar um monte de remendos — e na hora que precisar mudar algo, vai quebrar tudo.

🔓

Falhas de segurança invisíveis

IAs treinadas em código da internet aprenderam também padrões inseguros que eram comuns antes de serem descobertos. Injection de SQL, exposição de tokens, armazenamento inseguro de senhas — essas falhas aparecem frequentemente em código gerado.

🔗

Dependência excessiva da IA

Se você nunca entende o que foi construído, fica refém da IA para qualquer mudança. Vibecoding é mais poderoso quando você usa a IA como acelerador do seu próprio conhecimento — não como substituto.

💡

A postura certa

Vibecoding não é para substituir o julgamento humano — é para ampliar o que você consegue fazer. Ao longo deste curso, vamos construir com IA e vamos questionar o que ela produz, identificar problemas, e entender o suficiente para tomar boas decisões.

A melhor vibe codeira não é quem menos entende de código — é quem usa IA para ir mais longe com o conhecimento que tem.

Contato

O que achou?

Terminou o curso? Tem dúvidas ou sugestões? Escreve pra mim pra contar como foi. Sou meio lenta pra responder no LinkedIn, mas respondo e-mails: gabsurita@gmail.com.

Quer contribuir para melhorar esse curso? Você também pode editar essa página no GitHub.

FAQ

Dúvidas Frequentes

Perguntas que surgiram durante o curso — e as respostas.

Meu agente escreveu o código, mas não abriu a página. O que faço?

O agente tem o poder de abrir abas no seu navegador — mas ele nem sempre faz isso automaticamente. É só pedir! Exemplos de como pedir:

→

"Abre a página para mim."

→

"Pode abrir a página no navegador?"

Se quiser abrir manualmente, clique com o botão direito no arquivo index.html no Explorador de Arquivos → "Abrir com" → escolha seu navegador. Ou você pode usar o endereço direto: file:// seguido do caminho da pasta do projeto até o arquivo (ex: file:///C:/Users/voce/Documentos/meu-dashboard/index.html).

Meu computador não suporta o Antigravity, ou não tenho permissão de instalar software. Tem uma versão online?

Infelizmente até onde eu sei não. Por mais que navegadores sejam poderosos, eles ainda não conseguem fazer tudo. Portanto as ferramentas mais poderosas (Antigravity, Cursor, Claude Code, Windsurf etc.) costumam ser desenhadas para operar em um computador completo.

Mas alguns dos passos podem ser testados em aistudio.google.com/apps. Claro que varias partes desse curso podem ser reproduzidas usando outras ferramentas, como o Replit, mas não consigo garantir que funcione da mesma forma.

A Gabi fechou uma aba com atalho de teclado — o que aconteceu?

Foi um acidente: o atalho Ctrl+W fecha a aba ativa no Antigravity. Também é possível fechá-la clicando no × ao lado do nome da aba.

Uso Windows — como crio uma pasta nova na hora de abrir o projeto?

A pasta do projeto não tem nada de especial — é só um lugar no seu computador onde o Antigravity vai salvar os arquivos. Escolha qualquer lugar onde você possa modificar arquivos à vontade, como uma subpasta dentro de Documentos.

Quando o Antigravity mostrar a janela "Abrir a Pasta", você tem duas formas de criar uma pasta nova:

A

Clique no botão "Nova pasta" no topo da janela — ele aparece na barra de ferramentas, ao lado de "Organizar". Uma pasta com o nome "Nova pasta" vai aparecer na lista — renomeie para o que quiser (ex: meu-dashboard) e pressione Enter.

Opção A: botão "Nova pasta" no topo + "Select folder" para confirmar.

B

Clique com o botão direito em um espaço vazio dentro da janela → Novo → Pasta. Dê um nome e pressione Enter.

Menu de contexto do Windows mostrando Novo → Pasta com a opção Pasta destacada

Opção B: clique direito → Novo → Pasta.

Após criar e nomear a pasta, clique nela uma vez para selecioná-la (ela vai ficar destacada em azul) e então clique em "Select folder" para confirmar.

O que é Spec-Driven Development? É diferente de vibecoding?

Nenhum dos dois termos tem uma definição formal — mas a distinção é útil.

Vibecoding é uma abordagem exploratória: você conversa com a IA, vê o resultado, itera. O foco está na velocidade e na experimentação. É ótimo para protótipos, projetos pessoais e descoberta — como o que fizemos neste curso.

Spec-Driven Development (SDD) é mais estruturado: antes de escrever qualquer código, você redige uma especificação detalhada — o que o sistema deve fazer, como deve se comportar em cada caso, quais são as restrições. Só então você (ou a IA) implementa. O foco está em corretude, manutenibilidade e software pronto para produção.

Na prática, as duas abordagens se complementam: vibecoding para explorar e prototipar, SDD para consolidar e escalar. À medida que um projeto cresce e precisa ser mantido por mais pessoas por mais tempo, a especificação vira uma forma de garantir que a IA (e os humanos) construam a coisa certa — não só uma coisa que funciona.

Qual a diferença entre fazer e publicar um site?

Quando você cria uma página web neste curso, ela fica salva como um arquivo no seu computador — assim como um documento do Word ou uma planilha. Você consegue abrir no navegador e ver normalmente, mas só você consegue ver. Ninguém de fora consegue acessar, porque o arquivo não está em lugar nenhum da internet, está só na sua máquina.

Publicar significa colocar esse arquivo em um servidor — um computador que fica ligado o tempo todo e conectado à internet — para que qualquer pessoa no mundo possa acessar pelo navegador, usando um endereço como seusite.com.

Uma analogia: fazer o site é como escrever uma carta. Publicar é como colocar ela nos jornais para que outras pessoas possam receber e ler.

Para este curso, não precisamos publicar nada — o dashboard funciona perfeitamente rodando só no seu computador. Mas se quiser dar um passo a mais e compartilhar com alguém, veja o "Para ir além" no final da parte 3, onde sugerimos usar o GitHub Pages para isso.