Encontro 04 - Rede Daora
OpenCode: Seu Primeiro Agente de IA
Kit local, OpenCode e contexto visual
Montar o kit de desenvolvimento, tirar o código do Replit e criar um página pessoal com contexto visual.
01
Kit de Desenvolvimento Local
Seção 01 · Kit
O trio básico do kit
Num restaurante, a cozinha funciona com três pilares: o cozinheiro (quem executa), a bancada (onde ele trabalha) e o livro de receitas (que guarda o que funcionou). No desenvolvimento, é a mesma coisa.
Cozinheiro (Agente de IA)
Cria arquivos, escreve código, executa comandos. Eu dirijo, ele faz.
Bancada (VS Code)
A bancada de trabalho. Onde eu vejo, edito e organizo os arquivos.
Livro de receitas (Git)
Guarda cada versão - nunca se perde nada.
Seção 01 · Expansão
O kit cresce conforme o projeto
O kit básico serve pra maioria dos projetos do curso. Conforme o projeto fica mais complexo, eu acrescento peças.
| Tipo de projeto | Kit básico | Peças extras |
|---|---|---|
| Site estático (HTML/CSS/JS puro) | Agente + IDE + Git | Nenhuma |
| Site com framework (Astro, React) | Agente + IDE + Git | Gerador de pacotes, motor do framework |
| App com backend | Agente + IDE + Git | Servidor de banco de dados, API |
Seção 01 · Expansão
Ferramentas extras
Skills = Molhos prontos
Habilidades que o agente aprende: simplify, debug, design-visual, anti-slop. Aceleram o trabalho.
MCP = Fornecedores Externos
Servidores que trazem informação de fora: docs, GitHub, Figma, Canva. O agente "liga" pra quem sabe mais.
Plugins = Funcionalidades Extras
Extensões que o OpenCode não tem de fábrica: rastreamento web, conversão de HTML, integrações.
Frameworks = Receitas Prontas
Ferramentas como Astro e React: estrutura pronta que o agente usa pra construir mais rápido.
02
O que é um Agente
Seção 02 · Agente
O que é um agente de IA?
Um agente é qualquer programa que age de forma autônoma - observa, decide e executa sozinho.
| Agente | Quem fez | O que destaca |
|---|---|---|
| Claude Code | Anthropic | Modos Plan e Build, agentes em equipe |
| Hermes Agent | Nous Research | Gratuito e open-source |
| GitHub Copilot | Microsoft | Integrado ao VS Code, agente autônomo |
| OpenCode | OpenCode | Plan e Build, foco em contexto visual |
03
VS Code e Terminal
Seção 03 · VS Code
Tour rápido do VS Code
O VS Code é a nossa IDE - a bancada de trabalho onde eu vejo, edito e organizo os arquivos.
Explorador de Arquivos
Barra lateral esquerda. Mostra pastas e arquivos do projeto - onde eu abro, crio e organizo.
Editor de Código
Centro da tela. Onde eu vejo e edito o código HTML, CSS e JavaScript.
Terminal Integrado
Painel inferior. Onde eu rodo comandos. Abre comCtrl + `.
Seção 03 · Terminal
Terminal: os 5 comandos básicos
O terminal é uma interface de texto. Eu mando comandos, o computador responde. No Windows, usamos o PowerShell.
| Comando | O que faz | Analogia |
|---|---|---|
cd | Mostra onde estou | Em que rua eu estou? |
dir | Lista arquivos da pasta | O que tem nessa rua? |
cd nome | Entra numa pasta | Caminhar até outra rua |
mkdir nome | Cria uma pasta nova | Construir uma rua nova |
cls | Limpa a tela | Apagar o quadro |
04
O que é o OpenCode
Seção 04 · OpenCode
Interfaces do Agente
Interface GUI (visual)
O OpenCode Desktop. Janela própria com painel de chat, explorador de arquivos e visualizador de mudanças.
Interface TUI (texto)
A versão em texto, que roda dentro do terminal. Mesmo motor, interface diferente.
Exemplo real de frontend e backend: o motor é o backend (trabalha nos bastidores). A interface é o frontend (a parte que eu vejo e toco).
Seção 04 · Modos
Plan Mode vs Build Mode
O OpenCode tem dois modos. Um planeja, o outro executa. É a mesma separação que existe numa obra de verdade.
Plan Mode
O agente pesquisa, analisa e propõe. Não mexe em nenhum arquivo. É o arquiteto que desenha o projeto antes da obra começar.
Build Mode
O agente cria, edita e executa. Arquivos são escritos, comandos são rodados. É o pedreiro que constrói de verdade.
Seção 04 · Skills
O kit skills-daora
O que vem no kit
AGENTS.md (regras), opencode.json (segurança) e 7 habilidades prontas pra usar.
Como instalar
"Use this template" no GitHub, baixar ZIP, copiar 3 itens pra pasta do projeto e reiniciar o OpenCode.
| Habilidade | Quando entra em ação |
|---|---|
| faf-wizard | Entrevista pra entender minha ideia |
| design-visual-facil | Decide cores, fontes e organização |
| ai-loop | Constrói e confere item por item |
| diagrama-do-projeto | Desenha mapas simples do projeto |
| explica-tudo | Traduz erros e arquivos pra português |
| superpm | Gerencia progresso e avisa antes de problemas |
| anti-slop-ptbr | Limpa texto com cara de robô |
05
Atividades
Seção 05 · Replit
Atividade 1 - Migrar projeto do Replit
Os projetos que ficaram presos no Replit precisam ir pro ar de verdade. A skill replit-deploy-livre faz a migração.
O que a skill faz
Diagnostica o projeto, limpa resíduos do Replit e gera configs de deploy prontas (Vercel, Cloudflare ou GitHub Pages).
Como usar
Instalar a skill, dizer "quero publicar meu projeto do Replit na Vercel" e seguir o fluxo que o agente conduzir.
Seção 05 · Página Pessoal
Atividade 2 - Criar uma página pessoal
Usar o OpenCode do zero pra criar uma página com grid de cards - aplicando tudo o que aprendeu hoje: contexto visual, Plan Mode, Build Mode.
1. Referências
Pesquisar no Dribbble, escolher paleta no Coolors.
2. Plan Mode
Descrever estilo, cores, público, estrutura.
3. Build Mode
"Construa a página pessoal conforme o plano aprovado."
4. Refinar
Ajustar fotos, botões, filtros de categorias.
Próxima aula
Fim do Módulo 01
Integração
Web e IA
Prompts
Identidade Visual
GitHub
Deploy
OpenCode
kit e contexto visual
→No próximo encontro, eu uso o OpenCode Plan/Build + Preview Local