Pular para o conteúdo

Testada em uma tarefa realOficial do fabricanteVídeo, imagem e áudio

HyperFrames (HeyGen)

Transforme suas fotos de produto e algumas linhas de texto num vídeo MP4 caprichado e renderizado, feito no seu próprio computador.

Veja o que ela criou

Instale HyperFrames (HeyGen) grátis

Deixe seu email e os passos de instalação abrem aqui mesmo: um prompt para colar na sua ferramenta de IA. Vale para as 149 skills.

Sem spam. Cancele com um clique. Usamos seu e-mail para enviar o curso e dicas de IA.

Nossa nota
8/10
Funciona em
Claude Code, Codex+6 outras

Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Antigravity, OpenCode, Windsurf e mais de 60 ferramentas de IA que leem skills.

Precisa programar?
Não
Tempo até o resultado
25 min
Criado por
HeyGen
Testada em
19 de out. de 2026
O loop de cabeçalho final de 15 segundos: slogan sobre a caneca, o torno, nome e $34, os três esmaltes e depois o frete grátis, terminando no plano de abertura para repetir sem emenda.

A resposta curta

HyperFrames é a skill de vídeo da HeyGen para o Claude Code. O Claude constrói o vídeo como uma página web animada e depois o renderiza em MP4 no seu computador, a partir de um briefing, suas fotos, um site, imagens gravadas ou música. Serve para donos de loja, profissionais de marketing e criadores que querem promoções, loops de cabeçalho, vídeos explicativos ou clipes legendados sem aprender um software de edição. Nosso veredito é 8/10: no nosso teste, ela transformou cinco fotos num loop calmo e premium de 15 segundos para o cabeçalho de um site, pronto para usar, mas você precisa do Claude Code e de algumas ferramentas locais, e vale a pena mudar alguns padrões.

Ideal para: Donos de loja e profissionais de marketing que querem um loop de produto ou de marca caprichado e sem som para o cabeçalho de um site ou um post nas redes, feito com suas próprias fotos e textos.

Quer esse resultado no seu próprio trabalho?

Cadastre-se grátis e instale HyperFrames (HeyGen) em cerca de um minuto. Um email libera os passos de instalação de todas as skills do site.

Sem spam. Cancele com um clique. Usamos seu e-mail para enviar o curso e dicas de IA.

Quando vale a pena usar

Loop de produto para o cabeçalho do seu site

No nosso teste, a dona de uma loja de cerâmica passou cinco fotos, um slogan, um preço, três nomes de esmalte e uma oferta de frete. O Claude devolveu um loop mudo de 15 segundos em 16:9 com transições suaves de foco que termina no plano de abertura, então repete sem salto.

Vídeo de lançamento a partir da página do produto

Passe o endereço da página do seu produto e ela pode capturar o visual e as telas do site e depois montar um vídeo promocional ou um tour pelo site. A skill diz que eles funcionam melhor com 30 a 90 segundos.

Legendas e títulos em vídeos de entrevista

Entregue uma gravação de alguém falando para a câmera ou de um podcast e ela acrescenta legendas simples, ou títulos de nome e cards informativos com design, sem alterar as imagens em si.

Como ter um ótimo resultado

  1. Instale a skill e as ferramentas de que ela precisa

    Instale (passos abaixo) e garanta que seu computador tenha Node.js 22 ou mais novo, FFmpeg e Google Chrome. O Claude pode conferir isso para você.

  2. Reúna seu material

    Coloque suas fotos, logo ou vídeos numa pasta e escreva as palavras exatas que você quer na tela. A skill usa seu texto como está escrito e não acrescenta fatos por conta própria.

  3. Descreva o vídeo numa mensagem

    Diga a duração, onde ele vai tocar (site, YouTube, Reels) e o clima. O Claude pode fazer uma pergunta por vez, como se você quer revisar um storyboard antes e se deve construir com você ou sozinho. Diga "só constrói" para pular essas perguntas.

  4. Revise a prévia antes de renderizar

    O Claude roda as checagens embutidas e mostra quadros estáticos. Depois abre uma prévia em que você pode clicar para mudar textos ou arrastar clipes e pergunta "renderizo agora ou o que mudar?". No nosso teste, os quadros estáticos pegaram um título quebrado e uma caneca cortada antes da renderização.

  5. Renderize e confira o arquivo

    O Claude renderiza o MP4 e o confere. Para um site, peça um arquivo do tamanho certo para a web: a renderização padrão de qualidade máxima no nosso teste tinha 23 MB, e a versão para web tinha 6.6 MB sem perda visível.

Este é o prompt exato com que começamos o nosso teste:

O prompt que usamos
Faça um vídeo de produto de 15 segundos em 16:9 da Speckled Mug para tocar no topo do meu site: minhas fotos, a frase 'Handmade stoneware for slow mornings', o preço $34, os três esmaltes (Speckled Oat, Ash Green, Midnight) e 'Free US shipping over $75'. Calmo, premium, movimento suave. Renderize em MP4.

