MODULO 6.5

🌐 Seu Primeiro Site

Hora de colocar a mao na massa! Vamos criar seu primeiro site completo usando apenas descricoes em portugues.

6
Topicos
40
Minutos
Iniciante
Nivel
Pratico
Tipo
1

⚡ claude dangerously skip

Existe um modo especial que pula todas as confirmacoes de seguranca, deixando Claude trabalhar muito mais rapido. Use com cuidado - apenas em projetos novos!

🚀 Como Usar

Em vez de apenas "claude", digite:

claude --dangerously-skip-permissions

Ou o atalho mais curto: claude -y

⚠️ Atencao!

Use APENAS em projetos novos ou pastas de teste. Em projetos importantes, use o modo normal para revisar cada acao.

2

✍️ Prompt para Website

O segredo e descrever bem o que voce quer. Quanto mais detalhes, melhor o resultado!

📝 Exemplo de Prompt

"Crie um site para minha cafeteria chamada 'Cafe Aroma'. O site deve ter:

  • Pagina inicial com hero bonito e foto de cafe
  • Secao sobre nos com nossa historia
  • Cardapio com precos
  • Formulario de contato
  • Cores marrom e creme, estilo aconchegante
  • Responsivo para celular"

💡 Dicas para Bons Prompts

  • Mencione cores que voce gosta
  • Descreva o "clima" ou "vibe" desejado
  • Liste todas as paginas/secoes que precisa
  • Mencione se precisa funcionar no celular
3

🏗️ Auto-building de Arquivos

Claude Code nao so escreve codigo - ele cria pastas, arquivos, tudo automaticamente. E como ter um construtor que faz a planta e a obra!

📁 O Que Claude Cria

meu-site/

├── index.html

├── sobre.html

├── contato.html

├── css/

└── style.css

├── js/

└── main.js

└── images/

4

🎯 @ para Targets Especificos

Use @nomedoarquivo para dizer a Claude exatamente qual arquivo modificar!

📌 Exemplos

@index.html adicione um botao de WhatsApp
@style.css mude a cor do fundo para azul
@cardapio.html adicione preco de R$15 no cappuccino
5

❓ Ask Mode (shift+tab)

As vezes voce so quer entender algo sem fazer mudancas. O Ask Mode e perfeito para isso!

🤔 Como Ativar

Pressione Shift + Tab antes de enviar sua mensagem

Ou comece a mensagem com /ask

Exemplos de Perguntas

  • "Como esse CSS funciona?"
  • "O que esse arquivo faz?"
  • "Qual a estrutura deste projeto?"
6

🧠 Planning Mode com Opus

Para tarefas complexas, faca Claude planejar antes de agir. Isso usa o modelo mais inteligente (Opus)!

📋 Como Usar

Adicione "pense bem" ou "planeje primeiro" no seu prompt:

"Pense bem antes de comecar: quero um e-commerce completo com carrinho de compras. Planeje a estrutura primeiro, depois implemente."

💡 Quando Usar Planning Mode

  • Projetos com muitas partes conectadas
  • Quando nao sabe exatamente o que precisa
  • Refatoracao de codigo existente

📋 Resumo do Modulo

claude -y - modo rapido sem confirmacoes (cuidado!)
Prompts detalhados - quanto mais detalhes, melhor
Auto-building - Claude cria toda a estrutura
@arquivo - aponta para arquivos especificos
Ask Mode - perguntas sem fazer mudancas
Planning Mode - pense antes de agir

Proximo Modulo:

6.6 - MCPs Explicados: Superpoderes para seu Claude!