Topo

Guia pratico com o passo a passo de como criar artefatos no Claude.

💬
Passo 1: Pedir o Artefato para o Claude
▼
Como fazer seu pedido:

Escreva uma mensagem clara para o Claude dizendo o que voce quer. Quanto mais detalhes, melhor!

Exemplo de pedido BOM:

"Crie uma landing page HTML para meu curso de marketing digital. Quero que tenha um titulo chamativo, uma secao com 3 beneficios do curso, e um botao de inscricao. Use cores vibrantes como roxo e rosa."

Exemplo de pedido RUIM:

"Faz um site"

❌ Muito vago! O Claude nao sabe o que voce quer.

Dicas para um bom pedido:
  • Diga qual e o objetivo (landing page, portfolio, formulario...)
  • Mencione as secoes que quer (titulo, beneficios, contato...)
  • Se tiver preferencia de cores, mencione
  • Fale sobre o publico (iniciantes, profissionais...)
✨
Passo 2: Claude Cria o Artefato
▼
O que vai acontecer:
  1. O Claude vai processar seu pedido
  2. Uma janela vai aparecer DO LADO da conversa (no desktop) ou abaixo (no celular)
  3. Voce vai ver seu site/codigo funcionando na janela do artefato
  4. O artefato tera um titulo em cima
Nao gostou do resultado?

Sem problema! Voce pode pedir mudancas:

  • "Mude a cor do botao para verde"
  • "Adicione uma secao de depoimentos"
  • "Deixe o titulo maior"
  • "Coloque uma imagem de fundo"

O Claude vai atualizar o MESMO artefato, nao criar um novo!

📋
Passo 3: Copiar o Codigo do Artefato
▼
Como copiar o codigo:
  1. Olhe para a janela do artefato (lado direito no desktop)
  2. No canto superior direito do artefato, procure o icone de "Copiar" (geralmente dois quadradinhos sobrepostos)
  3. Clique no icone de copiar
  4. Pronto! O codigo completo foi copiado
Atencao:

Certifique-se de copiar do ARTEFATO (janela lateral), nao da conversa. O codigo do artefato e o completo!

Opcao alternativa:

Se nao conseguir copiar do artefato, voce pode pedir:

"Me mostre o codigo completo em um bloco de texto"

O Claude vai mostrar o codigo em um bloco que voce pode copiar normalmente.

💾
Passo 4: Salvar como Arquivo HTML
▼
Agora vamos transformar em arquivo:
  1. Abra o Bloco de Notas (Windows) ou TextEdit (Mac)
  2. Cole o codigo que voce copiou (Ctrl+V no Windows ou Cmd+V no Mac)
  3. Clique em "Arquivo" no menu
  4. Clique em "Salvar Como"
  5. Escolha onde salvar (exemplo: Area de Trabalho)
  6. No campo "Nome do arquivo", digite: meuprojeto.html
  7. Em "Tipo" ou "Salvar como tipo", escolha "Todos os arquivos"
  8. Clique em "Salvar"
MUITO IMPORTANTE:

O arquivo PRECISA terminar com .html - Exemplo: index.html, meuprojeto.html, landingpage.html

Se voce salvar como .txt, nao vai funcionar!

Bons nomes de arquivo:
  • index.html ✅
  • meu-site.html ✅
  • landing-page.html ✅
  • portfolio.html ✅
💡
Dicas Extras e Erros Comuns
▼
✅ Dicas de ouro:
  • Sempre copie TODO o codigo - do inicio ao fim
  • Use nomes descritivos - em vez de "arquivo.html", use "landing-page-curso.html"
  • Teste antes de publicar - abra no navegador e veja se tudo funciona
  • Faca backup - salve uma copia do arquivo antes de fazer mudancas
  • Organize seus projetos - crie pastas separadas para cada projeto
❌ Erros mais comuns:
  • Salvar com extensao errada - Tem que ser .html, nao .txt
  • Nao copiar o codigo completo - Sempre role ate o final do codigo
  • Acentos aparecendo errado - Certifique-se que o codigo tem <meta charset="UTF-8">
  • Codigo nao copiou - Tente copiar novamente ou pecra ao Claude para mostrar o codigo
⚠️ Se algo nao funcionar:
  1. Volte no Claude e diga: "O codigo nao esta funcionando, o que pode ser?"
  2. Descreva o problema que esta acontecendo
  3. O Claude vai te ajudar a corrigir
🚀 Proximo passo:

Agora que voce tem seu arquivo index.html pronto, use o guia "Do Codigo ao GitHub" para publicar seu site na internet!

Rodape