Operação 10x · Ideal Trends
Início
Imersão · 3 Atos

Operação
10x.

Ideal Trends

Uma visão 360º do Claude — Chat, Cowork e Code — pra você levar a I.A pro dia a dia.

Administrado por Willian e Lucas · 9h às 11h

Ato 1 — 26 de Junho
Claude 10x
O que é o Claude, precificação, Cowork na prática e Claude Code — uma visão completa pra usar I.A no dia a dia.
9h–11h 6 blocos
Ato 2 — 10 de Julho
Design com I.A.
Criar interfaces com I.A., entender o que é um design system e aplicar tudo num app real — do Claude Design ao Claude Code.
9h–11h 6 blocos
Ato 3 — 7 de Agosto
Do Protótipo ao Projeto
Claude Code na prática: PRD, ADR e regras de projeto para construir com I.A. sem virar Frankenstein. Fecha com Claude Security.
9h–11h 9 blocos Novo

Cronograma — Ato 1 (26/06)

HorárioO que rola
09:00 – 09:10Abertura e boas-vindas
09:10 – 09:40O que é o Claude · Precificação (Blocos 1-2)
09:40 – 10:25Cowork na prática + Demos ao vivo (Blocos 3-4)
10:25 – 10:45Claude Code (Bloco 5)
10:45 – 11:00Tira-dúvidas e próximos passos (Bloco 6)

Cronograma — Ato 2 (10/07)

HorárioO que rola
09:00 – 09:10Visão geral do dia (Bloco 1)
09:10 – 09:30Stitch e Google AI Studio (Bloco 2)
09:30 – 10:00Claude Design: criar o todolist juntos (Bloco 3)
10:00 – 10:25Design System: criar juntos (Bloco 4)
10:25 – 10:50Aplicar o design system no app (Bloco 5)
10:50 – 11:00Recap e próximos passos (Bloco 6)

Cronograma — Ato 3 (07/08)

09:00O FrankensteinA tese do encontro, as 5 causas e os 4 antídotos · Bloco 1
09:08Claude Code na práticaO que muda vindo do Cowork, contexto e o Cursor em 3 min · Bloco 2
09:20PRD, ADR e as regras da casaA espinha dorsal do encontro · Blocos 3, 4 e 5
09:56Demo 1 — a fundaçãoDo protótipo ao PRD, aos ADRs e ao primeiro commit · Bloco 6
10:18Intervalo8 minutos
10:26Demo 2 — construir, refatorar, debugarA fundação mudando o comportamento do Claude · Bloco 7
10:43Claude SecurityInstalar, varrer e ler o relatório · Bloco 8
10:55Kit anti-Frankenstein e tarefaO que levar pra rotina · Bloco 9
🕐 Chegou atrasado ou perdeu o fio? Sem pânico. Este material é o seu mapa completo — todo conteúdo da imersão tá organizado em blocos navegáveis. Use os botões Ato 1, Ato 2 e Ato 3 no topo (ou a barra lateral no desktop) pra ir direto onde você está. A gravação fica disponível depois, mas você não precisa esperar — pode começar agora pelo bloco que faz sentido.

Pré-requisitos

💡 Dica O plano Pro (~R$115/mês) dá acesso a tudo: Chat, Cowork e Claude Code — tudo dentro do Claude Desktop App. Os planos Max só aumentam os limites de uso.
Ato 1 · Bloco 1
O que é o Claude?
Não é um chatbot — é uma I.A que entende, decide e executa
15 minutos

Claude não é um chatbot

O Claude é uma I.A da Anthropic que entende contexto, toma decisões e executa. Diferente de chatbots comuns, ele não apenas responde perguntas — ele colabora com você em tarefas complexas, cria documentos, analisa dados e constrói ferramentas.

Onde o Claude vive

InterfaceO que fazPara quem
Claude.ai (web)Versão completa no navegadorAcesso rápido de qualquer computador
Claude Desktop AppChat, Cowork e Claude Code — tudo num app, zero terminalUso diário — recomendado pra todo mundo
Claude MobileSó Chat por voz e texto. Cowork e Claude Code não rodam no celularAcesso rápido em qualquer lugar

Os 3 modos

Chat

Conversas rápidas, brainstorming, perguntas. Como falar com um colega. Inclui voice mode e captura de tela.

Cowork

Tarefas complexas e autônomas. O Claude trabalha sozinho — pesquisa, analisa documentos, gera relatórios, cria apresentações. Você delega e ele entrega.

Code

O próximo nível. Skills customizadas, agentes, times de I.A, apps, dashboards e MCPs ilimitados. Tudo dentro do Claude Desktop App.

ModoQuando usarExemplo
ChatPara entender — perguntas, brainstorm, ideias"Me explica o que é ROI"
CoworkPara conectar — análises, relatórios, plugins"Analise meus concorrentes e gere um relatório"
CodePara construir — skills, agentes, automações"Cria um agente de atendimento para meu negócio"
💡 Regra simples Chat para entender. Cowork para conectar. Code para construir.
Ato 1 · Bloco 2
Precificação e Tokens.
Quanto custa e qual plano usar no dia a dia
15 minutos

Planos do Claude

PlanoPreçoChatCoworkClaude Code
FreeGrátisLimitado
Pro~R$115/mês
Max 5x~R$575/mês
Max 20x~R$1.150/mês
⚠️ Importante sobre Cowork e Claude Code no Windows Ambos rodam apenas em Windows 11 Pro ou superior (precisa de Hyper-V, que o Windows 11 Home não tem) e em macOS atualizado. Se você está no Windows Home, considere upgrade pro Pro ou use Mac.

A comparação que muda o seu dia

O valor da I.A não é "substituir gente" — é te dar superpoderes. O mesmo profissional, com o Claude do lado, entrega muito mais e gasta o tempo no que realmente exige cérebro. Olha a diferença no dia a dia:

No dia a diaVocê sem I.AVocê com o Claude
Tarefas repetitivasFaz na mão, uma por umaDescreve uma vez, o Claude faz em lote
Pesquisa técnicaCaça em fórum, doc e Stack OverflowPergunta e recebe a resposta com contexto
Código / scriptsEscreve do zero e debuga sozinhoGera o esqueleto e você só refina
Análise de dadosHoras em planilha, log e regexCola os dados e recebe o insight pronto
DocumentaçãoSempre fica pra depoisRascunho pronto em segundos
🚀 A real economia é o seu tempo Cada tarefa chata que o Claude assume são minutos (ou horas) que voltam pra você focar no que importa. Não é sobre trabalhar menos — é sobre entregar 10x mais no mesmo dia.
⚠️ Honestidade O plano Pro (R$115/mês) é ótimo para começar e aprender, mas tem limite de uso real que varia conforme o modelo usado. A Anthropic não publica números fixos — o limite depende de 3 fatores: qual modelo (Haiku gasta pouco, Opus gasta muito), o tamanho dos seus prompts, e a demanda no servidor no momento. Para uso profissional intenso no dia a dia, o Max 5x (R$575/mês) é o plano recomendado.
💡 Posso compartilhar uma conta com o time todo? Não pelo TOS da Anthropic — uma conta Pro/Max é pra uso individual (você, 1 pessoa). Login compartilhado entre vários colaboradores viola os termos. Pra usar com o time inteiro, o caminho oficial é o Claude Team (~US$30 por pessoa) ou Enterprise, onde cada um tem o seu acesso.

O que cabe na mensalidade?

Nos planos Pro e Max, você paga uma mensalidade fixa — não é cobrado por tarefa individual. O que muda entre os planos é o limite de uso:

PlanoPreçoLimite
Pro~R$115/mêsUso moderado — ideal para aprender e testar. Espere bater o limite se usar intensivamente por mais de 1-2 horas seguidas.
Max 5x~R$575/mês5x o limite do Pro — uso profissional diário, rodar agentes, criação intensiva.
Max 20x~R$1.150/mês20x o limite do Pro — uso intenso o dia todo, automações pesadas e vários projetos simultâneos.

Os 3 modelos do Claude

Dentro de qualquer plano, você escolhe qual modelo usar. Cada um tem um nível de inteligência e um consumo de tokens diferente:

ModeloPra que serveConsumo de tokensQuando usar
HaikuTarefas simples e rápidasBaixo — cabe muito mais na janelaResumos, formatação, tarefas repetitivas
SonnetUso geral — equilíbrio entre qualidade e custoMédioDia a dia: criar skills, gerar conteúdo, análises
OpusRaciocínio complexo e profundoAlto — consome 5-10x mais que HaikuEstratégia, orquestração de times, decisões críticas
💡 Dica de economia Use Sonnet como padrão no dia a dia. Reserve o Opus para tarefas que realmente precisam de raciocínio profundo (ele estoura o limite rápido). Use Haiku para tarefas simples e repetitivas — ele rende muito mais. E use /cost no Claude Code para monitorar seu consumo.
💡 Importante sobre limites A Anthropic ajusta os limites dinamicamente conforme a demanda dos servidores. Não existe um número fixo publicado. Se você atingir o limite, ele reseta em ~3 a 5 horas. Trocar para um modelo mais leve (Haiku) enquanto espera é uma boa estratégia.
💡 Dica Comece com o Pro para aprender e testar. Quando perceber que está batendo no limite com frequência, migre para o Max 5x. Use /cost no Claude Code para monitorar seu consumo.
Ato 1 · Bloco 3
Cowork: Plugins e Conectores.
O Claude vira funcionário quando ativa o Cowork
20 minutos

O que é o Cowork?

O Cowork transforma o Claude de um chat em um funcionário. Ele acessa plugins, lê e cria arquivos, pesquisa na web e executa ações — tudo sozinho, sem precisar da sua intervenção a cada passo.

Como ativar

  1. Abra o Claude Desktop App

    Baixe em claude.ai/download se ainda não tem.

  2. Clique na aba Cowork

    Está no topo do app, ao lado de Chat e Code.

  3. Conceda acesso a pastas

    O Claude precisa acessar pastas no seu computador para ler e salvar arquivos. Escolha uma pasta de trabalho.

❓ Não acha a aba Cowork no Claude Desktop?

Causas mais comuns:

  1. Você está no plano Free — Cowork é exclusivo do Pro+
  2. Versão antiga do app — atualize em claude.ai/download
  3. Windows 11 Home — Cowork exige Hyper-V (só tem no Pro+)
  4. Rollout em onda — em alguns casos resolve apenas reinstalando + reiniciando o computador (vários alunos da última imersão resolveram assim)

11 plugins oficiais

A Anthropic lançou 11 plugins oficiais open-source em janeiro de 2026 — cada um focado em um departamento (Marketing, Sales, Legal, Finance, etc.). Além disso, a comunidade cria plugins customizados.

Antes de instalar, entenda onde cada plugin vive. Cowork e Claude Code são ecossistemas separados — plugin de um não aparece no outro:

COWORK

Plugins de trabalho

Marketing, Sales, Legal, Finance, HR e os outros 11 oficiais. Focados em conhecimento e produtividade.

Como instalar: aba Cowork → Customize → Browse plugins

CLAUDE CODE (DESKTOP)

Plugins de tudo

~50 oficiais (Anthropic) + dezenas de marketplaces da comunidade. De LSPs e code review até Skill Creator, integração Linear/GitHub/Telegram, copywriting, design, pesquisa — qualquer área que dê pra automatizar com texto.

Método 1 — Diretório visual: botão + ao lado do prompt → Plugins → busque no Diretório (3 abas: Anthropic e Parceiros, Código, Pessoal)

Método 2 — peça pro Claude: cole um prompt como "Instala essa skill pra mim e deixe disponível em todos os projetos <url-do-repo>" e ele executa.

