Communitygithub.com

XiaoDuoYa/AeVideoGen

Crie vídeos comerciais de lançamento de produto, explicativos, de interação UI e de promoção de funcionalidades no estilo AE por meio de renderização web determinística a partir do código-fonte real do produto, sites, extensões de navegador, aplicativos, músicas, ativos de marca, argumentos de venda e vídeos de referência.

O que é AeVideoGen?

O AeVideoGen é uma habilidade avançada para agentes de IA (como Claude Code, Cursor, Codex) que transforma o código-fonte real de um produto em vídeos de marketing de nível profissional, semelhantes aos criados no Adobe After Effects — como vídeos de lançamento, demonstrações de UI, explicações de funcionalidades e anúncios promocionais. Ele garante fidelidade visual e comportamental ao produto real, preservando proporções nativas da interface, interações autênticas e uma narrativa causal que conecta o contexto do usuário à solução. A habilidade exige uma fase rigorosa de clarificação do briefing, análise densa de vídeos de referência (movimento, câmera, tipografia) e uso de scripts Python para validação de linha do tempo e análise de música, sincronizando o clímax musical com a promessa principal do produto. Plataformas como a Web são suportadas através de renderização localhost com revisão interativa antes da exportação final em MP4 estável (H.264/AAC), nunca utilizando HyperFrames. O fluxo de trabalho inclui auditoria de código, reconstrução de estados reais do produto, coreografia de foco e continuidade visual, e múltiplos gates de qualidade, exigindo aprovação explícita do usuário para cada etapa — desde o preview até a exportação final.

Funciona com~Claude Code✓Codex CLI~Cursor
npx skills add https://github.com/XiaoDuoYa/AeVideoGen/tree/main

Perguntar na sua IA favorita

Abre um novo chat com esta habilidade de agente já pré-carregada.

Documentação

AeVideoGen Por HxdLabs_ v1.0.1

Crie um vídeo de produto que possa ser distribuído comercialmente. Mantenha o comportamento do produto fiel, a história causal, a tipografia legível, o foco intencional, o movimento vivo, a revisão exata e a exportação estável.

Reforce o contrato de produção

  • Nunca use HyperFrames.
  • Trate a versão do produto solicitada e seu código-fonte como verdade visual e comportamental.
  • Use vídeos de referência para ritmo, gramática de movimento, linguagem de câmera, tipografia e estrutura de transição; nunca copie ativos de terceiros ou finja que outro produto é do usuário.
  • Preserve as proporções nativas da UI. Escalone uniformemente; nunca estique.
  • Faça cada clique do ponteiro ser no controle real visível e faça a câmera focar o mesmo alvo.
  • Não invente funcionalidades, alegações, estados, cópias, ícones ou layouts não suportados.
  • Não renderize um vídeo final até que o usuário aprove explicitamente o preview exato no navegador.
  • Faça backup da linha de base aceita antes de mudanças substanciais e use caminhos de saída versionados.
  • Não rebaixe silenciosamente resolução, taxa de quadros, duração, versão da fonte, prioridade da história ou alinhamento musical.

Execute a verificação de completude antes da implementação

Inspecione o prompt do usuário e todos os artefatos fornecidos primeiro. Não pergunte por fatos já presentes em arquivos, código-fonte, metadados ou conversa.

Imediatamente retorne um kickoff guiado antes da implementação:

  1. resuma o que já foi recebido;
  2. liste lacunas bloqueantes e explique como cada uma afeta a qualidade comercial;
  3. ofereça proativamente os ativos ou decisões exatos que o usuário pode fornecer;
  4. pergunte a próxima ou as três próximas perguntas de maior impacto;
  5. recomende o modo Goal para produção em várias etapas e forneça um objetivo, entradas, restrições, estágios e critérios de conclusão prontos para colar.

Para cada decisão ausente bloqueante ou útil, ofereça duas ou três opções concretas. Coloque a opção recomendada primeiro, explique a consequência visível de cada escolha e permita que o usuário responda com "按推荐方案" quando apropriado. Nunca bloqueie com uma pergunta aberta não explicada.

Não crie um Goal a menos que o usuário peça explicitamente para criar/iniciar/usar Goal. A recomendação e o resumo do Goal pronto para colar são obrigatórios para trabalhos substanciais de vídeo; a criação automática de Goal é proibida.

Crie brief.json a partir de assets/web-motion-starter/brief.json, então execute:

python3 scripts/validate_brief.py brief.json

Se um campo bloqueante permanecer desconhecido, faça perguntas concisas e continue perguntando em turnos posteriores até que o resumo esteja completo. Faça uma a três perguntas relacionadas por vez. Não comece a implementação criativa apenas porque alguns requisitos foram mencionados.

