derrickgong87/demo-video-creation-skill

Skill de Criação de Vídeo de Demonstração

Crie um vídeo de demonstração de produto polido a partir de uma URL da empresa ou de ativos do produto. A saída padrão é um vídeo de 60 a 90 segundos em 1080p+; renderize em 4K quando a máquina, os ativos e o destino de entrega suportarem.

Padrão Operacional

• Baseie o vídeo na superfície real do produto: páginas do site, telas do aplicativo, workflows logados, capturas de tela, ativos fornecidos pelo usuário ou demonstrações públicas verificadas.
• Trate a entrada apenas com URL como suficiente para começar. Infira o produto, público, workflow principal e sistema de marca a partir do site, depois pergunte apenas sobre falta de acesso ou preferências de alto impacto.
• Prefira storytelling de gerente de produto em vez de marketing genérico. Mostre qual problema o usuário tem, o que ele faz dentro do produto, o que muda na tela e por que o resultado é importante.
• Use Remotion para composição de movimento quando prático e FFmpeg para inspeção, codificação, folhas de contato, manipulação de áudio e conversão para entrega.
• Mantenha as alegações defensáveis. Não invente métricas, logotipos de clientes, resultados de detectores, integrações, status de conformidade ou preços, a menos que verificados a partir do material de origem.
• Evite overfitting para um cliente anterior. Reutilize o workflow, os gates de qualidade e os padrões de movimento; não reutilize capturas de tela, textos, cores, preços, personas ou correções versão por versão específicas de clientes.

Entradas

Se o usuário fornecer apenas uma URL de site:

1. Abra o site em um navegador, mapeie a navegação, proposta de valor, páginas de produto, preços, documentos de ajuda e estados interativos visíveis.
2. Capture capturas de tela de alta resolução das páginas e superfícies de UI que melhor explicam o produto.
3. Construa uma narrativa em torno do loop de produto mais forte descoberto no site.
4. Declare qualquer limite de acesso se uma área logada do produto for necessária.

Se o usuário fornecer mais contexto, use-o para aumentar a qualidade:

• Público-alvo, plataforma da campanha, proporção de aspecto, duração preferida, CTA, objetivo do lançamento.
• Etapas do workflow do produto, acesso a conta de demonstração, entradas de amostra ou resultado antes/depois esperado.
• Ativos de marca, capturas de tela, referências de vídeo, fontes, direção musical, alegações proibidas e notas legais.

Roteamento de Referências

• Leia references/capture-workflow.md antes da pesquisa no navegador, captura logada ou trabalho com capturas de tela.
• Leia references/storytelling.md antes de escrever o roteiro, storyboard, lista de tomadas ou narrativa do produto.
• Leia references/visual-system.md antes de escolher linguagem de movimento, tipografia, transições, layout ou música.
• Leia references/remotion-ffmpeg.md antes de implementar o projeto de vídeo ou renderizar arquivos.
• Leia references/qc-checklist.md antes de considerar o vídeo completo.

Workflow de Produção

1. Escopo do entregável

   • Confirme duração alvo, proporção de aspecto, resolução, idioma e plataforma de entrega quando disponível.
   • Padrão: 16:9, 60 a 90 segundos, 30fps, H.264 MP4, mínimo 1080p.
   • Use 4K quando solicitado ou quando o vídeo for usado para lançamento, investidor, conferência ou distribuição de anúncios pagos.

2. Pesquise o produto

   • Navegue pelo site e páginas do produto profundamente o suficiente para identificar o loop central, não apenas a promessa da página inicial.
   • Construa um mapa rápido de funcionalidades: usuário principal, ponto de dor, ação primária, saída visível do produto, prova, CTA.
   • Se o produto estiver atrás de login, use a sessão ativa do navegador do usuário ou peça para ele fazer login, depois continue a partir da UI autenticada.

3. Capture evidências do produto

   • Capture capturas de tela do desktop em escala 2x ou superior quando possível.
   • Capture estados preenchidos e vazios se eles explicarem a transformação.
   • Nomeie os ativos por cena e estado, como dashboard-empty.png, workflow-result.png, pricing.png.
   • Mantenha um manifesto com URL, título da página, horário da captura, viewport, nome do arquivo e notas.