⚠️ Não confunda Plugin instalado no Cowork não vai aparecer no Code, e vice-versa. Se você quer o mesmo plugin nos dois ambientes, precisa instalar duas vezes — uma em cada aba.
PluginO que faz
MarketingBrand voice, análise competitiva, planejamento de campanha, criação de conteúdo
SalesPipeline, prospecção, follow-up, scripts de vendas
FinanceAnálise financeira, orçamentos, relatórios
LegalAnálise de cláusulas, contratos, compliance
DataConecta em fontes de dados (CSV, Excel) e faz análise
DesignDesign systems, componentes visuais, acessibilidade
HRRecrutamento, onboarding, políticas de RH
OpsProcessos operacionais, checklists, workflows
PMGestão de projetos, roadmaps, priorização
DevCode review, documentação técnica, debugging
Customer SupportAtendimento ao cliente, templates de resposta, FAQ

Esses são os 11 plugins oficiais da Anthropic pra Cowork. A aba Claude Code tem seu próprio catálogo (skill-creator, frontend-design, code-review, etc.) — instale pelo botão + → Plugins → Add plugin, ou simplesmente peça pro Claude instalar no chat.


Conectores (MCPs) — o crachá do funcionário

Além dos plugins, existe outro conceito importante: conectores. A Anthropic também chama de MCP (Model Context Protocol) — é o mesmo.

Analogia simples

Seu funcionário novo é inteligente, mas no primeiro dia não tem acesso a nada. Não entra no sistema, não vê a planilha, não abre o Drive. O conector é o crachá — dá acesso às ferramentas que ele precisa pra trabalhar de verdade.

Antes e depois

Claude sem conectoresClaude com conectores
DadosSó o que você cola na conversaAcessa planilhas, sites, bancos de dados em tempo real
InternetLimitadoPesquisa, lê páginas, extrai informações
CriaçãoGera texto na conversaCria arquivos no Google Drive, posts no Instagram, tasks no Notion

Exemplos práticos

💡 Instalação é simples Você não precisa configurar nada tecnicamente. Basta pedir ao Claude: "instala o conector do [nome] pra mim" e ele guia você pela configuração, pedindo as chaves de API necessárias. Uma vez instalado, o conector funciona tanto no Cowork quanto no Claude Code.
➡️ Próximo bloco: Demos ao Vivo Agora que você entendeu o que é o Cowork, plugins e conectores, vamos ver tudo isso em ação. No próximo bloco você acompanha 2 demos reais: análise de dados de uma planilha e criação de páginas com plugins de design.
Ato 1 · Bloco 4
Cowork: Demos ao Vivo.
Ver o Cowork analisando seus dados e criando páginas do zero
25 minutos

Você vai ver o Cowork em ação com 2 demos reais: analisando uma planilha de dados de ponta a ponta, e criando páginas profissionais do zero.


Demo 1 — Análise de Dados (sua planilha → dashboard)

Nesta demo, você entrega uma planilha qualquer (vendas, leads, atendimentos, métricas, logs — o que for) e o Claude lê, cruza os números, encontra padrões e gera um dashboard visual com insights — direto na conversa, em segundos.

Por que isso impressiona

O Cowork acessa arquivos reais na sua máquina. Em vez de abrir o Excel, montar tabela dinâmica e fazer gráfico na mão, você descreve o que quer entender — e o Claude faz a análise inteira e ainda explica o que os dados estão dizendo.

Passo a passo

  1. Abra o Cowork e dê acesso à pasta

    No Claude Desktop App, vá na aba Cowork e autorize a pasta onde está a sua planilha (.xlsx ou .csv).

  2. Aponte o arquivo e descreva o que quer

    Diga o nome do arquivo e o que precisa entender. Não precisa formatar nem limpar nada antes — o Claude lida com a bagunça.

  3. Receba o dashboard e os insights

    O Claude gera os gráficos, destaca tendências e anomalias e te dá recomendações. Dá pra iterar na hora: "agrupa por mês", "compara com o trimestre anterior".

Prompt — Análise de planilha

Leia a planilha dados.xlsx e faça uma análise completa. Quero entender: - Os principais números e o que mudou no período - Padrões, tendências e qualquer anomalia que chame atenção - Onde estão as maiores oportunidades e os maiores problemas Gere um dashboard visual com gráficos e um resumo com recomendações práticas.

💡 Por que isso é diferente Antes: abrir o Excel, montar tabela dinâmica, fazer gráfico por gráfico e perder 1-2 horas. Agora: um prompt, alguns segundos, dashboard pronto com os insights já interpretados.
💡 Vai muito além de planilha O mesmo vale pra CSV de logs, exportações de sistema, vários PDFs ou um monte de arquivos juntos. O Cowork lê tudo o que está na pasta autorizada e cruza as informações pra você.
⚠️ Para a demo ao vivo Deixe uma planilha de exemplo na pasta autorizada antes de começar (qualquer .xlsx/.csv com dados reais ou fictícios serve). Evite dados sensíveis de clientes durante a apresentação.

Demo 2 — Criação de Páginas com Plugins

Nesta demo, o Claude cria páginas profissionais completas usando os plugins de Marketing (copy e estratégia) e Design (visual e código). Dois exemplos: criar do zero e melhorar algo existente.

O que são os plugins de Marketing e Design?

São dois dos 11 plugins oficiais da Anthropic. Quando ativados no Cowork, funcionam como dois especialistas trabalhando juntos:

💡 Como ativar os plugins No Cowork, os plugins já vêm disponíveis. Basta mencioná-los no prompt ("use o plugin de marketing e design") que o Claude ativa automaticamente. Não precisa instalar nada.

Exemplo 1 — Criar uma página do zero

Cenário: você tem um negócio (ou cliente) e precisa de uma página de vendas. Não tem nada — só o nome e a ideia.

Prompt — Página do zero

Crie uma página para vender café premium do Caparaó, use o plugin de marketing e design.

O que acontece:

  1. O plugin de Marketing pesquisa o mercado de cafés especiais, define o posicionamento e escreve a copy (headline, benefícios, FAQ, CTA)
  2. O plugin de Design cria o layout visual completo — paleta de cores, tipografia, seções, responsivo
  3. O Claude gera imagens de exemplo em alta qualidade para ilustrar o produto
  4. Resultado: arquivo HTML pronto para abrir no navegador
💡 Dica Quanto mais contexto você der no prompt (público, tom, diferenciais), melhor o resultado. Se tiver um site de referência que gosta do visual, adicione: "use como referência visual o site [URL]".

Exemplo 2 — Melhorar um site existente

Cenário: você (ou seu cliente) já tem um site, mas está desatualizado, com design antigo e copy fraca. Quer uma versão melhor sem começar do zero.

Prompt — Melhorar site existente

Analise esse site e me ajude a criar uma versão melhor dele. Use os plugins de marketing e design para isso. Crie imagens em alta qualidade de exemplo para o que não existir. https://bellavitaclinica.com.br/

O que acontece:

  1. O Claude acessa o site e extrai tudo: conteúdo, profissionais, especialidades, contato, cores, fontes
  2. O plugin de Marketing analisa a copy atual e reescreve com framework de conversão (problema → solução → prova → CTA)
  3. O plugin de Design extrai o design system original e cria uma versão melhorada — moderna, responsiva, profissional
  4. Onde faltam imagens, o Claude gera exemplos em alta qualidade
  5. Resultado: página completa mantendo as informações reais do negócio, mas com design e copy de outro nível
💡 Próximo passo Teste com o seu próprio site (ou de um cliente). Copie o prompt acima, troque a URL e rode no Cowork. O resultado sai em minutos e você pode iterar: "mude a cor do CTA", "adicione uma seção de depoimentos", "troque o headline por algo mais direto".
💡 Adapte para o seu negócio Substitua a URL pela do seu site (ou do seu cliente). O Claude analisa qualquer site público. Quanto mais conteúdo o site original tiver, melhor o resultado — porque o Claude tem mais material para trabalhar.
💡 O Cowork cria arquivos reais Além de páginas HTML, o Cowork gera: Excel (.xlsx) com fórmulas e gráficos, Word (.docx) formatados, PowerPoint (.pptx) com slides completos e PDF prontos para enviar. Tudo salvo na pasta que você autorizou.
💡 "Mas todo site fica com a mesma vibe!" Se você não der referência, o Claude tende a gerar layout genérico. 3 jeitos de variar:
  1. Passe um site de referência: "use como referência visual o site [URL]"
  2. Especifique paleta + tipografia + estilo: "paleta neutra com 1 acento laranja, tipografia serifada, vibe editorial"
  3. Use a skill frontend-design — ela extrai o design system e aplica corretamente.
Ato 1 · Bloco 5
Claude Code.
O próximo nível — e não é bicho de 7 cabeças
20 minutos
🎉 Mudou em 2026 Claude Code não exige mais terminal. Agora roda direto na aba Claude Code do Claude Desktop App. Zero instalação extra.

O que o Code faz que o Cowork não faz

FuncionalidadeCoworkClaude Code
Chat e plugins
Skills customizadasInstalar e usarCriar, instalar e compartilhar
MCPs ilimitadosConectores oficiais✓ Qualquer MCP
Agentes autônomos
Times de I.A (squads)
Apps e dashboards
Hooks (automações)
Subagentes

Por que NÃO é bicho de 7 cabeças

Você instrui em português. Não precisa programar. As skills são texto. Se você sabe escrever um manual de procedimentos, você sabe criar uma skill.

Como acessar (recomendado)

  1. Abra o Claude Desktop App

    Aquele que você já baixou em claude.ai/download. Mac ou Windows.

  2. Clique na aba Claude Code no topo

    Está ao lado de Chat e Cowork. Pronto — você já está dentro do Claude Code.

  3. Comece a conversar

    Tudo que você vai aprender nesta imersão (skills, agentes, squads) acontece aqui dentro. Sem terminal externo.

Avançado: instalar via terminal CLI (clique para expandir)

Quem prefere o terminal CLI clássico (devs experientes, ambientes sem Desktop) pode instalar usando os comandos abaixo. Pra audiência da imersão, o caminho do Desktop acima resolve.

Qual terminal usar?

Use o terminal que já vem no seu computador — não precisa instalar nada extra:

  • Mac: Terminal (já vem instalado). Abra com Cmd+Espaço → digite "Terminal"
  • Windows: PowerShell (já vem instalado). Menu Iniciar → digite "PowerShell"

Mac / Linux

Abra o app Terminal (no Mac: aperte Cmd + Espaço, digite "Terminal" e aperte Enter).

Terminal curl -fsSL https://claude.ai/install.sh | bash

Após instalar, feche e reabra o terminal antes de continuar.

Windows

⚠️ Pré-requisito: Git for Windows O Claude Code usa o Git Bash internamente para rodar comandos. Instale o Git for Windows antes de rodar qualquer comando abaixo. Sem ele, a instalação não funciona.

Com o Git instalado, abra o PowerShell (menu Iniciar → digite "PowerShell" → Enter). Não precisa rodar como administrador — o Claude Code instala no diretório do seu usuário.

PowerShell irm https://claude.ai/install.ps1 | iex

Prefere o Prompt de Comando (CMD)? Pra abrir: aperte Windows + R, digite cmd e pressione Enter. O prompt vai mostrar C:\Users\seunome> (sem PS na frente — se aparecer PS, é PowerShell, feche e abra de novo).

CMD curl -fsSL https://claude.ai/install.cmd -o install.cmd && install.cmd && del install.cmd

Ou via WinGet (gerenciador oficial de pacotes do Windows):

WinGet winget install Anthropic.ClaudeCode
💡 PowerShell ou CMD? Como saber qual você abriu Se o prompt mostra PS C:\> você está no PowerShell. Se mostra só C:\> você está no CMD. Se ao rodar o comando você ver o erro The token '&&' is not a valid statement separator, é porque colou o comando do CMD num PowerShell — use o comando correto pro shell que abriu.
🔄 Atualização automática Instalações via PowerShell e CMD se atualizam sozinhas em background. Se instalou via WinGet, rode winget upgrade Anthropic.ClaudeCode periodicamente pra pegar as últimas versões.

