HyperFrames: como criar vídeos com o Claude Code e outros agentes de IA

O HyperFrames é um projeto de código aberto da HeyGen que transforma páginas em HTML, CSS, imagens, áudio e animações em vídeos MP4. A ideia é simples: você descreve o vídeo em palavras, o agente de IA escreve o projeto numa pasta do seu computador e o HyperFrames reproduz e renderiza o resultado. O código está no GitHub, no repositório heygen-com/hyperframes, sob a licença Apache 2.0.

A peça central são as skills, pacotes de instruções que o agente lê antes de trabalhar. Elas ensinam o ciclo de produção: planejar o vídeo, escrever um HTML válido, ligar as animações, adicionar mídia, revisar, abrir uma prévia e renderizar. Segundo a documentação oficial, funcionam com Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot, VS Code e outros agentes que aceitam skills.

Serve para quem quer fazer vídeos curtos sem abrir um editor tradicional. O repositório cita vídeos de lançamento de produto, explicações com gráficos e mapas animados, vídeos para redes sociais com legendas e música, e roteiros que viram vídeo a partir de documentos ou sites. Também dá para legendar um vídeo seu de entrevista ou cortar as pausas longas, sem mexer na gravação original.

Antes de instalar, você precisa de três coisas. A primeira é um agente de IA que trabalhe numa pasta do computador, como o Claude Code. A segunda é o Node.js na versão 22 ou mais nova, com o npm. A terceira é o FFmpeg, que gera o arquivo MP4. Para conferir se está tudo certo, rode npx hyperframes doctor no terminal.

No Claude Code, a HeyGen recomenda instalar o plugin com dois comandos no terminal: claude plugin marketplace add heygen-com/hyperframes e, em seguida, claude plugin install hyperframes@hyperframes. Depois, abra uma nova sessão do Claude Code ou rode /reload-plugins na sessão atual. Com o plugin, a skill principal se chama /hyperframes:hyperframes.

Se você usa outro agente, ou prefere as skills avulsas, entre na pasta do projeto e rode npx skills add heygen-com/hyperframes. Na lista que aparece, escolha o grupo Core Skills, que já basta para começar. Outra opção é npx hyperframes skills update, que instala o conjunto principal sem perguntas. Nesse caso, a skill principal se chama /hyperframes. Abra uma nova sessão do agente depois de instalar.

Para o primeiro teste, abra o agente numa pasta vazia e peça algo como: Usando /hyperframes:hyperframes, faça uma introdução de produto de 10 segundos para https://example.com. Troque o endereço pela página que você quer mostrar. O agente monta o projeto, confere o código e abre uma prévia local. Você assiste e pede ajustes na mesma conversa.

Para rever o vídeo depois, rode npx hyperframes preview dentro da pasta do projeto. A prévia abre no navegador, num editor onde também dá para mexer à mão. Para gerar o arquivo final, rode npx hyperframes render --output final.mp4, ou peça ao próprio agente que faça a renderização.

Quem tem um padrão visual pode usar o frame.md. Ele adapta o design.md da sua marca, o arquivo que descreve o estilo visual, para o formato de vídeo, com regras de ritmo, escala e movimento. No site hyperframes.studio/design você envia o seu design.md, recebe o frame.md e coloca esse arquivo no projeto. Há também modelos prontos para ajustar.

Sobre custos: a documentação diz que o HyperFrames é gratuito. A renderização, a prévia e alguns recursos, como vozes Kokoro e remoção de fundo, rodam no seu computador sem custo. O que se paga é o agente de IA, cobrado no plano dele. Vozes, avatares e clipes gerados pela HeyGen consomem créditos da HeyGen, e só quando você pede. Uma das skills extras, a /reverse-any-video, faz parte do HyperFrames Pro.

Vale ter alguns cuidados. A qualidade do vídeo depende muito do modelo de IA: a própria HeyGen diz que os modelos mais fortes ainda acertam melhor o ritmo e o acabamento. Comece com vídeos curtos, revise a prévia antes de publicar e confira se você tem direito de usar as imagens, músicas e marcas que coloca no vídeo.