Método · Claude Opus 5.5
Sites 3D de alto padrão, do zero ao link publicado.
Um prompt mestre e um passo a passo para qualquer pessoa criar sites como os dos vídeos de referência: um objeto 3D que se transforma com a rolagem, fotos e vídeos em 4K e um painel com números que mudam na tela.
Antes de começar
O método roda no Claude Code, a aba Code do aplicativo do Claude para computador. No chat comum do navegador não funciona, porque o Claude precisa salvar arquivos, tratar vídeo e abrir o Chrome para fotografar e conferir cada etapa.
Você precisa de
- Um plano do Claude com acesso ao Opus 5.5 no Claude Code.
- Computador com Windows 10 ou 11, ou Mac.
- Google Chrome, Python 3.12 com a biblioteca Pillow e ffmpeg instalados.
- Pelo menos 15 GB livres no disco (a gravação do vídeo em 4K gera muitos quadros).
- Placa de vídeo ajuda a acelerar, mas não é obrigatória.
Instalar no Windows
Abra o PowerShell e rode um comando de cada vez:
winget install Google.Chrome winget install Python.Python.3.12 winget install Gyan.FFmpeg pip install pillow
Instalar no Mac
Com o Homebrew instalado, no Terminal:
brew install --cask google-chrome brew install python ffmpeg pip3 install pillow
Se preferir, abra o Claude Code e peça: "verifique se Chrome, Python, Pillow e ffmpeg estão instalados e me diga o que falta".
Escolher o nicho
A regra que decide tudo: o que é geométrico vira 3D em código, o que é orgânico vira foto e vídeo real. O 3D precisa de uma estrela geométrica: prédio, casa, peça, máquina, móvel. Comida, pessoa, carro ou roupa como estrela não chegam ao padrão em código.
| Nicho | Estrela do 3D | Encaixe |
|---|---|---|
| Imobiliária ou construtora | Prédio que se constrói andar por andar, planta explodida | ótimo |
| Energia solar | Casa com painéis, um dia de sol, painel em camadas | ótimo |
| Móveis planejados | Cozinha ou closet montando peça por peça | ótimo |
| Piscinas | Piscina sendo escavada, revestida e enchida | ótimo |
| Relojoaria e joalheria | Mecanismo do relógio explodido | ótimo |
| Arquitetura e engenharia | Maquete, estrutura metálica, galpão | ótimo |
| Clínica odontológica | Implante explodido (pino, conector, coroa) | com cuidado regras de publicidade do CFO |
| Restaurante ou hamburgueria | Fachada, embalagem ou cozinha; a comida fica em vídeo | adaptar |
| Loja de carros | Configurador de rodas ou oficina; o carro fica em vídeo | adaptar |
Dica de conteúdo: escolha um nicho que você consiga explicar em uma frase. "Essa empresa vende economia na conta de luz, e o site mostra isso acontecendo" é melhor do que um nicho técnico difícil de falar.
O prompt mestre
Preencha os campos. O prompt abaixo se monta sozinho, e os trechos que ainda faltam aparecem destacados. Depois é só copiar e colar no Claude Code.
Passo a passo
Conte com uma tarde inteira de trabalho do Claude (de 4 a 8 horas, dependendo do computador) e três momentos em que você precisa aprovar.
Crie a pasta e abra no Claude Code
Crie uma pasta vazia com o nome do projeto, por exemplo
ana-solar. No aplicativo do Claude, abra a aba Code e escolha essa pasta.- No seletor de modelo, escolha Opus 5.5.
- No modo de permissão, deixe o Claude editar arquivos sem pedir a cada um. Ele ainda vai pedir para baixar arquivos e publicar.
Cole o prompt preenchido
Copie o prompt acima com os seus dados e cole como primeira mensagem. Não mude a ordem das fases: elas existem para o Claude conferir o próprio trabalho antes de seguir.
Aprovação 1: conceito e mídia
O Claude volta com o roteiro dos capítulos, a identidade visual e uma tabela de fotos e vídeos para baixar. Confira:
- Todo arquivo com 3840 px ou mais (a coluna de resolução tem que mostrar isso).
- Nenhuma foto com logo de empresa real, sujeira ou cara de foto antiga. Se tiver dúvida, peça para ver a foto maior.
- As fotos parecem do mesmo lugar e da mesma luz.
Responda "pode baixar" ou peça trocas.
Aprovação 2: o 3D
O Claude mostra uma folha com 8 a 10 prints do 3D em momentos diferentes da rolagem. Confira:
- Parece um site de marca grande ou parece videogame? Se parecer videogame, peça um passe de acabamento (frase pronta abaixo).
- Nada cortado, nada atravessando outra coisa, nenhum risco no céu.
- A "vista explodida" se entende sem explicação.
Confira a página no computador e no celular
O Claude monta a página inteira e valida em 320, 375, 600 e 1280 px. Peça os prints do celular e confira se os textos estão legíveis e se nada sai da tela.
Aprovação 3: publicar
Autorize a publicação. O Claude devolve um link do tipo
claude.ai/artifact/.... Esse link nasce privado: para mostrar a alguém, abra o link e use o menu Compartilhar da própria página.Peça os vídeos
Peça o vídeo do site rolando em 4K, em 1080p e na versão vertical. Eles servem para Reels, Stories, apresentação para cliente e portfólio.
Ajuste fino
Use as frases da próxima seção. Seja específico e, se puder, mande o print do que está incomodando.
Frases prontas para ajustes
Copie e cole no Claude Code quando precisar.
O 3D está com cara de videogame. Faça um passe de acabamento: paleta mais sóbria, texturas sutis, formas mais lisas, lente mais longa na câmera. Depois me mostre a folha de prints de novo.
Esta foto está suja (ou datada, ou com logo de empresa). Troque por outra limpa, em 4K e sem marca, e me mostre antes de colocar no site.
O texto está difícil de ler em cima do 3D. Ajuste o véu atrás do texto e o deslocamento do enquadramento, e me mande o print.
Os textos dos capítulos estão se sobrepondo na troca. Faça o texto antigo sair antes do novo entrar.
Troque o nome da marca para [NOVO NOME] em todo o site, inclusive no rodapé e no formulário.
Regrave o vídeo do site inteiro, do zero, e revise uma folha com um quadro a cada 2 segundos antes de me mandar.
Faça a versão vertical do vídeo gravando no layout de celular, sem recortar o vídeo horizontal.
Publique a atualização no mesmo link e confira se todos os arquivos subiram.
Problemas comuns
O prompt já previne todos eles. Se acontecer, mande a solução da segunda coluna para o Claude.
| O que aparece | O que fazer |
|---|---|
| Prints saem em branco ou só com a cor de fundo | Tirar os prints um de cada vez pelo cdpshot.py, que espera a página ficar pronta. Nunca vários Chrome ao mesmo tempo. |
| Faixa ou risco escuro atravessando o céu | Esconder o fundo, o sol e as estrelas durante o cálculo de sombra de contato (GTAO). |
| Acentos quebrados no teste local | Servir a página pelo serve.py, que adiciona o cabeçalho com charset igual ao da publicação. |
| Elementos fixos deslocados nos prints | Usar o modo de teste ?shot&at=..., que simula a rolagem sem rolar a página. |
| Erro ao publicar o arquivo do céu (.hdr) | Salvar o HDRI em base64 dentro de um .txt e decodificar no navegador. |
| Publicação recusada por tamanho | Arquivos de até 15 MB e envios de até 64 MB, em lotes no mesmo link. |
| Vídeo da gravação travando ou pulando | Usar a versão de gravação do vídeo, com quadro-chave a cada 2 quadros. |
| Site pesado no celular | Qualidade baixa automática no celular: sem GTAO, sombra 2048, resolução até 1,5x e vídeos 1080p. |
Antes de vender para um cliente
O site de demonstração usa marca fictícia, números ilustrativos e fotos de banco. Para virar trabalho pago:
- Troque a marca, os números e os textos pelos dados reais do cliente e revise tudo com ele.
- Use fotos e vídeos do próprio cliente quando houver. Fotos de banco servem para ambiente, nunca como "obra nossa".
- Confira as regras do setor: CRECI no imobiliário, CFO e CFM na saúde, e nenhuma promessa de resultado garantido em nenhum nicho.
- Ligue o formulário ao WhatsApp ou ao sistema de atendimento do cliente e tire o aviso de demonstração.
- Publique no domínio do cliente (Netlify, Vercel ou a hospedagem que ele já usa).