Primeira execução (apenas para o caminho via terminal)

  1. Abra o terminal e digite claude

    Mac: abra o Terminal (Cmd+Espaço → digite "Terminal" → Enter). Windows: abra o PowerShell (menu Iniciar → digite "PowerShell" → Enter).

  2. Faça login

    Escolha "Use Claude.ai account" — assim ele usa o mesmo plano Pro que você já tem.

  3. Pronto

    O Claude Code está funcionando. Teste com qualquer pergunta.

Comandos essenciais

ComandoO que faz
/helpLista todos os comandos disponíveis
/costMostra quanto você já gastou na sessão
/compactCompacta o contexto — útil quando o Claude fica lento
/memoryGerencia a memória do projeto (CLAUDE.md)
/clearLimpa a conversa e recomeça do zero
/quitSai do Claude Code
Ctrl+CCancela a ação atual

Modos de permissão

Alterne entre modos com Shift+Tab dentro do Claude Code.

ModoO que fazQuando usar
defaultPergunta antes de cada açãoQuando está aprendendo ou em tarefas sensíveis
acceptEditsEdita arquivos sozinho, mas pede permissão para comandos shellProdutividade diária com segurança
planModo análise: mostra o plano e pede confirmação antes de executarCode review, decisões de arquitetura
autoUm classificador de I.A decide o que é seguro executarUso avançado (requer plano Team/Enterprise ou API)
bypassPermissionsExecuta TUDO sem pedir permissão (flag --dangerously-skip-permissions)Projetos isolados onde você confia 100% — use com cuidado
⚠️ Sobre o modo bypassPermissions Também chamado de "YOLO mode" pela comunidade. O nome oficial tem "dangerously" (perigosamente) de propósito. O Claude pode deletar arquivos, rodar comandos destrutivos — use apenas em projetos de teste isolados.
💡 Se a aba Claude Code não aparecer Confira: (1) Claude Desktop App está atualizado (claude.ai/download), (2) você está no plano Pro, (3) reiniciar o app costuma resolver. Se persistir, vá pro Troubleshooting no fim deste material.
Ato 1 · Bloco 6
Tira-dúvidas.
Tempo pra absorver, perguntar e levar pra sua rotina
15 minutos
💡 Por que esse bloco existe Foi muita coisa em pouco tempo. Antes de fechar, vale um respiro pra absorver os conceitos, tirar as dúvidas que ficaram e mapear onde a I.A entra no seu dia a dia — qual tarefa você já sai daqui querendo delegar pro Claude?

3 perguntas pra levar pra sua rotina

  1. Qual é a tarefa mais repetitiva do seu trabalho hoje?

    Aquela que você faz toda semana, sempre do mesmo jeito. É a primeira candidata a virar trabalho do Claude — e te devolver tempo.

  2. Onde você mais perde tempo no dia a dia?

    Pesquisa, documentação, formatação, análise de dados... ache o maior ralo de tempo. É ali que o Claude gera mais impacto pra você.

  3. Que processo você consegue explicar em 5 passos?

    Se você consegue descrever, o Claude consegue executar junto. Esse é o tipo de tarefa pronta pra fazer com I.A.

Como começar ainda hoje

🎯 Se ficou perdido Sem pânico. Use este material como mapa — todos os blocos ficam aqui pra você revisitar quando quiser. Não precisa ter dominado tudo agora; o importante é sair daqui curioso e usar a I.A no próximo problema que aparecer.
Ato 2 · Bloco 1
Design com I.A.
Criar interfaces com I.A. e aplicar num app real — do Claude Design ao Claude Code
10 minutos

10 de Julho 2026 · 9h às 11h · Administrado por Willian e Lucas

Hoje o assunto é design: criar interfaces com I.A., entender o que é um design system, e aplicar tudo num app real — do Claude Design ao Claude Code.

O que você vai levar desse módulo

Conceito

O que é um Design System

Por que sem ele a I.A. gera coisa genérica, e como um "DNA visual" muda o resultado.

Ferramentas

3 formas de desenhar com I.A.

Stitch e Google AI Studio (gratuitas, do Google) e Claude Design — quando cada uma faz sentido.

Fluxo

Design → Code, na prática

Como o Claude Design e o Claude Code conversam pelo botão Share — sem depender de comando decorado.

Prática

Criar e redesenhar um todolist

Cria uma tela no Claude Design, manda pro Code virar app, cria um design system real (Stripe, Linear, Notion...) e aplica.

Roteiro do dia

BlocoO que rola
02Stitch e Google AI Studio — as opções gratuitas
03Claude Design — criar o todolist juntos e transformar em app
04Design System — criar o "DNA visual" juntos, a partir de uma marca famosa
05Aplicar o design system no app — o antes e depois
06Recap e próximos passos
⚠️ Pré-requisitos Pra acompanhar a parte prática você precisa do setup do Ato 1 funcionando: conta Claude Pro logada e o Claude Code rodando (aba Code do Claude Desktop ou terminal). Se ainda não tem, resolva já — o Bloco 5 do Ato 1 tem o passo a passo. Opcional: se você trouxe um app de lista de tarefas que já criou com o Claude Code (arquivo index.html), a gente vai usar ele numa das rotas do Bloco 5. Quem não tem, cria um novo ao vivo no Bloco 3.
🕐 Não veio no Ato 1? Sem problema. A parte prática já começa com todo mundo criando um todolist novo, do zero, pelo Claude Design (Bloco 3) — ninguém depende de app de aula passada pra acompanhar. Quem trouxe um antigo só ganha uma opção a mais no Bloco 5.
Ato 2 · Bloco 2
Stitch e Google AI Studio.
Duas opções gratuitas do Google — descrever o que quer, deixar a I.A. desenhar
20 minutos

Duas opções gratuitas do Google, pra quem ainda não tem acesso ao Claude — mesma lógica: descrever o que quer, deixar a I.A. desenhar.

Stitch (stitch.withgoogle.com)

Ferramenta de design de UI do Google Labs. Você descreve a tela (ou sobe um print de referência) e ele gera o design — mobile ou web. Dá pra refinar por conversa, anotar direto na tela, e exportar pro Figma ou como código.

Grátis comConta Google, sem cartão de crédito
LimiteCréditos diários (renovam a cada dia)
Melhor praIdeiar telas e explorar variações rápido

Os 4 modos do Stitch

Quando você abre o Stitch, no topo tem um seletor de modo. São 4, e cada um roda um modelo diferente do Gemini pra um propósito específico:

ModoModeloQuando usar
3 FlashGemini 3.0 FlashModo padrão e rápido. Uso geral — descrever uma tela e ver o resultado sair rápido.
Thinking with 3.1 ProGemini 3.1 ProPrioriza qualidade e raciocínio máximos em vez de velocidade. Bom pra polir a versão final ou destravar telas complexas.
RedesignNano Banana ProRefazer visual a partir de uma imagem (print de app, sketch, tela concorrente). É o modo mais próximo do que vamos fazer hoje.
IdeateModo de brainstormVocê descreve um problema (não uma tela) e ele traz várias direções de solução. Bom no início, quando ainda não sabe que UI quer.
💡 Fluxo recomendado + limite de créditos Um caminho que funciona bem: começar em Ideate pra explorar, ir pra 3 Flash pra construir, e finalizar em Thinking pra polir. Redesign é um fluxo separado, só quando já tem algo visual. Sobre créditos: o plano gratuito dá 400 créditos de geração + 15 de Redesign por dia, resetando à meia-noite UTC (21h aqui).

Exportando o resultado

Um ponto forte do Stitch: ele não te prende dentro dele. Quando o design fica pronto, tem um botão Exportar que oferece 9 destinos, agrupáveis assim:

GrupoDestinosPra que serve
Virar app rodandoAI Studio, Netlify, Lovable, BoltDo design direto pra um app que já roda no navegador — sem passar por código à mão
Levar pro fluxo de designFigmaContinuar refinando no design tool tradicional
Pegar o código.zip, Código pra área de transferênciaBaixar o HTML/CSS/JS ou colar direto num projeto seu (ex: no Claude Code)
Conectar a agentesMCPPra ferramentas que consomem o design como contexto — útil pra pipelines de I.A
DocumentarResumo do projetoUm sumário textual do que foi criado
🔗 Gancho legal com o próximo tópico Repare que AI Studio é uma das opções de exportação — ou seja, dá pra desenhar no Stitch e mandar direto pro AI Studio virar app. É por isso que vamos falar dele a seguir.

Google AI Studio (aistudio.google.com)

Plataforma gratuita do Google pra construir com os modelos Gemini direto no navegador. O modo "Build" deixa descrever um app em linguagem natural e ele gera o projeto completo — não só a tela, a lógica também.

Grátis comConta Google, sem cartão de crédito
Melhor praQuem quer ir do design direto pra um app funcionando, num só lugar
💡 Repare no resultado Stitch é mais focado em desenhar a tela. Google AI Studio já entrega um app rodando. Mas nenhum dos dois sabe nada sobre a cara da nossa empresa — o resultado é bonito, só que genérico. É exatamente esse problema que o design system resolve — a gente chega nele no Bloco 4, logo depois de criar nosso próprio app.
Ato 2 · Bloco 3
Claude Design: criar o todolist.
Conhecer a ferramenta e já sair com um app rodando — todo mundo junto
30 minutos

O que é o Claude Design

Chat de um lado, canvas do outro — você descreve, ele desenha. Acesso por claude.ai/design no navegador, ou pela aba Design no Claude Desktop. A primeira tela é a "What will you design today?": campo pra descrever o que quer, um + pra anexar arquivos, e dois seletores importantes no topo — Design system e Template.

Como o design vira app: a ponte com o Claude Code

O Claude Code trabalha em cima de uma pasta no computador — é lá que os arquivos do projeto (como o index.html) vivem. O Claude Design é um app à parte, na nuvem: ele não enxerga essa pasta sozinho. A ligação entre os dois é o botão Share, que existe no topo de qualquer coisa criada no Claude Design. Ele gera um bloco de texto já pronto pra colar no Claude Code — algo tipo "Use o MCP claude_design (auth via /design-login) pra importar este projeto: [link]. Implemente: os designs deste projeto." É ridiculamente simples — e é o que vamos fazer agora.

🖐️ Mão na massa — todos juntos

Objetivo: todo mundo passa pelo fluxo Design → Code pelo menos uma vez, e sai deste bloco com um todolist funcionando no navegador.

  1. Abra o Claude Design

    Em claude.ai/design ou pela aba Design do Claude Desktop.

  2. Peça um todolist

    Cole o prompt abaixo na tela inicial "What will you design today?". O Claude gera a tela no canvas.

    Prompt — Todolist no Claude Design

    Cria uma tela de app de lista de tarefas completo: - Campo pra adicionar tarefa e botão de adicionar - Lista das tarefas com opção de marcar como concluída e apagar - Categorias/tags nas tarefas (ex: trabalho, pessoal, estudos) - Filtros no topo: Hoje, Semana, Concluídas - Prioridade (alta, média, baixa) com cores diferentes - Data e prazo em cada tarefa - Uma visão em kanban (colunas: A fazer / Em progresso / Concluído), alternável com a visão de lista Visual limpo, moderno, pronto pra virar um app web funcional.

  3. Clique em Share no topo e copie o texto inteiro

    Aquele bloco que começa com "Use o MCP claude_design..." — não é só o link, é uma instrução completa pro Code.

  4. Abra o Claude Code na pasta que você quer usar

    Uma pasta nova ou uma pasta de trabalho — pelo terminal ou pela aba Code do Claude Desktop.

  5. Rode /design-login

    Isso autoriza o Claude Code a ler seus projetos do claude.ai/design. Se aparecer "Design-system access authorized", tá tudo certo. Só precisa fazer uma vez por sessão.

  6. Cole o texto do Share + peça a implementação

    Cole primeiro o texto do Share, em seguida o prompt abaixo. O Code cria o index.html do todolist na pasta.

    Prompt — depois do texto do Share

    Implementa esse design como um app web funcional num único arquivo index.html, com HTML/CSS/JS. As tarefas devem salvar no navegador (localStorage). Tudo precisa funcionar de verdade: adicionar, concluir, apagar, categorias, filtros, prioridades, datas e a troca entre visão de lista e kanban.

  7. Rode o arquivo no navegador

    Abra o index.html e teste: adicionar, concluir, apagar, os filtros e a troca lista/kanban. Pronto: você desenhou com I.A. e transformou num app completo.