4. Escreva a história do produto

   • Comece com o problema do usuário ou resultado desejado em linguagem simples.
   • Percorra o loop do produto nesta ordem: configuração, ação, transformação, revisão/prova, workflow mais amplo, CTA.
   • Mantenha o texto curto o suficiente para um vídeo em movimento. Use legendas como âncoras, não parágrafos.
   • Use texto com som natural para o público; evite frases genéricas de IA como "desbloqueie produtividade", a menos que o produto genuinamente diga isso.

5. Projete o sistema de movimento

   • Use as cores e tipografia reais da marca como base, depois adicione uma fonte decorativa ou face de destaque contida se melhorar a hierarquia.
   • Use capturas de tela do produto como ativos principais. Adicione molduras de navegador, caminhos de cursor, zooms, máscaras, linhas de varredura, painéis de comparação ou tipografia cinética apenas quando eles esclarecerem o workflow.
   • Escolha transições que correspondam ao produto: líquido/ondulado para transformação fluida, varredura para análise, revelação com holofote para prova, deslocamento espacial para navegação, comparação dividida para antes/depois.
   • Mantenha o movimento contínuo. As mudanças de cena devem parecer que a câmera ou interface está se movendo através de uma história de produto, não slides separados.

6. Construa e renderize

   • Use o template inicial em assets/remotion-starter/ quando um scaffold de projeto for útil.
   • Renderize stills de revisão ou uma folha de contato antes de renderizar o vídeo final.
   • Renderize 1080p primeiro para QA, depois 4K final se solicitado.
   • Use FFmpeg ou ffprobe para verificar duração, resolução, codec, taxa de quadros e fluxo de áudio.

7. QA antes da entrega

   • Verifique se nenhum texto se sobrepõe, corta estranhamente ou se torna ilegível em cortes rápidos.
   • Verifique se botões, cursores, chamadas e máscaras estão alinhados com a UI subjacente.
   • Verifique se todas as capturas de tela são nítidas o suficiente na escala final.
   • Verifique se a música é instrumental, segura em direitos e balanceada sob qualquer narração ou SFX.
   • Forneça o MP4 final mais artefatos de produção úteis: storyboard, manifesto de ativos, folha de contato e projeto fonte quando relevante.

Scripts Reutilizáveis

• scripts/create_demo_brief.py cria um briefing estruturado a partir de uma URL e contexto opcional do produto.
• scripts/qc_video.py inspeciona metadados do vídeo final com ffprobe e sinaliza problemas de resolução, duração, codec e áudio.
• scripts/make_contact_sheet.py cria uma folha de contato visual com FFmpeg para revisão rápida.

Execute os scripts a partir de uma pasta de projeto ou com caminhos absolutos. Eles são ajudantes, não um substituto para o julgamento visual.

Template Inicial

Copie assets/remotion-starter/ para o projeto de trabalho ao iniciar um novo vídeo. Substitua a configuração de placeholder em src/demoConfig.ts, adicione capturas de tela em public/ ou ativos estáticos do Remotion e adapte as cenas à narrativa do produto.

O starter é intencionalmente genérico:

• Ele inclui uma composição de história de produto com cenas de abertura, workflow, prova e CTA.
• Ele usa slots reais de capturas de tela, mas recai para placeholders de UI limpos.
• Ele inclui primitivas de movimento para fades, zooms, movimento de trilho, ênfase de cursor e painéis de comparação.
• Evita textos, cores ou ativos específicos de clientes.

Barra de Conclusão

Não considere o vídeo finalizado até que estes itens sejam verdadeiros:

• A história do produto é derivada de evidências reais do produto.
• A renderização final é pelo menos 1080p, ou o usuário aceitou explicitamente uma resolução inferior.
• O vídeo foi inspecionado visualmente através de stills, renderização de prévia ou folha de contato.
• FFmpeg/ffprobe confirma resolução, duração, codec de vídeo e estado de áudio.
• Qualquer licenciamento ou limite de fonte para música, fontes, imagens de arquivo ou páginas de terceiros está documentado.
• O usuário recebe um arquivo de vídeo concreto, não apenas um plano ou roteiro.