Aula 04 - OpenCode: Seu Primeiro Agente de IA

No Encontro 03 a gente tentou tirar os projetos do Replit e colocar no ar por outra conta - e não deu certo pra todo mundo. Hoje eu vou entender por que e montar meu ambiente de desenvolvimento local. É a mesma coisa que as plataformas online entregam pra mim, só que rodando no meu computador e adaptável para as minhas necessidades. Liberdade total pro meu código.

Nosso ambiente terá sempre no mínimo três peças: o agente (quem executa), o IDE (onde eu trabalho) e o Git (que é o cofre geral).

O kit de desenvolvimento local

A analogia da cozinha de restaurante

Num restaurante, a cozinha funciona com três pilares: o cozinheiro (quem executa o pedido), a bancada de trabalho (onde ele prepara tudo) e o livro de receitas (que guarda o que funcionou e o que deu errado). Sem o cozinheiro, ninguém cozinha. Sem a bancada, não tem onde trabalhar. Sem o livro de receitas, cada prato sai de um jeito diferente.

O kit de desenvolvimento funciona igual:

Peça do kit	Analogia no restaurante	No desenvolvimento
Agente de IA	Assistente de Cozinha	Cria arquivos, escreve código, executa comandos - eu dirijo, ele faz
IDE (VS Code)	A bancada de trabalho	Onde eu vejo, edito e organizo os arquivos do projeto
Git	O livro de receitas	Guarda cada versão do projeto - nunca se perde nada

Ferramentas e atalhos extras

Em restaurante de verdade, o cozinheiro não começa do zero em cada prato. Ele tem molhos prontos na geladeira (que aceleram o tempero), telefone de fornecedores pra consultar quando tem peixe fresco ou legumes novos e aparelhos extras que o fogão não tem - como uma fritadeira profissional ou um forno de pizza.

No desenvolvimento, é a mesma coisa:

Peça do kit	Analogia no restaurante	No desenvolvimento
Skills	Molhos e temperos prontos	Habilidades que o agente aprende (simplify, debug, design-visual)
MCP Servers	Fornecedores que ligam pra cozinha	Servidores que trazem informação de fora (docs, GitHub, Figma)
Plugins	Aparelhos extras (fritadeira, forno)	Extensões que adicionam funcionalidade ao OpenCode
Frameworks	Pratos pré-preparados	Ferramentas prontas que o agente usa (Astro, React)

O kit cresce conforme o projeto

O kit básico (agente + IDE + git) serve pra maioria dos projetos do curso - sites estáticos, landing pages, portfólios. Mas 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)	Agente + IDE + Git	Nenhuma - o básico resolve
Site com framework (Astro, React)	Agente + IDE + Git	Gerador de pacotes (npm), motor do framework
App com backend	Agente + IDE + Git	Servidor de banco de dados, API
App de celular	Agente + IDE + Git	Emulador ou dispositivo físico

O que é o OpenCode

O OpenCode é nosso assistente local. Ele cria arquivos, escreve HTML, CSS e JavaScript, organiza pastas e ajusta cores - todo tipo de alteração em arquivos e comandos em nosso computador.

Duas interfaces, um motor

Interface	O que é	Como eu interajo
GUI (Visual)	O aplicativo OpenCode Desktop - janela própria com painel de chat, explorador de arquivos e visualizador de mudanças	Clico, navego, acompanho o resultado visualmente
TUI (Terminal)	A versão em texto, que roda dentro do terminal	Digito comandos e prompts

As duas usam o mesmo motor: a mesma IA, as mesmas ferramentas, o mesmo jeito de criar arquivos. Só muda a “cara”.

Isso é um exemplo real de frontend e backend: o motor é o backend - a parte que trabalha nos bastidores. A interface (Desktop ou terminal) é o frontend - a parte que eu vejo e toco. Um site funciona assim: o servidor é o mesmo, a “cara” muda.

Plan Mode e Build Mode

Demo: os dois modos do OpenCode

Plan Mode - o mentor estratégico

Planeja antes de construir: analisa o que quero, sugere estrutura, cria um roteiro e define cores e estilo. Não mexe nos arquivos - só planeja. Uso quando começo um projeto novo ou sempre que for começar uma nova tarefa.

Build Mode - o construtor

Constrói: cria pastas e arquivos, escreve HTML, CSS e JavaScript, ajusta cores e fontes, cria grid de cards. Uso quando o plano está pronto e preciso de arquivos reais.

	Plan Mode	Build Mode
Função	Planejar e pensar	Construir e executar
Analogia	Arquiteto na prancheta	Pedreiro na obra
O que cria	Ideias, estrutura, roteiro	Arquivos, código, site
Mexe nos arquivos?	Não - só sugere	Sim - cria e edita
Quando usar	Início do projeto	Depois do plano pronto

A ordem certa: primeiro Plan (planejar), depois Build (construir). Pular direto pro Build é como construir uma casa sem planta - pode até ficar de pé, mas não vai ficar boa.

Tour rápido: VS Code e terminal

O VS Code é o IDE do meu kit - a bancada de trabalho onde eu vejo, edito e organizo os arquivos do projeto.

É como uma bancada de trabalho: eu tenho as ferramentas à mão, os materiais organizados e o espaço pra construir.

As 3 áreas principais

Área	Onde fica	O que faz
Explorador de Arquivos	Barra lateral esquerda	Mostra pastas e arquivos do projeto - aqui eu abro, crio e organizo
Editor de código	Centro da tela	Onde eu vejo e edito o código (HTML, CSS, JavaScript)
Terminal Integrado	Painel inferior	Onde eu rodo comandos - abre com `Ctrl+` `

Como abrir uma pasta

Arquivo - Abrir Pasta (ou Ctrl+K Ctrl+O)
Navegar até a pasta do projeto e selecionar
A pasta aparece no Explorador à esquerda

Extensões úteis

Extensão	O que faz
Live Server	Abre o site no navegador e atualiza sozinho quando eu salvo
Prettier	Formata o código automaticamente pra ficar organizado

Pra instalar: clicar no ícone de extensões (quadrados à esquerda), pesquisar o nome e clicar “Instalar”. No curso, vou orientar quando precisar de cada uma.

O terminal em poucas palavras

O terminal é uma interface de texto onde eu mando comandos e o computador responde.

É como o WhatsApp do computador: eu mando uma mensagem (comando), e ele responde.

Como abrir no VS Code: apertar Ctrl+ ` (ctrl + crase - a tecla ao lado do “1” no teclado). Uma janela preta aparece na parte de baixo.

Os 5 comandos básicos (PowerShell):

Comando	O que faz	Exemplo	Analogia
`cd`	Mostra onde eu estou	`cd` -> `C:\Users\aluno\meu-site`	Em que rua eu estou?
`dir`	Lista os arquivos da pasta atual	`dir` -> `index.html style.css imagens/`	O que tem nessa rua?
`cd nome`	Entra numa pasta	`cd imagens`	Caminhar até outra rua
`mkdir nome`	Cria uma pasta nova	`mkdir projetos`	Construir uma rua nova
`cls`	Limpa a tela	`cls`	Apagar o quadro

Exemplo prático:

# 1. Ver onde estou
cd
# Output: C:\Users\aluno

# 2. Criar a pasta do projeto
mkdir meu-primeiro-site

# 3. Entrar na pasta
cd meu-primeiro-site

# 4. Verificar que está vazio
dir
# Output: (nada - pasta vazia)

# 5. Criar os arquivos (o OpenCode faz isso depois)

O OpenCode é o agente do nosso ambiente: por dentro, ele usa comandos como esses pra criar meus arquivos - eu não preciso digitar cada comando na mão.

Instalando ferramentas extras: skills-daora