🛟 Se travar
  1. /design-login não é reconhecido — seu Claude Code tá desatualizado. No Desktop, atualize o app; no terminal, rode claude update e abra uma sessão nova.
  2. Claude Design não abre / não aparece a aba — acesse direto por claude.ai/design no navegador. Precisa de plano Pro; se ainda assim não aparecer, é rollout em onda — acompanhe pela tela de um colega e refaça em casa.
  3. Colou o Share e o Code não puxou o design — confira se rodou /design-login nesta sessão e se colou o texto inteiro do Share (é uma instrução completa, não só o link).
  4. Bateu o limite do plano no meio — sente com o colega do lado e façam em dupla; o material fica aqui pra refazer no seu tempo depois.

Pra brincar depois: refinar o design no próprio canvas

Hoje quem aplica o visual é o Claude Code, então não vamos usar isso agora — mas se quiser refinar um design ali mesmo no canvas do Claude Design, tem quatro caminhos:

MétodoQuando usar
Chat (conversa)Mudanças amplas — "deixe o tema mais escuro"
Comentário inlineComentar num elemento específico ("esse botão precisa se destacar mais")
Edição direta de textoClicar num texto do canvas e reescrever ali mesmo, sem passar pelo chat
Knobs / sliders sob demandaPeça pro Claude criar controles pra ajustar espaçamento, cor ou layout em tempo real. Ele monta os sliders na hora, específicos pra aquele design.
⚠️ Ferramenta em beta Se um comentário inline não for capturado, cole o mesmo texto direto no chat — é um workaround conhecido para uma instabilidade intermitente.
💡 Repare no resultado O app funciona, mas o visual é... genérico. Igual vimos no Stitch e no AI Studio. É exatamente isso que o próximo bloco resolve: o design system.
Ato 2 · Bloco 4
Design System: criar juntos.
O "DNA visual" da marca — conceito e criação ao vivo, cada um com a marca que curte
25 minutos

O pulo do gato: por que o "Design system" importa

Se você abrir o Claude Design sem nada e pedir um redesign, ele até gera algo bonito — mas genérico, igual vimos no Stitch, no Google AI Studio e no todolist que acabamos de criar. Com um design system anexado, cada projeto novo já nasce com cores, tipografia e componentes no padrão. É o "DNA visual" da marca: paleta, fonte, espaçamento, botões, cards — tudo documentado de um jeito que a I.A. consegue replicar sem reinventar a cada tela.

Sem design systemCom design system
Layout genérico, cara de "feito por I.A."Cor, fonte e componente no padrão
Cada projeto novo começa do zeroTodo projeto novo já herda o mesmo padrão
Precisa redescrever o estilo toda vezVocê só descreve o que quer construir

A gente ainda não tem nenhum criado — então vamos criar um agora, todos juntos, usando um .md baixado do getdesign.md (Stripe, Linear, Notion...). Cada um escolhe a marca que curte.

🖐️ Mão na massa — passo a passo (tela por tela)

  1. Baixe o .md da marca escolhida

    Em getdesign.md, escolha uma marca (Linear, Stripe, Notion...) e baixe o arquivo .md pro computador.

  2. Na tela inicial do Claude Design, clique no campo "Design system" (tá em "None")

    Vai aparecer um mini-popup: "Set up a design system so every project starts from your colors, type, and components" com o botão Set up your design system. Clique nele.

  3. Escolha "Create here"

    Vai abrir a janela "Add a design system" com duas opções:

    OpçãoQuando usar
    Create hereÉ o que vamos usar hoje. Aceita upload de arquivos (o .md do getdesign.md, slides, logos, .fig do Figma) ou link de GitHub.
    Create using Claude Code (badge BEST FIDELITY)Pra quem já tem um projeto real com componentes em código. Em vez de continuar no navegador, o Claude gera um comando pra você colar no Claude Code — ele lê o repositório inteiro localmente e extrai os valores exatos direto do código (hex, spacing, tipografia). Por isso é "best fidelity". Não é o nosso caso hoje — ignore.

    Detalhe: o "Create using Claude Code" precisa de uma pasta com um projeto real (React, Vue, HTML/CSS estruturado). Uma pasta com só o .md do getdesign.md dentro não é suficiente pra esse caminho — o certo aí é o Create here.

  4. Preencha a tela "Set up your design system"

    • Company name and blurb: nome curto pro design system (ex: "Estilo Linear — teste").
    • Add fonts, logos and assets: arraste aqui o .md baixado. É esse campo que aceita o arquivo do getdesign.md.
    • Os outros campos (GitHub, .fig, computador) ficam vazios — são pra outros cenários.
  5. Clique em "Continue to generation"

    Canto superior direito. O Claude lê o .md e gera paleta, tipografia, componentes e padrões de layout automaticamente.

  6. Teste com um card ou botão simples

    Peça algo curto — "crie um card de produto" — pra ver se saiu com a cara da marca. Se sim, o design system tá pronto.

  7. Clique em Share no design system e copie o texto inteiro

    Igual fizemos com o todolist. Guarde esse texto — é ele que vamos colar no Claude Code no próximo bloco. Se você tá na mesma sessão do Code desde o Bloco 3, nem precisa rodar /design-login de novo.

💡 Sobre "Publish" (só na Team/Enterprise) Nesses planos, o admin pode marcar um design system como Published — aí ele vira o padrão automático da organização inteira. Numa conta normal, cada projeto anexa manualmente pelo campo "Design system" no topo — mais simples pro nosso caso de hoje.
Ato 2 · Bloco 5
Aplicar o design system.
O momento "uau": o app ganha a cara da marca sem mexer numa linha de lógica
25 minutos

Você tem um todolist rodando (Bloco 3) e um design system criado, com o texto do Share copiado (Bloco 4). Agora é juntar os dois: o Claude Code puxa o design system pelo MCP e reescreve o HTML/CSS do app inteiro no padrão da marca — mantendo toda a lógica intacta.

Escolha sua rota

Rota 1 — Aplicar no todolist novo (o que você criou no Bloco 3) Todo mundo tem esse — e como ele já nasceu completo (categorias, filtros, prioridades, kanban), o design system tem bastante superfície pra brilhar. É só seguir a mão na massa abaixo.
Rota 2 — Aplicar num todolist que você já tinha (só quem trouxe) Legal pra ver o design system transformando algo que você já usava. Se o seu app antigo for simples, dá pra incrementar ele com categorias, filtros, prioridade e kanban antes — use o prompt de incremento (no fim deste bloco), depois siga a mão na massa.

🖐️ Mão na massa — todos juntos

  1. No Claude Code, cole o texto do Share do design system

    Aquele que você copiou no fim do Bloco 4. Se abriu uma sessão nova do Code, rode /design-login antes.

  2. Em seguida, cole o prompt de aplicação

    Prompt — depois do texto do Share do design system

    Aplica esse design system no meu app de lista de tarefas (index.html) — cores, tipografia, componentes, espaçamento. Mantém toda a lógica que já existe, só atualiza o HTML e CSS pra ficar com a cara desse design system.

  3. Recarregue o app no navegador

    Compare o antes e o depois: mesma lógica, mesmas tarefas salvas — mas agora com a cara da Stripe, do Linear ou da marca que você escolheu.

Prompt de incremento — só pra Rota 2

Se você trouxe um todolist antigo e quer deixar ele mais rico antes de aplicar o design system, use este prompt no Code antes da mão na massa acima.

Rota 2 — opcional

Incrementa o meu app de lista de tarefas com os seguintes recursos, mantendo tudo salvando no navegador: 1. Categorias/tags nas tarefas (ex: trabalho, pessoal, estudos) 2. Filtros no topo: Hoje, Semana, Concluídas 3. Prioridade (alta, média, baixa) com cores diferentes 4. Data e prazo em cada tarefa 5. Uma visão em kanban (colunas: A fazer / Em progresso / Concluído), alternável com a visão de lista Mantém o HTML/CSS/JS num único arquivo index.html.

🤖 Alternativa pro incremento — deixar o Claude escolher Se preferir não ditar tudo, use este prompt em vez do de cima: "Analisa meu todolist atual e sugere 3 a 5 recursos que deixariam ele mais completo e visualmente rico pra receber um redesign. Depois de me mostrar as sugestões, implementa todas num único index.html."

Pra conhecer: os três caminhos da ponte Design ↔ Code

Hoje usamos o botão Share porque funciona em qualquer conta, é visual e não depende de comando decorado. Mas existe um comando com nome enganoso que vale conhecer: /design-sync faz o caminho oposto — empurra componentes locais (React) do seu projeto pra dentro de um design system no Claude Design. Só faz sentido quando você já tem uma biblioteca de componentes em código e quer transformar isso num design system pra reusar.

ComandoDireçãoO que faz
/design-loginAutenticaçãoAutoriza o Claude Code a ler e escrever nos seus projetos do claude.ai/design. Precisa antes de qualquer coisa que envolva design system.
/design-syncCode → DesignEmpurra componentes locais (React) pra dentro de um design system no Claude Design. É o oposto do que fizemos hoje.
Texto do ShareDesign → CodeTraz um design ou design system do Claude Design pro Code aplicar no seu projeto. É o que usamos hoje.
Ato 2 · Bloco 6
Recap.
O que levamos de hoje e o que vem por aí
10 minutos

As 4 ideias pra levar pra casa

Design system = DNA visual da marca Claude Design pensa em visual Claude Code pensa em lógica Botão Share + /design-login = ponte Design→Code

O fluxo completo que você aprendeu hoje

  1. Desenhar: descrever a tela no Claude Design (ou Stitch/AI Studio, nas opções gratuitas)
  2. Implementar: botão Share → colar no Claude Code → app funcionando
  3. Padronizar: criar um design system a partir de um .md (getdesign.md) ou da sua marca
  4. Aplicar: Share do design system → Claude Code redesenha o app inteiro no padrão
🎯 Se ficou perdido Sem pânico. Use este material como mapa — todos os blocos ficam aqui pra revisitar quando quiser. A ordem dos blocos é exatamente o fluxo a seguir: volte, refaça no seu tempo, e traga dúvidas pro próximo encontro.
Ato 3 · Bloco 1
O Frankenstein.
Por que projetos feitos com I.A. desandam — e o que evita isso
8 minutos
A tese deste encontro

O gargalo da I.A. nunca foi escrever código. É saber o que construir e registrar por que decidimos assim.

Quem pula essa parte não constrói software — constrói um Frankenstein: um sistema costurado de pedaços que não conversam, que ninguém sabe explicar e que quebra três coisas toda vez que você muda uma.

Você já viveu isso

Você pede pra I.A. mudar uma coisinha e ela quebra três outras. Você volta na segunda-feira e ela decide diferente do que decidiu na sexta. Você passa o projeto pra outra pessoa e ela não consegue continuar. Isso não é defeito da I.A. — é ausência de planta.

No Encontro 03 saímos com um protótipo de TO-DO List validado. Ele é bonito e funciona na tela. Mas repare no que ele não tem resposta:

Onde os dados moram? O que acontece offline? Quem pode editar? O que é "pronto"? O que fica de fora?
⚠️ O ponto Cada uma dessas perguntas, sem resposta escrita, o Claude responde sozinho — e responde diferente a cada sessão. Cinco pessoas continuando esse mesmo protótipo produzem cinco sistemas diferentes.

As 5 causas do Frankenstein

Esse é o diagnóstico. Repare em uma coisa enquanto lê: nenhuma delas é um problema de programação.

