Faça vídeos de produto com IA que fazem as pessoas parar de rolar o feed
Nove filmes reais, os primeiros quadros que mudaram e um fluxo de trabalho prático para transformar uma atualização de produto em vídeo para redes sociais — com Claude Code, HyperFrames e prompts reutilizáveis.
Exibição de casos
Vídeo de lançamento do OpenDesign Motion
Prompt de recriação (o prompt em si está em inglês)
A 37s 16:9 launch film, "Introducing OpenDesign Motion" — the open-source alternative to Claude Motion. Playful, premium, minimal text, cut to an upbeat 115 BPM funk track.
Open on a living oil-painting sky where a prompt types itself in the OpenDesign composer; on send, the letters fly into a 3D title. On the drop, the Claude logo appears and "The open-source alternative" slams in above it. Pull back into a tilting wall of motion films and dive into three of them. Beat break: "Not just Opus 5.5." Then "Any model. Any agent." with logos flicking on the beat. In the real OpenDesign workspace, one click on the model pill spins a floating reel of models while the preview swaps films. The preview morphs into the OpenDesign logo, becomes a 3D die rolling one case per face (each arrow styled like its film), and lands on the classic mark — arrow spins on the final hit, "OpenDesign Motion", open-design.ai.Versão vertical
Vídeo de promoção da Motion Week
Prompt de recriação (o prompt em si está em inglês)
A 40s 16:9 main-tweet film for "OpenDesign Motion Week" (Oct 20–27): DeepSeek V4.1 Flash runs at DeepSeek's official off-peak price all day for a week. Key line: "Opus 5.5-level motion. DeepSeek off-peak price." Glitch-hop track, dense playful motion, soft-shadow real-UI cards, Albert Sans with green italic accents. Never hard-shadow sticker style.
A price chart peaks under a DeepSeek ticker card; the OpenDesign arrow cursor grabs the peak and drags it down into a valley. A 3D "50% / Off-peak price" flips to "100% / Full model" with the chip "Official DeepSeek API · not quantized". A split-flap board flips "OCT 20 – 27" to "$60 / WEEK" as the official GO plan logo draws on; tiles compare ×0.5 vs ×0.25. Quick reset beat: the arrow turns once, the 5-hour and 7-day bars refill, "For every subscriber." Giant knockout letters "MOTION" act as windows into motion films; dive in for a beat-cut montage. Then the real flow: OpenDesign composer, Motion design chip, prompt, frames assemble, film plays → an X compose window, post, likes. Four reward objects, one per 1.5 beats: membership (GO/PLUS/PRO/MAX logos), creator verification, early beta access, usage reset card. A pill "Tag @OpenDesignHQ for a chance to win" rides over a tilted wall of posts for ~4s; the posts tile into a mosaic OpenDesign mark and the cursor arcs home into the arrow slot on the final hit.Vídeo de esclarecimento de preços
Prompt de recriação (o prompt em si está em inglês)
A 45s 16:9 comedic clarifier for OpenDesign Motion Week, with a cute original mascot and a sweet voiceover. Bouncy cute track (~150 BPM). Frame 0 is a full cover card, no entrance: OpenDesign logo, "// quick clarification · Motion Week, Oct 20 – 27", headline "DeepSeek off-peak week, explained." and chips "$60 a week? / Every plan 2× / Off-peak 24/7 / Full model".
Mascot: an original cute girl drawn in halftone — round face, big glossy eyes with two highlights, twin tails with curled ends, blue bows, pink heart-shaped sunglasses, an OpenDesign-logo pin. She is smug: "Think $60 is less than $120?" Record scratch: "Think again." A blue wipe: "It's $60 per week." Cards: usual week $30 vs this week $60, 2× stamp. "You read half. It's double." Then every plan doubles for this model (Go $30→$60, Plus $40→$80, Pro $90→$180, Max $150→$300 per week; resets every 7 days), so this month is "$150+, not $120". A 24-hour dial: off-peak price 24/7. "The full model." Official DeepSeek API, not quantized. A dotted globe with pins: "We serve users worldwide. In some regions, check your network and IP." "Questions? Find us on Discord." End card: "double. all week." Keep it generous and upbeat; never show the offer ending.Vídeo de configuração com um clique
Prompt de recriação (o prompt em si está em inglês)
A 47s 16:9 promo for OpenDesign's One-click agent setup. Happy cartoon track (~95 BPM), playful and eye-catching rather than faithful to the website's design spec. Frame 0: "OpenDesign API into [agent] in one click." with chips for Claude Code, Codex, Grok Build, OpenCode, OpenClaw, Hermes Agent; on each beat the agent name and a full-screen brand-colour flood swap.
Then the green one-click button is clicked on every beat and turns into something new each time: a toggle, a key in a lock, a slot machine of agents, an orbit of models, a crumpled .env file, a plug meeting a socket, confetti. The OpenDesign logo appears, the camera dives into its arrow, and the arrow grows eyes and becomes the guide. It walks through the real pages: OpenDesign app Upgrade → pricing (Go) → checkout ($8 first month) → console → API Keys → "One-click agent setup" → install CC Switch (free, open source) → pick Claude Code + model (default deepseek-v4.1-flash) → "Import into CC Switch" → confirm → a new key "Claude Code · Mac" turns Active. "Your original config is kept. Switch back anytime." Close with "One click. Any agent. Any model." and the path open-design.ai → API Keys → One-click setup; the guide flies back into the logo ring on the final hit.Vídeo tutorial da API
Prompt de recriação (o prompt em si está em inglês)
A 67s 16:9 tutorial: "Use the OpenDesign API in your agent." Playful funk track, no voiceover, English on-screen text. Frame 0 states the topic with agent chips (Claude Code, Codex, Hermes, OpenCode, + more).
Hero character: the arrow from the OpenDesign logo, acting as the cursor. Opening: on each beat the screen floods with a different agent's brand colour while API keys rain into a messy pile, then implode into "One key." Show a wall of supported model logos (official icons from open-design.ai/pricing, never redrawn), then the agents they plug into. Then 3 clear steps in recreated product UI: 1) subscribe to Go monthly ($8 first month, then $10), 2) open the console → API Keys → Create API key, 3) paste the base URL and key into your agent (Chat Completions / Responses: https://amr-link.open-design.ai/v1; Anthropic Messages for Claude Code: https://amr-link.open-design.ai). Mention DeepSeek V4.1 Flash auto-upgraded to 1017 and the 5-hour / 7-day usage reset. Tease One-click setup (coming soon): "3 steps → 1 click", "Click once. Every agent ready." Mask all keys and emails (sk-amr-••••, [email protected]).Vídeo de novidades
Prompt de recriação (o prompt em si está em inglês)
A 22s 16:9 promo whose only goal is to get people to open open-design.ai/updates. Playful and bouncy, built in Three.js. Lime (#87EA5C) and ink, two-tone 3D type (ink faces, lime sides) shot at eye level so it reads on a phone.
A gummy, jelly-like 3D "39" (releases since Apr 28) drops in and hops with squash-and-stretch, then flips to "67" (updates). Real update cards swirl around it; four milestone cards fly at the camera: Plugin Everything, Team workspace, Arena, Motion. The cards fall and a 3D "Can't keep up?" lands. A thick 3D screen shows the real Updates page; the cursor taps RSS. The URL "open-design.ai/updates" drops in letter by letter, and an extruded OpenDesign logo lands on the final hit. No video clips, no stat slides.Vídeo de exemplos de design
Prompt de recriação (o prompt em si está em inglês)
A 34s 16:9 promo for the OpenDesign Showcase (open-design.ai/showcase), a growing library of AI design examples, each with the full prompt that made it. Modern Apple-ad electronic track; smooth, continuous camera (no shaking or beat punches); one main message per screen, held long enough to read.
Frame 0 already carries the headline over a live, moving case (the Harbor Skirmish FPS island): "98+ AI design examples. Every prompt included." The camera glides back into a tilted 3D wall of real cases playing as footage, not screenshots. A giant word "Motion" appears with each letter windowing a different motion film; dive into the "o" for four beat cuts. Then a case goes full-bleed and its prompt card slides up, the prompt types out, a cursor clicks "Copy prompt". Same prompt, different models: side-by-side outputs with white monochrome model logos on a 3D arc. Never imply a fixed size — say "and counting", "latest models". End on the OpenDesign logo and the URL.Vídeo de uso
Prompt de recriação (o prompt em si está em inglês)
A 19s 16:9 quote-tweet video for OpenDesign's new Usage page. Same visual language and music grid as the Motion Week film. Opens on "How much have you used?"
Path in recreated product UI: Console → choose workspace → Usage (right under API Keys). A table of calls shows time, member, model, input/output/cache tokens and credits; filters by member, model and time range. Hover the ⓘ next to credits to open the breakdown: DeepSeek V4.1 Flash multiplier ×0.5 → ×0.25 during Motion Week. Click the underlined rules link: a browser bar types open-design.ai/model-credits and the page "Design Plan credit multipliers" slides in. End: "Stay on top of your usage. Track every call. Plan every credit." + OpenDesign logo.Comece pelo post, não pela animação
Antes de abrir uma linha do tempo, escreva uma frase para cada uma destas perguntas:
- Onde isto vai aparecer? Um anúncio principal, um post de acompanhamento, um tutorial ou um esclarecimento?
- O que o espectador precisa entender? Escolha uma afirmação que o filme consiga demonstrar.
- O que deve acontecer depois? Visitar uma página, testar um recurso, salvar os passos, responder ou criar um projeto?
Em um lançamento principal, mostre cedo o resultado mais forte do produto e faça o filme ser compreensível por si só. Em um post de acompanhamento, isole um único ângulo. Em um esclarecimento, deixe o fato corrigido explícito antes que a piada ou o floreio visual assuma o controle.
Sua primeira entrega: um briefing curto com o público, o local de publicação, uma mensagem, uma ação e a fonte de cada afirmação sobre o produto. Se duas mensagens competirem, divida-as em dois filmes.
Etapa 1: Monte um briefing que possa ser verificado
Configure primeiro o Claude Code. O início rápido do HyperFrames documenta atualmente esta instalação de plugin:
claude plugin marketplace add heygen-com/hyperframes
claude plugin install hyperframes@hyperframesNo Claude Code, invoque /hyperframes:hyperframes em uma pasta de projeto dedicada. Peça que ele crie uma pequena composição de teste, faça a pré-visualização e exporte um MP4 antes de começar o filme da campanha. Siga as instruções de renderização do plugin instalado para que os comandos correspondam à sua versão.
Crie um BRIEF.md no projeto de vídeo. Inclua a URL atual do produto, o texto aprovado, as unidades exatas dos números e a data em que você os verificou. Um preço sem seu período de cobrança não é um fato completo. Uma contagem de biblioteca de uma gravação anterior não é uma contagem atual.
Reúna o logotipo oficial, a arte da marca, capturas de tela ou gravações de tela, exemplos originais e quaisquer filmes de referência que você tenha permissão para estudar. Mantenha o material de origem separado das exportações para poder substituir uma captura de tela sem perder uma edição aprovada anteriormente.
Use o Claude Code para planejar e implementar o projeto, o HyperFrames para renderizar o motion baseado em HTML e GSAP ou Three.js quando a ideia visual precisar deles. Use FFmpeg para editar o áudio e Kokoro TTS para a locução. Você não precisa de todas as ferramentas em todos os filmes: um anúncio conduzido por tipografia pode precisar apenas de uma composição bidimensional.
Abra o produto real antes de planejar a demonstração. Confira os rótulos de navegação, a ordem dos botões e o resultado. Use uma conta de demonstração e substitua chaves, endereços e nomes de workspace reais antes de gravar.
Etapa 2: Escolha uma direção antes de renderizar
Peça duas ou três direções concretas: o quadro de abertura, um recurso visual recorrente, a sequência de planos e o final. Cada direção deve explicar como comunica o mesmo briefing.
Evite escolher entre adjetivos vagos como “premium” e “divertido”. Escolha entre ideias visíveis: uma seta puxando um preço para baixo, um cursor montando um fluxo de configuração ou um número elástico revelando uma parede de atualizações.
Peça alguns quadros de estilo quando a direção for incerta. Eles devem incluir palavras e recursos reais, especialmente o título mais longo e o plano de interface mais carregado. Aprove a composição e a mensagem antes de se comprometer com uma renderização completa.
O filme de novidades é um contraexemplo útil. Suas iterações passaram por um contador de versões, uma linha do tempo, um flipbook, um tratamento pictórico e, por fim, numerais 3D elásticos. Renderizar repetidamente não substituiu a necessidade de concordar sobre uma direção.
Etapa 3: Escolha a música e planeje as batidas
Ouça você mesmo as faixas candidatas. Peça ao agente links de pré-visualização, detalhes de licenciamento e uma descrição da introdução, do crescimento e do drop. Não escolha apenas por um ranking de popularidade ou pelo nome de um arquivo.
Combine a estrutura própria da faixa com a história: afirmação de abertura, demonstração, recompensa e cartela final. Corte nos limites musicais e preserve a frase musical. Quando uma boa cena precisar de mais tempo, revise a edição da música em vez de excluir a cena só para caber em uma duração arbitrária.
Se o filme tiver narração, estabeleça o tempo da fala antes de ajustar a animação com precisão. Faça a mensagem ser compreensível sem som e depois use o som para dar energia e esclarecer ações.
Verifique a licença para o uso comercial pretendido. Registro no Content ID e permissão para usar uma faixa são questões separadas: a ausência de reivindicações automáticas não prova que há licença. Guarde a licença e a fonte junto com o projeto.
Etapa 4: Dê uma função ao primeiro quadro
Pause o vídeo no tempo zero. Uma pessoa que nunca viu o post consegue dizer do que se trata o vídeo? Um quadro quase vazio que só fica claro um segundo depois pode falhar nesse teste.
Escreva na composição um título curto e legível. Coloque o produto ou o problema na tela. Use o primeiro movimento para avançar essa mensagem, em vez de fazer o espectador esperar o título chegar.
Esclarecimento: um número virou uma explicação
Passo a passo da API: uma abertura em branco virou uma promessa
Configuração com um clique: a pergunta virou a resposta
Verifique esses quadros no tamanho de um celular. Se o título exigir zoom, reduza a decoração concorrente ou recomponha o plano. Não conte com o post que acompanha o vídeo para explicar uma imagem ilegível.
Etapa 5: Anime uma história, não um baralho de cartões
Escolha um elemento recorrente para conectar as cenas: um cursor, uma seta, um personagem ou um objeto. Dê a ele um motivo para se mover. Uma seta pode puxar um preço; um cursor pode guiar uma configuração; um contador pode revelar uma coleção crescente.
Use a interface real do produto quando uma etapa depender de um controle verdadeiro. Uma interface fictícia decorativa pode parecer mais limpa, mas ensinar a ação errada. Deixe a tipografia grande carregar a frase-chave e a demonstração carregar o detalhe.
Para tipografia dimensional, verifique o contraste entre a face e as laterais de cada letra. Mantenha o ângulo de leitura simples o bastante para que o número seja reconhecido de imediato. Remova rótulos minúsculos e linhas decorativas de HUD quando competirem com a mensagem.
Em motion renderizado, cada quadro deve ser reproduzível a partir do seu timestamp. Evite lógica de animação que dependa de o quadro anterior ter sido executado: a renderização segmentada ou paralela pode avaliar os quadros fora de sequência. Teste alguns timestamps não consecutivos antes de gastar tempo em uma exportação completa.
Etapa 6: Revise a exportação completa
Quadros de estilo comprovam a composição; só a exportação comprova ritmo, transições, áudio e final. Assista a cada renderização de revisão completa uma vez com som e outra sem som. Depois, inspecione os momentos que falharam.
Dê de três a seis observações específicas por rodada. Para cada uma, indique o intervalo de tempo ou a cena, descreva o problema visível e declare o resultado pretendido. Diga também o que deve permanecer inalterado. “O primeiro título funciona; mantenha. Entre 8 e 11 segundos os cartões ficam pequenos demais para ler no meu celular” é uma observação acionável.
Quando sua reação for apenas “sem graça” ou “feio”, peça um diagnóstico antes de outra reescrita completa. O problema é ritmo, contraste, tipografia, movimento de câmera ou excesso de elementos sem relação? Escolha a menor mudança que resolva o problema real.
Conclua o feedback pedindo que o agente inspecione problemas relacionados de forma independente. Isso não substitui a sua revisão; evita que a implementação pare na lista literal de comentários.
Etapa 7: Reverifique os fatos e exporte
Use o briefing aprovado atual como lista de verificação. Confira preços e unidades, nomes compatíveis, contagens, logotipos, URLs e datas de ofertas em relação às suas fontes. Se o lançamento ainda estiver mudando, segure a exportação até que os fatos estejam estáveis.
Inspecione as capturas de tela em busca de chaves, e-mails, nomes de workspace e dados de conta. Use valores de demonstração evidentes, não credenciais plausíveis. Verifique se seus exemplos, personagens, música e recursos de voz podem ser usados na publicação pretendida.
Assista ao arquivo exportado do começo ao fim. Confirme que o áudio está presente onde deveria, que o texto sobrevive à compressão, que o final permanece na tela por tempo suficiente e que o último quadro não ficou em branco por acidente. Preserve o projeto editável, o briefing, os recursos licenciados e a exportação aprovada.
Etapa 8: Recomponha, publique e aprenda
Crie a proporção adicional depois que o corte principal for aprovado. Reposicione o texto, redimensione o protagonista e escolha quais planos de interface devem permanecer dentro de um cartão intacto. Cortar o arquivo horizontal não substitui a verificação de cada plano.
Escreva o post em torno da mesma mensagem única. Mantenha a ação solicitada consistente entre o post e a cartela final. Se usar um link rastreado, teste o destino e registre a nomenclatura da campanha antes de publicar.
Depois da publicação, procure perguntas e mal-entendidos recorrentes. Eles podem virar o próximo filme curto. Compare os resultados dentro de uma janela de relatório consistente e distinga alcance, engajamento, visitas e ações no produto.
Prompts reutilizáveis
Substitua os colchetes antes de usar estes modelos.
Briefing de abertura
Quero divulgar [recurso, página ou campanha]: [URL].
Público: [quem deve se interessar].
Posicionamento: [anúncio principal / acompanhamento / tutorial / esclarecimento].
Uma mensagem: [a única coisa que os espectadores devem entender].
Próxima ação: [visitar / experimentar / salvar / responder / criar].
Formato principal: 16:9. Planeje depois uma versão 9:16 composta separadamente.
Fatos e fontes:
[Documentação atual do produto, briefing aprovado, página de preços e data de verificação.]
Escreva no BRIEF.md as afirmações verificadas e suas unidades. Sinalize tudo que for incerto.
Materiais:
- Logotipo oficial: [caminho]
- Arte da marca e vídeos de exemplo originais: [caminhos]
- Acesso a um produto de demonstração ou gravações de tela higienizadas: [detalhes]
Implementação: Claude Code + HyperFrames; use GSAP ou Three.js quando a ideia exigir.
Use etapas reais do produto. Não exponha credenciais nem dados pessoais de contas.
Estude as referências de composição e motion; não reutilize imagens de terceiros sem permissão.
O primeiro quadro deve explicar o que é isto. Mantenha o texto essencial legível no celular.
Mostre o valor do produto por meio de motion e demonstração. Evite rótulos decorativos minúsculos.
Quanto à música, forneça links de prévia e informações de licença para eu conferir e escolher.
Ainda não renderize o filme completo. Proponha de 2 a 3 conceitos concretos, com quadro de abertura,
protagonista visual, sequência de planos, direção de som e final.Revisar uma iteração
Mantenha estas partes aprovadas: [cenas, tempos, tipografia ou música].
1. Em [timestamp / cena], vejo [problema específico].
Em vez disso, o espectador deve entender ou sentir [resultado pretendido].
2. Em [timestamp / cena], altere [elemento específico] porque [motivo].
3. Em [timestamp / cena], verifique [legibilidade / ritmo / som / precisão do produto].
Explique a causa antes de fazer um redesenho amplo. Verifique se as cenas adjacentes têm o mesmo problema.
Preserve o briefing aprovado e as partes não relacionadas. Renderize um novo MP4 completo.
Assista à exportação e informe qualquer problema restante antes de me devolver o material.Verificação final da exportação
Verifique o MP4 final exportado, e não apenas a composição de origem.
- No tempo zero, um espectador novo consegue identificar o tema no tamanho de um celular?
- A mensagem única fica clara com o som desligado?
- As etapas da interface, números, unidades, logotipos e URLs foram conferidos com o BRIEF.md?
- Os dados privados de contas foram removidos?
- As permissões de música, exemplos, personagem e voz estão documentadas?
- Todas as transições são renderizadas corretamente em timestamps não consecutivos?
- Você assistiu à exportação completa com som e verificou o cartão final?
- A versão vertical foi recomposta e assistida separadamente?
Liste as verificações realmente feitas, os problemas não resolvidos e a exportação exata que foi revisada.
Não marque como aprovadas verificações que não foram realizadas.Perguntas frequentes
Preciso do After Effects para este fluxo de trabalho?
O fluxo demonstrado usa Claude Code e renderização baseada em HTML com HyperFrames. Ele não exige After Effects. Você ainda precisa dirigir a história, verificar os recursos e revisar o motion e o som exportados.
Devo começar com uma renderização completa ou com quadros de estilo?
Comece com quadros de estilo quando a direção visual for incerta. Depois que o conceito estiver acordado, revise exportações completas para avaliar o tempo e o áudio. Nenhum dos dois tipos de revisão substitui o outro.
Qual deve ser a duração de um vídeo de produto?
O suficiente para entregar sua única mensagem sem enrolação. Os exemplos de origem vão de acompanhamentos curtos a um passo a passo de configuração mais longo. Escolha a duração de acordo com a tarefa e teste se cada cena contribui.
Posso usar a mesma edição na vertical?
Reaproveite a história e os recursos, mas confira a composição plano a plano. Demonstrações de interface muitas vezes precisam de um cartão intacto ou de um novo arranjo para continuarem legíveis em 9:16.
Seu primeiro projeto
Escolha um recurso real e uma ação que você quer que o espectador realize. Escreva o briefing, escolha um quadro de abertura, aprove uma direção visual e faça um filme horizontal completo. Revise-o em um celular antes de expandir para formatos adicionais ou posts de acompanhamento.
