Geração de Vídeo de Animação de Conhecimento

O usuário fornece um roteiro de locução (texto ou áudio) + uma imagem de referência de estilo. Você é responsável por selecionar o modelo, projetar o storyboard, escrever o código e renderizar o vídeo final.

Stack Tecnológica: Remotion (escrever vídeos com React) + Scripts Python (dublagem/alinhamento/mixagem) + ffmpeg.

Princípio Central: Estilo determina a ferramenta. Primeiro defina o tipo, depois escolha as ferramentas e escreva as cenas de acordo com o template daquele tipo.

Autora: Irmã Xiao Bai (Xiao Bai) · GitHub @newbaisays-aigc · Licença MIT Endereço do Projeto: https://github.com/newbaisays-aigc/knowledge-animation-video

Esta Skill é independente de ferramentas de IA específicas. Contanto que seu ambiente host possa ler SKILL.md, executar comandos shell e escrever arquivos, você pode usá-la. TTS: Use preferencialmente components/common/scripts/tts.py (Edge TTS, requer internet); Se o ambiente não permitir a instalação de dependências Python, use a capacidade de síntese de voz nativa do host, gerando o mesmo vo.mp3 + tabela de tempos frase por frase. A escolha do modelo é ilimitada: qualquer modelo que possa escrever código é aceitável; quando a quantidade de código for grande, priorize modelos com forte capacidade de raciocínio.

Etapa 1: Escolha Inicial (Obrigatório, Não Pule)

Faça as 4 perguntas abaixo ao usuário de uma só vez. Se a plataforma suportar perguntas em forma de abas, use-as; caso contrário, liste as opções numeradas para o usuário responder.

Pergunta 1: Tipo de Vídeo (Resumo: Quer impacto? Escolha 3D. Quer proximidade? Escolha Desenho à Mão. Quer dedução? Escolha Fórmulas. Quer estrutura? Escolha Infográfico. História? Escolha Arquivo. Obras de arte? Escolha Galeria)

Nº	Tipo	Conteúdo Adequado	Público-Alvo
A	Dados 3D	Dados concretos: jornalismo de dados, lançamento de produto, relatórios do setor, análise de resultados financeiros	Blogueiros de finanças e tecnologia, editores de novos meios de comunicação, profissionais de marketing e produto
B	Desenho à Mão	Opiniões e histórias: história e humanidades, fenômenos sociais, notas de leitura, psicologia	Professores de humanidades, instrutores de cursos pagos, blogueiros de leitura
C	Fórmula Matemática	Fórmulas matemáticas e físicas abstratas, algoritmos e princípios de IA	Professores de ciências, estudantes criando materiais didáticos, blogueiros de tecnologia
D	Infográfico	Processos, métodos, arquitetura de sistemas, funcionalidades de produtos, fluxos de trabalho	Apresentações corporativas, treinamento empresarial, operações B2B e SaaS
E	Arquivo Vintage	Figuras históricas, eventos históricos, história das invenções, história de marcas, objetos antigos	Blogueiros de história, divulgação científica em humanidades, conteúdo de marca, turismo cultural
F	Galeria de Arte	Análise de obras-primas, história da arte, artefatos, design, arquitetura, fotografia	Blogueiros de arte, professores de educação estética, museus e turismo cultural, designers
G	Me Ajude a Escolher	Quando o usuário não tem certeza, após ler o roteiro, você faz a recomendação	—

Pergunta 2: Proporção do Vídeo

16:9 Horizontal (1920×1080): Bilibili, Xigua, YouTube, materiais didáticos
9:16 Vertical (1080×1920): Douyin (TikTok chinês), WeChat Video, Xiaohongshu (RED)
1:1 Quadrado (1080×1080): WeChat Moments, feeds de notícias

Pergunta 3: Método de Locução

Texto: O usuário fornece o texto, você dubla (TTS)
Áudio: O usuário fornece o áudio gravado, você transcreve e alinha
Sem Locução: Apenas imagens + música de fundo

