Como fazer vídeos com o Claude Code (sem saber editar): passo a passo grátis

Tutorial da Tecnologia Inventa, por Fernando Novelli. Instagram: @tecnologiainventa.

#Resumo rápido

• O Claude Code escreve a animação como código, e o HyperFrames (grátis, código aberto) transforma esse código em vídeo MP4.
• Você precisa de Node.js 22+, do Claude Code e do HyperFrames, instalado como plugin ou só com as skills.
• O primeiro vídeo sai em 5 minutos com um pedido em português começando por /hyperframes.
• O case completo do Reels: estudar uma referência, roteiro com gancho, narração, sincronização palavra por palavra e revisão antes de exportar.

Aquele Reels foi feito inteiro pelo Claude, a partir de pedidos em português, sem abrir nenhum editor de vídeo. Este é o passo a passo prometido no link da bio: o que instalar, como usar, como estudamos o estilo de um criador de referência e os prompts exatos que usamos. Se você vende pelo Instagram e trava na edição, é aqui que o vídeo deixa de ser o gargalo.

#1. O que é cada coisa

Ferramenta	O que faz	Custo
Claude Code	O Claude rodando no seu computador. Ele cria arquivos, roda comandos e monta o projeto.	Precisa de um plano pago do Claude (Pro ou superior) ou de uma chave de API
HyperFrames	Transforma uma página HTML animada em vídeo MP4, quadro a quadro. Foi feito para agentes de IA usarem.	Grátis, código aberto (Apache 2.0, da HeyGen)
Skills	"Manuais" que ensinam o Claude a usar uma ferramenta direito. O HyperFrames vem com as suas.	Grátis

A sacada: o Claude não "gera" o vídeo como uma imagem de IA. Ele escreve a animação como código (texto, posição, tempo, movimento) e o HyperFrames renderiza esse código em vídeo. Por isso dá para pedir ajustes precisos: "deixa essa transição mais rápida", "troca a cor", "faz o logo girar".

• Repositório: github.com/heygen-com/hyperframes
• Documentação: hyperframes.heygen.com
• Exemplos para se inspirar: hyperframes.heygen.com/showcase

#2. O que você precisa antes

1. Um computador com Windows, Mac ou Linux.
2. Node.js 22 ou mais novo. Baixe a versão LTS em nodejs.org e instale como qualquer programa.
3. Claude Code. Siga a instalação oficial em claude.com/claude-code. Funciona no terminal, no VS Code e no app Claude Desktop (aba Code).

Para conferir o Node, abra o terminal e digite:

node --version

Se aparecer v22 ou mais, está pronto.

#3. Como instalar o HyperFrames no Claude Code

Escolha um dos dois jeitos.

#Jeito 1: como plugin (recomendado)

No terminal:

claude plugin marketplace add heygen-com/hyperframes
claude plugin install hyperframes@hyperframes

Depois, dentro do Claude Code, ative a atualização automática em /plugin, na área Marketplaces.

#Jeito 2: só as skills

npx skills add heygen-com/hyperframes

Vai abrir uma lista. Marque o grupo Core Skills e confirme. É só disso que você precisa: o resto ele instala quando for usar.

#4. Seu primeiro vídeo com o Claude Code em 5 minutos

1. Crie uma pasta vazia para o projeto (ex.: meu-primeiro-video).
2. Abra o terminal nessa pasta e digite claude.
3. Peça o vídeo começando com /hyperframes:

/hyperframes Faz um vídeo vertical de 15 segundos para Reels com o título
"3 erros que travam seu Instagram", um erro por cena, letras grandes,
fundo branco e transições rápidas.

4. O Claude faz algumas perguntas rápidas, monta o projeto, confere os quadros e abre uma prévia no navegador. Nela você pode clicar no texto para mudar, arrastar cenas na linha do tempo e ver tudo antes de exportar.
5. Quando gostar, peça: renderiza o vídeo. Ele salva o MP4.

Se quiser fazer na mão, os comandos são estes:

npx hyperframes init meu-video    # cria o projeto
npx hyperframes preview           # abre a prévia com atualização ao vivo
npx hyperframes render            # exporta o MP4

Dica: se o vídeo abrir sem som dentro do VS Code, não é defeito. O player do VS Code não toca o áudio padrão de MP4. Abra no player do sistema ou no celular.

#5. Como fizemos o Reels (o case completo)

#Passo 1: estudar uma referência

Escolhemos o estilo de motion do Daniel Penin (vídeo "PLR: O Golpe do ano?") como referência e pedimos para o Claude assistir o vídeo com a skill /watch. Ela baixa o vídeo, tira quadros, pega a legenda e entrega tudo para o Claude analisar.

