Edite vídeo com Claude Code: guia completo com HyperFrames

Agora é possível editar vídeo a partir da linha de comando, simplesmente descrevendo o que você quer. O HyperFrames, framework gratuito e open-source da HeyGen, transforma o Claude Code em um editor de vídeo: você descreve a edição, ele escreve o código, anima e renderiza em MP4. Sem abrir o CapCut nem o Premiere.

Este guia leva você do zero ao seu primeiro vídeo com cara profissional, com prompts prontos para copiar e adaptar ao seu caso.

O que é e como funciona

O HyperFrames é um framework open-source (Apache 2.0) que permite que agentes de IA componham vídeos escrevendo HTML, CSS e JavaScript. Como os modelos já são excelentes escrevendo código web, editar vídeo vira simplesmente "escrever uma página e animá-la".

Algo importante de entender: o Claude Code não "vê" o seu vídeo nem gera imagens sozinho. O Claude é o diretor e orquestrador. Ele trabalha com dois componentes:

• O framework (grátis): o HyperFrames monta a composição, o timing, as legendas, as transições, os zooms e o render final em MP4.
• Conexões externas (opcionais): ElevenLabs para vozes premium, Kie.ai para imagens de IA, Suno para música gerada.

O truque da sincronização: em vez de "ver" o vídeo, o Claude o transcreve com o Whisper e gera timestamps milimétricos palavra por palavra. Com esses tempos exatos, ele consegue cravar uma legenda, uma imagem ou um efeito sonoro exatamente no milissegundo certo. Por isso os cortes e os efeitos sonoros caem perfeitos.

Boa notícia: vozes TTS com Kokoro, transcrição e todo o render rodam localmente e de graça. As APIs pagas só são necessárias se você quiser subir a qualidade ou produzir em escala.

Requisitos e instalação

Antes de começar, você precisa de:

• Claude Code instalado (app desktop, terminal, VS Code ou onde você o usar).
• Node.js 22 ou superior: verifique com node --version
• FFmpeg: para codificar o MP4 final (brew install ffmpeg no Mac; no Windows, conforme o seu sistema).

Instalação recomendada

Crie uma pasta para o seu projeto e abra-a no Claude Code. Execute este comando ou peça diretamente ao Claude:

npx skills add heygen-com/hyperframes

Olá, por favor instale a skill do HyperFrames neste projeto.
Execute: npx skills add heygen-com/hyperframes
Quando terminar, reinicie a sessão e me confirme que os slash commands ficaram registrados.

Os slash commands que são registrados

• /hyperframes: Autoria da composição: estrutura, timing, captions, transições, TTS.
• /hyperframes-cli: Ciclo de trabalho: init, lint, preview, render.
• /hyperframes-media: Pré-processar assets: TTS, transcrição, remover fundo.
• /website-to-hyperframes: Converter uma URL completa em um vídeo.
• /gsap: Ajuda com animação: timelines, easing, movimento.

Seu primeiro vídeo, passo a passo

Há três formas de começar:

1. Site para vídeo: você passa uma URL e o HyperFrames monta um comercial completo. Ideal para o primeiro resultado rápido.
2. Editar a sua gravação: você tem um MP4 e quer captions, overlays, música e imagens. O caso mais útil do dia a dia.
3. Criar do zero: você descreve o vídeo e o Claude o constrói por completo: títulos, motion graphics, narração e música.

O fluxo recomendado

1. Crie a pasta do projeto e abra-a no Claude Code. Se for editar um MP4, arraste-o para essa pasta. Tudo é local.
2. Dê o primeiro prompt. Diga o que você tem e o que quer. Peça que ele faça perguntas antes de começar.
3. O Claude transcreve com o Whisper e gera timestamps milimétricos. Sobre essa base, ele sincroniza tudo.
4. O HyperFrames Studio abre com preview ao vivo. Se o link não aparecer, diga "rode meu servidor local".
5. Itere com mudanças pequenas e concretas até ficar do jeito que você gosta.
6. Render final: peça "faça o render em alta qualidade" ou use o botão de export no preview.

Usando /hyperframes: tenho um MP4 chamado demo.mp4 neste projeto. É uma intro que gravei falando para a câmera, em português, formato horizontal 16:9.

Quero que a gente edite esse vídeo. Adicione:
- Captions automáticos sincronizados com o que eu digo
- Um overlay em cima dizendo "Editado pelo Claude Code"
- Música de fundo suave que não cubra a minha voz
- Um fade para preto no final

Antes de começar, transcreva o vídeo com o Whisper para ter timestamps milimétricos. Se tiver dúvidas, me pergunte. E se precisar de algum acesso ou API, me avise.

Antes de gerar qualquer coisa com /hyperframes, me faça um storyboard em HTML: liste as cenas com a duração, o texto de cada legenda, qual imagem ou overlay entra e a direção de plano (zoom, transição). Eu reviso, te corrijo e só então construímos. Assim não gastamos tokens à toa.

Biblioteca de prompts

O HyperFrames mapeia adjetivos em linguagem natural para parâmetros técnicos do framework. Você não precisa saber código: usar a palavra certa dá o resultado certo.

Captions e legendas

Descreva a energia das legendas e o Claude escolhe tipografia, tamanho e animação:

• Hype: Bold pesada, scale-pop, 72-96px
• Corporate: Sans limpa, fade + slide, 56-72px
• Tutorial: Monospace, typewriter, 48-64px
• Storytelling: Serif, fade lento, 44-56px
• Social: Arredondada, bounce, 56-80px

Coloque captions estilo hype com scale-pop, palavra por palavra, sincronizados com a minha voz. Destaque os nomes de marca maiores e com a cor de destaque, dê bounce nas palavras emotivas e realce os números de um jeito diferente. Corrija palavras transcritas errado e garanta que as legendas NÃO se sobreponham.

Mude os captions para estilo karaokê: que cada palavra acenda no momento exato em que eu a digo. Mantenha no máximo 4-5 palavras na tela por vez para que dê para ler bem no celular.

Destaque à mão (marker highlights)

• highlight: Traço de marca-texto sobre frases-chave
• circle: Elipse à mão sobre uma palavra
• burst: Linhas que irradiam para momentos hype
• scribble: Rabisco caótico para riscar algo
• sketchout: Quadro desenhado para callouts

Adicione um marker highlight tipo traço amarelo sobre a frase "totalmente grátis", circule "Claude Code" com um círculo desenhado à mão e coloque burst lines ao redor de "sem abrir o CapCut".

Imagens com IA dentro do vídeo

O Claude pode gerar imagens com IA e montá-las sincronizadas com o seu roteiro. O serviço recomendado é o Kie.ai (marketplace por créditos que também inclui o Suno para música).

Quero adicionar imagens geradas com IA ao vídeo. Você fica encarregado de gerá-las com o Kie.ai (te passo a documentação e a minha API key). Passos:
1. Analise o transcript e decida quais imagens valem a pena e em que momento entram.
2. Gere um script para criá-las EM PARALELO (todas ao mesmo tempo).
3. Insira-as sincronizadas com o que eu digo.

Estilo: hand-written, feitas à mão, cores neutras, personagens de palitinho. Quero algo visual que até uma criança entenda. Nada corporativo. Horizontais, cobrindo a tela toda.

Para a cena inicial te dou o logo.png (está no projeto). Integre-o ali. Tenho livres o lado esquerdo e o direito do frame. Se quiser, tire uma captura desse frame para ver a distribuição e coloque-o onde encaixar sem cobrir o meu rosto.

Colorização e color grading

Como o HyperFrames renderiza HTML/CSS, o color grade é aplicado com filtros CSS e camadas com blend modes. É como uma LUT leve: rápido, não destrutivo e reversível.

Aplique ao clipe um color grade cinematográfico teal & orange usando filtros CSS: suba um pouco o contraste (~1.1) e a saturação (~1.15), empurre as sombras para o ciano-azul e os tons de pele para o quente. Adicione uma camada de gradiente sutil com blend mode "teal nas sombras / laranja nas luzes". Cuide para que a minha pele pareça natural. Me mostre o antes e o depois no preview.

Outros looks disponíveis:

• Warm vintage: "grade quente com grão fino e leve vinheta"
• Clean tech: "grade frio, alto contraste, brancos limpos"
• Moody / cine: "sombras esmagadas, baixa saturação, vinheta marcada"
• Pastel soft: "baixe o contraste, levante as sombras, tom pastel"
• Punchy social: "sature forte, contraste alto, cores que saltam"
• B&W editorial: "preto e branco com contraste editorial"

Defina uma paleta de marca (te passo 2-3 cores) e aplique-a de forma consistente: legendas, overlays, fundos das imagens de IA e color grade. Que o vídeo pareça uma peça só. Use variáveis CSS para as cores, assim ajustamos rápido.

Áudio: voz, música e efeitos

O TTS roda local e de graça com o Kokoro (sem API key). Para qualidade premium, conecte o ElevenLabs.

Gere a narração deste roteiro com TTS local (Kokoro). Use uma voz profissional e acolhedora, em 1.0x, e sincronize-a com as cenas. Deixe respiros naturais entre as frases.

Não gostei do voiceover grátis. Gere um novo com o ElevenLabs (te passo a minha API key). Escolha uma voz que soe familiar e agradável em português, ajuste o timing às cenas. Não faça o render ainda, só me entregue no preview para eu ouvir primeiro.

