Sites premium com Higgsfield e Claude Code

O que é

Higgsfield AI é uma plataforma de geração de imagem e vídeo por inteligência artificial. Você fornece uma imagem de input e um prompt descritivo, escolhe o modelo de geração desejado e ela gera vídeos cinematográficos de alta qualidade, com movimento de câmera, iluminação, profundidade de campo e qualidade de produção que normalmente exigiriam equipe, locação e equipamento físico.

Exemplos do que ela consegue gerar a partir de uma foto simples:

• Um carro cruzando um cânion com luz dourada
• Um motor rotacionando com reflexo metálico
• Um produto girando sobre fundo premium
• Arquitetura sendo revelada com um drone virtual

Claude Code é a interface de linha de comando da Anthropic para o modelo Claude. Diferente de conversar com o Claude via chat, o Claude Code opera diretamente no seu ambiente de desenvolvimento, ele lê, escreve e edita arquivos no seu computador, executa comandos no terminal e constrói projetos inteiros de código sem você precisar copiar e colar nada.

Quando você dá um briefing para o Claude Code, ele age como um desenvolvedor sênior: faz perguntas, planeja, e entrega código funcional pronto para rodar.

---

Como funciona

O fluxo completo tem duas etapas independentes que se conectam:

Etapa 1. Geração de vídeo com Higgsfield AI

1. Você seleciona a foto do seu produto e cria uma imagem usando o modelo Nano Banana pro. Aqui você quer criar as cenas que serão transformadas em vídeo: no meu vídeo, selecionei as fotos da minha barra de energia da redbull e pedi imagens de um alpinista subindo uma montanha.

Primeiro criei as imagens do produto. As duas imagens de produto deste exemplo não entram aqui: eram peças de uma marca de bebida energética, geradas por IA, e publicar produto de marca alheia num tutorial é risco sem retorno. O passo é o mesmo com a foto do seu produto.

Depois criei 3 cenas de um alpinista. Aqui apenas imagens estáticas que serão usadas como referência para criação do video.

1. Depois de chegar no resultado que você gostou, você vai para a seção de criação de vídeo, escolhe o modelo Seedance 2.0 e seleciona a (ou as) imagem de referência (produto, veículo, espaço arquitetônico, etc.)
2. Escreve um prompt descrevendo o movimento, atmosfera e estilo cinematográfico desejado. Esse o prompt que utilizei:

Cinematic single-take video sequence with three seamless acts, based on the reference images provided.

ACT 1. COLLAPSE (0-3s): Slow cinematic push-in toward the exhausted climber clinging to the dark granite wall. Camera starts wide and slowly moves closer. Arms trembling. Chalk dust falls in ultra slow motion from his fingertips. A single sweat drop falls off his chin. Desaturated, cold blue-grey color grade. Heavy, defeated mood. Camera speed 0.3x.

TRANSITION: Match cut on the climber’s hand reaching into his chalk bag, but instead of chalk, he pulls out the Red Bull Energy Bar. Seamless cut.

ACT 2. THE RITUAL (3-6s): Extreme close-up macro of chalk-covered hands unwrapping the metallic blue and silver Red Bull Energy Bar. Foil crinkles catching warm golden light. Confident slow-motion bite. Microscopic electric blue and gold light particles float upward from the bar like luminous embers. Particles land on skin , veins beneath glow faintly electric blue, photorealistic and subtle. Rack focus from bar to glowing hand. Color temperature shifts from cold to warm during this shot.

TRANSITION: The blue light particles multiply and rush upward along the rock wall, camera follows them up at speed, revealing the climber now moving.

ACT 3. THE EXPLOSION (6-15s): Dynamic upward-tracking shot. The same climber now moves with explosive speed and fluid precision up the wall toward a golden sunset summit. Camera tilted slightly Dutch, tracking upward fast. Chalk dust and blue-white light particles trail behind every hand and foot placement like a comet tail. Skin has a faint electric glow. God rays of golden sunlight burst from above. Anamorphic lens flare cuts across frame as he reaches the top and throws both arms wide open, triumphant. High contrast warm golden and electric blue color grade. Camera speed: real-time with 0.5x slow bursts on key grip moments.

OVERALL STYLE: Hyperrealistic cinematic, ARRI Alexa quality, anamorphic lens, photochemical grain, Red Bull commercial production grade. No CGI-looking effects, everything must feel grounded and photorealistic. Particle effects subtle and organic.

1. Higgsfield processa e entrega um vídeo de alta qualidade em segundos/minutos
2. Você exporta os arquivos de vídeo (mp4 ou similar) e salva tudo em uma pasta que será usada como projeto na próxima ferramenta

Não há necessidade de câmera, set, modelo, locação ou pós-produção. O resultado é material pronto para uso como background de site, hero section ou loop de vídeo.

Etapa 2. Construção do site com Claude Code

1. Você abre o Claude Code no terminal (claude no diretório do projeto)
2. Ativa o modo planejamento antes de qualquer execução
3. Fornece um briefing completo: tipo de negócio, público-alvo, paleta de cores, nome da marca, objetivo do site, arquivos de vídeo disponíveis e o principal: você pede para que a Hero Section do seu vídeo seja o vídeo que você criou no Higgsfield AI.
4. Claude Code faz perguntas de clarificação sobre branding e posicionamento
5. Após aprovação do plano, ele gera o código HTML, CSS e JavaScript completo
6. O resultado é um site funcional com os vídeos integrados como backgrounds, hero sections com parallax, tipografia cinética, transições suaves, estilo Apple ou agência de luxo

O resultado combinado

Sites que antes exigiam:

• Produção de vídeo: R$ 15.000–50.000+
• Agência de design/dev: R$ 20.000–80.000+
• Prazo: 2 a 4 meses

Passam a ser construídos em horas, com custo de assinatura das ferramentas

---

Os conceitos-chave

Prompt cinematográfico (Higgsfield)

Não é o mesmo que um prompt de imagem. Você descreve movimento, ângulo de câmera, velocidade, iluminação e atmosfera. “Câmera drone desce lentamente sobre arranha-céu de vidro ao entardecer, luz dourada refletindo nas janelas, atmosfera de luxo e poder” é um prompt de vídeo.

Hero Section

A primeira seção de um site, o que o usuário vê antes de rolar. É onde o vídeo gerado vai como background full-screen. Define 80% da percepção de qualidade do site.

Parallax Scroll

Efeito onde diferentes camadas da página se movem em velocidades diferentes ao rolar. Cria profundidade e sensação de premium. Claude Code consegue implementar isso com CSS e JS puro.

Tipografia Cinética (Kinetic Typography)

Texto que aparece com animação, revelação progressiva, fade, slide. Muito usado em sites estilo Apple. Claude Code implementa com CSS animations e JavaScript.

Modo Planejamento no Claude Code

Antes de escrever qualquer linha de código, você faz o Claude Code operar apenas em modo de análise e planejamento. Ele descreve o que vai fazer, você aprova, e só então ele executa. Isso evita retrabalho e garante alinhamento antes de gerar centenas de linhas.

Site estático vs dinâmico

O output desse fluxo é um site estático. HTML, CSS, JS puro, sem servidor, sem banco de dados. Pode ser hospedado gratuitamente no GitHub Pages, Netlify ou Vercel. Carrega rápido e é fácil de manter.

Skills - Claude

Durante a criação de vídeos no Higgsfield AI com o Seedance 2.0, eu utilizo o próprio Claude para me auxiliar. Para isso, utilizo a skill abaixo: