🔔 Hooks para Notificações
Hooks permitem acionar ações automáticas em eventos do Claude Code. O uso mais valioso: alerta sonoro ao concluir. Isso libera você para trabalhar em outra coisa sem precisar monitorar a tela — e torna viável executar múltiplas sessões em paralelo.
⚙️ Configurando Hooks com /hooks
O comando /hooks abre a interface de configuração de hooks. Você define o evento gatilho e a ação a executar.
- • Evento: conclusão de tarefa — dispara quando o Claude finaliza a resposta
- • Ação: comando shell — qualquer comando: play de áudio, notificação do sistema, webhook
- • Múltiplos hooks: você pode encadear várias ações por evento
- • Sessões paralelas: com notificações, 15 sessões simultâneas se tornam gerenciáveis
on_complete: afplay /System/Library/Sounds/Glass.aiff
# Notificação do sistema no Linux
on_complete: notify-send "Claude Code" "Tarefa concluída!"
# Webhook para Slack
on_complete: curl -X POST $SLACK_WEBHOOK -d '{"text":"Claude terminou"}'
# Acesso via comando
Você: /hooks
💡 Dica Prática — Sessões Paralelas
Com hooks configurados, o fluxo ideal é: inicie 5–10 sessões do Claude Code em terminais diferentes, cada uma com uma tarefa independente, e vá trabalhar em outra coisa. Quando uma sessão terminar, o alerta avisa. Você só intervém quando necessário — multiplicando sua capacidade de trabalho paralelo.
✓ O que FAZER
- ✓Configurar alerta sonoro para liberar atenção
- ✓Usar hooks para tarefas longas em background
- ✓Combinar com sessões paralelas para máxima produtividade
- ✓Configurar webhook para integrações com ferramentas de equipe
✗ O que NÃO fazer
- ✗Ficar monitorando a tela esperando terminar
- ✗Usar hooks pesados que atrasam o próximo prompt
- ✗Configurar hooks sem testar o comando de ação
- ✗Ignorar esta funcionalidade por parecer simples
📸 Capturas de Tela
O Claude é multimodal — ele processa imagens. Isso abre um ciclo de desenvolvimento visual poderoso: desenhe, capture, implemente, repita. Envie screenshots de erros, referências de design ou do próprio app sendo desenvolvido para que o Claude veja o que você está vendo.
🔄 O Ciclo Visual de Desenvolvimento
Em vez de descrever o problema em texto longo, mostre. Em vez de explicar o que está errado no layout, tire um screenshot e pergunte. O Claude identifica problemas visuais com precisão.
- • Mensagens de erro: screenshot do terminal ou browser — o Claude vê o stack trace completo
- • Referências de design: "faça como este site" — envie a screenshot e receba implementação fiel
- • Autoverificação: "tire um screenshot e diga se o layout está correto" — loop automático
- • Progresso iterativo: implementa → screenshot → ajusta → screenshot → aprovado
# Claude implementa...
Você: "Tire uma screenshot do resultado no browser
e diga se o layout está correto conforme o
design system."
Claude: [tira screenshot, analisa]
"O espaçamento interno está maior que o definido.
O botão deveria estar alinhado à esquerda, não centralizado.
Vou corrigir..."
# Loop até aprovação visual
💡 Dica Prática
Para o ciclo de autoverificação funcionar, o Claude precisa de acesso a ferramentas de screenshot (configuradas via MCP ou permissão de terminal). Configure isso antes de começar sessões de desenvolvimento front-end intenso — economiza dezenas de mensagens de ida e volta.
✓ O que FAZER
- ✓Enviar screenshots em vez de descrever visualmente
- ✓Usar o ciclo implementa→screenshot→ajusta
- ✓Pedir autoverificação visual ao Claude
- ✓Enviar referências visuais concretas para design
✗ O que NÃO fazer
- ✗Descrever em texto longo o que uma imagem mostraria
- ✗Enviar screenshots de baixa resolução difíceis de ler
- ✗Pular a etapa de verificação visual no desenvolvimento front-end
- ✗Usar screenshots apenas para reportar erros (use também para design)
🌐 Chrome DevTools
Além de ver, o Claude pode interagir com o navegador. Ele abre o Chrome, navega até o app, clica em botões, preenche formulários e verifica o comportamento real da aplicação. Essencial para desenvolvimento front-end e automação de fluxos sem API.
🖱️ O que o Claude Pode Fazer no Navegador
Via Chrome DevTools Protocol, o Claude tem controle programático completo do navegador — muito além de apenas tirar screenshots.
- • Navegação: abrir URLs, clicar em links, navegar pelo histórico
- • Interação com UI: clicar botões, preencher formulários, fazer scroll
- • Inspeção: verificar console, network tab, elementos DOM
- • Automação sem API: preencher formulários e extrair dados quando não há endpoint disponível
test@example.com / senha123 e verifique se o
dashboard carrega sem erros no console."
# Claude abre Chrome, navega, faz login, inspeciona console
Claude: "Login realizado com sucesso. Dashboard carregou.
Encontrei 2 warnings no console:
- Prop 'key' duplicada no componente ProductList
- Imagem sem atributo alt em /products/thumbnail"
Você: "Corrija os dois problemas."
📊 Casos de Uso por Área
- Front-end: teste de responsividade, verificação de acessibilidade, debugging de CSS
- QA manual: fluxos completos de teste sem escrever código de automação
- Scraping: extração de dados de sites sem API (quando permitido)
- Formulários: preenchimento de sistemas legados onde não existe integração
💡 Dica Prática
Combine DevTools com screenshots num ciclo iterativo de desenvolvimento front-end: implemente, deixe o Claude abrir o browser, verificar o resultado visual, checar o console para erros, e sugerir ou aplicar as correções. Você avalia e aprova. É um par programmer que testa automaticamente o próprio código.
✓ O que FAZER
- ✓Pedir verificação de console após implementar features
- ✓Usar para testar fluxos completos de usuário
- ✓Combinar com screenshots para ciclo visual completo
- ✓Aproveitar para automação de formulários sem API
✗ O que NÃO fazer
- ✗Usar para scraping de sites onde é proibido
- ✗Pedir interações com dados sensíveis (senhas reais, produção)
- ✗Ignorar warnings do console como menos importantes
- ✗Usar em ambiente de produção sem isolamento
🎨 Clonar Sites de Inspiração
Em vez de descrever o estilo desejado em palavras — o que frequentemente resulta em output genérico de IA — mostre diretamente. Screenshots de sites que você admira servem como referência precisa. O Claude recria padrões de design específicos com fidelidade muito maior do que a partir de descrições textuais.
🖼️ Da Referência Visual ao Código
Referências visuais concretas eliminam a ambiguidade que gera output genérico. O Claude analisa os padrões de espaçamento, hierarquia tipográfica, uso de cores e componentes na screenshot e os recria no seu contexto.
- • Screenshot do site: captura de tela como referência visual direta
- • HTML/CSS da fonte: inspecione e cole o código real para máxima fidelidade
- • "Faça parecer com isso": instrução simples + referência visual = resultado preciso
- • Anti-genérico: referências específicas produzem resultados únicos, não templates
Você: [envia screenshot de landing page]
"Recrie este estilo de hero section para nosso produto.
Use nossas cores (primary: #3B82F6) mas mantenha
o layout e a hierarquia tipográfica."
# Abordagem 2: HTML/CSS da fonte
Você: "Aqui está o CSS do componente que gostei:
[cola o CSS] Use este padrão de espaçamento e
sombra para nosso card de produto."
# Resultado: design fiel, não genérico
📊 Por que Referências Visuais Vencem Descrições
- Ambiguidade zero: "espaçamento generoso" é subjetivo; uma screenshot mostra o exato pixel
- Consistência: detalhes visuais sutis (sombras, raios de borda) são capturados automaticamente
- Velocidade: uma imagem comunica em 1 segundo o que levaria 200 palavras para descrever
- Qualidade: resultados ficam muito mais próximos do que você realmente quer
💡 Dica Prática
Para resultados ainda melhores, combine screenshot + HTML/CSS da fonte. Use o DevTools do browser para inspecionar o componente que você admira, copie o HTML e CSS relevantes, e envie junto com a screenshot. O Claude terá tanto a referência visual quanto a estrutura semântica para trabalhar — resultado de altíssima fidelidade.
⚠️ Respeite Licenças e Direitos Autorais
Usar referências para inspiração de estilo é diferente de copiar código proprietário. Use para aprender padrões de design, não para replicar código de terceiros sem autorização. Clonar a estrutura visual é a prática; copiar o código fonte é outra questão.
✓ O que FAZER
- ✓Usar screenshots como referência de estilo e layout
- ✓Combinar screenshot + HTML/CSS para máxima fidelidade
- ✓Especificar as próprias cores/marca ao solicitar
- ✓Usar referências múltiplas para combinar o melhor de cada
✗ O que NÃO fazer
- ✗Copiar código proprietário sem verificar a licença
- ✗Descrever estilo em texto quando a screenshot está disponível
- ✗Usar referências de baixa qualidade ou resolução
- ✗Esquecer de adaptar cores e identidade visual para a sua marca
✅ Resumo do Módulo 2.4
Trilha concluída!
Você completou a Trilha 2 — Intermediário. Continue para a Trilha 3 — Avançado e domine as técnicas de nível expert.