Pergunta 4: Legendas?

Com legendas (recomendado por padrão): Exibidas frase por frase na parte inferior, ideal para visualização sem som no celular
Sem legendas: Imagem mais limpa, adequado para adicionar legendas posteriormente em softwares como CapCut (剪映)

Nota: Quando a locução for "Sem Locução", as legendas são o único meio para o público entender o conteúdo. Lembre o usuário de que é recomendado mantê-las.

Após as perguntas, envie uma mensagem separada pedindo os materiais ao usuário e pare, aguardando a resposta dele. Não comece a escrever o roteiro, projetar o storyboard ou fazer qualquer geração antes de receber ambos os materiais.

Use o seguinte texto (substitua os exemplos de acordo com o tipo escolhido pelo usuário):

Ok! Agora, preciso de dois materiais:

Material 1: Locução Envie um texto ou um áudio gravado. Para o primeiro teste, recomendo algo curto, de 15 a 30 segundos (cerca de 60 a 120 palavras), para facilitar os testes e consumir menos recursos. Se você ainda não tem um roteiro, me diga o tópico e a duração (ex.: "Apresentar Napoleão, 20 segundos"), e eu escrevo uma primeira versão para sua aprovação.

Material 2: Referência de Estilo (Muito Importante) É difícil descrever estilo com palavras; o melhor é me mostrar uma imagem. Escolha uma das opções abaixo:

Envie uma ou várias imagens

Envie um link: links de imagens ou vídeos do Pinterest, Xiaohongshu, Bilibili, YouTube servem

Se realmente não tiver, responda "Usar estilo padrão"

Dica para encontrar referências: Pesquise no Pinterest ou Xiaohongshu por "[palavra-chave do tipo]", e escolha a imagem de que mais gostar.

Palavras-chave de pesquisa por tipo: Galeria de Arte → "museum art documentary motion"; Arquivo Vintage → "vintage documentary motion graphics"; Dados 3D → "数据可视化 3D" (Visualização de dados 3D); Desenho à Mão → "手绘动画 / doodle explainer"; Fórmula Matemática → "Estilo 3Blue1Brown"; Infográfico → "信息图动画 / infographic motion".

Regras ao receber os materiais:

Se o usuário deu apenas o tópico, sem o roteiro: Escreva o roteiro primeiro, envie separadamente para aprovação do usuário, e só então prossiga.
Se o usuário deu apenas a locução, sem a referência: Lembre-o novamente sobre a referência. Só use o estilo padrão do template após o usuário responder explicitamente "Usar estilo padrão".
Se o usuário enviou um link: Abra o link para obter a imagem ou vídeo real (links do Pinterest podem usar https://widgets.pinterest.com/v3/pidgets/pins/info/?pin_ids=<ID do pin> para obter endereços de imagem e vídeo). Se for um vídeo, extraia 8 a 10 quadros uniformemente e monte uma imagem para visualização. Se a API não abrir, não trave nem adivinhe o estilo pelo texto do link — peça diretamente ao usuário para enviar uma captura de tela ou imagem; só use o estilo padrão do template após o usuário dizer explicitamente "Usar estilo padrão".

Se o usuário escolheu G (Me Ajude a Escolher), após ler o roteiro, recomende seguindo as regras abaixo, explique o motivo e aguarde a confirmação do usuário:

Se o roteiro contiver muitos números, porcentagens, classificações, crescimentos → A Dados 3D
Se falar sobre uma obra de arte (pintura, artefato, arquitetura) com detalhes que merecem atenção → F Galeria de Arte
Se falar sobre figuras históricas reais, eventos, invenções, origens de marcas → E Arquivo Vintage
Se for focado em opiniões, histórias, conceitos psicológicos, com poucos números → B Desenho à Mão
Se houver fórmulas, teoremas, deduções, etapas de algoritmos → C Fórmula Matemática
Se falar sobre etapas, processos, frameworks, relações entre módulos → D Infográfico

Etapa 2: Ler o Template

Após definir o tipo, leia apenas o arquivo de template correspondente, não leia todos:

A → templates/3d-data.md
B → templates/hand-drawn.md
C → templates/math-formula.md
D → templates/infographic.md
E → templates/vintage-archive.md (Leia também components/vintage-archive/README.md e reutilize diretamente a biblioteca de componentes)
F → templates/gallery.md (Leia também components/gallery/README.md e reutilize diretamente a biblioteca de componentes)

Cada template é estruturado em 7 blocos: Especificações definem o tamanho, Estilo define a aparência, Ritmo define o tempo, Cenas definem as ações, Música define a emoção, Ferramentas definem a implementação, Entrega define a verificação.

Regras de ajuste:

Especificações, Entrega: Basicamente inalterados, apenas substitua a proporção pela escolhida pelo usuário.
Estilo, Ritmo, Cenas, Música: Ajuste de acordo com o conteúdo do usuário e a imagem de referência.
Ferramentas: Siga o template, não misture ferramentas de outros templates.

Biblioteca de Componentes: Em components/ estão armazenados componentes reutilizáveis já ajustados. Quando o template correspondente tiver uma biblioteca de componentes, leia seu README primeiro, reutilize componentes e scripts prioritariamente, e escreva apenas as cenas específicas para este vídeo. Isso garante efeitos estáveis e reduz erros. Atualmente existem:

components/common/: Scripts compartilhados por todos os templates, incluindo dublagem (tts.py), alinhamento de áudio gravado (align.py), mixagem de três versões de áudio (mix_audio.py) e exportação (export_versions.sh). Use esses scripts diretamente nas Etapas 4 e 7.
components/3d-data/: Implementação de referência para Dados 3D (código-fonte do boletim financeiro da SpaceX), incluindo texto 3D chinês, trilhas brilhantes, grade de chão, hologramas e transições de máscara
components/gallery/: Galeria de Arte (lente de vidro líquido WebGL para tela, matemática de visão de câmera, carrossel de obras, lupa, cartão de arquivo de obra e layout de detalhes, com exemplo completo da Mona Lisa)
components/vintage-archive/: Arquivo Vintage (etiqueta de papel, cartão de foto, fita, carimbo, círculo vermelho, placa de latão, virar página, lupa de latão, tela cheia com obra-prima, mesa de madeira, sobreposição de filme, além de scripts para obter imagens, envelhecer, dublar e mixar áudio, com exemplo completo de Napoleão)

Após criar um novo efeito satisfatório, consolide as partes genéricas de volta na biblioteca de componentes.

Etapa 3: Analisar a Imagem de Referência

Examine a imagem de referência com atenção, extraia e anote os seguintes itens (todas as cenas seguintes devem obedecer):

3 a 5 cores principais (escreva os valores hexadecimais, ex.: #0B1E3F)
Fundo: Cor sólida / Gradiente / Textura / Escuro ou Claro
Textura: Plano / Sombreado 3D / Vidro / Papel / Traço de linha
Personalidade da Fonte: Negrito grosso / Redonda / Manuscrita / Serifada
Características de Composição: Quanto espaço em branco, densidade dos elementos, centralizado ou deslocado
Se a referência for um vídeo, adicione: Movimento de câmera, tipo de transição, modo de entrada de texto, ritmo (rápido/lento)

Se o estilo de referência conflitar com o template escolhido (ex.: usuário escolheu Desenho à Mão, mas enviou uma imagem com textura de vidro 3D), primeiro comunique o conflito ao usuário, ofereça duas ou três opções de fusão para ele escolher, e só então prossiga. Não decida por conta própria.

Etapa 4: Processar a Locução e Definir a Linha do Tempo

Modo Texto:

Primeiro, faça uma leve limpeza no texto: remova erros de digitação e símbolos inadequados para leitura em voz alta (como ~ * #), sem alterar o significado.
Use components/common/scripts/tts.py para gerar a dublagem e os tempos frase por frase (números devem ser escritos em algarismos arábicos; se o ambiente não suportar dependências Python, use a capacidade de síntese de voz nativa do host, gerando o mesmo vo.mp3 e a tabela de tempos).

Modo Áudio:

Use components/common/scripts/align.py <caminho_do_audio> <caminho_do_texto> <diretório_de_saída> para alinhar. Se houver texto, use o texto original para as legendas; se não houver, use o texto reconhecido.
Se não houver texto, ou se a similaridade for inferior a 60%, mostre o resultado para o usuário verificar.

Modo Sem Locução:

Estime a duração de cada frase baseado em 4 a 5 caracteres chineses por segundo.

No final, obtenha uma tabela de tempos das frases, que servirá como base para o storyboard. A duração total do vídeo deve ser baseada na duração da dublagem; as imagens acompanham a dublagem.

Etapa 5: Criar o Storyboard e Aguardar Confirmação do Usuário (Não Renderize Diretamente)

Liste o storyboard em uma tabela, uma linha para cada cena:

Cena	Tempo	Locução Correspondente	Conteúdo Visual	Efeito de Movimento	Efeito Sonoro

Requisitos:

Uma frase de locução geralmente corresponde a 1 cena; frases longas podem ser divididas em 2.
Cada cena deve ter um "elemento principal" e descrever claramente como ele se move (de onde vem, para onde vai, por quanto tempo).
Números e palavras-chave da locução devem aparecer na tela.
Especifique claramente o tipo de transição entre as cenas.

Após enviar o storyboard, pergunte ao usuário: "Este plano está bom? Qual cena gostaria de alterar?" Só prossiga para a Etapa 6 após a confirmação do usuário. Este passo evita desperdiçar recursos com uma direção errada.

Etapa 6: Gerar o Vídeo

Siga os requisitos da seção "Ferramentas definem a implementação" do template para configurar o projeto, escrever o código e renderizar:

Inicialize um projeto Remotion (reutilize se já existir no ambiente), defina a largura e altura de acordo com a proporção escolhida pelo usuário, taxa de quadros 30.
Escreva cada cena como um componente independente (Scene01, Scene02…), organize-os na Composition principal em ordem temporal. Isso permite modificar uma cena posteriormente alterando apenas aquele arquivo.
Extraia as cores da imagem de referência e crie um arquivo de tema compartilhado; todas as cenas devem obter cores dele.
Legendas (apenas se o usuário escolheu "Com legendas" na Pergunta 4): Exiba frase por frase, sincronizado com a dublagem. Se o usuário escolheu "Sem legendas", não renderize a camada de legenda, mas mantenha a tabela de tempos para os pontos de sincronia das imagens. Para vídeos horizontais, coloque na parte inferior, a cerca de 8% da borda inferior; para verticais, coloque na parte inferior-média, a cerca de 25% da borda inferior, evitando botões e áreas de texto da plataforma.
Música de fundo e efeitos sonoros: Gere ou selecione de acordo com os requisitos da seção "Música define a emoção" do template. O volume da música de fundo deve ser reduzido para 15% a 25% do volume da dublagem; reduza automaticamente quando houver voz.
Primeiro, renderize 3 a 5 quadros-chave para auto-inspeção (composição, se o texto está vazando, se as cores correspondem à referência). Se estiver tudo ok, renderize o MP4 completo.

Ao encontrar erros, leia a mensagem de erro para localizar a cena específica e modifique apenas aquela cena; não reescreva tudo.

Design de Embalagem é um Requisito Obrigatório. Não basta colocar imagens e texto sobre um fundo de cor sólida. Cada cena deve extrair "elementos de embalagem" da referência e transformá-los em componentes reutilizáveis. Exemplos: textura de mesa ou fundo de cena, borda de papel fotográfico ou cartão, etiqueta de papel rasgado, faixa de fita, carimbo, círculo vermelho desenhado à mão, placa de latão, virar página de livro, granulação de filme, vinheta e cintilação. Números e palavras-chave devem aparecer sobre esses elementos de embalagem, nunca como texto solto.

Origem e Licenciamento de Materiais (Requisito Obrigatório). Quando forem necessárias imagens reais (figuras históricas, obras-primas, artefatos), use components/vintage-archive/scripts/fetch_commons.py para baixá-las do Wikimedia Commons. Este script também gera ATTRIBUTION.md, registrando o autor, licença e página de origem de cada material:

Public domain (Domínio público): Não requer atribuição, mas é recomendado manter a fonte nos créditos finais
CC BY / CC BY-SA: Atribuição obrigatória — nos créditos finais ou na descrição, escreva "Nome da Obra · Autor · Página de Origem · Nome da Licença"
CC BY-SA: Além da atribuição, obras derivadas devem ser publicadas sob a mesma licença

Após o download, visualize a imagem antes de escrever a cena (veja a Armadilha 1 na Etapa 7). Antes da entrega, verifique item por item do ATTRIBUTION.md se a atribuição foi implementada. As fontes são baixadas por setup_assets.sh e são todas OFL 1.1 / Apache 2.0, permitindo uso comercial e incorporação, mas a declaração de licença deve acompanhar o produto final.

Regra de Legibilidade do Texto: Todo texto deve estar dentro de um elemento de embalagem; nenhum texto pode flutuar fora de um pedaço de papel, faixa, etc. Carimbos e etiquetas de destaque devem usar cores de alto contraste (ex.: fundo amarelo com texto vermelho, fundo escuro com texto claro); não use texto vermelho semitransparente diretamente sobre o papel.

Música e Efeitos Sonoros: Se o usuário tiver uma biblioteca de mídia local (ex.: uma pasta de efeitos sonoros no disco D), pergunte o caminho primeiro. Em seguida, selecione a música de fundo da biblioteca de acordo com a emoção, e escolha os efeitos sonoros de acordo com a ação (virar página, papel, Polaroid, lápis, transição de assobio, batida de tambor, graves, onda do mar, etc.). A música de fundo deve ser um trecho que termine naturalmente no final do vídeo. Use síntese programática apenas se não houver biblioteca de mídia disponível.

Etapa 7: Entrega e Modificações

Versões de Exportação: Antes de renderizar, pergunte ao usuário quais versões de áudio ele deseja exportar (multipla escolha; efeitos sonoros são mantidos em todas as versões):

Versão Completa: Narração + Música + Efeitos Sonoros
Versão Sem Narração: Música + Efeitos Sonoros (adequado para o usuário regravar a própria locução)
Versão Sem Música: Narração + Efeitos Sonoros (adequado para o usuário adicionar música licenciada na plataforma)

Método: Renderize as imagens apenas uma vez (sem áudio) e depois combine as diferentes faixas de áudio. Não renderize várias vezes. Existem scripts prontos em components/common/scripts/: mix_audio.py gera três faixas de áudio de uma vez, export_versions.sh faz a combinação e exportação. Outros templates devem seguir a mesma lógica.

Ao entregar, informe ao usuário:

Localização do arquivo final, duração, proporção, se tem legendas, quais versões de áudio foram exportadas
Qual template foi usado, quais são as cores principais
Uma dica: "Se alguma cena não ficou boa, é só falar, tipo 'O globo no final queria um estilo diferente'. Eu altero apenas aquela parte."

Quando o usuário solicitar modificações:

Primeiro, confirme qual é o número da cena (se não tiver certeza, verifique a tabela de storyboard com base na descrição).
Modifique apenas o arquivo de componente daquela cena; não mexa em nenhuma outra cena.
Após a modificação, envie uma captura de tela para o usuário visualizar e, após confirmação, renderize o vídeo completo novamente.

Ao Atualizar esta Skill

Se o usuário solicitar modificações no conteúdo da Skill (adicionar templates, componentes, alterar documentação) e enviar para o GitHub:

Cada envio deve criar uma nova tag, no formato vMAJOR.MINOR.PATCH, consistente com o metadata.version no frontmatter.
Não use git tag / git push / gh release manualmente. Use uniformemente tools/release.py:

python tools/release.py --bump minor --note "Descrição desta atualização"

Ele executará sequencialmente: alterar número de versão → atualizar CHANGELOG.md → reempacotar .skill → commit → criar tag → push → criar GitHub Release (com pacote de distribuição).

Após a alteração, não precisa perguntar ao usuário "quer publicar?". Basta executar o comando acima.

Lista de Armadilhas Encontradas na Prática (Baseadas na Primeira Execução de 27s do Vídeo de Arquivo Vintage; Seguir Estas Dicas Economiza Muito Retrabalho)

Obter Materiais

O nome do arquivo no Wikimedia Commons pode enganar. O título pode ser "Winged Victory of Samothrace", mas o arquivo baixado pode ser uma placa na parede com inscrições. Após baixar a imagem, visualize-a antes de escrever a cena; não atribua a cena com base no nome do arquivo.
Fotos com composição vertical não podem ser colocadas em tela cheia (FullPainting / objectFit:cover cortará o sujeito principal). Imagens verticais devem sempre usar o cartão de foto (PhotoCard) — o template de Arquivo Vintage é, por natureza, "fotos sobre uma mesa", não imagens ocupando a tela toda.

Escrever Cenas

Ao colocar múltiplas linhas de texto em um contêiner com bordas curvas ou formato irregular, não calcule centralização com flex de forma superficial. A borda inferior de uma faixa de fita (Ribbon) é uma curva que sobe no centro. Antes, o subtítulo ficou completamente fora do papel. É necessário verificar a altura no "ponto mais estreito da curva", ou renderizar um quadro único e ampliar 2x (recortando a área) para inspeção visual do espaço em branco.
Deixe tempo suficiente para os elementos de entrada se estabilizarem: se a cena tiver menos de 60 quadros, elementos com entrada Drop (mola) podem não ter terminado de cair antes da transição (papéis voando para fora da borda direita da tela). Após o quadro de entrada do papel, deixe pelo menos 30 quadros de estabilidade.

Executar Scripts

O parâmetro de entrada de export_versions.sh deve ser o arquivo que contém registerRoot() (geralmente src/index.ts). Passar Root.tsx resultará no erro "does not contain registerRoot".
Antes de renderizar, extraia 3 a 5 quadros-chave para auto-inspeção; não renderize até ficar preto de uma vez. O método de auto-inspeção é ampliar uma área recortada para verificar se o texto está vazando, não olhar apenas a miniatura do quadro inteiro — um vazamento de 10px que não é visível no quadro inteiro fica claro após a ampliação.

知识动画视频生成

O que é 知识动画视频生成?

Perguntar na sua IA favorita

Documentação

Geração de Vídeo de Animação de Conhecimento

Etapa 1: Escolha Inicial (Obrigatório, Não Pule)

Etapa 2: Ler o Template

Etapa 3: Analisar a Imagem de Referência

Etapa 4: Processar a Locução e Definir a Linha do Tempo

Etapa 5: Criar o Storyboard e Aguardar Confirmação do Usuário (Não Renderize Diretamente)

Etapa 6: Gerar o Vídeo

Etapa 7: Entrega e Modificações

Ao Atualizar esta Skill

Lista de Armadilhas Encontradas na Prática (Baseadas na Primeira Execução de 27s do Vídeo de Arquivo Vintage; Seguir Estas Dicas Economiza Muito Retrabalho)

Lista de Verificação Pré-Entrega (Revisar Antes de Cada Renderização Completa)

Habilidades Relacionadas

steipete/video-frames

steipete/summarize

openclaw/openclaw

obra/superpowers

affaan-m/ECC

affaan-m/everything-claude-code