HYPER
HyperFrames no Claude Code: tutorial de instalação e uso
O HyperFrames é a ferramenta de código aberto da HeyGen que transforma um pedido escrito em vídeo MP4. O Claude Code monta o vídeo como uma página (HTML e animação), você confere a prévia e manda renderizar.
Pra quem usa o Claude Code e quer animação, abertura, vídeo de produto ou explicativo sem abrir editor. Precisa de Node.js 22 ou mais novo e do FFmpeg no computador.
Passo a passo
Confira os requisitos
Você precisa do Claude Code logado, do Node.js 22 ou mais novo e do FFmpeg, que é quem gera o MP4. O comando de diagnóstico abaixo mostra o que falta.
Instale o plugin
Rode os dois comandos de instalação no terminal. Depois abra uma sessão nova do Claude Code, ou digite /reload-plugins na sessão aberta.
Peça o vídeo
Numa pasta vazia, chame a skill com /hyperframes:hyperframes e descreva o vídeo. Use o prompt abaixo como base. Em vídeo mais longo, com história, ele te oferece três linhas de roteiro pra escolher antes de montar.
Veja a prévia
O Claude Code monta o projeto e abre a prévia no navegador. Pra abrir de novo, rode o comando de prévia dentro da pasta do projeto. Peça os ajustes por texto, um de cada vez.
Renderize o MP4
Com a prévia aprovada, rode o comando de render ou peça pro Claude Code renderizar. O arquivo final sai na pasta do projeto.
Entre na conta da HeyGen só se quiser apresentador
Animação, texto e gráfico rodam sem conta. Apresentador falando (avatar), vozes da HeyGen e outros modelos de geração usam a conta e os créditos da HeyGen. O login é pelo comando abaixo, no seu terminal.
Prompts para copiar
Diagnóstico dos requisitos (no terminal)
npx hyperframes doctor
Instalar o plugin (no terminal)
claude plugin marketplace add heygen-com/hyperframes claude plugin install hyperframes@hyperframes
Pedido de vídeo pra colar no Claude Code
Usando /hyperframes:hyperframes, crie um vídeo vertical 9:16 de [DURAÇÃO, EX.: 20 SEGUNDOS] pra Reels. Assunto: [O QUE O VÍDEO MOSTRA, EX.: OS 3 SERVIÇOS MAIS PEDIDOS DO SALÃO]. Negócio: [NOME], em [CIDADE]. Texto que aparece na tela, na ordem: [FRASE 1] / [FRASE 2] / [FRASE 3] / [CHAMADA FINAL]. Cores e clima: [EX.: FUNDO ESCURO, DOURADO, ELEGANTE]. Arquivos que estou te dando: [LOGO, FOTOS OU 'NENHUM']. Antes de montar, me mostre o roteiro cena por cena, com o tempo de cada uma, e espere eu aprovar. Depois monte e abra a prévia. Não invente preço, depoimento nem número. Não use imagem de pessoa que eu não enviei. Deixe o texto dentro da área segura do Reels, longe das bordas de cima e de baixo.
Reabrir a prévia (no terminal, dentro da pasta do projeto)
npx hyperframes preview
Renderizar o MP4 (no terminal, dentro da pasta do projeto)
npx hyperframes render --output final.mp4
Entrar na conta da HeyGen (só pra avatar e modelos pagos)
npx hyperframes auth login
Links
- HyperFrames no GitHubRepositório oficial da HeyGen, com o código, os comandos e os exemplos.
- Guia do HyperFrames com Claude CodePasso a passo oficial de instalação e do primeiro vídeo no Claude Code.
A instalação tem dois comandos, mais Node.js e FFmpeg. O plugin é gratuito, mas o uso do Claude Code conta no seu plano.
Apresentador virtual falando não vem pronto na parte gratuita. A documentação da skill de mídia coloca o vídeo com avatar na conta de créditos da HeyGen. Confira o valor na página antes de usar.
O tempo de render depende do tamanho do vídeo e do seu computador. Não achei na fonte oficial o número de noventa segundos.
Conferido em 14/11/2026. Ferramenta muda rápido: se algo não bater, me avisa no direct.