CausaComo aparece na prática
1. Sem requisito escritoCada prompt inventa um requisito novo. Na terça o app tinha prioridade; na quinta virou categoria; ninguém decidiu nada — foi acontecendo.
2. Sem decisão registradaEle redecide toda sessão. Hoje salva no navegador, amanhã propõe banco de dados, depois sugere Firebase. Cada uma dessas escolhas é razoável sozinha e incompatível junta.
3. Sem regra de casaCada arquivo com um padrão diferente. Nomes em inglês num, português no outro. Ninguém consegue continuar o trabalho de ninguém.
4. Sem verificação"Parece pronto" vira o critério de qualidade. O bug não aparece pra você — aparece na frente do cliente.
5. Contexto estouradoSessão de 3 horas em que ele esquece o que foi combinado na primeira meia hora — porque a memória de trabalho dele encheu de tentativa fracassada.
💡 Por que isso te interessa mesmo sem programar Requisito, decisão, padrão, controle de qualidade e memória. Essas cinco são problemas de gestão — a mesma coisa que faz uma obra dar errado, ou um projeto de marketing virar retrabalho. É por isso que este encontro serve pra quem nunca escreveu uma linha de código.

Os 4 antídotos

O que separa "prompt que dá certo" de "projeto que se sustenta" são quatro artefatos. Três deles são texto em português. Nenhum é código.

Artefato 1
PRD
O quê vamos construir e pra quem
Artefato 2
ADR
Por que decidimos assim, e o que descartamos
Artefato 3
CLAUDE.md
Como se trabalha neste projeto
Artefato 4
Verificação
Como sabemos que ficou pronto de verdade

A analogia da obra

ArtefatoNa obraNo projeto
PRDA planta da casaQuantos cômodos, pra quem é a casa, e o que não entra nessa etapa
ADRO registro de por que a parede é de concreto e não drywallPor que os dados ficam no navegador e não na nuvem — com as opções que foram descartadas
CLAUDE.mdAs regras da obra pregadas na parede"Leia a planta antes de levantar parede." "Não contrarie decisão registrada."
VerificaçãoO fiscal que assina o laudoUm teste, um build ou um screenshot que dá passou ou não passou

✗ Sem os 4 artefatos

  • A cada sessão você re-explica o projeto do zero
  • Decisão técnica muda sem ninguém perceber
  • O escopo cresce sozinho — sempre
  • Só você consegue continuar o trabalho
  • "Pronto" é o que parece pronto na tela

✓ Com os 4 artefatos

  • Sessão nova já começa sabendo tudo
  • Ele te lembra da decisão em vez de reescrever
  • "Fora de escopo" segura o projeto no lugar
  • Qualquer pessoa (ou você em 3 meses) continua
  • "Pronto" é o critério de aceite cumprido
🎯 O contrato deste encontro Você sai daqui com 4 arquivos e 1 método. O código é a parte fácil — e é a parte que o Claude faz.
Ato 3 · Bloco 2
Claude Code na prática.
O que muda em relação ao Cowork — e o Cursor em 3 minutos
12 minutos

Cowork trabalha com arquivos. Code trabalha com um projeto.

Você já viu a tabela completa no Ato 1. Aqui interessam só as duas diferenças que mudam a aula de hoje:

Diferença 1

Ele enxerga o projeto inteiro

O Claude Code lê o repositório todo, roda comandos, usa Git, executa o que escreveu e lê o erro de volta. Ele não te entrega um arquivo — ele mexe no sistema e responde pelo resultado.

Diferença 2

Ele tem freio

Plan mode, pontos de restauração, subagentes e hooks existem por um motivo: deixar ele trabalhar sozinho sem você perder o controle. Metade da aula de hoje é sobre usar esses freios.

💡 Frase pra colar na parede Cowork é o funcionário que entrega o documento. Code é o funcionário que entra no sistema, mexe e responde pelo resultado.

Onde ele roda

Mesma engine, várias portas de entrada:

Aba Code do Claude Desktop — o caminho da aula Terminal (CLI) VS Code JetBrains Navegador (claude.ai/code) App mobile

O CLAUDE.md e as configurações valem em todas as portas. MCPs, plugins e alguns atalhos variam entre elas — e é exatamente aí que a maioria dos tutoriais confunde a cabeça de quem está começando.


Contexto é o recurso escasso

Se você levar um conceito técnico deste encontro, leve este.

O conceito

A janela de contexto é a memória de trabalho dele nesta conversa.

Cada arquivo lido, cada erro colado, cada tentativa que deu errado ocupa espaço. Quando enche, ele começa a esquecer o que você combinou no começo. Metade das boas práticas do Claude Code existe só para proteger esse espaço.

Os 5 controles que resolvem 90% dos problemas

Na aba Code do Claude Desktop:

ControleOnde ficaQuando usar
Seletor de modoAo lado do botão de enviar
(ou Cmd/Ctrl + Shift + M)
Alterna entre Manual, Accept edits e Plan. Use Plan antes de qualquer tarefa que mexe em mais de um arquivo.
/clearDigitado no chatZera o contexto. Entre tarefas que não têm nada a ver uma com a outra.
EscTeclaInterrompe o Claude no meio. Quando você percebeu que ele foi pro lado errado.
/rewindDigitado no chatVolta código e/ou conversa a um ponto anterior. Depois de meia hora num beco sem saída.
/contextDigitado no chatMostra o que está carregado na memória. Serve pra conferir se o CLAUDE.md foi lido.
⚠️ Atenção: tutorial de YouTube vai te confundir aqui No terminal (CLI) os atalhos são outros: Shift+Tab alterna o modo, Esc Esc abre o rewind e Ctrl+G abre o plano no editor. Nada disso funciona na aba Code do Desktop. Se você viu esses atalhos em algum tutorial e eles não funcionaram, o motivo é esse — não é você.

“E o Cursor?”

O Cursor é o principal concorrente e é uma ferramenta excelente. Não vamos abrir hoje — a filosofia dele é diferente da desta aula — mas você precisa saber que ele existe e quando faz sentido.

Claude CodeCursor
FilosofiaAgent-first: você descreve a tarefa, ele executa de ponta a pontaIDE-first: você dirige, a I.A. completa e sugere ao seu lado
É um...Agente que trabalha dentro do projetoEditor de código (VS Code turbinado)
Ponto forteRefatoração em muitos arquivos, testes, Git, tarefas longas rodando sozinhoAutocompletar linha a linha (Tab), diffs visuais, edição interativa
ModeloClaudeMulti-modelo (Claude, GPT, Gemini)
CurvaConversa em português, sem editorPrecisa se sentir confortável num editor de código
Entrada~US$20/mês (o plano Pro que você já tem)~US$20/mês
1
Não são excludentes
Muito dev sério usa os dois: Cursor pra editar na mão, Claude Code pro trabalho pesado autônomo.
2
A extensão oficial roda no Cursor
Se um dia você migrar de editor, leva o Claude Code junto. Não é uma escolha definitiva.
3
O método é o que importa
PRD, ADR e regras de projeto funcionam igual no Cursor, no Copilot ou no que vier depois.
💡 Detalhe legal Quando você roda /init num projeto que já tem regras de Cursor (.cursorrules ou .cursor/rules/), o Claude lê e aproveita essas regras ao gerar o CLAUDE.md. Você não recomeça do zero.
Ato 3 · Bloco 3
PRD.
O combinado do produto — o quê, pra quem, e o que é estar pronto
12 minutos

PRD é a sigla de Product Requirements Document — Documento de Requisitos do Produto. Em português claro: o contrato entre a ideia e a execução.

Ele responde três perguntas que, sem resposta escrita, o Claude responde por você — e diferente a cada sessão: o quê vamos construir, pra quem, e o que significa estar pronto.


Anatomia de um PRD

1
ProblemaQue dor isso resolve, e de quem é essa dor. Se você não consegue escrever essa seção, provavelmente não deveria construir ainda.
2
Usuário-alvoQuem usa, em que momento do dia, com qual nível de paciência. "Todo mundo" não é usuário-alvo.
3
EscopoO que ENTRA nesta versão. Lista curta, verbos concretos.
4
Fora de escopoO que NÃO entra. É a seção mais importante do documento — e a que quase todo mundo esquece.
5
Critérios de aceiteComo sabemos que está pronto, em frases que dá pra verificar sem discussão.
6
MétricasO que melhora no mundo real se isso der certo. Em projeto pequeno, uma linha basta — mas não pule.

Por que "Fora de escopo" salva o projeto

Todo projeto feito com I.A. cresce sozinho. Você pede uma lista de tarefas e três prompts depois tem notificação, etiqueta, tema escuro e exportação em PDF — nenhum deles pedido, todos plausíveis.

A seção "Fora de escopo" é o único freio que funciona, porque ela dá ao Claude — e a você — uma razão escrita pra dizer não.

✗ Escopo sem freio

  • "Um app de tarefas"
  • Cada prompt adiciona uma ideia nova
  • Nada nunca fica pronto, porque "pronto" se move
  • Na semana 3 ninguém lembra o que era o produto

✓ Escopo com freio

  • Entra: criar, concluir e excluir tarefa
  • Fora: login, múltiplos usuários, notificação, exportação, tema escuro
  • "Pronto" é uma lista fechada de critérios
  • O que ficou de fora virou a versão 2 — não sumiu

Critério de aceite: bom vs. ruim

Um critério de aceite serve pra uma coisa só: encerrar a discussão sobre se está pronto. Se duas pessoas podem ler e discordar, ele está ruim.

✗ Ruim (não dá pra verificar)✓ Bom (dá pra verificar)
"A lista tem que funcionar bem""Ao marcar uma tarefa como concluída, ela sai da lista principal e aparece em 'Concluídas' sem recarregar a página"
"Tem que ser rápido""A lista carrega em menos de 1 segundo com 200 tarefas"
"O usuário não pode perder dados""Ao fechar e reabrir o navegador, todas as tarefas criadas continuam lá, com o mesmo status"
"Tem que ser bonito no celular""Em tela de 375px de largura, nenhum texto é cortado e todos os botões têm no mínimo 44px de altura"
💡 O teste dos 3 segundos Leia o critério e pergunte: "eu conseguiria provar que isso passou ou falhou em 3 segundos, olhando a tela ou rodando um comando?" Se a resposta for não, reescreva.

O prompt que gera o PRD

Você não escreve o PRD sozinho — você deixa o Claude te entrevistar. É a diferença entre um documento genérico e um documento que pega os buracos que você não tinha visto.

Prompt 1 · use em modo Plan
Leia o protótipo do TO-DO List nesta pasta e me diga, em lista curta,
o que o usuário consegue fazer hoje.

Depois me entreviste com a ferramenta AskUserQuestion para escrever o
PRD deste produto, seguindo exatamente estas 6 seções: problema,
usuário-alvo, escopo, fora de escopo, critérios de aceite e métricas.

Regras da entrevista:
- Não pergunte o óbvio. Vá nas decisões difíceis que eu ainda não pensei.
- No máximo 4 rodadas (cada rodada pode ter mais de uma pergunta).
- Se eu não souber responder, proponha um default e marque como premissa.

Escreva cada critério de aceite assim: "quando [ação], então [resultado
observável]" — verificável em 3 segundos.

No fim, me proponha o PRD completo. Não grave arquivo ainda.
⚠️ Em modo Plan o arquivo NÃO é criado Isso confunde todo mundo na primeira vez. Em Plan, o Claude lê, pensa e propõe — mas não grava nada. Ele vai te apresentar o PRD inteiro e esperar sua aprovação. Só depois de você aprovar o arquivo existe. É o freio funcionando, não um erro.

Modelo em branco

docs/PRD.md # PRD — [nome do produto] ## 1. Problema [Que dor isso resolve? De quem é essa dor? O que as pessoas fazem hoje na falta disso?] ## 2. Usuário-alvo [Quem usa, em que momento, com que frequência] ## 3. Escopo desta versão - [ ] [Ação concreta que o usuário consegue fazer] - [ ] [Outra ação concreta] ## 4. Fora de escopo Nesta versão NÃO entram, e isso é uma decisão consciente: - [Item] — motivo - [Item] — motivo ## 5. Critérios de aceite 1. Quando [ação], então [resultado observável]. 2. Quando [ação], então [resultado observável]. ## 6. Métricas [O que melhora no mundo real se isso der certo]
💡 Existe um atalho pronto O plugin oficial product-management traz o comando /write-spec, que gera um PRD estruturado a partir de uma frase. Instale pelo botão + ao lado do prompt → PluginsAdd plugin. Lembre do Ato 1: plugin instalado no Cowork não aparece no Code — precisa instalar nos dois.
Ato 3 · Bloco 4
ADR.
A ata da decisão técnica — para você não redecidir a mesma coisa
12 minutos

ADR é a sigla de Architecture Decision Record — Registro de Decisão de Arquitetura. Em português claro: a ata de uma decisão técnica.

Um arquivo por decisão, numerado, guardado junto com o código. Registra o que estava em jogo, quais eram as opções, o que escolhemos e o que essa escolha vai custar.

O que ninguém te conta sobre ADR

Um ADR não serve pra você estar certo. Serve pra você não redecidir.

A decisão errada, documentada, custa menos que a decisão certa que ninguém lembra por que foi tomada. O inimigo não é o erro — é a amnésia.


Anatomia de um ADR

1
CabeçalhoNúmero, título, status, data, autor, projeto e tags. É o que permite achar a decisão seis meses depois sem abrir arquivo por arquivo. Numeração sequencial, nunca reaproveitada. Status: Proposto → Aceito → Substituído pelo ADR-00X.
2
ContextoQual é a situação, o que está em jogo e por que isso precisa ser decidido agora. É a parte que o "você do futuro" mais vai agradecer.
3
Opções consideradasNo mínimo três, cada uma com prós, contras e custo/risco. É isso que impede a discussão de recomeçar do zero — inclusive as opções que você descartou em dois minutos.
4
DecisãoO que fica valendo, os requisitos que vêm junto (o que passa a ser obrigatório por causa dessa escolha) e o trade-off aceito — dito com todas as letras.
5
ConsequênciasEm três partes: o que esperamos de bom, o que aceitamos de ruim, e o que precisamos monitorar pra saber se a decisão está envelhecendo bem.
6
RevisãoQuando revisitar, e quais gatilhos reabrem a decisão. Sem isso, um ADR vira lei eterna — que é justamente o que ele não deveria ser.
7
LinksO PRD, os ADRs relacionados e de onde veio a decisão. As decisões conversam entre si; um ADR solto perde metade do valor.
💡 Seção curta é diferente de seção ausente Num projeto pequeno, "o que monitorar" pode ser uma linha só e "links" pode ser só o PRD. Tudo bem. O que não vale é sumir com a seção — é exatamente a que você pulou que vai fazer falta na hora de revisitar.

Quando escrever um ADR?

Existe uma regra de bolso única, e ela é suficiente:

A regra

Se reverter essa decisão daqui a um mês vai doer, ela merece um ADR.

Dói — merece ADR

  • Onde os dados são guardados
  • Qual framework ou linguagem
  • Como o usuário se autentica
  • Se o sistema é online-first ou offline-first
  • Se vamos depender de um serviço pago

Não dói — não precisa

  • Nome de uma variável
  • Cor do botão
  • Ordem das colunas na tela
  • Texto de uma mensagem de erro
  • Se o espaçamento é 12px ou 16px
💡 Quantos ADRs um projeto pequeno precisa? Entre 3 e 5. Se você está escrevendo o décimo segundo ADR de um TO-DO List, você está documentando preferência, não decisão. Preferência mora no CLAUDE.md.

E se eu mudar de ideia?

Essa é a pergunta que sempre aparece — e a resposta é o que fecha o conceito.

Estado 1
Proposto
A decisão está na mesa, ainda não valendo
Estado 2
Aceito
Valendo. O Claude passa a respeitar
Estado 3
Substituído
Um ADR novo assume, e este vira histórico
🎯 A frase que fecha o conceito ADR não é algema. Você escreve um ADR novo que substitui o anterior, com o contexto novo e o motivo. A decisão pode mudar. O que não pode é ela mudar sem ninguém saber.

Os prompts que geram os ADRs

Dois movimentos: o primeiro é interativo (a decisão é sua), o segundo é em lote (as menores).

Prompt 2 · o ADR principal, decidindo junto
Com base no docs/PRD.md, a decisão técnica mais cara de reverter aqui é
onde os dados das tarefas vão morar.

Escreva o ADR-001 em docs/adr/ seguindo exatamente estas 7 seções:

1. Cabeçalho — número, título, status, data, autor, projeto e tags
2. Contexto — a situação e por que isso precisa ser decidido agora
3. Opções consideradas — no mínimo 3, cada uma com prós, contras e
   custo/risco
4. Decisão — o que fica valendo, os requisitos que passam a ser
   obrigatórios por causa dela, e o trade-off que estamos aceitando
5. Consequências — positivas esperadas, negativas e riscos aceitos,
   e o que precisamos monitorar
6. Revisão — quando revisitar e quais gatilhos reabrem a decisão
7. Links — o PRD, ADRs relacionados e de onde veio a decisão

Me apresente as opções e me pergunte qual eu quero ANTES de preencher
a Decisão e marcar como Aceito.
Prompt 3 · os ADRs restantes, em lote
Agora escreva mais dois ADRs em docs/adr/, com as mesmas 7 seções,
decidindo pela opção mais simples em cada um e registrando as
alternativas que descartamos:
- as tecnologias que vamos usar e por quê
- a estrutura de pastas e a separação entre dados, regras de negócio
  e interface

Exemplo real — como fica o ADR-001

docs/adr/ADR-001-onde-os-dados-moram.md --- tipo: decisão status: aceito data: 2026-08-07 autor: Willian projeto-relacionado: TO-DO List — v1 tags: [adr, decisão, dados, armazenamento] --- # ADR-001: Onde os dados das tarefas moram ## Contexto O TO-DO List precisa lembrar das tarefas entre uma sessão e outra. O produto é de uso individual (PRD, seção 2) e não tem login nesta versão (PRD, seção 4 — fora de escopo). Não temos servidor nem orçamento de infraestrutura para a v1. Isso precisa ser fechado antes de escrever código porque a escolha define como toda a tela de tarefas lê e grava. Mudar depois não é ajuste, é reescrita. ## Opções consideradas ### Opção 1 — Armazenamento local do navegador - **Prós:** zero infraestrutura e zero custo; funciona offline; nenhum dado sai da máquina do usuário - **Contras:** some se o usuário limpar o navegador; não sincroniza entre dispositivos - **Custo/risco:** R$ 0. O risco de perda de dados é real, mas aceitável numa v1 de uso pessoal ### Opção 2 — Arquivo local no computador - **Prós:** sobrevive à limpeza do navegador; fácil de fazer backup - **Contras:** exige aplicativo instalado; não roda numa aba - **Custo/risco:** R$ 0 de infraestrutura, mas semanas a mais de trabalho e um instalador para manter ### Opção 3 — Banco de dados na nuvem - **Prós:** sincroniza entre dispositivos; abre caminho para múltiplos usuários depois - **Contras:** exige conta, servidor e mensalidade; coloca dado pessoal sob nossa guarda; não cabe no escopo da v1 - **Custo/risco:** mensalidade desde o dia 1 e obrigações de LGPD que a v1 não tem estrutura para cumprir ## Decisão Guardamos as tarefas no **armazenamento local do navegador**. Requisitos que vêm junto: - Todo acesso ao armazenamento passa por um único arquivo do projeto — o resto do código nunca fala direto com o navegador. Se um dia trocarmos, muda só ali. - A tela avisa o usuário, uma vez, que os dados ficam só naquele navegador. - Exportar as tarefas em um arquivo é a válvula de escape enquanto não existir sincronização. Trade-off aceito: abrimos mão de usar em dois dispositivos em troca de entregar a v1 sem conta, sem servidor e sem mensalidade. ## Consequências **Positivas esperadas:** - v1 no ar rápido, sem cadastro e sem custo de infraestrutura - Nenhum dado pessoal sob nossa guarda — LGPD deixa de ser bloqueio - Funciona offline por natureza **Negativas e riscos aceitos:** - Limpar o navegador apaga as tarefas; a exportação é o único remédio - Usar em dois dispositivos não existe nesta versão — e vai ser pedido - Migrar para a nuvem depois exige uma rotina de importação **O que precisamos monitorar:** - Quantas pessoas pedem para usar em mais de um dispositivo - Relatos de tarefas perdidas por limpeza de navegador - Se alguém está usando a exportação — se ninguém usa, ela não é válvula de escape de verdade ## Revisão - **Quando revisitar:** no primeiro pedido real de uso em mais de um dispositivo, ou ao passar de 10 usuários - **Gatilhos que reabrem esta decisão:** - Alguém querer compartilhar uma lista com outra pessoa - Perda de tarefas relatada mais de uma vez - Necessidade de login por qualquer motivo ## Links - PRD: docs/PRD.md (seções 2 e 4) - ADRs relacionados: ADR-002 (tecnologias), ADR-003 (estrutura de pastas) - Origem: decidido na sessão de fundação do projeto
💡 Existe um atalho pronto O plugin oficial engineering traz o comando /architecture, que gera um ADR completo com tabela de trade-offs a partir de uma pergunta do tipo "devemos usar X ou Y?". Instale pelo botão +PluginsAdd plugin.
Ato 3 · Bloco 5
CLAUDE.md e o mapa.
As regras da casa e onde cada coisa mora no projeto
12 minutos

O CLAUDE.md é um arquivo de texto que o Claude Code lê no início de toda sessão, automaticamente, sem você pedir. É onde moram as regras que valem sempre: como se trabalha aqui, o que ler antes de mexer, o que nunca fazer.

💡 A pergunta que define o que entra Para cada linha, pergunte: "remover isso faria o Claude cometer um erro?" Se a resposta for não, corte. Um CLAUDE.md inchado é pior que nenhum — quando tem regra demais, ele ignora justamente as que importam.

O mapa do projeto

Antes de gerar qualquer coisa, entenda onde cada arquivo mora. Sem isso, você vê arquivos aparecendo em pastas e não entende de onde vieram.

Estrutura do projetomeu-projeto/ ├── CLAUDE.md ← as regras da casa (lido toda sessão) ├── CLAUDE.local.md ← suas notas pessoais (fora do Git) ├── docs/ │ ├── PRD.md ← o quê e pra quem │ └── adr/ │ ├── ADR-001-...md ← onde os dados moram │ ├── ADR-002-...md ← tecnologias escolhidas │ └── ADR-003-...md ← estrutura e separação ├── .claude/ ← config da ferramenta (skills, permissões) ├── .gitignore └── src/ ← o código propriamente dito ├── dados/ ← gaveta 1: como guardar e ler ├── regras/ ← gaveta 2: as regras do negócio └── interface/ ← gaveta 3: o que aparece na tela
⚠️ O que é exigência e o que é convenção Só o CLAUDE.md e a pasta .claude/ são exigência do Claude Code. O docs/PRD.md e o docs/adr/ são convenção nossa — poderia ser qualquer nome. O que faz funcionar é o CLAUDE.md mandar ele ler esses arquivos antes de mexer em qualquer coisa.

As 3 gavetas

A regra de arquitetura de código mais importante — e a mais fácil de entender sem programar.

Gaveta 1
Dados
Como guardar e como buscar. Só isso.
Gaveta 2
Regras de negócio
"Tarefa vencida fica vermelha." "Não pode ter duas tarefas iguais."
Gaveta 3
Interface
O que aparece na tela e o que acontece ao clicar.
💡 Por que isso importa, em uma frase O botão "salvar" só avisa que alguém clicou. Quem sabe como guardar é outro arquivo. Se o botão souber salvar sozinho, no dia que você trocar de banco de dados vai ter que mexer em todos os botões.

As outras 4 regras

2
Um arquivo, um assunto
Se você não consegue nomear o arquivo em 3 palavras, ele faz coisas demais.
3
Uma fonte de verdade
A mesma regra não pode estar escrita em três lugares. Quando mudar, você vai esquecer um.
4
Fatias que rodam
Entregue um cômodo pronto com luz e água — não a fiação da casa inteira.
5
Tudo tem como conferir
Teste, build ou screenshot. Se não dá pra conferir, não dá pra confiar.

O que entra e o que não entra no CLAUDE.md

✓ Incluir✗ Não incluir
Comandos que o Claude não teria como adivinharQualquer coisa que ele descobre lendo o código
Regras de estilo que diferem do padrãoConvenções que a linguagem já tem
Como rodar os testes deste projetoDocumentação de API (linke em vez de colar)
Decisões de arquitetura específicas deste projetoInformação que muda toda semana
Pegadinhas e comportamentos não óbviosDescrição arquivo por arquivo do projeto
Etiqueta do repositório (nome de branch, padrão de commit)Obviedades tipo "escreva código limpo"
⚠️ Limite prático: 200 linhas Acima disso o arquivo consome contexto demais e a adesão cai. Se você tem muita coisa a dizer, o lugar certo não é o CLAUDE.md — é uma skill (carregada só quando é relevante) ou uma regra por caminho em .claude/rules/.

Gerando o seu

Prompt 4 · o esqueleto automático
/init

Ele lê o projeto inteiro e propõe um CLAUDE.md inicial com o que descobriu: comandos de build, framework de teste, padrões que encontrou. Vai aparecer bastante jargão na tela — você não precisa entender nada disso. O que importa é o refino a seguir.

Prompt 5 · o refino que transforma tudo
Ajuste o CLAUDE.md com as regras deste projeto:

- Antes de qualquer implementação, leia docs/PRD.md e docs/adr/
- Nunca contrarie uma decisão registrada em um ADR. Se achar que a decisão
  está errada, pare e me proponha um ADR novo que substitua o anterior,
  em vez de mudar o código
- Separe dados, regras de negócio e interface em arquivos diferentes
- Um arquivo, um assunto. Nomes descritivos em português
- Não repita a mesma regra em mais de um lugar
- Entregue em fatias que rodam de ponta a ponta, não em camadas
- Depois de cada mudança, rode a aplicação e me mostre a evidência de que
  funcionou

Mantenha o arquivo abaixo de 200 linhas e não escreva nada que você
conseguiria descobrir lendo o código.
🎯 Repare no que acabou de acontecer As 5 regras de arquitetura que você viu há dois blocos viraram literalmente linhas de um arquivo de texto. É isso que um dev sênior faz sem pensar — e agora está escrito, versionado e valendo pra todo mundo que tocar o projeto.

Conferindo que ele leu

Prompt 6 · a prova visual
/context

Mostra tudo que está carregado na memória da sessão. Procure o CLAUDE.md na lista de Memory files. Se ele não estiver ali, o Claude não está vendo suas regras — e nenhuma delas vale.

⚠️ O CLAUDE.md orienta, não obriga Ele é contexto forte, não é lei. Na esmagadora maioria das vezes o Claude segue; mas não existe garantia absoluta. Para travar algo de verdade — "nunca escreva nesta pasta", "sempre rode o lint antes de commitar" — existem os hooks, que rodam como comando e não dependem da decisão dele. Isso é assunto do Encontro 05.

Segurança: o que nunca pode entrar

⚠️ Regra sem exceção Nunca coloque senha, chave de acesso, token de API ou dado de cliente dentro do PRD.md, dos ADRs ou do CLAUDE.md. Esses arquivos vão pro Git — quem tem acesso ao repositório vê tudo. Se for anotação só sua (URL de teste, dado fictício, preferência pessoal), use o CLAUDE.local.md e coloque ele no .gitignore.
Ato 3 · Bloco 6
Demo 1: a fundação.
Do protótipo ao PRD, aos ADRs e ao primeiro commit — sem uma linha de código
22 minutos
🎯 O que você vai ver Vinte minutos de conversa em português produzindo uma base de projeto melhor do que três horas de prompt solto. Nenhum código é escrito neste bloco.
  1. Abra a pasta e mude o modo para Plan

    Na aba Code do Claude Desktop, abra a pasta do protótipo. Use o seletor de modo ao lado do botão de enviar e escolha Plan.

    Nesse modo ele lê, pensa e propõe — mas não escreve nada. Você está pedindo pra ele pensar antes de agir.

  2. Deixe ele te entrevistar

    Rode o Prompt 1 (bloco anterior). Responda em voz alta. Quando ele perguntar algo que você não tinha pensado — tipo "o que acontece se a mesma tarefa for editada em duas abas?" — esse é o valor do documento aparecendo.

    Ao aprovar o PRD, mude o seletor de modo para Accept edits. Você já revisou o que ele vai fazer; agora deixa ele escrever sem perguntar a cada arquivo.

  3. Transforme o PRD em decisões

    Rode o Prompt 2 (o ADR-001, decidindo junto) e depois o Prompt 3 (os outros dois, em lote). Escolha deliberadamente a opção mais simples em cada um.

    O ADR registrou as opções descartadas e o motivo. Daqui a seis meses, quando a escolha simples não der mais conta, a discussão não recomeça do zero.

  4. Escreva as regras da casa

    Rode /init e depois o Prompt 5 de refino. Confira com /context que o arquivo foi carregado.

  5. Coloque a fundação no Git

    O primeiro commit do projeto não tem uma linha de código — tem a planta, as decisões e as regras.

    Prompt 7 · a fundação vai pro histórico
    Inicialize um repositório git nesta pasta, crie um .gitignore adequado e
    faça o primeiro commit com o PRD, os ADRs e o CLAUDE.md. Mensagem:
    "fundação do projeto: PRD, ADRs e regras de trabalho".
A frase que resume o bloco

O primeiro commit deste projeto não tem uma linha de código.

Tem a planta, as decisões e as regras. Isso é o que separa um projeto de um Frankenstein — e nada do que a gente fez aqui exigiu saber programar.


Os dois momentos que confundem

Momento 1

"O arquivo não apareceu"

Você está em Plan mode. Ele não grava nada até você aprovar. Isso é o freio funcionando.

O que fazer: aprovar a proposta e mudar o modo para Accept edits.

Momento 2

"Ele me pergunta a cada arquivo"

Você está em Manual. Cada escrita e cada comando abre um card de aprovação — são uns 10 na demo inteira.

O que fazer: depois de aprovar o plano, mude para Accept edits.

Ato 3 · Bloco 7
Demo 2: construir, refatorar, debugar.
A fundação mudando o comportamento do Claude na sua frente
25 minutos

Comece com o contexto limpo

Prompt 8 · zerar antes de construir
/clear

Toda a conversa da primeira metade já cumpriu o papel dela — virou arquivo. Se você carregar isso pra frente, só ocupa memória. Contexto limpo com documento bom rende mais que contexto cheio com histórico bagunçado.

⚠️ Use /clear, não "sessão nova" Depois do git init, a pasta virou um repositório. No Desktop, cada sessão nova em um repositório ganha uma cópia isolada da pasta (worktree), em outro branch. Seus commits iriam parar num lugar que você não esperava.

Planejar antes de executar

Volte o seletor de modo para Plan.

Prompt 9 · o plano de implementação
Leia docs/PRD.md, todos os ADRs em docs/adr/ e o CLAUDE.md.

Monte um plano de implementação dividido em fatias que rodam de ponta a
ponta. Para cada fatia, diga: o que o usuário consegue fazer ao final dela,
quais arquivos são criados ou alterados, e como eu verifico que funcionou.

A fatia 1 tem que ser a menor possível: adicionar uma tarefa e ela aparecer
na lista, persistindo. Nada além disso.

Não escreva código ainda.

Quando o plano aparecer, corrija em português. Você não precisa abrir editor nenhum:

Prompt 10 · editando o plano
Inverte a ordem das fatias 2 e 3 e tira o item de exportação — isso está
fora de escopo no PRD.
💡 O momento mais barato do projeto Mudar de ideia aqui custa uma frase. Depois que virar código, custa uma tarde.

Executar com verificação

Aprove o plano e volte o modo para Accept edits.

Prompt 11 · construir e provar que funcionou
Implemente apenas a fatia 1 do plano.

Ao terminar: rode a aplicação, tire um screenshot e compare com o protótipo
original que está em docs/prototipo-original/. Me mostre a evidência. Se
houver diferença visual, liste e corrija antes de me chamar.
O princípio

Dê ao Claude um jeito de conferir o próprio trabalho.

Sem isso, o critério de qualidade dele é "parece pronto" — e quem vira o controle de qualidade é você, olhando cada mudança. Com uma verificação, o loop fecha sozinho: ele faz, roda o teste, lê o resultado e corrige até passar.


O teste do ADR

Agora o momento que prova a tese do encontro. Volte o modo para Plan antes deste prompt — assim, mesmo que ele decida obedecer, ele propõe em vez de reescrever.

Prompt 12 · peça algo que contraria o ADR-001
Muda o armazenamento pra um banco de dados na nuvem.

✗ Sem o ADR

  • Ele começa a reescrever agora
  • Metade do projeto fica numa arquitetura, metade na outra
  • Às 18h você não sabe mais o que é o quê
  • Nasce o Frankenstein

✓ Com o ADR

  • Ele para e aponta o ADR-001
  • Te lembra do que foi combinado e por quê
  • Devolve a decisão pra você, consciente
  • Se você realmente quiser mudar: ADR novo substituindo o antigo
🎯 A frase que fecha o arco A decisão pode mudar. O que não pode é ela mudar sem ninguém saber.

Pontos de restauração

Prompt 13 · voltar no tempo
/rewind

Todo prompt que você manda cria um ponto de restauração. Dá pra restaurar só o código, só a conversa ou os dois. Isso te dá permissão pra ser ousado: mande ele tentar a ideia arriscada; se quebrar, você volta.

⚠️ Três coisas que o rewind NÃO desfaz O que foi feito por comando de terminal, o que um subagente escreveu, e o que você editou fora do Claude. Rewind é o "desfazer". Git é a história. Os dois se complementam, nenhum substitui o outro.

Refatorar contra um critério

Refatorar é melhorar a estrutura sem mudar o que o programa faz. Com I.A., a diferença entre um refactor bom e um desastre é uma só: você refatora contra um critério, não contra um gosto.

✗ Refactor solto✓ Refactor ancorado
"Melhora esse código""O ADR de separação de responsabilidades define que dados, regras e interface ficam separados. Aponte onde este arquivo viola isso e proponha a reorganização antes de mexer."
"Deixa mais organizado""Aponte a regra de negócio que está escrita em mais de um lugar. Consolide numa fonte única, sem mudar o comportamento, e rode a verificação."
Prompt 14 · refactor ancorado
Aponte a regra de negócio que está escrita em mais de um lugar neste
projeto. Consolide numa fonte única, sem mudar o comportamento, e rode
a verificação.

Debug assistido

Um bom prompt de debug tem três partes. Falta uma, e você vira o depurador.

1
Sintoma concreto"Ao marcar uma tarefa concluída e recarregar a página, ela volta como pendente" — não "está bugado".
2
Onde provavelmente mora"Deve estar no salvamento, olha os arquivos de dados." Você não precisa acertar — precisa reduzir a área de busca.
3
O que é "consertado""Escreva primeiro um teste que reproduza o erro, depois corrija, e me mostre o teste passando. Ataque a causa raiz, não esconda o sintoma."
Prompt 15 · modelo de debug
[sintoma concreto]. Deve estar em [local provável]. Escreva primeiro um
teste que reproduza o erro, depois corrija, e me mostre o teste passando.
Ataque a causa raiz, não esconda o sintoma.
💡 O que é um teste, sem jargão Um teste é um programinha que confere outro programa. Ele reproduz o erro de propósito. Se depois da correção ele passar, o bug foi embora de verdade — não é você olhando a tela e achando que sumiu.
⚠️ A regra dos dois erros Se você corrigiu ele duas vezes no mesmo problema e ainda está errado, pare. O contexto está poluído de tentativas fracassadas. Dê /clear e reescreva o pedido do zero incorporando o que você aprendeu. Sessão limpa com prompt bom ganha de sessão longa com correção acumulada — sempre.

