Tutorial completo sobre como criar sites profissionais usando Claude…

INEMA

Passo a passo:

Setup inicial (VS Code → extensão Claude Code → abrir pasta do projeto)
Hack 0: criar e usar CLAUDE.md como “prompt fixo”
Hack 1: ativar/usar a Front-End Design Skill
Bônus: criar pasta brand_assets (logo + guidelines) e referenciar com @arquivo
Hack 2: usar o screenshot loop para iterar visualmente (e quando desativar)
Hack 3: clonar site por referência (screenshot + CSS) e depois aplicar branding
Hack 4: melhorar com componentes individuais (ex.: 21st.dev) e iterar com feedback
Deploy: pipeline GitHub → Vercel, com a regra de testar local e só dar push quando aprovar

🏁 Conclusão – Os 5 Hacks⌗

claude.md → Sistema base
Front-End Design Skill → Layout moderno
Screenshot Loop → Iteração automática visual
Inspiração (sites completos) → Clones inteligentes
Componentes individuais → Diferencial visual único
Deploy GitHub + Vercel → Publicação profissional

📌 Resultado Final⌗

Com prompts simples você consegue:

Landing pages completas
Branding aplicado automaticamente
Animações modernas
Deploy automatizado
Iteração visual assistida por IA

Tudo isso mesmo sendo iniciante.

🎯 Objetivo⌗

Ensinar 5 hacks simples para usar o Claude Code e criar sites profissionais e bem designados, evitando aparência “AI vibe coded”, mesmo para iniciantes.

🛠️ Configuração Inicial⌗

1️⃣ Instalar VS Code⌗

Baixar e instalar o Visual Studio Code
Instalar a extensão Claude Code
Fazer login com plano Pro ou Max (não funciona no gratuito)

2️⃣ Criar um Projeto⌗

Criar uma pasta vazia
Abrir no VS Code
Trabalhar com:
Arquivos (lado esquerdo)
Agente Claude Code (lado direito)

🔹 Hack 0 – Arquivo `claude.md` (Base do Projeto)⌗

Antes de tudo, criar um arquivo claude.md.

O que é?⌗

Funciona como um system prompt permanente:

É lido antes de qualquer ação do Claude.
Define regras fixas do projeto.
Garante consistência.

Importante:⌗

Deve ser conciso
Pode precisar de ajustes ao longo do projeto

Ele inclui:

Regras de design
Uso de screenshot workflow
Uso de habilidades (skills)

🔹 Hack 1 – Front-End Design Skill⌗

O que são Skills?⌗

São instruções personalizadas em markdown que Claude pode ativar automaticamente quando necessário.

Por que usar?⌗

Melhora muito:

Layout
Animações
Aparência profissional
Modernidade do design

Sem a skill → ~40% de qualidade Com a skill → ~60%+ de qualidade inicial

Como instalar?⌗

Executando comandos no Claude Code (instalação global).

🎨 Branding Inteligente⌗

Criar pasta brand_assets com:

Logo
Brand guidelines (cores, tipografia, ícones)

O Claude:

Lê esses arquivos
Aplica automaticamente identidade visual
Pode ser guiado usando @arquivo

Resultado: landing page completa com:

Hero section
Navbar
Estatísticas
Testemunhos
CTA final
Animações

Tudo com um prompt simples.

🔹 Hack 2 – Screenshot Loop (Iteração Automática)⌗

Ideia:⌗

Claude tira screenshots do próprio site e:

Analisa visualmente
Compara
Corrige
Repete (2 passes ou mais)

Como funciona?⌗

Usa Puppeteer
Cria pasta temporary_screenshots
Faz revisão automática

Isso permite:

Ajustes visuais inteligentes
Menos intervenção manual

⚠️ Cuidado:

Pode entrar em loop com animações
Às vezes é melhor desativar

🔹 Hack 3 – Clonar Sites para Inspiração⌗

Processo:

Escolher site inspiração (Dribbble, Awwwards, etc.)
Tirar screenshot completo (F12 → console → screenshot)
Copiar estilos CSS
Dar screenshot + estilos ao Claude
Pedir para clonar

Claude:

Constrói versão semelhante
Usa screenshot loop para comparar
Ajusta até ficar próximo

Depois:

Aplicar suas cores
Inserir logo
Adaptar textos

Resultado: template altamente profissional.

🔹 Hack 4 – Componentes Individuais⌗

Ao invés de copiar sites inteiros:

Usar bibliotecas como 21st.dev
Copiar componentes específicos:
Backgrounds animados
Botões
Shaders
Waves
Microinterações

Importante:

Se for animação → desativar screenshot loop
Iterar manualmente
Ajustar contraste, legibilidade e estética

Essa etapa deixa o site realmente único.

🔹 Hack 5 – Deploy Profissional (GitHub + Vercel)⌗

Problema:⌗

Tudo está local.

Solução:⌗

1️⃣ GitHub⌗

Criar repositório
Autenticar Claude
Push do projeto

2️⃣ Vercel⌗

Conectar ao GitHub
Importar projeto
Deploy automático

Pipeline:⌗

Claude → GitHub → Vercel → Site Online

Sempre que:

Novo commit no GitHub
Vercel atualiza automaticamente

🧠 Fluxo Ideal de Trabalho⌗

Trabalhar localmente
Testar mudanças
Aprovar visual
Mandar fazer push
Deploy automático

Importante adicionar regra no claude.md:

Só enviar para GitHub quando eu autorizar.

⚠️ Bypass Permissions Mode⌗

Permite:

Claude rodar comandos sem pedir confirmação

Risco:

Pode executar comandos perigosos

Uso recomendado:

Só enquanto você estiver supervisionando

Guia para iniciantes na criação de sites incríveis com Claude Code

Cinco dicas simples que você pode usar no Claude Code para criar e projetar sites melhores. Não são truques complicados que exigem anos de experiência em programação. São técnicas práticas que qualquer pessoa pode começar a usar imediatamente, mesmo que nunca tenha usado o Claude Code antes.

Vou te mostrar cada truque passo a passo para que você veja exatamente como eles funcionam em tempo real. Ao final, você terá criado seu próprio site profissional e personalizado do zero, sem precisar de nenhum .

Crie Sites Incriveis com Claude Code

chatgpt.com ↗