Proceda com suposições registradas somente quando o usuário disser explicitamente para usar o melhor julgamento, pular perguntas ou começar com um resumo incompleto. Marque cada campo desse tipo em assumptions e mantenha fatos de alto impacto com base na fonte.

Leia references/intake-and-clarification.md completamente sempre que o resumo for novo, incompleto, contraditório ou materialmente revisado. Leia references/guided-production.md completamente no kickoff e use seu formato de relatório de progresso durante toda a produção. Leia references/decision-options.md quando requisitos estiverem faltando ou o usuário perguntar o que escolher.

Execute o fluxo de trabalho

1. Proteja e audite

  • Inspecione o estado do repositório, versão, rotas, componentes, stores, estilos, dimensões, fontes, ícones, transições de estado, áreas alvo de clique e dados privados.
  • Crie uma linha de base recuperável antes de grandes edições.
  • Construa um registro de evidências mapeando cada alegação e estado filmados para evidência de fonte ou confirmação explícita do usuário.
  • Envie um relatório de progresso curto após a auditoria: evidências concluídas, risco restante e o próximo artefato revisável.
  • Leia references/source-reconstruction.md completamente antes de reconstruir uma UI de produto.

2. Analise referências sem copiá-las

Para cada vídeo de referência fornecido:

  1. Leia duração, resolução, taxa de quadros, áudio e estrutura de cena.
  2. Extraia quadros densamente o suficiente para ver animação — não miniaturas de vários segundos.
  3. Adicione janelas de 8 a 12 fps ao redor de cortes, morphs, zooms, entradas de texto, cliques e transições.
  4. Assista à referência completa em velocidade normal com áudio.
  5. Produza um registro de linguagem de movimento: sujeito, caminho da câmera, easing, duração, handoff, máscara/forma, tipografia, pausa e pista sonora.
  6. Traduza essa gramática para o produto real e a marca do usuário.

Execute scripts/analyze_reference_video.py para extração determinística. Leia references/reference-video-analysis.md completamente antes de afirmar uma correspondência de estilo ou recriação.

3. Escreva o filme causal

Use esta cadeia narrativa:

contexto do usuário → atrito → ação do produto → resultado visível → valor lembrado

  • Dê a cada cena um propósito e um sujeito visual dominante.
  • Coloque a promessa principal — não uma funcionalidade secundária — dentro do clímax musical.
  • Use texto puro como pontuação significativa ou elemento compartilhado, nunca preenchimento.
  • Mostre uma pergunta grande o tempo suficiente para ser lida, depois transforme/dockerize esse mesmo elemento no campo de entrada real.
  • Planeje cada quebra de linha de título. Nunca permita uma quebra acidental.
  • Crie production.json antes da animação e mantenha-o atualizado.
  • Execute scripts/validate_timeline.py production.json --strict após mudanças de tempo.
  • Relate a cadeia de cenas proposta, posicionamento do clímax e decisões criativas não resolvidas antes da implementação completa.

Leia references/creative-direction.md completamente antes de projetar o grafo de cenas. Leia references/commercial-quality.md antes de declarar uma direção como comercialmente pronta.

4. Analise e edite música

Execute:

python3 scripts/analyze_music.py music.mp3 --target-duration 30 --output music-map.json
  • Ouça todas as janelas candidatas; marcadores algorítmicos são propostas.
  • Escolha uma faixa musicalmente coerente e registre seu deslocamento.
  • Mapeie subidas de seção e batidas principais, não cada batida.
  • Preserve a bacia do clímax: aproximação, payoff legível, liberação.
  • Mantenha o ritmo da cena legível enquanto acentos dentro da cena ainda podem atingir as batidas.

5. Reconstrua estados reais do produto

  • Reutilize componentes de origem reais, CSS, SVG, ícones, fontes, cópia e lógica de estado onde permitido.
  • Substitua estado de rede por fixtures locais determinísticas e fiéis ao esquema.
  • Mantenha a composição final independente de chamadas de rede em tempo de execução.
  • Registre cada dimensão de superfície nativa e escale-a uniformemente.
  • Derive centros de clique após o layout final usando getBoundingClientRect().
  • Demonstre mudanças de estado reais; não escale uma captura de tela e chame de interação.