É como baixar um pacote de receitas prontas pra minha cozinha - em vez de inventar do zero, eu já começo com o que funciona.

O skills-daora é um kit de iniciação pro OpenCode: arquivos prontos que ensinam o agente a conversar comigo em português simples, uma coisa por vez, sem palavras difíceis.

O que vem no kit

Arquivo	O que faz
`AGENTS.md`	Regras de comportamento: português do Brasil sempre, linguagem simples, uma coisa por vez
`opencode.json`	Configuração de segurança: nada roda sem eu permitir; comandos perigosos bloqueados
`.opencode/skills/`	As nossas 7 habilidades nossas pré definidas

As 7 habilidades

Habilidade	Quando entra em ação
faf-wizard	Eu ainda não sei explicar o que quero - ela me entrevista, uma pergunta por vez, até entender minha ideia
design-visual-facil	Hora de deixar bonito - decide cores, fontes e organização sozinha, eu só digo o que quero ver
ai-loop	Modo caprichoso: anota os combinados, constrói, confere item por item antes de dizer “pronto”
diagrama-do-projeto	Desenha mapas simples (“caixinhas e setas”) pra mostrar como meu projeto funciona
explica-tudo	Apareceu um erro estranho ou arquivo desconhecido? Traduz tudo pra português de gente
superpm	O gerente do projeto: mantém o painel do que já ficou pronto e do que falta, e avisa antes de problemas
anti-slop-ptbr	Cata textos com “cara de robô” (frases batidas, enrolação) e limpa pra ficar com a minha voz

Como instalar

Abrir a página do kit no GitHub: github.com/Rede-Daora/skills-daora
Clicar no botão verde “Use this template” (o GitHub cria uma cópia completa na minha conta)
Baixar a cópia: botão Code - Download ZIP (e descompactar)
Copiar 3 coisas pra pasta do MEU projeto: AGENTS.md, opencode.json e a pasta .opencode/
Fechar e abrir o OpenCode de novo (a config só é lida quando ele inicia)

Ou pelo terminal:

git clone https://github.com/SEU-USUARIO/skills-daora.git

Segurança

O kit vem configurado no modo mais cauteloso:

Nada acontece sem eu apertar “permitir” - criar arquivo, rodar comando, abrir site externo: o OpenCode sempre pergunta antes
Comandos perigosos são bloqueados de verdade - como apagar pastas (rm -rf) e enviar código pra internet sem eu mandar

Se alguma resposta vier cheia de termos técnicos, basta digitar: “Explique como se eu fosse leigo.”

Expandindo o kit: Skills, MCP e Plugins

O kit básico é fogão + faca + receita. Mas conforme a cozinha cresce, eu acrescento: um liquidificador novo (skill), o WhatsApp do fornecedor que me avisa quando tem promoção (MCP) e um forno de pizza que meu fogão não tem (plugin).

Skills - O que o agente aprende a fazer

Skills são habilidades que o OpenCode aprende. Cada skill é um conjunto de instruções pra uma tarefa específica. O kit skills-daora já traz 7 instaladas (faf-wizard, design-visual-facil, ai-loop, diagrama-do-projeto, explica-tudo, superpm, anti-slop-ptbr) - as mesmas que vimos na seção anterior.

Se eu quiser mais habilidades, é só copiar a pasta .opencode/skills/ de outro projeto.

Comandos - Atalhos prontos

Além das habilidades, o kit traz dois comandos que o agente entende direto:

Comando	O que faz
`/começar`	Começa um projeto novo - faz perguntas e monta o plano
`/progresso`	Mostra o que já ficou pronto e o que falta

MCP Servers - De onde o agente PUXA informação

MCP = Model Context Protocol. São servidores que o agente acessa pra buscar informação ou executar tarefas externas. Cada server é um especialista diferente.

Server	O que faz	Analogia
Context7	Puxa documentação atual de qualquer lib	“Consultor que sabe tudo”
GitHub MCP	Lê issues, PRs, repositórios	“Office boy do GitHub”
Figma MCP	Lê designs do Figma - componentes, cores, espaçamento	“Designer que desenha pra mim”
Canva MCP	Cria, edita e exporta designs do Canva	“Artesão de imagens”
Chrome DevTools	Abre navegador real, inspeciona sites	“Mecânico de sites”
Astro docs	Documentação do framework Astro	“Manual do Astro”

MCP = “Meu agente pode ligar pra alguém que sabe mais”.

Plugins - O que o OpenCode SABE ser

Plugins são extensões que adicionam funcionalidades ao próprio OpenCode. Ele nasce com certas capacidades - plugin acrescenta mais.

Plugin	O que faz	Analogia
@xberg-io/opencode-crawlberg	Rastreamento web e extração de dados	“Robô que lê sites”
@xberg-io/opencode-html-to-markdown	Converte HTML pra Markdown limpo	“Tradutor de páginas”
@xberg-io/opencode-xberg	Extensões e integrações gerais	“Caixa de ferramentas”

Plugin = “Apêndice novo no corpo do agente”.

Do Replit pro Mundo: replit-deploy-livre

Nossos projetos anteriores foram feitos no Replit. Essa skill nos ajuda a levar eles pra produção de verdade - sem quebrar nada e sem decisões técnicas no escuro.

O que a skill faz

A skill replit-deploy-livre diagnostica meu projeto do Replit e gera as configurações de deploy prontas:

Passo	O que acontece
Diagnóstico	Verifica a estrutura do projeto, armadilhas do Replit e APIs mock
Questionário	Pergunta: dados reais ou demonstração? O que fazer com o backend?
Limpeza	Remove resíduos do Replit (`@replit/*`, `.replit`, `replit.nix`)
Deploy	Gera configs pra Vercel, Cloudflare Pages ou GitHub Pages
Verificação	Testa se o site tá funcionando no ar

Como usar

Instalar a skill no OpenCode
Dizer ao agente: “quero publicar meu projeto do Replit na Vercel”
Seguir o fluxo: diagnóstico - questionário - limpeza - deploy
Verificar: site no ar, link funcionando

Plataformas suportadas

Plataforma	Config gerada	Exige
Vercel	`vercel.json`	CLI `vercel` autenticada
Cloudflare Pages	`_redirects` + script de deploy	CLI `wrangler` autenticada
GitHub Pages	Workflow `.github/workflows/deploy.yml`	Pages habilitado no repositório

Também dá pra só desvincular do Replit - sem gerar config de deploy nenhum. A skill limpa os resíduos e valida o build local.

Atividades

Agora é hora de praticar. São duas atividades:

Atividade 1 - Migrar projeto do Replit

Objetivo: Levantar os projetos que ficaram presos no Replit na aula anterior.

Tempo: 30 minutos

Passos:

Abrir o OpenCode no computador
Se ainda não instalou, instalar o kit skills-daora (seguir a seção “Instalando o Kit” acima)
Instalar a skill replit-deploy-livre
Dizer ao agente: “quero publicar meu projeto do Replit na Vercel”
Seguir o fluxo que o agente conduzir: diagnóstico - questionário - limpeza - deploy
Verificar: site no ar, link funcionando

Entregável: Projeto do Replit publicado e acessível por link permanente.

Quem já publicou corretamente na aula 03 pode ajudar colegas ou avançar pra Atividade 2.

Atividade 2 - Criar uma página pessoal

Objetivo: Usar o OpenCode do zero pra criar uma página pessoal, aplicando tudo o que aprendeu hoje. Essa página vai ser a base pra um blog em aulas futuras.

Tempo: 45 minutos

O que criar: Uma página pessoal com grid de cards mostrando seus interesses e projetos.

Passos:

Criar uma pasta nova no computador (ex: pagina-pessoal)
Abrir o OpenCode dentro dessa pasta
Ativar o Plan Mode e descrever o que quero - usando contexto visual:
- Pesquisar 2 ou 3 sites de referência no Dribbble (“personal portfolio” ou “personal website”)
- Escolher uma paleta de cores no Coolors
- Anotar: estilo, cores, interesses, estrutura
Dizer ao agente, no Plan Mode:

“Quero criar uma página pessoal. estilo: [descrever - ex: minimalista, moderno, como o site X] Cores: [paleta escolhida] interesses: [listar seus interesses - ex: UI/UX, fotografia, música, código] estrutura: cabeçalho com meu nome, seção sobre mim, grid de cards com interesses, rodapé com contato referências: [links ou descrições dos sites que gosto]”

Revisar e aprovar o plano do agente
Ativar o Build Mode e pedir: “Construa a página pessoal conforme o plano aprovado”
Visualizar o resultado
Ajustar com prompts de refinamento:
- “Troque a foto do card de UI/UX pra algo mais profissional”
- “Adicione um link no card de fotografia pro meu perfil no Instagram”
- “Coloque minha frase de efeito no cabeçalho”

Entregável: Página pessoal criada com OpenCode, com identidade visual e referências aplicadas.

Diferença do exemplo da aula: eu uso os MEUS interesses, as MINHAS cores, o MEU estilo. O exemplo era genérico - agora é pessoal.

Problemas comuns

Problema	Solução
O projeto do Replit não builda no OpenCode	Use a skill replit-deploy-livre pra diagnosticar e limpar resíduos do Replit
O OpenCode não cria os arquivos	Verifique se está no Build Mode - no Plan Mode ele só planeja
O grid ficou bagunçado no celular	Peça: “Torne o grid responsivo: 3 colunas desktop, 2 tablet, 1 celular”
As cores ficaram diferentes das referências	Inclua os códigos hexadecimais no prompt: #F5F0EB, #C67A4B, #3D2B1F
As fotos ficaram tamanhos diferentes	Peça: “Todas as fotos dos cards devem ter a mesma proporção (3:4)”
O botão de WhatsApp não abre	Use o formato: `https://wa.me/5511999999999` (55=Brasil, 11=DDD, sem traços)
O OpenCode entendeu errado o que eu queria	Reforce o pedido com mais detalhes - mencione referências visuais e cores específicas
não sei o que criar na Atividade 2	Comece com um cartão de visitas ou portfólio simples

Resumo

Conceito	O que eu aprendi
Kit de Desenvolvimento Local	Agente + IDE + Git formam o trio básico - e o kit cresce conforme o projeto
OpenCode	Agente de IA que cria e modifica código direto no meu computador
Plan Mode	Modo de planejamento - o agente ajuda eu a pensar antes de construir
Build Mode	Modo de construção - o agente cria arquivos e escreve código
Contexto visual	Referências visuais (sites, cores, layouts) direcionam o agente melhor que só texto
skills-daora	Kit de iniciação com 7 habilidades e configuração de segurança
Skills, MCP, Plugins	Formas de expandir o kit conforme o projeto exige
replit-deploy-livre	Skill que migra projetos do Replit pra Vercel, Cloudflare ou GitHub Pages
Página pessoal	Página criada com OpenCode, com identidade visual guiada por referências

Material de apoio

Recurso	O que é	Link
OpenCode	Agente de IA que cria código no computador	opencode.ai
skills-daora	Kit de iniciação com 7 habilidades	github.com/Rede-Daora/skills-daora
replit-deploy-livre	Skill pra migrar projetos do Replit	github.com/Rede-Daora/replit-deploy-livre
Dribbble	Inspiração e referências de design	dribbble.com
Coolors	Gerador de paleta de cores	coolors.co
Adobe Color	Paleta de cores da Adobe	color.adobe.com
OpenRouter	Vários modelos de IA em um só lugar	openrouter.ai
Google AI Studio	API Key do Gemini	aistudio.google.com