Claude Design + Hyperframes: Edição de Vídeos Guiada por Prompts
Eram 23h14 de uma sexta-feira quando finalmente admiti aquilo que vinha evitando há duas semanas.
Eu estava no meu terceiro copo de cold brew, meu terceiro render do mesmo vídeo explicativo de 90 segundos, e minha terceira tentativa de fazer um callout de texto aparecer na palavra “automação” em vez de 0,4 segundos depois. A trilha de áudio era uma gravação de mim mesmo navegando pelo dashboard de um cliente. Os visuais deveriam ser textos na tela enxutos, alguns gráficos e uma tarja inferior com as cores da nossa marca. O básico.
O que eu estava percebendo – da pior forma possível – é que a edição de vídeo guiada por prompt — aquela que todo mundo vem divulgando desde que a HeyGen lançou o Hyperframes em 17 de abril e a Anthropic discretamente adicionou exportações em estilo de vídeo ao Claude Design na mesma semana — tem uma falha bem específica. A IA não escuta o áudio. Ela não consegue. Não faz ideia de quando você diz “automação”. Ela só sabe o que você manda.
Essa é a primeira coisa que ninguém explica nos vídeos de lançamento. E também é o fator que determina, no fim das contas, se esse fluxo de trabalho realmente vai me poupar tempo ou virar mais uma ferramenta engenhosa abandonada após uma semana.
Este post é a versão honesta do que aconteceu nessas duas semanas. Produzi o mesmo vídeo de 90 segundos nas duas ferramentas — primeiro no Claude Design, depois no Hyperframes via Claude Code — e vou mostrar o que cada uma realmente faz, onde cada uma falhou e o padrão de iteração específico que cheguei, e que agora me permite publicar motion graphics guiados por prompt em menos de 30 minutos por vídeo.
Se você anda acompanhando esses lançamentos e se perguntando se finalmente dá para parar de brigar com Premiere ou After Effects, dá sim. Mas não pelos motivos que os demos sugerem. Vou te mostrar onde está o real valor.
As Duas Ferramentas, O Mesmo Problema
Antes de entrar nos testes, precisamos entender direito o formato dessas duas ferramentas. Muitas das análises confusas que vi online as misturam — tratando-as como concorrentes, quando na verdade elas desempenham funções diferentes dentro do mesmo pipeline mais amplo.
Claude Design é um workspace web em claude.ai/design, rodando no Opus 4.7, que você utiliza pelo navegador. Escrevi uma análise completa sobre o que é e por que existe em meu review do Claude Design, mas, resumindo: é a superfície visual da Anthropic para montar designs, slides, protótipos, one-pagers e agora — com o pipeline de exportação atualizado — cenas animadas que você pode exportar como um bundle HTML ou capturar em vídeo na tela.
Hyperframes é um framework open-source de renderização criado pela HeyGen, lançado em 17 de abril de 2026 sob a licença Apache 2.0. Você instala no Claude Code com npx skills add heygen-com/hyperframes e ele adiciona três comandos de barra ao seu agente: /hyperframes para autorar composições, /hyperframes-cli para operações via linha de comando e /gsap para suporte à animação. As cenas são escritas em HTML, CSS e JavaScript puro. O pipeline de renderização transforma cada frame em uma imagem real e, em seguida, costura tudo em um MP4, MOV ou WebM. Roda localmente. Sem nuvem. Sem chave de API.
Ambas as ferramentas batem na mesma barreira no momento em que você tenta integrá-las a um fluxo real de edição: nenhuma delas interpreta áudio. Elas não ouvem sua narração. Não sabem onde as palavras se encaixam na linha do tempo. Só conhecem o que você fornece por texto.
Por isso, a transcrição é o ativo mais importante de todo esse workflow — mais importante que o prompt, que o sistema de design, mais importante do que o modelo que você estiver usando. Passei os três primeiros dias dos meus testes sem perceber isso, e foram três dias desperdiçados.
Deixe-me explicar o que quero dizer.
A Transcrição É o Roteiro
Aqui está o modelo mental que desbloqueou todo esse fluxo de trabalho para mim. Pare de pensar na transcrição como “as legendas”. Comece a pensar nela como a timeline. É nela que a IA lê para saber onde estão as suas palavras. Sem timestamps em nível de palavra, toda animação na tela que você pedir se torna uma adivinhação.
Eu gero transcrições com o Whisper — do mesmo jeito que faço no meu pipeline de edição de vídeo com Claude Code. O formato de saída específico faz diferença. Você não quer apenas um texto puro. Você precisa de um arquivo JSON como este, com timestamps em cada palavra:
{
"words": [
{ "text": "I", "start": 0.00, "end": 0.12 },
{ "text": "automated", "start": 0.14, "end": 0.78 },
{ "text": "this", "start": 0.80, "end": 0.96 },
{ "text": "entire", "start": 1.00, "end": 1.42 },
{ "text": "workflow", "start": 1.46, "end": 2.08 }
],
"segments": [
{ "start": 0.0, "end": 4.2, "text": "I automated this entire workflow..." }
]
}
Com um arquivo assim, você consegue escrever prompts que realmente fazem sentido para a IA. Em vez de “anime a palavra automation no tempo certo”, você pode instruí-la: “leia transcript.json e faça um fade de um highlight box sobre a palavra automated usando os campos start e end dela.” Essa frase é computável. O modelo pode executar isso de forma determinística. Ele acerta no frame toda vez.
Outra possibilidade da transcrição — e é aqui que está a verdadeira força — é buscar padrões no seu próprio discurso. Quer exibir um gráfico sempre que disser um número? Analise a transcrição por strings numéricas. Quer destacar um nome de marca sempre que aparecer? Busque pela string. Quer colorir suas muletas linguísticas de jeito diferente das palavras de ênfase? Escreva essa regra uma vez e aplique a todo vídeo futuro.
No quarto dia de teste, percebi que a transcrição não era apenas um input para o vídeo. Ela era a fonte de verdade do vídeo. Assim que fiz essa mudança de mentalidade, as duas ferramentas passaram a agir como mostravam nas demos de lançamento.
Agora, vou mostrar o que cada uma fez com o mesmo material fonte de 90 segundos.
Teste 1: Claude Design Criou Meu Vídeo Explicativo em Trinta e Sete Minutos
A fonte para este teste foi um vídeo explicativo de cliente para um projeto de dashboard Ramlit. Noventa segundos de narração. Eu passando por três telas, explicando a funcionalidade de cada uma, com três números que queria destacar e um cartão de CTA final.
Fui direto para o Claude Design porque a barreira de entrada é praticamente inexistente. Abrir o navegador. Clicar no ícone da paleta. Colar um prompt. Esse é todo o onboarding.
Meu primeiro prompt foi intencionalmente longo. Aprendi, da maneira difícil no trabalho de extração de marca, que o Claude Design valoriza contexto. Foi mais ou menos isso que escrevi:
“Tenho um vídeo explicativo de 90 segundos para um dashboard de gestão de projetos. Anexado está o transcript em JSON com timestamps em nível de palavra e os screenshots do dashboard. Por favor, construa três cenas animadas que correspondam à minha marca mejba.me (fundo azul-marinho escuro, gradiente de roxo para ciano, tipografia Inter). Cena 1 abre na tela de visão geral do dashboard em 0-18 segundos. Cena 2 destaca o painel de analytics em 18-52 segundos. Cena 3 é um CTA final em 52-90 segundos. Para cada número que eu disser no transcript, anime um cartão de estatística em formato de pílula que aparece centralizado sobre a área relevante da tela, obedecendo os timestamps de início e término do JSON. Exporte como um bundle HTML.”
O que recebi de volta, em cerca de dezoito minutos, foi realmente impressionante. Três cenas compostas. Minhas cores de marca aplicadas corretamente. Cartões de estatísticas animados sobrepostos aos meus screenshots. Um título de introdução em SVG gerado, que parecia feito por um designer júnior em um ótimo dia.
Mas havia desvio. As animações eram disparadas nas divisões de seção, não nas divisões de palavra. Quando narrei “reduzimos o tempo de edição em quarenta por cento”, o cartão de quarenta por cento aparecia entre “edição” e “tempo” — cerca de 0,6 segundos adiantado. Ao longo das três cenas, quatro das cinco animações de estatísticas estavam fora do tempo em mais de meio segundo. Duas pareciam totalmente erradas.
Perguntei ao Claude Design o motivo. A resposta foi exatamente o que eu já suspeitava: a ferramenta estava lendo os limites das cenas pelo prompt, mas não interpretava os timestamps por palavra dentro do arquivo de transcript. Estava encaixando nos segmentos mais próximos. Sincronização a nível de segmento funciona para mudanças grandes de mood. Não serve para um highlight de estatística que precisa aparecer ao citar uma palavra específica.
Esse é o limite estrutural do Claude Design para vídeo. Ele é brilhante em composição, em layout, em consistência de marca, em criar cenas com aparência de designer. Mas não foi feito como um motor de animação frame a frame. Isso também se reflete na exportação — você consegue um bundle HTML, mas, para obter um MP4 real, ou grava a tela do preview ou repassa o bundle para o Claude Code e renderiza com uma segunda ferramenta. Que foi exatamente o que fiz em seguida.
Aqui é importante esclarecer o que o Claude Design realmente faz de melhor em um contexto de vídeo, porque não quero diminuir seu valor. É a forma mais rápida que encontrei para gerar os elementos estáticos do vídeo: cartões de introdução, cartões finais, lower-thirds, templates de destaques, designs de pílulas de estatística, variações de miniaturas. Você dedica quinze minutos no Claude Design, importa cinco templates gráficos polidos para seu projeto no Hyperframes e já pulou a parte mais chata da produção de vídeo — criar o visual. A IA é um designer júnior melhor que a maioria dos juniores com quem trabalhei, especialmente porque lê sua base de código real para buscar tokens da marca em vez de adivinhar.
O que ela não é, é o pipeline completo. É metade dele.
Teste 2: Hyperframes Renderizou o Mesmo Vídeo em Três Iterações
Para o teste com Hyperframes, abri o Claude Code em um terminal novo, clonei uma nova pasta de projeto e executei a instalação:
npx skills add heygen-com/hyperframes
A skill registrou os comandos /hyperframes, /hyperframes-cli e /gsap como comandos de barra dentro da minha sessão no Claude Code. Coloquei o mesmo arquivo de voz em MP3 na pasta assets/, o mesmo transcript.json com nível de palavra e as mesmas três capturas de tela do dashboard. Então digitei:
"/hyperframes build a 90-second composition. Read transcript.json for word-level timestamps. For each numeric value spoken in the audio, render a pill-shaped stat card centered over the corresponding screen image using the exact start and end timestamps from the JSON. Use GSAP for the animations. My brand colors are #0F172A background, gradient accent from #8B5CF6 to #3B82F6 to #06B6D4, Inter typography. Output a single scene composition in HTML with GSAP timelines."
O primeiro resultado saiu em cerca de nove minutos. O Claude Code escreveu um arquivo de composição, configurou as timelines do GSAP, vinculou as animações aos timestamps das palavras extraídos do transcript e renderizou uma prévia no navegador. Assisti à reprodução. Cada stat pill apareceu exatamente na palavra correta. Cada uma delas. Não próximo, não “dentro de um frame” — exatamente no frame.
O motivo pelo qual funcionou é mecânico, não mágico. As composições Hyperframes são apenas HTML. As timelines GSAP aceitam um delay e uma duration em segundos. Quando o Claude Code lê um registro da transcrição { "text": "forty", "start": 34.21, "end": 34.68 } e escreve gsap.to(statPill, { opacity: 1, delay: 34.21, duration: 0.47 }), não há ambiguidades. A ferramenta está fazendo exatamente o que pedi, usando exatamente os timestamps que forneci. O Claude Design estava “chutando”. O Hyperframes estava executando.
O primeiro rascunho não estava perfeito, obviamente. Os stat pills entravam animados com um bounce que não combinava com um vídeo de dashboard sério. A marca do meu cliente é calma e precisa. Dei um feedback com timestamps ao Claude Code:
"At 34.21 seconds, the 40% pill bounces in. Replace the elastic easing with
power2.out. Same change for the pills at 48.9 and 71.4. Also, at 12.5 seconds, the intro title is still fading out when the first screenshot appears — delay the screenshot entrance by 0.3 seconds."
Onze minutos depois, já tinha a segunda iteração. O easing ficou suave. A transição do título ficou natural. Mas o CTA do final tinha o subtítulo sobrepondo o botão por cerca de um segundo. Mais um comentário com timestamp, mais um render, e a terceira iteração ficou como corte final. Tempo total, do zero ao MP4 renderizado: cerca de trinta e quatro minutos — dos quais talvez nove de fato digitando. O resto foi tempo de espera por render.
Fiz esse mesmo vídeo no Premiere no mês anterior. Levei 2 horas e 40 minutos, contando os ajustes. Essa não foi uma diferença pequena. Foi uma diferença estrutural na sensação do trabalho.
O Que a IA Não Consegue Fazer
Se você leu as duas últimas seções e pensou “isso parece bom demais para ser verdade”, você está atento. Aqui estão os principais problemas que enfrentei ao longo de duas semanas, classificados pela frequência com que ocorreram.
Limpeza de áudio bruto ainda demanda um humano. Todo o fluxo guiado por prompts parte do pressuposto de que seu voiceover já está limpo. Nada de sons de “uh”. Não há pausas longas. Nem cortes estranhos de respiração. Se sua gravação bruta estiver ruim, as ferramentas vão felizmente renderizar motion graphics sobre um áudio de baixa qualidade. Use o Whisper para transcrição, faça uma passada rápida no Descript para remover palavras de preenchimento e reexporte o áudio antes mesmo de tocar na transcrição. Abordei esse lado upstream no post sobre workflow de edição de vídeo.
Falhas na pré-visualização em ambas as ferramentas. O preview do Claude Design no navegador travou no meu MacBook Pro M2 aproximadamente a cada 15 quadros. O preview do Hyperframes foi melhor, mas ainda assim ocasionalmente perdeu a sincronização entre o áudio e a timeline GSAP ao arrastar. O render final sempre saiu correto. O bug de preview é real e pode te induzir a corrigir coisas que não estão realmente quebradas. Se algo parecer estranho no preview, renderize um clipe de teste de 10 segundos antes de começar a reescrever prompts.
O consumo de tokens é real. Uma composição de 90 segundos com animações temporizadas, feedback iterativo e três prévias renderizadas consumiu cerca de 340.000 tokens usando o Opus 4.7 no Claude Code, de ponta a ponta. Não é pouca coisa. Para um assinante Pro fazendo um vídeo por semana, é confortável. Para quem pretende rodar uma linha de produção de dez vídeos semanais, será preciso trocar para o Sonnet nas iterações de feedback e reservar o Opus para a construção inicial. Geralmente faço o primeiro draft com Opus, troco para Sonnet nas iterações e só volto ao Opus se algo precisa ser reconstruído estruturalmente.
Efeitos 3D complexos ainda precisam de um humano no loop. O Hyperframes suporta Three.js, e sim, o Claude Code escreve cenas em Three.js tranquilamente. Mas os resultados para qualquer coisa realmente 3D — visualizadores de áudio responsivos, revelações dimensionais, movimentos de câmera em espaço tridimensional — exigem um engenheiro que conheça Three.js para depurar. A IA escreve a estrutura. Um humano frequentemente precisa ajustar a física e o timing. Isso não é exatamente uma crítica. É onde a ferramenta para de substituir expertise e começa a ampliá-la.
Nenhuma das ferramentas edita material bruto. Vale afirmar explicitamente porque um cliente me perguntou isso na semana passada. Você não pode simplesmente jogar uma gravação bruta de 40 minutos no Claude Design ou Hyperframes e esperar um vídeo já cortado como resultado. Essas ferramentas criam a camada de motion graphics que fica sobre um vídeo já editado. O corte ainda acontece no Descript, Premiere ou em alguma automação baseada no Whisper. O que mudou é a etapa após o corte — aquela onde você antes passava três horas ajustando tudo no After Effects.
O Padrão Que Agora Publica Meus Vídeos
Depois de duas semanas nisso, cheguei a um fluxo de trabalho específico que uso para todo vídeo explicativo que produzo. Leva cerca de trinta minutos de trabalho prático para um vídeo de 90 segundos, e funciona assim.
Passo 1: Limpe o áudio primeiro. Grave, transcreva com Whisper, ajuste no Descript, reexporte como MP3. Não pule esta etapa. Uma gravação ruim resulta em um vídeo ruim, não importa o quão boa esteja a camada de animação.
Passo 2: Gere o transcript JSON no nível de palavra. A flag --output_format json do Whisper fornece o que você precisa. Mantenha o arquivo na raiz do projeto. Chame-o de transcript.json. Todo prompt seguinte depende da existência deste arquivo nesse caminho.
Passo 3: Construa os assets estáticos no Claude Design. Cartões de abertura, de encerramento, templates de estatísticas, designs de lower-third. Salve tudo na pasta assets/ do projeto como SVGs ou trechos HTML. Faça isso em uma sessão única de Claude Design de cerca de quinze minutos. Esta é a área em que o Claude Design realmente se destaca.
Passo 4: Estruture a composição no Hyperframes via Claude Code. Escreva o primeiro prompt com o planejamento completo das cenas, referência ao transcript, tokens de branding e caminhos dos assets. Deixe o Opus 4.7 montar o primeiro rascunho. Espere de dez a quinze minutos por render.
Passo 5: Itere com feedbacks com timestamp. Assista à prévia. Quando algo estiver errado, descreva no formato “em 34,2 segundos, [coisa] faz [coisa errada], mudar para [coisa certa]”. Troque o Claude Code para Sonnet nessas iterações para economizar tokens. Raramente preciso de mais de três iterações.
Passo 6: Renderize o MP4 final localmente. npx hyperframes render --format mp4 --output final.mp4. Leva de dois a quatro minutos para 90 segundos de conteúdo no meu M2. Verifique a sincronia do áudio, confira todos os timestamps, publique.
É isso. Duas ferramentas, um transcript, uma ordem específica.
Se eu tivesse que simplificar ainda mais, a versão em uma linha seria: use o Claude Design para os elementos gráficos estáticos, o Hyperframes com Claude Code para a animação composta e sempre — sempre — conduza o timing a partir de um transcript JSON em nível de palavra. Todo o resto é detalhe de fluxo de trabalho.
O Que Isso Significa Para Quem Edita Vídeo Profissionalmente
Quero encerrar com uma reflexão para quem lê este artigo e atualmente trabalha como editor de vídeo, porque venho recebendo mensagens diretas de editores freelancers perguntando, de maneira sincera: estarei sem trabalho em seis meses?
Não. Nem de longe. Mas a profissão está mudando de formato, e o formato dessa mudança importa.
As partes mecânicas da edição — posicionar textos, aplicar keyframes de movimento, garantir a consistência da marca em centenas de cenas, gerar lower-thirds para uma série, renderizar cartões de CTA conforme as especificações — tudo isso agora pode ser comprimido em minutos. Um agente de IA com o Hyperframes instalado fará esse trabalho mais rápido do que você, por um custo menor do que você cobra, e com menos erros.
O que não é compressível, e o que não vejo se tornar compressível nos próximos dezoito meses, é aquilo pelo qual seus melhores clientes realmente pagam: o seu senso estético. É a decisão sobre qual momento de três segundos em uma gravação de doze minutos sustenta toda a peça. É o instinto que diz que um silêncio precisa durar meio tempo a mais. É o julgamento de quando um card estatístico ajuda a narrativa e quando ele desvia a atenção de uma expressão facial prestes a impactar.
É por essas decisões que editores são contratados. As ferramentas que testei neste mês não tomam essas decisões. Elas executam as escolhas que você já fez, em uma velocidade que simplesmente não era possível oito semanas atrás.
Os editores que vão prosperar nos próximos dois anos são aqueles que param de se ver apenas como pessoas que movem clipes pela timeline, e começam a se enxergar como diretores conduzindo uma equipe de animação IA. O trabalho se torna mais estratégico, menos mecânico. O valor da sua hora, se você souber jogar, aumenta — não diminui.
Perguntas Frequentes
Qual é a diferença entre Claude Design e Hyperframes?
Claude Design é um workspace visual baseado na web, acessível em claude.ai/design, usado para criar layouts, slides e gráficos estáticos com consistência de marca. Hyperframes é um framework open source de renderização de HTML para MP4 da HeyGen, que roda via Claude Code para compor e renderizar vídeo real. Use o Claude Design para ativos estáticos; use Hyperframes para saída de vídeo animada, sincronizada por timestamp.
Claude Design ou Hyperframes conseguem ler meu arquivo de áudio?
Não. Nenhuma das ferramentas interpreta áudio nativamente. Ambas exigem uma transcrição pré-gerada com timestamps de nível de palavra — normalmente produzida pelo Whisper — para sincronizar as animações na tela com o conteúdo falado. A transcrição é a linha do tempo. Sem ela, o timing é mera adivinhação.
Como instalo Hyperframes com Claude Code?
Execute npx skills add heygen-com/hyperframes dentro de uma sessão do Claude Code. A skill registra três comandos de barra: /hyperframes para criação de composições, /hyperframes-cli para operações via linha de comando e /gsap para suporte em animações. Instalação completa em menos de um minuto na maioria das máquinas.
Quanto tempo leva realmente para produzir um vídeo dirigido por prompts?
Para um explicador de 90 segundos com motion graphics, meu fluxo atual leva cerca de trinta minutos de trabalho manual: aproximadamente quinze minutos no Claude Design para ativos estáticos e quinze minutos no Claude Code com Hyperframes para compor e realizar duas ou três iterações. Compare com mais de duas horas em um editor tradicional como o Premiere.
Para que tipo de vídeo esse workflow não é indicado?
Edição de imagens brutas (reduzir horas de entrevistas a destaques), qualquer coisa que necessite de física 3D sofisticada sem um desenvolvedor humano de Three.js e vídeos em que a camada de motion graphics demanda carga emocional dependente da intuição de timing humano. As ferramentas potencializam o olhar editorial — não o substituem.
Vamos Trabalhar Juntos
Quer construir sistemas de IA, automatizar fluxos de trabalho ou escalar sua infraestrutura tecnológica? Gostaria muito de ajudar.
- Fiverr (projetos sob medida & integrações): fiverr.com/s/EgxYmWD
- Portfólio: mejba.me
- Ramlit Limited (soluções empresariais): ramlit.com
- ColorPark (design & branding): colorpark.io
- xCyberSecurity (serviços de segurança): xcybersecurity.io