Use assets/musica.mp3 como música de fundo. Abaixe o volume para que fique abaixo da minha voz (ducking), suba um pouco na intro e no encerramento, e faça fade-in no início e fade-out no final.

Te dou a pasta assets/sfx com vários efeitos sonoros nomeados pelo que fazem. Analise-a e coloque-os sincronizados: o "click" quando aparece uma palavra destacada, um "whoosh" nas transições fortes e um "pop" quando entra o logo. Que caiam exatamente no timestamp, nem antes nem depois.

Aproximações, zoom e movimento

A diferença entre um vídeo amador e um profissional costuma ser o movimento. Descreva como o movimento deve parecer e o Claude escolhe o easing certo.

Vocabulário de movimento:

• smooth: Desaceleração natural (padrão)
• snappy: Rápido e decidido (energia alta)
• bouncy: Quica e assenta (dinâmico)
• dramatic: Começa forte, glide longo (ênfase)
• dreamy: Lento e simétrico (cinematográfico)

Em todas as imagens, coloque um efeito Ken Burns sutil: alterne zoom-in e zoom-out lentos, e um pan suave da esquerda para a direita. Movimento dreamy, lento (1-2s). Quando duas imagens estiverem coladas, faça uma transição entre elas.

No momento em que eu digo "totalmente grátis", faça um punch-in rápido (snappy, 0.2s) no meu rosto para dar ênfase, e volte ao plano normal depois da frase. Que pareça intencional, não brusco.

Adicione transições entre todas as cenas (os cortes secos parecem erro). Para as partes informativas, use crossfades calmos; para o reveal final, use um zoom dramático. No máximo 2 tipos, para manter a consistência.

Estilos de vídeo

Um vídeo parece profissional quando tem uma única identidade clara. Nomeie o estilo no seu primeiro prompt e tudo (tipografia, cor, motion, transições) se alinha sozinho:

• Warm grain / analógico: Quente, grão fino, serif elegante. Para storytelling e lifestyle.
• Minimal Swiss / editorial: Grid limpo, sans neutra, cortes precisos. Para explicar com seriedade.
• High-energy social: Captions hype, scale-pop, SFX, zooms rápidos. Para TikTok / Reels / Shorts.
• Hand-drawn / sketch: Ilustrações à mão, personagens de palitinho. Para explainers acessíveis.
• Cold tech / clínico: Frio, alto contraste, monospace. Para produto / SaaS.
• Cinematic / cine: Teal-orange, motion lento, vinheta. Para hero videos e trailers.

O estilo do vídeo inteiro é [high-energy social]. Aplique-o de forma consistente: tipografia condizente, captions hype com scale-pop, color grade punchy, transições rápidas tipo whip-pan e SFX nos momentos de ênfase. Se algo sair desse mood, ajuste para que tudo combine.

Render e exportação

Itere sempre em qualidade draft e reserve o high para o final:

• draft: Para iterar rápido (economiza recursos e tokens)
• standard: Para revisar e pedir feedback
• high: Para a entrega final

npx hyperframes render --output final.mp4

Agora gostei. Faça o render em alta qualidade e me disponibilize o download. Depois gere uma variação vertical 9:16 para Reels: transforme o formato, reacomode os textos e o enquadramento para que fique bom no celular.

Escalar para produção

O primeiro vídeo é o mais lento. O poder real aparece quando você transforma um resultado que adora em uma skill reutilizável: depois é só entregar o material e ele faz tudo.

Adorei como ficou esta edição. Crie uma skill que capture todo este fluxo: transcrever, captions estilo X, gerar imagens hand-drawn, color grade teal-orange, Ken Burns nas imagens, SFX da minha pasta, música e fade final. Documente os passos para que da próxima vez eu só te dê um MP4 novo e você edite igual sem que eu repita nada.

Tenho um vídeo novo, clip-02.mp4, no projeto. Edite-o com a minha skill de edição. Me avise quando estiver no preview.

Checklist antes do primeiro render final

• Claude Code + Node 22 + FFmpeg instalados; skill do HyperFrames registrada
• MP4 ou material dentro da pasta do projeto; nomes claros
• Storyboard aprovado antes de renderizar
• Captions sincronizados, sem sobreposição, com destaques nas palavras-chave
• Color grade consistente em todas as cenas
• Voz acima da música (ducking); SFX nos timestamps certos
• Movimento em tudo: Ken Burns, punch-ins, no máximo 2 tipos de transição
• Um único estilo do início ao fim
• Render em high + variação de formato, se precisar
• Skill criada para repetir em escala sem repetir instruções

Fontes: documentação oficial do HyperFrames (HeyGen). O HyperFrames é open-source (Apache 2.0). As APIs externas (ElevenLabs, Suno, Kie.ai) são opcionais e pagas.