6. Coreografe foco e continuidade

  • Sequencie atenção: foco, aproximação do ponteiro, clique, feedback, resultado.
  • Quando uma cena chegar ao seu enquadramento pretendido, use um movimento contínuo de câmera — não três ou quatro recentralizações corretivas.
  • Trate o grupo completo significativo como o centro visual: para chat, centralize pergunta mais resposta; para um plugin, centralize o plugin a menos que um controle específico seja o sujeito declarado.
  • Aplique zoom de forma decisiva onde o público precisar ler. Não proteja espaço vazio ao custo da legibilidade.
  • Mantenha pausas legíveis vivas com movimento subordinado; não congele o quadro.
  • Desfoque/escureça material irrelevante quando não puder ser lido a tempo.
  • Prefira transições de elemento compartilhado, FLIP, herança de forma, máscara, pull de foco e continuidade de scroll.
  • Derive cada estado de tempo determinístico. Exponha window.__AE_VIDEO__.render(t).

7. Revise no localhost

  • Sirva a composição exata com play/pause, scrubber, segundos, índice de quadro, avanço de ±1 quadro, leitura de tempo e marcadores de cena.
  • Esconda todos os controles de revisão no modo de captura.
  • Inspecione pontos de verificação ao redor de cada clique, zoom, transição de linha, elemento compartilhado, clímax e final.
  • Reproduza o filme inteiro com áudio em velocidade normal.
  • Verifique alvos de clique reais, proporções nativas, quebras de linha pretendidas, tempo de leitura, centro visual, movimento contínuo, verdade da fonte e sincronia musical.
  • Mostre o preview exato ao usuário e aguarde aprovação explícita.
  • Relate o que mudou desde o último preview aceito e direcione o usuário para as faixas de tempo exatas que precisam de revisão.

Leia references/qa-gates.md completamente e passe em todos os gates bloqueantes.

8. Renderize apenas a versão aprovada

  • Trate aprovação de preview e permissão de exportação como duas decisões separadas.
  • Após a aprovação do preview, explique em linguagem simples que a exportação converte a animação do localhost em um arquivo de vídeo compartilhável. Pergunte se o usuário deseja exportar agora.
  • Antes de exportar, ofereça opções de qualidade claras com consequências para clareza, suavidade, carga de renderização, tempo, armazenamento e compatibilidade. Recomende uma opção para o dispositivo e plataforma do usuário.
  • Confirme resolução, taxa de quadros, formato/codecs, áudio, plataforma e nome do arquivo. Não exporte até que o usuário confirme explicitamente a especificação de exportação.
  • Defina approval.status, approval.approvedVersion, approval.exportRequested e approval.exportSpecConfirmed apenas após suas respectivas decisões explícitas.
  • Execute scripts/validate_brief.py brief.json --final e scripts/validate_timeline.py production.json --final --strict.
  • Renderize para um novo diretório e nome de arquivo. Nunca misture quadros antigos e novos.
  • Prefira o handshake de compositor estável em scripts/render_web_video.mjs; pare em um quadro instável em vez de exportar corrupção.
  • Trate 2560×1440 a 60fps como um padrão forte quando 4K60 exceder o hardware disponível, mas nunca altere as especificações alvo sem aprovação do usuário.
  • Codifique H.264/AAC yuv420p com faststart, então execute ffprobe, uma decodificação completa, verificações de continuidade e revisão de contato visual.

Bloqueie estas falhas

  • resumo incompleto sem permissão explícita para supor;
  • clique virtual, zoom no centro errado ou funcionalidade não suportada;
  • micro-recentralização repetida dentro de uma ação;
  • superfície do produto esticada/cortada ou redimensionamento arbitrário de tipo interno;
  • texto importante muito pequeno, muito breve, obscurecido ou quebrado acidentalmente;
  • cópia pequena sem sentido inserida para preencher espaço;
  • cena congelada morta ou rápida sem completar uma ação significativa;
  • sujeitos não relacionados trocando repetidamente para o centro;
  • texto grande e seu campo de destino em desacordo durante um morph;
  • transição sem geometria, movimento, cor, foco ou significado herdados;
  • clímax musical atribuído ao valor errado;
  • vídeo de referência amostrado de forma muito esparsa para entender seu movimento;
  • página final inventada a partir de cartões de funcionalidades genéricos em vez de evidência do produto baseada em código-fonte;
  • renderização final iniciada antes da aprovação ou exportada com quadros rasgados/parciais.
  • exportação iniciada sem uma escolha de qualidade separada em linguagem simples e confirmação explícita de exportação.

Roteie recursos agrupados

  • references/intake-and-clarification.md: necessário para completude do resumo e comportamento de acompanhamento.
  • references/guided-production.md: necessário para onboarding forte, handoff do modo Goal e comunicação de progresso.
  • references/decision-options.md: necessário para escolhas recomendadas, alternativas e tradeoffs amigáveis para iniciantes.
  • references/reference-video-analysis.md: necessário para análise de vídeo de referência ou recriação de estilo.
  • references/source-reconstruction.md: necessário para reconstrução de site, extensão, aplicativo ou

Habilidades Relacionadas