Nota do autor: hoje, há dois caminhos principais para criar vídeos com um Agent de programação: renderizar um MP4 quadro a quadro com código ou gerar uma apresentação em página web e gravar a tela. Este artigo compara os princípios, as entregas e os cenários de uso de cada caminho e apresenta um método de escolha em 5 passos.
Muitos desenvolvedores já estão acostumados a usar Claude Code, Cursor e Codex para escrever páginas e scripts, mas ainda ficam em dúvida quando o assunto é “deixar um Agent de programação criar um vídeo”. Uma preocupação comum é: se o Agent só escreve código, como ele pode produzir um vídeo com ritmo, som e pronto para publicar? Neste artigo, apresentamos dois caminhos: renderização quadro a quadro com código e gravação de uma apresentação em página web, para ajudar você a decidir qual deles atende melhor às suas necessidades.
Este não é mais um artigo sobre “gerar vídeos com IA em um clique”. Os dois caminhos se baseiam em habilidades reais do conjunto de habilidades de código aberto garden-skills: motion-showreel cuida da renderização quadro a quadro com código, enquanto web-video-presentation cuida da gravação de apresentações em páginas web. Cada uma tem fluxos de trabalho, pontos de verificação e entregas bem definidos.
O principal benefício: ao terminar a leitura, você vai conhecer os princípios e os limites de cada caminho, conseguir escolher uma opção para seu projeto de vídeo em até 5 passos e entender como configurar um Modelo de Linguagem Grande adequado para o Agent de programação.
Duas formas de criar vídeos com agentes de programação: pontos principais
A tabela abaixo mostra a diferença essencial entre as duas abordagens. Em resumo, na renderização quadro a quadro, o agente atua como diretor de animação e fazenda de renderização. Na gravação de uma apresentação web, ele atua como engenheiro de apresentações, e uma pessoa aperta o botão de gravar.
| Ponto | Renderização quadro a quadro com código (motion-showreel) | Gravação de apresentação web (web-video-presentation) |
|---|---|---|
| Princípio | Página com render(t) determinístico, capturada quadro a quadro ao longo do tempo |
Página em Vite + React + TypeScript, gravada enquanto se avança por cliques ou pelo teclado |
| Entrega | Vídeo final em MP4 + código-fonte editável | Projeto de apresentação web em 16:9, pronto para gravação |
| Duração típica | Vídeos curtos de 5 a 60 segundos; vídeos longos divididos em capítulos de até cerca de 20 minutos | Depende do roteiro de narração, com avanço por capítulos e etapas |
| Áudio | Imagem, música, efeitos sonoros e narração compartilham uma linha do tempo | Síntese opcional de áudio de narração, com cada etapa visual correspondendo a um trecho da narração |
| Ideal para | Vídeos promocionais de produtos, aberturas com logo, tipografia animada e animações em loop | Aulas, transformação de artigos em vídeos, demonstrações de produtos e apresentações técnicas |
Renderização quadro a quadro com código
O ponto central do motion-showreel é o determinismo. A página criada pelo agente expõe uma função render(t) que, para um tempo t definido, produz sempre o mesmo quadro. O renderizador chama essa função e captura a imagem quadro a quadro, conforme a taxa de quadros escolhida. Como a mesma página gera imagens estáticas, folhas de contato, painéis com três direções de estilo, versões proxy e o arquivo mestre, tudo parte da mesma fonte, da proposta ao vídeo final. Assim, não há o problema de uma prévia bonita resultar em um vídeo diferente. Desfoque de movimento, superamostragem e granulação de filme são apenas opções de renderização.
No áudio, essa abordagem coloca pontos de corte, batidas fortes e efeitos sonoros na mesma linha do tempo, usando os mesmos valores de tempo. A música pode ser sintetizada com o sintetizador integrado, que não exige dependências, ou com samples de piano do Tone.js. Também é possível sincronizar uma faixa do próprio usuário e detectar batidas e drops. A narração lê apenas o roteiro fornecido pelo usuário, e as imagens acompanham os tempos reais da fala, não o contrário.
Gravação de apresentação web
O web-video-presentation segue outra ideia: tratar o vídeo como uma “apresentação animada”. Ele usa um palco fixo de 1920×1080, ajustado ao tamanho da janela, para manter a imagem estável durante a gravação. A apresentação é controlada por um cursor (chapter, step): cada clique ou tecla avança uma etapa visual, correspondente a uma frase da narração.
Essa abordagem se parece mais com o processo tradicional de “escrever o roteiro → montar os slides → gravar”. Primeiro, a skill reescreve o artigo original como roteiro de narração e depois associa cada trecho a uma cena em tela cheia. O processo para obrigatoriamente para sua confirmação em cada uma destas etapas: roteiro, tema, estrutura, modo de implementação e áudio opcional. Durante a gravação, os controles de progresso só aparecem quando o mouse passa sobre eles, mantendo o palco limpo.
Comparação dos dois fluxos: as principais diferenças ao criar vídeos com um agente de programação
Se olharmos apenas para o resultado final, as duas abordagens parecem semelhantes: ambas geram um arquivo de vídeo. Mas os detalhes do fluxo de trabalho mostram que elas exigem coisas bem diferentes das pessoas e do modelo. A tabela abaixo compara as duas em 8 dimensões.
| Dimensão | Renderização quadro a quadro por código | Gravação de tela de uma apresentação web |
|---|---|---|
| Pontos de revisão humana | 2: confirmação dos requisitos e do quadro de estilo | 5: roteiro, tema, estrutura, modo de implementação e áudio opcional |
| Recursos de estilo | Biblioteca com 43 estilos (editorial suíço, pintura a tinta, synthwave, 3D suave, abertura de cinema, estética chinesa contemporânea etc.) | 23 temas integrados (editorial, terminal, blueprint de engenharia, internacionalismo suíço etc.) |
| Escopo da definição de estilo | Aparência, movimento, linguagem de câmera e paleta sonora | Tokens de design que controlam cores, fontes e layout |
| Solução de voz | Gemini / MiniMax TTS, que lê apenas o roteiro do usuário; também aceita gravações reais | TTS modular, com MiniMax mmx-cli e OpenAI TTS integrados, além de trechos de integração para ElevenLabs, edge-tts, Azure, Google Cloud e say do macOS |
| Música e efeitos sonoros | Fontes independentes, com redução automática de volume durante a fala | Foco principalmente na narração, sem ênfase em trilha sonora |
| Validação de qualidade | Dimensões, taxa de quadros, duração, número de quadros, quadros pretos, loudness, pico real, transição de loop e determinismo precisam passar em todos os testes | Depende de uma prévia humana antes da gravação de tela |
| Precisa de gravação humana? | Não, o MP4 é renderizado diretamente | Sim, é preciso gravar a página com uma ferramenta de captura de tela |
| Versão atual | v0.1.0 | v1.2.2 |
Há uma decisão de design fácil de passar despercebida aqui: o motion-showreel separa rigorosamente a “validação técnica” do “julgamento estético”. A primeira reúne critérios objetivos que podem ser verificados por máquina e devem passar em todos os testes; a avaliação estética fica por conta do usuário, que tem a palavra final. Essa divisão impede que o agente ignore quadros pretos ou níveis de loudness acima do limite só porque “achou bonito”.
Já a gravação de uma apresentação web deixa mais controle nas mãos das pessoas. Os 5 pontos de revisão podem parecer trabalhosos, mas são importantes para vídeos explicativos: a redação do roteiro e a divisão dos capítulos são fundamentais para a qualidade do conteúdo, então é melhor que o próprio autor confirme esses detalhes.
Como começar a criar vídeos com um agente de programação
Primeiro passo: instale a skill
As duas skills seguem a especificação SKILL.md e podem ser instaladas em ambientes como Claude Code, Claude.ai, Cursor, Codex CLI, Gemini CLI e OpenCode. A tabela abaixo mostra as formas mais comuns de instalação. Basta inserir os comandos no terminal ou na conversa com o agente.
| Método de instalação | Como fazer | Para quem |
|---|---|---|
| skills CLI | Execute npx skills add ConardLi/garden-skills -s motion-showreel ou substitua o valor após -s por web-video-presentation; adicione -a claude-code para especificar o agente |
Usuários de qualquer agente que queiram instalar com um comando |
| Marketplace de plugins do Claude Code | Execute /plugin marketplace add ConardLi/garden-skills e depois instale motion-showreel-skills@garden-skills ou presentation-skills@garden-skills |
Usuários do Claude Code |
| ZIP de uma versão específica em Releases | Baixe o ZIP da versão desejada, verifique o SHA-256 e extraia em .claude/skills/, .agents/skills/ ou .codex/skills/ |
CI, ambientes offline e equipes que precisam de resultados reproduzíveis |
| Cópia manual | Clone o repositório e copie o diretório da skill para o diretório de skills do projeto | Desenvolvedores que querem modificar a skill |
Segundo passo: prepare o modelo
A maior parte do trabalho de um agente de programação ao criar vídeos envolve “escrever código + entender os requisitos + avaliar as imagens”. Por isso, a capacidade de programação e o desempenho com contextos longos são os pontos mais importantes na escolha do modelo.
Se o agente aceitar uma interface personalizada, basta configurar dois parâmetros: a chave API e o base_url. Para o formato compatível com OpenAI, use https://api.apiyi.com/v1 como base_url. Para o endereço e os parâmetros do formato Anthropic, consulte a documentação da APIYI em docs.apiyi.com.
Terceiro passo: comece com um pedido claro
Informar tudo que é importante logo no início reduz as idas e vindas para esclarecer detalhes. Na renderização quadro a quadro por código, por exemplo, a skill confirma o tema, a duração, a orientação horizontal ou vertical, a origem da música e dos efeitos sonoros e o modo de narração. Já para gravar uma apresentação em página web, você precisa fornecer o artigo ou roteiro original e uma divisão aproximada dos capítulos.
- Exemplo de pedido para renderização quadro a quadro por código: Crie um vídeo de produto de 30 segundos, em formato horizontal, para uma ferramenta de desenvolvimento. Use o estilo synthwave, música feita com o sintetizador integrado e nenhuma narração.
- Exemplo de pedido para gravação de apresentação web: Transforme um artigo técnico em um vídeo explicativo de 8 minutos, com tema de planta de engenharia e narração em chinês.
🚀 Comece agora: se ainda não configurou uma interface de modelo para o agente, cadastre-se em APIYI apiyi.com e obtenha créditos de teste. A plataforma é compatível com os formatos de interface da OpenAI e da Anthropic, permitindo a integração direta de agentes como o Claude Code e de scripts próprios. Assim, você pode testar um vídeo curto antes de decidir qual caminho seguir.
Quarto passo: tome decisões nos pontos de revisão
Na renderização quadro a quadro por código, se você não tiver especificado um estilo, a skill apresentará três direções visuais bem diferentes na etapa de quadros de estilo. Esse é o momento mais barato para definir a personalidade do vídeo final.
Na gravação de apresentação web, a implementação só começa depois da aprovação do roteiro. É nessa etapa que custa menos alterar os capítulos. Em ambos os caminhos, concentre suas principais observações nos pontos de revisão para evitar retrabalho depois que o vídeo estiver pronto.
Quinto passo: revise e receba os arquivos
A renderização quadro a quadro por código entrega um MP4 e o código-fonte editável. Vale a pena guardar o código: para alterar textos ou cores mais tarde, basta renderizar novamente.
A gravação de apresentação web entrega o projeto. Você precisará usar uma ferramenta de gravação de tela para gravar cada capítulo e, se necessário, sincronizar no editor de vídeo o áudio gerado pela opção de TTS com a gravação.
Escolhendo o modelo para um agente de programação que cria vídeos
As duas habilidades não estão vinculadas a um modelo específico, mas o resultado depende bastante do Modelo de Linguagem Grande que alimenta o agente. A tabela reúne os modelos relacionados disponíveis na APIYI. Todos os preços seguem os dados da página docs.apiyi.com/models; consulte essa página para conferir as unidades e os critérios de cobrança.
| Modelo | Papel neste cenário | Preço na APIYI (entrada / saída / cache) | Plataforma disponível |
|---|---|---|---|
| claude-opus-5-5 | Orquestração de animações complexas, planejamento de capítulos para vídeos longos e programação principal | $4 / $20 / $0.2 | APIYI apiyi.com |
| claude-sonnet-5-5 | Modelo principal para programação no dia a dia, com bom equilíbrio entre custo e desempenho | $2 / $10 / $0.1 | APIYI apiyi.com |
| kimi-k3.1-pro | Reescrita de textos longos em roteiros de narração e organização de conteúdo em chinês | $2 / $10 / $0.2 | APIYI apiyi.com |
| deepseek-v4.1-flash | Tarefas leves, como pequenas alterações em lote e organização de legendas | $0.3 / $1.2 / $0.006 | APIYI apiyi.com |
| gpt-image-2.6-flare / gpt-image-2.6-sunburst | Geração de capas, imagens de referência de estilo e materiais para o vídeo | Entrada de texto $5 / entrada de imagem $8, saída $30 | APIYI apiyi.com |
Sobre a síntese de voz, vale uma observação: o motion-showreel já inclui Gemini e MiniMax TTS, enquanto o web-video-presentation inclui MiniMax mmx-cli e OpenAI TTS. Se algum desses modelos de TTS não aparecer na página de preços da APIYI, isso significa que ele ainda não está disponível na plataforma, mas será lançado assim que possível. Até lá, siga a documentação da habilidade para usar diretamente o provedor correspondente ou escolha outra solução de TTS compatível. Da mesma forma, a série Wenxin ERNIE ainda não está disponível na APIYI; se seu fluxo depender dela, será necessário integrá-la separadamente.
💰 Dica para economizar: ao criar vídeos, o agente lê várias vezes o mesmo briefing, as definições de estilo e o código do projeto, então a taxa de acerto do cache costuma ser alta. Escolher um modelo com preço para cache pode reduzir bastante o custo de várias rodadas de iteração. Compare os valores de cada modelo na página de preços da APIYI: docs.apiyi.com/models.
Decisão em 5 passos: qual caminho escolher para criar vídeos com um Agent de programação
Depois de ver os princípios e as ferramentas, podemos resumir a escolha em 5 perguntas. Responda na ordem para chegar à melhor opção.
- O conteúdo precisa “explicar bem” ou “impressionar visualmente”? Se o foco é transmitir informações, escolha a gravação de uma apresentação web. Se é causar impacto visual, escolha a renderização quadro a quadro com código.
- Qual é a duração? Vídeos de até 60 segundos são naturalmente adequados à renderização quadro a quadro; para aulas com mais de dez minutos, a gravação de uma apresentação web é mais fácil de manter.
- É necessária uma sincronização precisa entre áudio e imagem? Para cortes no ritmo da música, efeitos sonoros em momentos exatos e loops sem emendas, só a renderização quadro a quadro em uma linha do tempo compartilhada oferece resultados consistentes.
- Você aceita gravar a tela manualmente? Se quiser uma produção totalmente automática e reproduzível em CI, escolha a renderização quadro a quadro. Se preferir narrar ou gravar no seu próprio ritmo, a gravação de uma apresentação web oferece mais flexibilidade.
- O conteúdo será alterado com frequência? Os dois caminhos preservam o código-fonte, mas, na apresentação web, uma alteração no texto de uma página aparece imediatamente. Na renderização quadro a quadro, é preciso gerar o vídeo novamente.
| Cenário típico | Caminho recomendado | Motivo |
|---|---|---|
| Vídeo promocional de 30 segundos para lançamento de produto | Renderização quadro a quadro com código | Biblioteca variada de estilos, áudio e imagem na mesma linha do tempo e exportação direta em MP4 |
| Abertura com logo / sequência de títulos | Renderização quadro a quadro com código | A renderização determinística garante o mesmo resultado em cada exportação |
| Transformar um artigo técnico em vídeo explicativo | Gravação de apresentação web | Reescrita automática do roteiro de narração, com uma etapa por vez |
| Capítulos de um curso online | Gravação de apresentação web | Tema consistente, capítulos bem estruturados e manutenção facilitada por aula |
| Retrospectiva anual curta com narração | Renderização quadro a quadro com código | As imagens acompanham os marcadores de tempo da fala real e permitem vídeos mais longos divididos em capítulos |
| Demonstração de funcionalidades de um produto | Gravação de apresentação web | Avanço por cliques e ritmo de demonstração controlável |
💡 Dica para escolher: se estiver em dúvida, passe os mesmos requisitos ao Agent e peça um vídeo de teste de 15 segundos e uma página de apresentação. Depois, compare a qualidade dos resultados e o custo de fazer ajustes. Com a APIYI apiyi.com, você também pode usar a mesma chave API para alternar entre modelos como Claude, Kimi e DeepSeek e comparar o desempenho de cada um no seu projeto.
Perguntas frequentes
Q1: O que significa “deixar um agente de programação criar vídeos”?
Significa usar agentes de programação como Claude Code, Cursor e Codex para produzir vídeos por meio de código. Em vez de chamar diretamente um modelo de geração de vídeo, eles organizam imagens e sons com páginas web, animações e scripts de renderização. Assim, o resultado pode ser editado e reproduzido.
Q2: Qual é a diferença entre renderizar quadros por código e gravar uma apresentação web?
A renderização quadro a quadro por código oferece mais controle visual e melhor sincronização de áudio e vídeo, além de gerar o MP4 diretamente, mas é mais indicada para vídeos curtos. A gravação de uma apresentação web facilita a organização do conteúdo e a manutenção posterior, mas exige gravação manual. A primeira funciona como um estúdio de animação; a segunda, como um projeto de slides para apresentação.
Q3: Quais são as versões atuais dessas duas skills e quais agentes elas suportam?
Segundo o repositório garden-skills, motion-showreel está na versão v0.1.0 e web-video-presentation, na v1.2.2. Ambas seguem a especificação SKILL.md e foram oficialmente testadas no Claude Code, Claude.ai, Cursor, Codex CLI, Gemini CLI e OpenCode.
Q4: Para quais situações essa abordagem é mais indicada?
– **Marketing de produtos**: vídeos curtos para divulgar lançamentos e animações que destacam funcionalidades.
– **Identidade visual**: animações de logotipo, aberturas, encerramentos e pôsteres tipográficos animados.
– **Divulgação de conhecimento**: transformação de artigos técnicos em vídeos explicativos, capítulos de cursos e treinamentos internos.
– **Conteúdo para desenvolvedores**: explicações de arquitetura, demonstrações de ferramentas e apresentações de projetos de código aberto.
Q5: Como configurar a API de um modelo para um agente de programação?
Cadastre-se em APIYI apiyi.com e crie uma chave API. Depois, informe a chave e a base_url no agente ou script. A APIYI é compatível com os formatos de API da OpenAI e da Anthropic. Consulte os endereços e parâmetros na documentação em docs.apiyi.com e os preços dos modelos em docs.apiyi.com/models.
Q6: O agente pode escrever a narração sozinho?
As duas skills seguem abordagens diferentes. O TTS do motion-showreel lê apenas o roteiro fornecido pelo usuário, evitando que o agente crie falas por conta própria. Já o web-video-presentation adapta o artigo original para um roteiro de narração, mas você precisa aprová-lo no ponto de revisão do roteiro. Você pode usar kimi-k3.1-pro ou claude-sonnet-5-5 na APIYI para criar uma primeira versão e depois revisá-la.
Q7: Quais são as limitações conhecidas dessas duas abordagens?
A renderização quadro a quadro por código depende da captura de cada quadro pelo navegador. Vídeos longos demoram mais para renderizar, e efeitos complexos de 3D ou partículas aumentam bastante esse tempo. Na gravação de uma apresentação web, a qualidade final depende da ferramenta de captura e de quem opera, o que dificulta a automação completa. Além disso, alguns serviços de TTS integrados precisam ser ativados separadamente. Se o modelo correspondente não aparecer na página de preços da APIYI, significa que ainda não está disponível.
Q8: Dá para combinar as duas abordagens?
Sim, e isso é bem comum. Por exemplo, você pode usar a renderização quadro a quadro por código para criar uma abertura de 10 segundos e as transições entre capítulos, gravar uma apresentação web para a explicação principal e juntar tudo em um editor de vídeo. Como ambas usam tecnologias web, é possível compartilhar a mesma identidade visual, incluindo cores e fontes.
Principais pontos sobre criação de vídeos com agentes de programação
- São dois caminhos essencialmente diferentes: a renderização quadro a quadro gera um MP4 diretamente; a apresentação em página web exige gravação de tela manual.
- A renderização quadro a quadro depende de determinismo: a mesma página
render(t)produz a prévia e a versão final, com resultados reproduzíveis. - A apresentação em página web depende de estrutura: cada etapa visual corresponde a uma frase da narração, o que funciona bem para explicações longas.
- Os pontos de verificação determinam a qualidade: 2 ou 5 pontos de verificação correspondem, respectivamente, à prioridade visual ou à prioridade de conteúdo.
- A validação técnica é separada da estética: todos os critérios objetivos, como quadros pretos, intensidade sonora e contagem de quadros, precisam receber PASS.
- A escolha do modelo afeta o custo: os modelos que alimentam o agente podem ser acessados pela APIYI; consulte os preços em docs.apiyi.com/models.
Resumo
Para criar vídeos com um agente de programação, a questão não é se isso é possível, mas sim escolher o caminho certo:
- Renderização quadro a quadro com código: ideal para vídeos curtos, aberturas e peças visuais com ritmo marcado, com áudio e imagem sincronizados e geração direta do vídeo final.
- Gravação de tela de uma apresentação em página web: ideal para explicações, cursos e conversão de artigos em vídeo, com estrutura clara e fácil de manter.
- Decisão em 5 passos: avalie, nesta ordem, o objetivo do conteúdo, a duração, a sincronização entre áudio e imagem, se a gravação de tela é aceitável e a frequência de alterações.
A recomendação é testar primeiro todo o processo com uma amostra de 15 segundos e depois partir para o projeto final. Para os modelos que alimentam o agente, uma opção é usar a APIYI, em apiyi.com, para acessar os modelos das séries Claude, Kimi, DeepSeek e GPT Image em um só lugar. A interface é compatível com os formatos OpenAI e Anthropic; consulte a página de preços para conferir os valores atuais.
📚 Referências
- GitHub – garden-skills: repositório das skills motion-showreel e web-video-presentation
- Link:
github.com/ConardLi/garden-skills -
Descrição: contém o README, o SKILL.md e as instruções de instalação das duas skills
-
Especificação Agent Skills: descrição do formato SKILL.md
- Link:
agentskills.io -
Descrição: explica a estrutura de diretórios das skills e como os agentes as carregam sob demanda
-
Central de documentação da APIYI: instruções de integração com a API
- Link:
docs.apiyi.com -
Descrição: parâmetros de integração para os formatos compatíveis com OpenAI e Anthropic
-
Página de preços dos modelos da APIYI: preços cobrados por cada modelo
- Link:
docs.apiyi.com/models - Descrição: todos os preços deste artigo têm como referência essa página
Autor: equipe técnica da APIYI
Contato técnico: entre em contato conosco pela página inicial da APIYI. Para mais informações sobre integração, acesse a central de documentação em docs.apiyi.com