Instalação da /watch, dentro do Claude Code:

/plugin marketplace add bradautomates/claude-video
/plugin install watch@claude-video

O Claude devolveu um relatório com as 27 cenas de motion do vídeo e a "fórmula" do estilo:

Frase-chave na fala, corte para uma cartela, o texto da fala entra letra por letra com a palavra-chave em negrito, 2 a 3 segundos, as letras se espalham, próxima cena.

Os detalhes que fazem o estilo:

• Fundo branco com vinheta cinza nas bordas, alternando com preto para dar contraste.
• Tudo em CAIXA ALTA, uma linha fina e outra grossa, com a palavra importante.
• Texto igual à fala, palavra por palavra.
• Uma cor de destaque só, na palavra de virada (no nosso caso, verde-limão).
• Ícones e objetos entram um de cada vez, quando a fala cita cada um.

Use a referência como estilo: nunca copie trechos, imagens ou a marca de outro criador.

#Passo 2: o roteiro com gancho forte

O primeiro segundo decide se a pessoa fica. O nosso gancho foi o próprio vídeo como prova: "O Claude agora edita vídeo. Esse vídeo aqui? Foi ele que fez." A pessoa está vendo o resultado enquanto ouve a promessa.

Tempo	O que acontece
0 a 4 s	Gancho e prova ("foi ele que fez, sem editor")
4 a 10 s	Como: "só abri o terminal e pedi" (terminal digitando na tela)
10 a 18 s	O que ele faz: animações, legenda, voz
18 a 24 s	A ferramenta: HyperFrames, código aberto, de graça
24 a 27 s	A lição: "você não precisa ser editor, precisa saber pedir"
27 a 31 s	Chamada: link na bio e seguir

O critério de duração é o mesmo do post Reels de 3 minutos: curto ou longo: o menor tempo que cumpre a promessa do gancho.

#Passo 3: a narração

Usamos uma voz clonada rodando no próprio computador. Você pode usar qualquer narração: a sua voz gravada no celular, uma IA de voz ou a voz que já vem no HyperFrames (npx hyperframes tts).

• Escreva como se fala. Se a voz ler "Claude" como "Cláudio", escreva "Clód" no texto da narração. Siglas também: "IA" vira "i-á".
• Tire as respirações entre as frases e encurte as pausas longas. O ritmo fica bem mais animado.
• Confira palavra por palavra. IA de voz às vezes engole palavras. Peça para o Claude transcrever o áudio e comparar com o roteiro.

#Passo 4: sincronizar as animações com a voz

O Claude transcreve a narração com o tempo exato de cada palavra (npx hyperframes transcribe) e faz cada cartela entrar na palavra certa. É isso que faz o vídeo parecer editado à mão.

#Passo 5: revisar e exportar

Antes de exportar, o Claude tira "fotos" de vários momentos do vídeo (npx hyperframes snapshot) e confere se há texto cortado, sobreposto ou fora do lugar. Depois é só renderizar.

#6. Outras skills e lugares para buscar inspiração

Skill ou lugar	Para que serve
/watch	Faz o Claude assistir qualquer vídeo (YouTube, Instagram, arquivo) e explicar o que tem nele. Ótima para estudar referências.
Catálogo do HyperFrames	Centenas de blocos prontos: transições, legendas animadas, gráficos, mapas, botões de seguir. Peça "mostra efeitos do catálogo de transição" ou rode npx hyperframes catalog.
Showcase do HyperFrames	Vídeos de exemplo para copiar a ideia.
/hyperframes	Vídeo de lançamento de produto, explicativo, clipe com música, gráfico ou mapa animado, legenda em vídeo com rosto, cards por cima de vídeo falado e slides. É só pedir o tipo.
/figma	Puxa um design do Figma para virar vídeo animado.

#7. Prompts prontos (é só copiar e trocar o tema)

#Estudar uma referência

/watch <link do vídeo>
Assiste esse vídeo e me entrega o padrão de motion design dele: onde o motion
entra, quanto tempo dura cada cartela, como o texto entra e sai, cores,
fontes e ritmo. Separa as cenas de motion num relatório.

#Criar o gancho

Preciso de um gancho pra um Reels sobre <tema>. O primeiro segundo tem que
ser muito forte e os 4 primeiros segundos excelentes. Me dá 5 opções
diferentes, escolhe a melhor e explica por quê.

#O roteiro completo

Monta um roteiro de 30 segundos pra Reels sobre <tema>, bem direto:
gancho forte, prova, como funciona, uma lição curta e chamada pro link da bio.
Me entrega uma tabela com tempo, fala e o que aparece na tela.

