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
Cronograma — Ato 1 (26/06)
| Horário | O que rola |
|---|---|
| 09:00 – 09:10 | Abertura e boas-vindas |
| 09:10 – 09:40 | O que é o Claude · Precificação (Blocos 1-2) |
| 09:40 – 10:25 | Cowork na prática + Demos ao vivo (Blocos 3-4) |
| 10:25 – 10:45 | Claude Code (Bloco 5) |
| 10:45 – 11:00 | Tira-dúvidas e próximos passos (Bloco 6) |
Cronograma — Ato 2 (10/07)
| Horário | O que rola |
|---|---|
| 09:00 – 09:10 | Visão geral do dia (Bloco 1) |
| 09:10 – 09:30 | Stitch e Google AI Studio (Bloco 2) |
| 09:30 – 10:00 | Claude Design: criar o todolist juntos (Bloco 3) |
| 10:00 – 10:25 | Design System: criar juntos (Bloco 4) |
| 10:25 – 10:50 | Aplicar o design system no app (Bloco 5) |
| 10:50 – 11:00 | Recap e próximos passos (Bloco 6) |
Cronograma — Ato 3 (07/08)
Pré-requisitos
- ✓ Conta Claude Pro — Crie em claude.ai (~R$115/mês). Necessário para Cowork e Claude Code
- ✓ Claude Desktop App — Baixe em claude.ai/download (Mac ou Windows)
- ✓ Computador com internet — Mac, Windows ou Linux
- ✓ Git instalado Ato 3 — o Claude Code usa pra versionar e restaurar o projeto
-
✓
Python 3.9.6+ Ato 3 — só pro bloco de Claude Security. Confira com
python3 --version
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
| Interface | O que faz | Para quem |
|---|---|---|
| Claude.ai (web) | Versão completa no navegador | Acesso rápido de qualquer computador |
| Claude Desktop App | Chat, Cowork e Claude Code — tudo num app, zero terminal | Uso diário — recomendado pra todo mundo |
| Claude Mobile | Só Chat por voz e texto. Cowork e Claude Code não rodam no celular | Acesso 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.
| Modo | Quando usar | Exemplo |
|---|---|---|
| Chat | Para entender — perguntas, brainstorm, ideias | "Me explica o que é ROI" |
| Cowork | Para conectar — análises, relatórios, plugins | "Analise meus concorrentes e gere um relatório" |
| Code | Para construir — skills, agentes, automações | "Cria um agente de atendimento para meu negócio" |
Planos do Claude
| Plano | Preço | Chat | Cowork | Claude Code |
|---|---|---|---|---|
| Free | Grátis | Limitado | ✗ | ✗ |
| Pro | ~R$115/mês | ✓ | ✓ | ✓ |
| Max 5x | ~R$575/mês | ✓ | ✓ | ✓ |
| Max 20x | ~R$1.150/mês | ✓ | ✓ | ✓ |
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 dia | Você sem I.A | Você com o Claude |
|---|---|---|
| Tarefas repetitivas | Faz na mão, uma por uma | Descreve uma vez, o Claude faz em lote |
| Pesquisa técnica | Caça em fórum, doc e Stack Overflow | Pergunta e recebe a resposta com contexto |
| Código / scripts | Escreve do zero e debuga sozinho | Gera o esqueleto e você só refina |
| Análise de dados | Horas em planilha, log e regex | Cola os dados e recebe o insight pronto |
| Documentação | Sempre fica pra depois | Rascunho pronto em segundos |
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:
| Plano | Preço | Limite |
|---|---|---|
| Pro | ~R$115/mês | Uso 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ês | 5x o limite do Pro — uso profissional diário, rodar agentes, criação intensiva. |
| Max 20x | ~R$1.150/mês | 20x 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:
| Modelo | Pra que serve | Consumo de tokens | Quando usar |
|---|---|---|---|
| Haiku | Tarefas simples e rápidas | Baixo — cabe muito mais na janela | Resumos, formatação, tarefas repetitivas |
| Sonnet | Uso geral — equilíbrio entre qualidade e custo | Médio | Dia a dia: criar skills, gerar conteúdo, análises |
| Opus | Raciocínio complexo e profundo | Alto — consome 5-10x mais que Haiku | Estratégia, orquestração de times, decisões críticas |
/cost no Claude Code para monitorar seu consumo.
/cost no Claude Code para monitorar seu consumo.
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
-
Abra o Claude Desktop App
Baixe em claude.ai/download se ainda não tem.
-
Clique na aba Cowork
Está no topo do app, ao lado de Chat e Code.
-
Conceda acesso a pastas
O Claude precisa acessar pastas no seu computador para ler e salvar arquivos. Escolha uma pasta de trabalho.
Causas mais comuns:
- Você está no plano Free — Cowork é exclusivo do Pro+
- Versão antiga do app — atualize em claude.ai/download
- Windows 11 Home — Cowork exige Hyper-V (só tem no Pro+)
- 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:
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
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.
| Plugin | O que faz |
|---|---|
| Marketing | Brand voice, análise competitiva, planejamento de campanha, criação de conteúdo |
| Sales | Pipeline, prospecção, follow-up, scripts de vendas |
| Finance | Análise financeira, orçamentos, relatórios |
| Legal | Análise de cláusulas, contratos, compliance |
| Data | Conecta em fontes de dados (CSV, Excel) e faz análise |
| Design | Design systems, componentes visuais, acessibilidade |
| HR | Recrutamento, onboarding, políticas de RH |
| Ops | Processos operacionais, checklists, workflows |
| PM | Gestão de projetos, roadmaps, priorização |
| Dev | Code review, documentação técnica, debugging |
| Customer Support | Atendimento 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 conectores | Claude com conectores | |
|---|---|---|
| Dados | Só o que você cola na conversa | Acessa planilhas, sites, bancos de dados em tempo real |
| Internet | Limitado | Pesquisa, lê páginas, extrai informações |
| Criação | Gera texto na conversa | Cria arquivos no Google Drive, posts no Instagram, tasks no Notion |
Exemplos práticos
- GitHub — lê repositórios, issues e PRs; ajuda a revisar e documentar código
- Google Workspace — lê e cria Docs, Sheets, Gmail, Calendar
- Perplexity — pesquisa na web em tempo real com fontes
- Notion — acessa sua base de conhecimento, cria páginas, atualiza tasks
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
-
Abra o Cowork e dê acesso à pasta
No Claude Desktop App, vá na aba Cowork e autorize a pasta onde está a sua planilha (
.xlsxou.csv). -
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.
-
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".
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.
.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:
- Plugin de Marketing: pesquisa mercado, define posicionamento, escreve copy de conversão, cria estratégia de conteúdo
- Plugin de Design: extrai design systems de sites existentes, cria páginas em HTML/CSS, gera layouts profissionais, aplica identidade visual
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.
Crie uma página para vender café premium do Caparaó, use o plugin de marketing e design.
O que acontece:
- O plugin de Marketing pesquisa o mercado de cafés especiais, define o posicionamento e escreve a copy (headline, benefícios, FAQ, CTA)
- O plugin de Design cria o layout visual completo — paleta de cores, tipografia, seções, responsivo
- O Claude gera imagens de exemplo em alta qualidade para ilustrar o produto
- Resultado: arquivo HTML pronto para abrir no navegador
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.
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:
- O Claude acessa o site e extrai tudo: conteúdo, profissionais, especialidades, contato, cores, fontes
- O plugin de Marketing analisa a copy atual e reescreve com framework de conversão (problema → solução → prova → CTA)
- O plugin de Design extrai o design system original e cria uma versão melhorada — moderna, responsiva, profissional
- Onde faltam imagens, o Claude gera exemplos em alta qualidade
- Resultado: página completa mantendo as informações reais do negócio, mas com design e copy de outro nível
- Passe um site de referência: "use como referência visual o site [URL]"
- Especifique paleta + tipografia + estilo: "paleta neutra com 1 acento laranja, tipografia serifada, vibe editorial"
- Use a skill frontend-design — ela extrai o design system e aplica corretamente.
O que o Code faz que o Cowork não faz
| Funcionalidade | Cowork | Claude Code |
|---|---|---|
| Chat e plugins | ✓ | ✓ |
| Skills customizadas | Instalar e usar | Criar, instalar e compartilhar |
| MCPs ilimitados | Conectores 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)
-
Abra o Claude Desktop App
Aquele que você já baixou em claude.ai/download. Mac ou Windows.
-
Clique na aba Claude Code no topo
Está ao lado de Chat e Cowork. Pronto — você já está dentro do Claude Code.
-
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).
curl -fsSL https://claude.ai/install.sh | bash
Após instalar, feche e reabra o terminal antes de continuar.
Windows
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.
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).
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 install Anthropic.ClaudeCode
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.
winget upgrade Anthropic.ClaudeCode periodicamente pra pegar as últimas versões.
Primeira execução (apenas para o caminho via terminal)
-
Abra o terminal e digite
claudeMac: abra o Terminal (Cmd+Espaço → digite "Terminal" → Enter). Windows: abra o PowerShell (menu Iniciar → digite "PowerShell" → Enter).
-
Faça login
Escolha "Use Claude.ai account" — assim ele usa o mesmo plano Pro que você já tem.
-
Pronto
O Claude Code está funcionando. Teste com qualquer pergunta.
Comandos essenciais
| Comando | O que faz |
|---|---|
/help | Lista todos os comandos disponíveis |
/cost | Mostra quanto você já gastou na sessão |
/compact | Compacta o contexto — útil quando o Claude fica lento |
/memory | Gerencia a memória do projeto (CLAUDE.md) |
/clear | Limpa a conversa e recomeça do zero |
/quit | Sai do Claude Code |
Ctrl+C | Cancela a ação atual |
Modos de permissão
Alterne entre modos com Shift+Tab dentro do Claude Code.
| Modo | O que faz | Quando usar |
|---|---|---|
| default | Pergunta antes de cada ação | Quando está aprendendo ou em tarefas sensíveis |
| acceptEdits | Edita arquivos sozinho, mas pede permissão para comandos shell | Produtividade diária com segurança |
| plan | Modo análise: mostra o plano e pede confirmação antes de executar | Code review, decisões de arquitetura |
| auto | Um classificador de I.A decide o que é seguro executar | Uso avançado (requer plano Team/Enterprise ou API) |
| bypassPermissions | Executa TUDO sem pedir permissão (flag --dangerously-skip-permissions) | Projetos isolados onde você confia 100% — use com cuidado |
3 perguntas pra levar pra sua rotina
-
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.
-
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ê.
-
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
- Anote suas 3 respostas num caderno ou no próprio Claude (Chat ou Cowork).
- Abra o Claude e jogue ali a tarefa mais chata da sua semana — só pra sentir como é.
- Escolha 1 tarefa pra resolver com a I.A já nesta semana. Comece pequeno, ganhe confiança e vá expandindo.
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
O que é um Design System
Por que sem ele a I.A. gera coisa genérica, e como um "DNA visual" muda o resultado.
3 formas de desenhar com I.A.
Stitch e Google AI Studio (gratuitas, do Google) e Claude Design — quando cada uma faz sentido.
Design → Code, na prática
Como o Claude Design e o Claude Code conversam pelo botão Share — sem depender de comando decorado.
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
| Bloco | O que rola |
|---|---|
| 02 | Stitch e Google AI Studio — as opções gratuitas |
| 03 | Claude Design — criar o todolist juntos e transformar em app |
| 04 | Design System — criar o "DNA visual" juntos, a partir de uma marca famosa |
| 05 | Aplicar o design system no app — o antes e depois |
| 06 | Recap e próximos passos |
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.
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 com | Conta Google, sem cartão de crédito |
| Limite | Créditos diários (renovam a cada dia) |
| Melhor pra | Ideiar 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:
| Modo | Modelo | Quando usar |
|---|---|---|
| 3 Flash | Gemini 3.0 Flash | Modo padrão e rápido. Uso geral — descrever uma tela e ver o resultado sair rápido. |
| Thinking with 3.1 Pro | Gemini 3.1 Pro | Prioriza qualidade e raciocínio máximos em vez de velocidade. Bom pra polir a versão final ou destravar telas complexas. |
| Redesign | Nano Banana Pro | Refazer visual a partir de uma imagem (print de app, sketch, tela concorrente). É o modo mais próximo do que vamos fazer hoje. |
| Ideate | Modo de brainstorm | Você 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. |
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:
| Grupo | Destinos | Pra que serve |
|---|---|---|
| Virar app rodando | AI Studio, Netlify, Lovable, Bolt | Do design direto pra um app que já roda no navegador — sem passar por código à mão |
| Levar pro fluxo de design | Figma | Continuar refinando no design tool tradicional |
| Pegar o código | .zip, Código pra área de transferência | Baixar o HTML/CSS/JS ou colar direto num projeto seu (ex: no Claude Code) |
| Conectar a agentes | MCP | Pra ferramentas que consomem o design como contexto — útil pra pipelines de I.A |
| Documentar | Resumo do projeto | Um sumário textual do que foi criado |
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 com | Conta Google, sem cartão de crédito |
| Melhor pra | Quem quer ir do design direto pra um app funcionando, num só lugar |
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.
-
Abra o Claude Design
Em claude.ai/design ou pela aba Design do Claude Desktop.
-
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 DesignCria 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. -
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.
-
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.
-
Rode
/design-loginIsso 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.
-
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.htmldo todolist na pasta.Prompt — depois do texto do ShareImplementa 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. -
Rode o arquivo no navegador
Abra o
index.htmle teste: adicionar, concluir, apagar, os filtros e a troca lista/kanban. Pronto: você desenhou com I.A. e transformou num app completo.
/design-loginnão é reconhecido — seu Claude Code tá desatualizado. No Desktop, atualize o app; no terminal, rodeclaude updatee abra uma sessão nova.- 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.
- Colou o Share e o Code não puxou o design — confira se rodou
/design-loginnesta sessão e se colou o texto inteiro do Share (é uma instrução completa, não só o link). - 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étodo | Quando usar |
|---|---|
| Chat (conversa) | Mudanças amplas — "deixe o tema mais escuro" |
| Comentário inline | Comentar num elemento específico ("esse botão precisa se destacar mais") |
| Edição direta de texto | Clicar num texto do canvas e reescrever ali mesmo, sem passar pelo chat |
| Knobs / sliders sob demanda | Peç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. |
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 system | Com design system |
|---|---|
| Layout genérico, cara de "feito por I.A." | Cor, fonte e componente no padrão |
| Cada projeto novo começa do zero | Todo projeto novo já herda o mesmo padrão |
| Precisa redescrever o estilo toda vez | Você 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)
-
Baixe o .md da marca escolhida
Em getdesign.md, escolha uma marca (Linear, Stripe, Notion...) e baixe o arquivo
.mdpro computador. -
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.
-
Escolha "Create here"
Vai abrir a janela "Add a design system" com duas opções:
Opção Quando 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
.mddo getdesign.md dentro não é suficiente pra esse caminho — o certo aí é o Create here. -
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
.mdbaixado. É esse campo que aceita o arquivo do getdesign.md. - Os outros campos (GitHub, .fig, computador) ficam vazios — são pra outros cenários.
-
Clique em "Continue to generation"
Canto superior direito. O Claude lê o .md e gera paleta, tipografia, componentes e padrões de layout automaticamente.
-
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.
-
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-loginde novo.
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
🖐️ Mão na massa — todos juntos
-
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-loginantes. -
Em seguida, cole o prompt de aplicação
Prompt — depois do texto do Share do design systemAplica 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. -
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.
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.
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.
| Comando | Direção | O que faz |
|---|---|---|
/design-login | Autenticação | Autoriza o Claude Code a ler e escrever nos seus projetos do claude.ai/design. Precisa antes de qualquer coisa que envolva design system. |
/design-sync | Code → Design | Empurra componentes locais (React) pra dentro de um design system no Claude Design. É o oposto do que fizemos hoje. |
| Texto do Share | Design → Code | Traz um design ou design system do Claude Design pro Code aplicar no seu projeto. É o que usamos hoje. |
As 4 ideias pra levar pra casa
O fluxo completo que você aprendeu hoje
- Desenhar: descrever a tela no Claude Design (ou Stitch/AI Studio, nas opções gratuitas)
- Implementar: botão Share → colar no Claude Code → app funcionando
- Padronizar: criar um design system a partir de um
.md(getdesign.md) ou da sua marca - Aplicar: Share do design system → Claude Code redesenha o app inteiro no padrão
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:
As 5 causas do Frankenstein
Esse é o diagnóstico. Repare em uma coisa enquanto lê: nenhuma delas é um problema de programação.
| Causa | Como aparece na prática |
|---|---|
| 1. Sem requisito escrito | Cada 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 registrada | Ele 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 casa | Cada 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 estourado | Sessã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. |
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.
A analogia da obra
| Artefato | Na obra | No projeto |
|---|---|---|
| PRD | A planta da casa | Quantos cômodos, pra quem é a casa, e o que não entra nessa etapa |
| ADR | O registro de por que a parede é de concreto e não drywall | Por que os dados ficam no navegador e não na nuvem — com as opções que foram descartadas |
| CLAUDE.md | As regras da obra pregadas na parede | "Leia a planta antes de levantar parede." "Não contrarie decisão registrada." |
| Verificação | O fiscal que assina o laudo | Um 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
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:
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.
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.
Onde ele roda
Mesma engine, várias portas de entrada:
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.
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:
| Controle | Onde fica | Quando usar |
|---|---|---|
| Seletor de modo | Ao 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. |
/clear | Digitado no chat | Zera o contexto. Entre tarefas que não têm nada a ver uma com a outra. |
Esc | Tecla | Interrompe o Claude no meio. Quando você percebeu que ele foi pro lado errado. |
/rewind | Digitado no chat | Volta código e/ou conversa a um ponto anterior. Depois de meia hora num beco sem saída. |
/context | Digitado no chat | Mostra o que está carregado na memória. Serve pra conferir se o CLAUDE.md foi lido. |
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 Code | Cursor | |
|---|---|---|
| Filosofia | Agent-first: você descreve a tarefa, ele executa de ponta a ponta | IDE-first: você dirige, a I.A. completa e sugere ao seu lado |
| É um... | Agente que trabalha dentro do projeto | Editor de código (VS Code turbinado) |
| Ponto forte | Refatoração em muitos arquivos, testes, Git, tarefas longas rodando sozinho | Autocompletar linha a linha (Tab), diffs visuais, edição interativa |
| Modelo | Claude | Multi-modelo (Claude, GPT, Gemini) |
| Curva | Conversa em português, sem editor | Precisa 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 |
/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.
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
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 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.
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.
Modelo em branco
# 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]
/write-spec, que gera um PRD estruturado a partir de uma frase. Instale pelo botão + ao lado do prompt → Plugins → Add plugin. Lembre do Ato 1: plugin instalado no Cowork não aparece no Code — precisa instalar nos dois.
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.
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
Quando escrever um ADR?
Existe uma regra de bolso única, e ela é suficiente:
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
CLAUDE.md.
E se eu mudar de ideia?
Essa é a pergunta que sempre aparece — e a resposta é o que fecha o conceito.
Os prompts que geram os ADRs
Dois movimentos: o primeiro é interativo (a decisão é sua), o segundo é em lote (as menores).
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.
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
---
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
/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 + → Plugins → Add plugin.
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.
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.
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.
As outras 4 regras
O que entra e o que não entra no CLAUDE.md
| ✓ Incluir | ✗ Não incluir |
|---|---|
| Comandos que o Claude não teria como adivinhar | Qualquer coisa que ele descobre lendo o código |
| Regras de estilo que diferem do padrão | Convenções que a linguagem já tem |
| Como rodar os testes deste projeto | Documentação de API (linke em vez de colar) |
| Decisões de arquitetura específicas deste projeto | Informação que muda toda semana |
| Pegadinhas e comportamentos não óbvios | Descrição arquivo por arquivo do projeto |
| Etiqueta do repositório (nome de branch, padrão de commit) | Obviedades tipo "escreva código limpo" |
CLAUDE.md — é uma skill (carregada só quando é relevante) ou uma regra por caminho em .claude/rules/.
Gerando o seu
/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.
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.
Conferindo que ele leu
/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.
Segurança: o que nunca pode entrar
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.
-
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.
-
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.
-
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.
-
Escreva as regras da casa
Rode
/inite depois o Prompt 5 de refino. Confira com/contextque o arquivo foi carregado. -
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óricoInicialize 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".
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
"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.
"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.
Comece com o contexto limpo
/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.
/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.
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:
Inverte a ordem das fatias 2 e 3 e tira o item de exportação — isso está fora de escopo no PRD.
Executar com verificação
Aprove o plano e volte o modo para Accept edits.
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.
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.
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
Pontos de restauração
/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.
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." |
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.
[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.
/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
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ção | O que fazer |
|---|---|
| Vou mudar completamente de assunto | /clear |
| Ele foi pro caminho errado agora | Esc, 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
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.
Pré-requisitos
- ✓ Claude Code v2.1.154 ou superior, em plano pago
-
✓
Dynamic workflows ligado — no plano Pro, ative na linha "Dynamic workflows" do
/config. É o que permite ele orquestrar os vários agentes -
✓
Python 3.9.6+ disponível como
python3. Confira compython3 --version. Nada é instalado — ele usa só a biblioteca padrão - ✓ Git — necessário para varrer alterações e para gerar correções. A varredura completa funciona em qualquer pasta, com ou sem Git
Instalação em 3 comandos
-
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 -
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 -
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:
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.
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.
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.
/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:
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ília | Exemplo do mundo real |
|---|---|
| Injeção e entrada Crítico | Um campo de texto onde o usuário digita um comando em vez de um nome — e o sistema executa |
| Autenticação e acesso Crítico | Uma tela que só esconde o botão em vez de checar de verdade se a pessoa pode fazer aquilo |
| Criptografia e segredos Alto | Chave de API escrita direto no código e enviada pro repositório |
| Operações inseguras de memória Depende | Só 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:
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.
.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.
git apply CLAUDE-SECURITY-<data-hora>/patches/F1.patch
Onde ele se encaixa
Ele não substitui nada — ele é uma camada a mais. Segurança funciona empilhada:
/security-review — uma passada única de segurança na sua branch atualFaça agora, no projeto que você acabou de construir
/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.
/claude-security
/claude-security scan my branch
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.
Antes de escrever qualquer código com I.A.
Durante o trabalho
- Modo Plan antes de qualquer tarefa que mexe em mais de um arquivo
- Fatie em entregas que rodam de ponta a ponta — não em camadas
/clearentre tarefas que não têm relação- Duas correções no mesmo erro =
/cleare recomeçar com prompt melhor - Commite cedo e sempre — rewind é o desfazer, Git é a história
- Mudou de ideia? ADR novo substituindo o antigo, nunca mudança silenciosa
- Varra antes de publicar —
/claude-security scan my branch
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
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
- Que processo do seu dia você consegue explicar em 5 passos? Se você consegue descrever, dá pra escrever um PRD.
- Onde você já tentou usar I.A. e o resultado desandou? Provavelmente faltava exatamente um desses documentos.
- Que ferramenta você queria ter e nunca teve orçamento pra pedir? Essa é a candidata mais divertida.
Ponte para o Encontro 05
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
CLAUDE.md→ o briefing do agente. É o arquivo que ele lê antes de agir. Lá ele deixa de ser só regra de estilo e passa a dizer quando usar cada Skill e cada MCP que a gente conectar.PRD.md→ o limite. Agente autônomo sem definição de pronto não para sozinho. O PRD é o que diz onde a tarefa termina.ADR-001→ a memória das decisões. Sem ele, o agente re-decide a arquitetura a cada sessão e desfaz o que você já tinha resolvido.
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.