Como foi a sessão

A conversa do nosso teste, resumida. Cerca de 25 minutos do primeiro prompt até o resultado final.

  1. Você: Faça um vídeo de produto de 15 segundos em 16:9 da Speckled Mug para tocar no topo do meu site: minhas fotos, a frase 'Handmade stoneware for slow mornings', o preço $34, os três esmaltes (Speckled Oat, Ash Green, Midnight) e 'Free US shipping over $75'. Calmo, premium, movimento suave. Renderize em MP4.
  2. AI: É um pedido novo e totalmente especificado, então a camada de intenção da skill não tem nada a perguntar sobre a mensagem. Ela encaminha para o fluxo de vídeo geral (sem URL de site para capturar, e 15 segundos está abaixo da faixa ideal de 30 a 90 segundos da rota de lançamento de produto). Normalmente ela faria aqui duas perguntas sobre o formato da execução (revisar um storyboard antes? construir junto ou me deixar rodar?). Nesta sessão de teste eu...
  3. AI: Antes de escrever qualquer HTML, a skill me fez ler as regras de estilo da casa, composição de vídeo, tipografia e transições. Decisões que vieram desses arquivos: uma paleta clara e acolhedora de "papel aveia" com um único destaque verde-cinza; fontes escolhidas com o script de descoberta de Google Fonts da skill (serifa leve Newsreader mais Hanken Grotesk para a pequena marca), embutidas localmente para as renderizações serem determinísticas; calma...
  4. AI: Uma ideia minha dentro das regras da skill: o último plano volta à primeira foto exatamente no enquadramento de abertura e o texto some, para o vídeo repetir sem emenda como cabeçalho de site.
  5. AI: Os snapshots pegaram três problemas reais que as checagens não pegaram: "The Speckled Mug" quebrou em duas linhas, as transições com desfoque forte puxavam um halo claro das bordas do quadro e a base da caneca estava cortada embaixo. Corrigi (título menor, cenas que passam 64px além do quadro, uma aproximação mais suave), e uma renderização posterior mostrou a linha do preço encostando no cifrão, o que eu também...
  6. AI: Pronto. speckled-mug.mp4 é um loop mudo de 15 segundos em cinco momentos calmos, e poster.png é o quadro do slogan. O que você precisa saber: as amostras de esmalte são aproximações de cor tiradas dos nomes dos esmaltes, não comparadas com suas peças reais. O plano de preço usa a foto da caneca nas mãos, e a caneca nela parece verde, não salpicada. Você pode continuar editando no HyperFrames Studio, ou no app da HeyGen...

O que funcionou e onde deixou a desejar

O que funcionou

  • O vídeo parece realmente premium e calmo: transições suaves de mudança de foco, câmera deslizando devagar, uma serifa elegante e cada linha de texto exatamente como informada ($34, os três nomes de esmalte, a linha do frete)
  • Funciona bem como cabeçalho de site: 1920x1080 H.264, 15.0 s, 6.6 MB, início rápido, e o último quadro bate com o primeiro, então a repetição não tem salto visível
  • As travas de qualidade embutidas são reais: o check audita layout, movimento e contraste WCAG (8 de 8 checagens de texto aprovadas), e as folhas de snapshots facilitaram pegar bugs visuais antes de renderizar
  • Totalmente local e determinístico: sem conta, sem upload, e a renderização levou cerca de 15 segundos

Onde deixou a desejar

  • Várias arestas precisaram de correção manual: as transições com desfoque puxavam halos claros das bordas do quadro, o primeiro título quebrou, e o auxiliar de mapa de animação só rodou depois de fixar a versão de um pacote e apontá-lo para o Chrome
  • Padrões que uma dona de loja não esperaria: a renderização 'delivery' tem 23 MB (pesada demais para uma página inicial), a telemetria anônima de uso vem ligada e o instalador de skills grava 11 skills na sua pasta global de skills do Claude
  • Nada factual foi inventado, mas as cores das amostras de esmalte são aproximações tiradas dos nomes dos esmaltes, e a foto do plano de preço mostra uma caneca verde, não a salpicada

Quer esse resultado no seu próprio trabalho?

Cadastre-se grátis e instale HyperFrames (HeyGen) em cerca de um minuto. Um email libera os passos de instalação de todas as skills do site.

Sem spam. Cancele com um clique. Usamos seu e-mail para enviar o curso e dicas de IA.

Prompts que funcionam

Troque as partes entre colchetes pelos seus próprios dados. Não precisa citar a skill: peça o trabalho e sua ferramenta de IA usa a skill sozinha.

Loop de produto para o cabeçalho do site
Faça um vídeo de produto de [15] segundos em 16:9 do [nome do produto] para tocar no topo do meu site: minhas fotos em [pasta], a frase '[seu slogan]', o preço [$preço], [as opções, como cores ou tamanhos] e '[sua oferta]'. Calmo, premium, movimento suave. Renderize em MP4.
Vídeo de lançamento a partir de uma URL
Faça um vídeo de lançamento de [45] segundos do [produto] a partir da página do meu produto [URL]. É para [YouTube / feed do Instagram / Reels]. A única coisa que os espectadores devem lembrar: [sua mensagem principal]. Me mostre um storyboard antes de construir.
Vídeo explicativo a partir de um post de blog
Transforme este post de blog num vídeo explicativo de [60] segundos sem rosto para [público]: [cole o post ou o link]. Mantenha o tom [simpático / especialista] e acrescente legendas.
Títulos numa gravação de entrevista
Acrescente títulos de nome com design e cards informativos curtos à minha gravação de entrevista [nome do arquivo]. O convidado é [nome, cargo]. Não altere as imagens, só acrescente os gráficos, e depois renderize em MP4.

O que você precisa: Claude Code (exige plano Pro ou superior); o diretório lista o Claude.ai como não prático porque a skill controla ferramentas locais de linha de comando, Node.js 22+, FFmpeg e Google Chrome no seu computador, Suas próprias fotos de produto e o texto exato (preço, oferta, nomes dos produtos), Cerca de 300 MB livres em disco para a CLI e seus caches enquanto ela trabalha.

Como instalar

As skills seguem o padrão aberto Agent Skills, então esta não depende de uma única empresa. Escolha a ferramenta de IA que você usa. Na dúvida? A primeira aba cobre a maioria em um passo só.

Mais fácil: cole isto em sua ferramenta de IA
Instale esta skill para mim para que ela funcione em todos os projetos: rode `npx skills add https://github.com/heygen-com/hyperframes/tree/main/skills/hyperframes -g -y` no meu terminal. Se faltar o Node.js, me diga primeiro como instalar. Quando terminar, confirme que a skill foi instalada e me diga como começar a usar.

Ou faça você mesmo:

Um comando instala a skill nas ferramentas de IA do seu computador. Ele encontra as que você tem e pergunta em quais adicionar: Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, OpenCode e mais de 60 outras.

npx skills add https://github.com/heygen-com/hyperframes/tree/main/skills/hyperframes -g

Você precisa ter o Node.js instalado (grátis, em nodejs.org). A opção -g deixa a skill disponível em todos os projetos.

Bom saber: Também aparece como hyperframes no marketplace oficial da Anthropic; npx skills add heygen-com/hyperframes funciona para outros agentes.

Libere os passos de instalação

Grátis. Deixe seu email uma vez para liberar os passos de instalação das 149 skills e receber as melhores skills novas todo mês.

Sem spam. Cancele com um clique. Usamos seu e-mail para enviar o curso e dicas de IA.

Como verificamos

Confirmamos a skill na fonte original em 18 de outubro de 2026: o SKILL.md está onde deveria, os arquivos foram atualizados no último ano e a licença (Apache-2.0) permite o uso. Depois, em 19 de outubro de 2026, instalamos, usamos na tarefa acima sem mudar a skill e anotamos o que aconteceu, inclusive o que deu errado.

Perguntas frequentes

Preciso saber programar para usar o HyperFrames?

Não. O Claude escreve a página web animada, roda as checagens e renderiza o vídeo, e você descreve o que quer em palavras simples. Você trabalha dentro do Claude Code, e na prévia pode mudar textos e tempos clicando, em vez de editar código.

Do que eu preciso para rodá-lo?

Claude Code, que exige um plano Pro ou superior, mais Node.js 22 ou mais novo, FFmpeg e Google Chrome no seu computador. Nosso teste não precisou de conta na HeyGen, e o vídeo foi renderizado inteiramente no computador.

O HyperFrames funciona no Claude.ai ou no app do Claude?

Na prática, não. A skill controla ferramentas locais de linha de comando para pré-visualizar e renderizar o vídeo, então use-a no Claude Code.

Qual a diferença de simplesmente pedir ao Claude para fazer um vídeo?

Sem a skill, o Claude consegue escrever uma animação, mas não tem um jeito confiável de transformá-la em MP4. Com ela, o Claude segue um fluxo completo: um briefing, um storyboard, regras de design e movimento, checagens automáticas de layout e contraste, uma prévia e depois uma renderização precisa quadro a quadro. No nosso teste, o vídeo de 15 segundos renderizou em cerca de 15 segundos e passou nas 8 checagens de contraste de texto.

Posso mudar o vídeo depois de renderizado?

Sim. O projeto fica no seu computador como arquivos editáveis. Você pode pedir mudanças ao Claude, editar textos e clipes na prévia do HyperFrames ou usar o app desktop grátis da HeyGen, onde você faz mudanças conversando. Depois renderize de novo.

Mais skills que valem a pena