Segunda opinião

Prompt 16 · revisão por subagente
Use um subagente para revisar o diff desta implementação contra o
docs/PRD.md. Verifique se todos os critérios de aceite foram cumpridos e
se nada fora do escopo foi alterado. Reporte lacunas de correção, não
preferências de estilo. Apenas leitura e relatório — não altere arquivos.

Um subagente é uma segunda cabeça, com memória própria e limpa. Ele não viu você escrever esse código, então revisa de verdade — e não gasta a memória da sua conversa principal.


Higiene de contexto: o quadro de sobrevivência

SituaçãoO que fazer
Vou mudar completamente de assunto/clear
Ele foi pro caminho errado agoraEsc, e redireciona
A última meia hora foi um beco sem saída/rewind → restaurar código e conversa
Sessão longa, ele está começando a esquecer/compact — ou /compact foca nas mudanças da API
Preciso investigar muita coisa sem sujar a conversa"use subagentes para investigar X"
Quero saber se ele carregou minhas regras/context

O que nunca delegar sem olhar

Dado de cliente
Qualquer operação que toca informação real de gente de verdade.
Comando destrutivo
Apagar arquivo, limpar banco, forçar push. Rewind não desfaz isso.
Decisão de ADR
Se cabe num ADR, a decisão é sua — ele só organiza as opções.
Ato 3 · Bloco 8 · Novidade
Claude Security.
Você construiu rápido — agora, quem valida?
12 minutos Beta
O problema que ninguém fala

A I.A. escreve código rápido. Rápido também é errar rápido.

Você acabou de construir um sistema em duas horas. Ele funciona na tela. Mas ninguém olhou se ele tem uma falha de segurança — e "funciona" e "é seguro" são duas coisas completamente diferentes.

O Claude Security é um plugin oficial da Anthropic, em beta, que roda uma varredura de vulnerabilidades com vários agentes dentro de uma sessão do Claude Code. Um time de agentes mapeia a arquitetura do seu projeto, monta um modelo de ameaça, caça vulnerabilidades e revisa cada achado de forma independente antes de escrever o relatório.

💡 Roda tudo na sua máquina A varredura acontece localmente, na sua sessão. Seu código não é enviado para lugar nenhum. O que ele consome é o seu limite de uso do plano — uma varredura completa gasta bastante token.

Pré-requisitos


Instalação em 3 comandos

  1. Instale a partir do marketplace oficial

    Digite direto no chat de uma sessão do Claude Code:

    No chat do Claude Code /plugin install claude-security@claude-plugins-official
  2. Se ele disser que não achou o marketplace

    Adicione o marketplace oficial da Anthropic e tente instalar de novo:

    Só se o passo 1 falhar /plugin marketplace add anthropics/claude-plugins-official
  3. Ative na sessão atual

    Aplica as mudanças sem precisar reiniciar nada:

    Ativar /reload-plugins

Os 3 trabalhos que ele faz

O plugin adiciona um comando só, /claude-security, que abre um menu com três opções:

Opção 1

Scan codebase

Varre o repositório inteiro — ou uma área focada, tipo só a camada de dados. Ele lê o projeto primeiro e te mostra as opções com contagem de arquivos e custo relativo antes de começar.

Se você não souber escolher, responda "não sei" e ele decide pelo tamanho do repositório.

Opção 2

Scan changes

Varre só o que você mudou: o diff da sua branch, o diff de um pull request, ou um commit específico. Perfeito para checar antes de mergear.

Só código commitado é varrido — commite ou guarde as alterações em andamento antes.

Opção 3

Suggest patches

Transforma os achados que você escolher em arquivos de correção prontos para revisar. Cada correção é escrita numa cópia isolada do projeto — seus arquivos não são tocados.

💡 Você não precisa começar pelo menu Dá pra pedir direto, como argumento (/claude-security scan my branch) ou em linguagem natural: "varre o commit abc1234" ou "corrige o achado F3". O plugin funciona melhor no modo auto — ele mesmo te lembra disso quando um trabalho começa.

Por que o relatório é curto (e por que isso é bom)

A maior praga de ferramenta de segurança é o falso positivo: cem alertas, dois reais, e você para de olhar. O Claude Security ataca isso com verificação adversarial — um achado só entra no relatório depois que agentes revisores independentes analisam ele, cada um olhando por uma dimensão diferente:

Revisor 1
Alcance
Essa falha é realmente alcançável a partir do mundo externo?
+
Revisor 2
Impacto
Se for explorada, qual é o estrago concreto?
+
Revisor 3
Defesas
Já existe alguma proteção no caminho que neutraliza isso?

Achado que não convence a maioria dos revisores não aparece no relatório. E a confiança reportada reflete isso: aprovação unânime vale confiança alta; aprovação apertada fica em média.

As famílias de problema que ele persegue

FamíliaExemplo do mundo real
Injeção e entrada CríticoUm campo de texto onde o usuário digita um comando em vez de um nome — e o sistema executa
Autenticação e acesso CríticoUma tela que só esconde o botão em vez de checar de verdade se a pessoa pode fazer aquilo
Criptografia e segredos AltoChave de API escrita direto no código e enviada pro repositório
Operações inseguras de memória DependeSó se aplica a certas linguagens — é dispensado em projetos 100% Python ou TypeScript

O que sai da varredura

Tudo cai numa pasta com data e hora, dentro do próprio projeto:

Resultado da varreduraCLAUDE-SECURITY-<data-hora>/ ├── CLAUDE-SECURITY-RESULTS.md ← o relatório pra ler ├── CLAUDE-SECURITY-RESULTS.jsonl ← o mesmo, pra máquina ler ├── CLAUDE-SECURITY-REVISION-....json ← qual commit foi varrido ├── .gitignore ← já vem, pra não vazar no commit └── patches/ ├── F1.patch ← a correção do achado 1 └── F3.patch

Cada achado no relatório vem com ID (F1, F2...), impacto, cenário de exploração, severidade, confiança e recomendação. O arquivo de revisão amarra o relatório ao commit exato que foi analisado — então um relatório nunca fica órfão do código que ele descreve.

💡 A pasta não suja o seu commit Ela vem com o próprio .gitignore dentro. Um git add distraído não arrasta o relatório pro repositório. Se você quiser guardar o relatório no histórico para auditoria, é só apagar esse .gitignore e commitar a pasta normalmente.

As correções são sempre sua decisão

Antes de te entregar uma correção, ela é revisada por um agente diferente do que escreveu — que roda os testes do projeto contra a mudança (quando existem testes) e lê o diff por conta própria procurando efeito colateral. Uma correção só é escrita quando essa revisão consegue garantir três coisas: resolve aquele achado, não introduz vulnerabilidade nova, e não muda o comportamento do resto. Quando não consegue garantir, você recebe uma nota explicando o porquê — não um patch.

Aplicando uma correção — no terminal git apply CLAUDE-SECURITY-<data-hora>/patches/F1.patch
⚠️ Nada é aplicado automaticamente Nunca. Aplicar é sempre decisão sua. E a recomendação oficial é aplicar uma correção por pull request, pra que cada uma possa ser revisada e testada isoladamente. Se o código corrigido não tinha teste, a nota do patch avisa — assim você sabe que a revisão dele rodou sem uma bateria de testes por trás.

Onde ele se encaixa

Ele não substitui nada — ele é uma camada a mais. Segurança funciona empilhada:

Enquanto escrevePlugin security-guidance — revisa o código conforme o Claude escreve, e corrige na mesma sessão
Passada rápida/security-review — uma passada única de segurança na sua branch atual
Sob demandaClaude Security (este plugin) — varredura profunda multi-agente do repositório ou do diff, com achados revisados independentemente e correções prontas
No pull requestCode Review — revisão de correção e segurança no PR, com contexto do projeto inteiro (planos Team e Enterprise)
GerenciadoProduto Claude Security — serviço hospedado que monitora repositórios conectados (plano Enterprise)
No CISeus scanners atuais — análise estática, checagem de dependências e políticas da empresa
⚠️ Honestidade sobre limitações Não substitui análise estática, verificação de dependências nem revisão humana. As varreduras são não-determinísticas — duas varreduras do mesmo código podem trazer achados diferentes, então rode com regularidade em vez de uma vez só. E ele não adiciona isolamento: se você for varrer um repositório de terceiro em que não confia, use um ambiente isolado.

Faça agora, no projeto que você acabou de construir

🎯 Exercício de 5 minutos Instale o plugin, rode /claude-security e escolha Scan codebase no TO-DO List que você montou hoje. Leia o relatório. Escolha um achado e peça a correção. Não aplique — só leia o patch e entenda o que ele muda.
Prompt 17 · a primeira varredura
/claude-security
Prompt 18 · varrendo só o que você mudou
/claude-security scan my branch
Prompt 19 · pedindo a correção de um achado
Corrige o achado F1 do último relatório. Me explique em português o que
o patch muda e por que aquilo era um problema, antes de eu aplicar.
💡 Fechando o círculo do encontro Repare no que acabou de acontecer: você documentou (PRD), decidiu (ADR), estabeleceu as regras (CLAUDE.md), construiu com verificação — e agora validou. Isso é ciclo de desenvolvimento completo. Em duas horas. Sem saber programar.
Ato 3 · Bloco 9
O kit anti-Frankenstein.
O que levar pra sua rotina a partir de amanhã
5 minutos

Antes de escrever qualquer código com I.A.

1
PRD
O quê, pra quem, e principalmente o que não entra.
2
ADR
As decisões que doeriam se fossem revertidas.
3
CLAUDE.md
As regras da casa, em menos de 200 linhas.
4
Verificação
Como o Claude confere o próprio trabalho.

Durante o trabalho

⚠️ A regra sem exceção Senha, chave de acesso ou dado de cliente nunca entram no PRD, no ADR ou no CLAUDE.md. Eles vão pro Git. Se for anotação só sua, use o CLAUDE.local.md e coloque no .gitignore.

Tarefa da semana — sem escrever código

🎯 Sua missão até o Encontro 05 Escolha um projeto ou ideia sua — do trabalho ou pessoal. Abra o Claude Code e produza só três arquivos: PRD.md, um ADR-001 e um CLAUDE.md.

Não escreva uma linha de código. Traga na semana que vem — é em cima do seu projeto que a gente vai montar o primeiro agente.

3 perguntas pra escolher o projeto

  1. Que processo do seu dia você consegue explicar em 5 passos? Se você consegue descrever, dá pra escrever um PRD.
  2. Onde você já tentou usar I.A. e o resultado desandou? Provavelmente faltava exatamente um desses documentos.
  3. Que ferramenta você queria ter e nunca teve orçamento pra pedir? Essa é a candidata mais divertida.

Ponte para o Encontro 05

O que vem aí

Agentes de I.A. — MCP e Skills.

E aí esses arquivos que a gente fez hoje deixam de ser só organização e viram outra coisa: eles são o que permite dar autonomia a um agente sem perder o controle. Um agente sem PRD, sem ADR e sem regra de casa não é autonomia — é aposta.

O que a gente vai fazer com os seus 3 arquivos

E os hooks que ficaram de fora hoje entram aqui: é o que transforma uma regra do CLAUDE.md em algo que o agente não consegue ignorar.

💡 Se ficou perdido em algum ponto Sem pânico. Use este material como mapa — todos os blocos ficam aqui pra você revisitar quando quiser, e todos os prompts têm botão de copiar. Não precisa ter dominado tudo agora; o importante é sair daqui com um projeto documentado antes de escrever a primeira linha.