#O vídeo no estilo cartelas

/hyperframes Faz um vídeo vertical 1080x1920 de uns 30 segundos, todo em
motion, com a narração do arquivo audio/voz.wav. Estilo cartela de
tipografia cinética: fundo branco com vinheta cinza alternando com preto,
tudo em caixa alta, uma linha fina e uma linha grossa com a palavra-chave,
texto entrando letra por letra e saindo com as letras se espalhando.
O texto de cada cartela é exatamente a fala. Cada cartela entra na palavra
certa da narração. Uma cor de destaque só, na palavra de virada.

#Logo de abertura com efeito

No começo do vídeo coloca o logo <marca> com um brilho atrás. Ele entra
subindo, chega no meio da tela bem rápido, dá um zoom girando e depois
sobe pra cima da frase.

#Variações para testar

Faz mais duas versões mudando pouca coisa: uma noturna (fundo escuro e
destaque laranja, com um zoom de câmera nas palavras fortes) e outra com
fonte condensada e destaque amarelo. Salva cada uma com um nome diferente.

Variações servem para teste: publique duas versões com os Trial Reels, que mostram o vídeo primeiro para quem não segue você, e fique com a que segurar mais gente.

#Deixar a voz natural

Tira as respirações do áudio, encurta as pausas longas, deixa o ritmo mais
animado sem mudar o tom da voz e confere palavra por palavra se nada foi
engolido. Se algum trecho estiver ruim, gera só ele de novo e encaixa.

#8. Problemas que pegamos (e como resolver)

Problema	Solução
Vídeo sem som no VS Code	Abra no player do sistema ou no celular. O arquivo está certo.
A voz falou uma palavra errada	Escreva a palavra do jeito que se fala no texto da narração ("Clód", "i-á").
A IA de voz pulou um pedaço	Gere em partes menores e junte. Textos longos de uma vez costumam embolar.
Computador travando ou disco cheio	Feche programas pesados (Docker, muitas abas) e exporte um vídeo de cada vez.
Texto cortado na tela do celular	Peça para o Claude conferir a área segura do Reels: nada de texto importante embaixo nem no canto direito.

#Do vídeo ao link da bio

Um vídeo bom resolve metade do caminho. A outra metade é o que acontece quando a pessoa toca no link: a página precisa entregar exatamente o que o vídeo prometeu. Se o seu Reels termina com "link na bio", vale ler como montar uma grade e uma capa que levam ao link e como acompanhar os toques no link do perfil para saber qual vídeo vende, e não só qual viraliza. Se preferir editar no celular, o Edits, da Meta é o caminho mais simples.

#Bastidor: vídeo como código

Como desenvolvedor, o que mais me chamou atenção no HyperFrames é que o vídeo vira um projeto como qualquer outro: arquivos de texto, versões, revisão antes de publicar. Dá para pedir "troca a cor de destaque em todas as cenas" e a mudança acontece em segundos, em vez de refazer clipe por clipe num editor. É o mesmo raciocínio que uso no Curtly e neste blog, em que cada post é um arquivo e entra no ar sozinho na data certa. Quando o processo é texto, dá para repetir, revisar e melhorar sem começar do zero.

#Erros comuns

• Pedir tudo num prompt só. Vá por partes: referência, roteiro, narração, vídeo.
• Não conferir a narração palavra por palavra.
• Copiar a referência em vez de usar como estudo de estilo.
• Exportar sem revisar os quadros na área segura do Reels.
• Esquecer a chamada para o link no fim do vídeo.

#Conclusão

Com o Claude Code e o HyperFrames, você descreve o vídeo e o Claude escreve a animação como código, pronta para virar MP4. Instale o Node 22+, o Claude Code e o HyperFrames, faça o primeiro vídeo de 15 segundos e depois siga o case: estude uma referência, escreva um gancho forte, cuide da narração, sincronize com a voz e revise antes de exportar. Você não precisa ser editor; precisa saber pedir.

#Créditos

• HyperFrames: HeyGen, código aberto (Apache 2.0): github.com/heygen-com/hyperframes
• /watch: Bradley Bonanno, código aberto (MIT): github.com/bradautomates/claude-video
• Referência de estilo: Daniel Penin, vídeo "PLR: O Golpe do ano?". Usado só como estudo de estilo.

Curtiu? Siga a @tecnologiainventa para mais tutoriais de graça e o @ofernandonovelli para acompanhar os bastidores.

Fontes: HyperFrames no GitHub, Documentação do HyperFrames, claude-video (/watch) no GitHub, Claude Code.