🐶 Site interativo com Claude Code + Google Flow

Nível 3 · 🐷 Circe · ⏱️ ~30 min · Pré-requisitos: conta Google com créditos no Flow (o painel mostra o custo de cada geração), conta Claude com acesso ao Claude Code, Claude Code (app desktop) instalado e uma imagem do personagem ou produto

📌 Pra que serve

Serve para quem quer uma landing page de impacto para café, pet shop ou qualquer negócio, sem programar. O vídeo traz a legenda "Site de R$ 20.000". Isso é a chamada do autor, não uma garantia de preço.

🛠️ Passo a passo

Parte 1: gerar o vídeo no Google Flow

1. Abra o Google Flow pelo Google. Use o primeiro link do resultado (o link oficial está abaixo).
2. Clique em Novo projeto.
3. Arraste a imagem que você quer animar para dentro do projeto. No vídeo é um filhote de cachorro em estilo 3D, sentado numa almofada e segurando um biscoito.
4. Cole o prompt de animação na caixa de texto. Na tela, o prompt fala de manter o personagem e a iluminação da referência. O texto exato não aparece legível no vídeo.
5. Clique no seletor de configurações, logo abaixo da caixa, e ajuste:
- Vídeo (não Imagem)
- Proporção 16:9
- Modelo Omni 1.1 Flash (o autor fala "Omni Flash")
- Resolução 720p
- Duração 10 s
- Quantidade x1
6. A tela mostra o custo da geração, que no vídeo aparece como 15 créditos. Confira o saldo e dê Enter (a seta de enviar). O Flow começa a criar o vídeo.
7. Quando terminar, clique nos três pontinhos do vídeo, depois em Fazer download e escolha o tamanho original.
Parte 2: montar o site no Claude Code

8. Crie uma pasta (no exemplo, "PetShop") e salve nela o vídeo baixado e a imagem original. Os dois arquivos precisam ficar juntos.
9. Abra o Claude Code e clique em Novo.
10. Selecione a pasta onde estão o vídeo e a foto. Ela aparece como "Local" com o nome da pasta, perto da caixa de texto.
11. Cole o prompt do site na caixa de texto. O autor não mostra o texto completo e diz que o envia por Direct. Um trecho aparece de relance na tela e descreve a ideia:
- transformar o vídeo em frames e montar uma sprite sheet;
- criar um sistema de animação em canvas com crossfade entre os frames;
- quando o mouse se move, pausar o vídeo e avançar ou retroceder os frames;
- carregar o vídeo como Blob.
12. No seletor de modelo, escolha Fable 5.1 (se ele não aparecer na sua conta, use o modelo mais capaz disponível) e deixe o modo em Auto.
13. Dê Enter. O Claude Code lê os arquivos da pasta, segue o prompt e gera o site.

⚠️ O que ficou de fora

• O prompt exato da animação (Flow) e o prompt do site (Claude Code) não aparecem por inteiro. O autor os entrega por Direct, depois de um comentário no post. Os trechos que deu para ler estão nos passos 4 e 11. Dá para tentar escrever um prompt próprio a partir deles.
• O vídeo não mostra como publicar o site nem o resultado final fora da tela do navegador. Ele também não mostra os ajustes depois da primeira geração.
• O vídeo não explica planos, preços nem como conseguir créditos no Flow ou acesso ao Claude Code. Veja isso nas páginas oficiais.

💡 Dica: gere o vídeo em 1x primeiro e guarde os créditos. Só gere outras versões se o personagem se mexer de um jeito estranho. Peça ao Claude Code ajustes pontuais, como textos, cores e botões, depois que o site abrir.

🔗 Links e instalação

• Fonte: https://www.instagram.com/reels/Dd

• Google Flow: https://labs.google/flow
• Claude (download do app desktop): https://claude.ai/download
• Documentação do Claude Code: https://docs.claude.com/en/docs/claude-code/overview

Se preferir usar o Claude Code pelo terminal, em vez do app desktop, é preciso ter o Node.js instalado (https://nodejs.org). Depois rode:

copiarnpm install -g @anthropic-ai/claude-code

Entre na pasta com o vídeo e a imagem e rode:

copiarclaude