🎯 Problema antes da solução
A maior armadilha de quem começa é correr para o código. Existe uma regra simples para evitar isso: a regra 55-5. De cada 60 minutos, invista cerca de 55 entendendo o problema e só 5 na pressa da solução. A maioria dos tutoriais faz o contrário — e gera apps que ninguém usa.
⏱️ A regra 55-5
Pense num orçamento de tempo. Onde ele vai define a qualidade do que você constrói:
- •55 min no problema — para quem é, o que dói, qual resultado importa.
- •5 min na solução — quando o problema está claro, a solução quase se escreve sozinha.
- •Não pule para o código antes de saber o que está resolvendo.
✓ Comece pelo problema
- ✓Defina quem sofre o problema e por quê
- ✓Escreva o resultado desejado em uma frase
- ✓Só então pense na tela e nas funções
✗ A armadilha do código cedo
- ✗"Vou só começar a codar e vejo no caminho"
- ✗Tutoriais que abrem o editor no minuto zero
- ✗App bonito que resolve o problema errado
💡 Dica prática
Antes de abrir o editor, complete a frase: "Este app existe para [quem] conseguir [resultado] sem [a dor de hoje]." Se você não consegue preencher, ainda está nos 55 minutos.
problema × solução
sofre a dor
em uma frase
o código cedo
🥊 A IA como sparring → SOP
A IA não serve só para escrever código — ela é uma ótima parceira de treino. Em vez de pedir uma resposta pronta, peça que ela desafie seu raciocínio. Depois de afinar o problema, peça um SOP (procedimento operacional) curto, com no máximo 800 caracteres.
Apresente o resultado desejado
"Este é o resultado que eu quero: […]." Dê o destino, não o caminho.
Peça contraponto
"Desafie meu raciocínio e me ajude a definir claramente o problema." Deixe a IA achar os furos.
Gere o SOP
"Crie um SOP para isto, com no máximo 800 caracteres." Esse procedimento curto vira o roteiro da construção.
💡 Por que limitar a 800 caracteres
Um SOP curto força clareza: cabe só o essencial. Ele é fácil de colar num arquivo de contexto e de o agente reler sem "estourar" a memória.
treino, não resposta
achar furos
procedimento
caracteres
🎨 Design inspiration
A IA é ótima em design, mas fica muito melhor com especificidade. Em vez de pedir "deixe bonito", alimente o agente com referências visuais: screenshots de sites que você gosta. Uma imagem comunica intenção em segundos.
🎯 Monte uma lista curada
Guarde uma pequena lista de sites de referência — Awwwards, Dribbble, Mobbin, Land-book são bons pontos de partida. Quando for construir, escolha 1 ou 2 prints que representam o "clima" visual desejado e entregue ao agente.
screenshot
não "bonito"
curadas
visual claro
⚡ Agent Manager & agentes paralelos
O Agent Manager deixa você gerenciar vários agentes e projetos ao mesmo tempo. A regra é simples: cada workspace = um projeto. Com agentes em paralelo, você se move muito mais rápido — enquanto um trabalha, você revisa ou inicia outro.
🗂️ Um workspace por projeto
Separar projetos em workspaces mantém cada contexto limpo e evita que um agente bagunce o trabalho do outro.
- •Workspace A: o rastreador de preços
- •Workspace B: um site pessoal
- •Cada um com seu agente, seu contexto e seu histórico.
| Modo | Como é | Velocidade |
|---|---|---|
| Um agente por vez | você espera cada tarefa | lento |
| Agentes paralelos | vários trabalham juntos | rápido |
| Workspace por projeto | contexto isolado | organizado |
vê todos
= 1 projeto
vários ao vez
mais produção
👥 Agentes = funcionários
Trate cada agente como um funcionário da sua equipe. A regra de ouro: dê jobs separados. Nunca ponha dois agentes na mesma tarefa — eles colidem, sobrescrevem o trabalho um do outro e geram confusão. É como uma equipe onde ninguém faz o trabalho do outro.
✓ Jobs separados
- ✓Agente A cuida do front-end
- ✓Agente B cuida do banco de dados
- ✓Cada um com responsabilidade clara
✗ Dois na mesma tarefa
- ✗Editam os mesmos arquivos ao mesmo tempo
- ✗Um desfaz o que o outro fez
- ✗Resultado: conflito e retrabalho
🧠 Pense como gestor
Antes de soltar os agentes, faça um pequeno "organograma": liste as tarefas e atribua cada uma a um agente. Se duas tarefas tocam o mesmo arquivo, faça-as em sequência, não em paralelo.
com função
jobs distintos
arquivos distintos
cada um no seu
📋 Planning mode & inbox
Antes de deixar o agente executar, ponha-o em modo de planejamento. Ele propõe um plano; você revisa e aprova, exatamente como faria com um empregado. As ações ficam aguardando seu aval no inbox.
O agente planeja
Em planning mode, ele descreve os passos antes de tocar em qualquer arquivo.
Você revisa
Leia o plano como um gestor: faz sentido? falta algo? está na ordem certa?
Aprove no inbox
Ações sensíveis pedem aprovação. Só então o agente executa o que foi combinado.
🛡️ Por que aprovar antes
Aprovar o plano evita que o agente construa a coisa errada por horas. Cinco minutos de revisão poupam um retrabalho inteiro.
antes de agir
como gestor
aprova ações
só após aval
📝 Arquivo de contexto (Gemini.md)
A janela de contexto do agente é limitada — em projetos longos, ela "estoura" e ele esquece o que combinaram. A solução é um arquivo de contexto (ex.: Gemini.md): um .md com as regras do projeto que o agente relê sempre.
| Arquivo | Guarda | Para quê |
|---|---|---|
| Gemini.md | regras: fonte, cores, propósito | manter o padrão do projeto |
| research.md | pesquisa reutilizável | não pesquisar a mesma coisa 2× |
# Projeto: rastreador de preços Propósito: acompanhar 5 produtos e mostrar a variação de preço de forma calma. Fonte: Inter. Cores: fundo escuro, acento azul. Regra: nada de alertas barulhentos; UI sóbria. Banco: Supabase (tabela "produtos").
💡 Memória de longo prazo
O arquivo de contexto sobrevive ao estouro da janela: mesmo quando o agente "esquece" a conversa, ele relê o Gemini.md e volta ao trilho. É a memória durável do projeto.
regras do projeto
não esquece
ao estouro
pesquisa salva
🔌 MCP + Supabase
Para o app guardar dados de verdade, ele precisa de um banco. O MCP (Model Context Protocol) é a "língua universal" que permite apps e serviços conversarem. Conecte um banco (Supabase) via token e o agente cria o projeto e escreve o SQL sozinho.
🔗 O caminho até os dados
- 1.Habilite o MCP do Supabase e cole o token de acesso.
- 2.Peça ao agente: "crie um projeto chamado [nome]".
- 3.Ele cria as tabelas e escreve o SQL — você não digita banco na mão.
língua universal
o banco
a conexão
o agente escreve
🔬 Exemplo prático
Vamos construir um app que acompanha 5 produtos e mostra a variação de preço de forma calma e bonita. O caminho segue exatamente a ordem do módulo:
- Defina o problema — "quero saber quando vale a pena comprar, sem ansiedade de alerta a cada centavo".
- Gere o SOP (≤ 800 caracteres) com a IA como sparring.
- Inspiração visual — escolha 1 print de um painel sóbrio que você admira.
- Construa local — agente em planning mode, banco no Supabase via MCP, app rodando no localhost.
Repare: 4 das 5 etapas acontecem antes de "fazer o app". É aí que mora a qualidade.
🏋️ Exercício
Pegue uma ideia sua e leve-a do problema ao localhost:
- Defina o problema com a IA — peça que ela desafie seu raciocínio.
- Gere um SOP de no máximo 800 caracteres.
- Construa um app simples rodando no localhost — comece pequeno, uma tela só.
Na Trilha 2.2, vamos publicar esse mesmo app no mundo.
⚡ Prompts prontos
Copie, cole no seu assistente de IA e adapte ao seu caso.
Este é o resultado desejado: "[descreva o resultado que você quer]". Desafie meu raciocínio e me ajude a definir claramente o problema. Faça as perguntas que faltam antes de propor qualquer solução.
Crie um SOP para isto, com no máximo 800 caracteres. Liste os passos na ordem e o resultado esperado de cada um.
Pesquise o que os melhores [tipo de app] têm em comum (estrutura, telas, padrões de uso) e salve num arquivo research.md que eu possa reusar nos próximos projetos.
Usando o MCP do Supabase, crie um projeto chamado [nome]. Crie as tabelas necessárias e escreva o SQL você mesmo.
✅ Resumo do módulo
Próximo módulo:
2.2 — Publicar e manter seu app