O que Vídeo de Demonstração de Produto SaaS faz?

Fluxo de trabalho completo para criar um filme de produto SaaS sincronizado com batidas no Remotion. Abrange filmes cinematográficos silenciosos, demos horizontais sincronizadas com batidas, reels verticais e filmes com camadas de colagem b-roll.

A skill é opinativa sobre três coisas: ativos, vibração, batidas. Pule qualquer uma delas e você produzirá um vídeo de motion graphics genérico no estilo Canva que se parece com todas as outras demos de SaaS. A disciplina é o que faz a diferença.

Estas são fortes recomendações em vez de regras rígidas. A maioria das produções as segue; algumas as quebram intencionalmente (por exemplo, filmes com narração onde a sincronização com a batida entraria em conflito com a narração). Quando você quebrar uma regra, faça-o conscientemente.

Pré-requisitos

Antes de começar, verifique se estes itens estão em vigor. O primeiro é realmente necessário; os outros são fortes recomendações com alternativas documentadas.

Remotion instalado (obrigatório). @remotion/cli 4.0.x + @remotion/google-fonts + React 19. Consulte references/project-scaffold.md para o package.json / tsconfig.json / remotion.config.ts mínimo exato - nunca execute npx create-video dentro de um repositório git existente (ele trava em um prompt de tecla de seta).
Plugin Super Powers (fortemente recomendado, não obrigatório). Quando disponível, esta skill orquestra superpowers:using-superpowers, superpowers:brainstorming (com acompanhamento visual), superpowers:writing-plans e superpowers:subagent-driven-development. Eles fornecem maquetes HTML no navegador para decisões de layout, documentos de plano formais e o loop de subagente implementador + revisor.

Se o superpowers não estiver instalado, a skill ainda funciona - o fluxo de trabalho se torna mais conversacional e um pouco mais lento. O brainstorming se torna um diálogo inline (sem acompanhamento no navegador); os planos são escritos diretamente no chat; as cenas são implementadas inline em vez de por meio de subagentes despachados. Os três pilares (ativos / vibração / batidas), além de b-roll, UI esquemática, posicionamento de clique, estilo de escrita e os scripts em scripts/ funcionam da mesma forma. Não recuse o trabalho por causa de um plugin ausente - adapte-se e prossiga.
Python 3 + librosa disponíveis. A detecção de batidas executa scripts/detect-beats.py que importa librosa. Se não estiver instalado, execute pip install --break-system-packages librosa numpy soundfile e avise o usuário - não faça isso silenciosamente.
Para análise de vídeo de referência (Pilar 2): a skill suporta três caminhos em ordem de prioridade. Use o mais alto que estiver disponível - consulte references/reference-video-vibe.md para a lógica de detecção completa.
1. CLI gemini no PATH (CLI oficial do Google ou wrappers da comunidade como gemini-yt). Execute com o prompt + URL do YouTube como argumentos.
2. GEMINI_API_KEY definida no ambiente ou .env. Use o wrapper curl da skill em scripts/analyze-reference-video.sh.
3. Nenhum dos itens acima - recorra à cópia manual do Google AI Studio. É estranho, mas sempre funciona; a qualidade é comparável.

Execute references/prereq-check.md como seu primeiro movimento em uma nova sessão.

Os três pilares

Estas são as atividades de alto impacto. Pular uma para "economizar tempo" quase sempre custa mais tempo adiante.

Pilar 1 - Integração de ativos

Antes de qualquer outra coisa, execute o questionário estruturado em assets/prompt-templates/asset-intake-questionnaire.md. Ele pergunta sobre:

Proporção de aspecto (16:9 horizontal, 9:16 vertical ou ambos em paralelo - consulte references/vertical-port.md se ambos)
Duração em segundos (20-45s recomendado)
Logotipo - SVG preferido. Se for apenas PNG, capture as dimensões nativas para evitar pixelização quando redimensionado.
Cores hexadecimais da marca (acento primário + 3-6 pastéis de suporte)
Pilha de fontes (todas devem estar no Google Fonts)
Cópia / roteiro - prefira um rascunho fornecido pelo usuário em vez de gerar um. Se eles não tiverem roteiro, consulte references/script-development.md.
Narração (opcional)
Arquivo de trilha sonora - necessário para sincronização com batidas. Se o usuário não tiver, escolha uma de estoque livre de royalties.

Consulte references/asset-intake.md para o fluxo de integração completo, incluindo o conjunto mínimo viável de ativos parciais, higiene de nomenclatura na cópia e a verificação de pixelização no redimensionamento de ativos.

Pilar 2 - Fluxo de trabalho de vibração de vídeo de referência

Antes de escrever cenas, peça ao usuário 2-3 vídeos de referência do YouTube cuja vibração eles desejam. Em seguida, produza uma análise do diretor para cada um.

Dois caminhos suportados (consulte references/reference-video-vibe.md):

Automatizado (preferido quando disponível) - se o usuário tiver uma GEMINI_API_KEY definida, execute scripts/analyze-reference-video.sh <youtube-url> <slug> para cada vídeo. Usa o Gemini Pro Preview via curl. Leva ~30s por vídeo. As saídas vão para references/gemini-<slug>.md.
Manual (sempre funciona) - abra aistudio.google.com, cole o prompt de scripts/reference-video-prompt.md junto com a URL do YouTube, copie o resultado de volta para um arquivo. É estranho, mas produz resultados igualmente utilizáveis. Use isso quando a API não estiver disponível.

O vocabulário de verbos de direção (push-through, whip-pan, V-cut pull-back, ink-mask, match-cut zoom) é a saída mais importante - ela fornece primitivas de movimento específicas para construir ao redor.

Pilar 3 - Sincronização de batidas com trilha sonora

Os limites das cenas devem cair em caixas (a sensação retórica de "batida de bateria"). Eventos internos (cliques, aterrissagens de cartões, início de contadores) devem cair em bumbos ou caixas dentro da cena.

O pipeline:

Execute scripts/detect-beats.py <soundtrack.mp3> --fps 30 --out beats.json. Emite BPM, quadro do primeiro bumbo, timestamps + quadros da caixa.
Ingira em um único objeto de constantes de temporização (consulte assets/code-templates/theme-v2.ts). Cada cena <Sequence from={...} durationInFrames={...}> puxa disso.
Após a Fase 6 (cenas construídas), execute scripts/align-internal-events.py contra beats.json + uma lista de eventos internos da cena para ajustá-los às batidas mais próximas dentro de ±6 quadros. Esta é a segunda iteração de maior alavancagem após o render inicial - o público sente eventos internos fora da batida como "ritmo às vezes estranho" sem ser capaz de apontar o porquê.
Use os helpers isSnare(n) / isKick(n) para afirmar no modo de desenvolvimento.
Execute scripts/check-typing-budget.py contra qualquer TypedText/TypedChars para verificar se cabe na duração da cena. Corta a digitação fora da tela antes de enviar.

Matemática completa, helpers, alinhamento de eventos internos e a verificação de orçamento de digitação em references/beat-sync.md.

Capacidades adjacentes - quando o básico não é suficiente

Elas cobrem situações além da demo de SaaS padrão "tudo motion graphics, apenas grave uma captura de tela". Leia a referência relevante quando a situação do usuário precisar disso.

Desenvolvimento de roteiro - quando o usuário não tem roteiro

A maioria dos usuários chega com uma ideia vaga do produto, não uma tela por tela finalizada. references/script-development.md percorre um fluxo de diálogo estruturado que produz um esboço de 4 atos + tela por tela bloqueada + página de referência de cópia bloqueada, pronta para alimentar o documento de especificação.

Integração de b-roll - quando o filme usa camadas de ação ao vivo ou colagem

Se o usuário tiver filmagens de estoque, clipes de colagem ou qualquer vídeo que deseje como camada de fundo, use references/b-roll-integration.md e o template BRollLayer. O b-roll pode ser um fundo de opacidade total ou uma textura de baixa opacidade; a primitiva lida com corte, fade, modos de mesclagem e temporização corrigida de fps.

(Versões anteriores desta skill recomendavam enviar trabalhos de ação ao vivo para Premiere/DaVinci. Isso está errado quando o b-roll está sendo usado como uma camada sob gráficos em movimento - o Remotion lida bem com isso e manter a produção em uma ferramenta é um ganho de produtividade.)

Fidelidade de UI esquemática - quando o produto não tem UI real para gravar

Se o produto é uma extensão do Chrome, uma API ou está em estágio inicial e não há UI de produto real para capturar, references/schematic-ui-fidelity.md aborda como inventar UIs esquemáticas que pareçam polidas sem infringir plataformas reais (LinkedIn, Gmail, Slack). Três padrões de referência: cartão de perfil, compositor de e-mail, painel de API - modelos de código em assets/code-templates/Schematic*.tsx.

Posicionamento de clique - a #1 dor de cabeça de iteração

Cliques do cursor perdendo botões é a reclamação mais comum dos usuários entre as produções. references/click-positioning.md aborda três abordagens (refs, constantes de posição computadas, overlay de depuração) - escolha uma antecipadamente. O custo de errar isso são vários ciclos completos de re-renderização por cena.

Estilo de escrita - mantenha marcas de IA fora da cópia voltada ao usuário

Travessões, aspas curvas e certos tiques de fraseagem gritam "gerado por IA". references/writing-style.md é o guia de estilo padrão com uma verificação de grep pré-renderização que captura esses itens. Se o usuário tiver seu próprio guia de voz da marca, prefira esse.

Sequência ideal

O fluxo completo de ponta a ponta. Consulte references/ideal-sequence.md para a versão anotada com a justificativa.

Colete as entradas primeiro, escreva o código por último. Execute o questionário de integração de ativos.
Desenvolva o roteiro se o usuário não tiver um - references/script-development.md.
Produza as análises de vídeo de referência - automatizado via scripts/analyze-reference-video.sh ou manual via AI Studio.
Detecte as batidas e escreva o objeto de constantes de temporização. scripts/detect-beats.py → theme-v2.ts. Cada início de cena deriva das batidas.
Estruture o Remotion manualmente. package.json / tsconfig.json / remotion.config.ts mínimos. Nunca npx create-video dentro de um repositório git.
Registre composições de depuração por cena no Root.tsx. Aceleração essencial. Navegar por uma cena de 5 segundos é 30x mais rápido do que o mestre completo.
Carregue todas as fontes no nível superior do Root.tsx com subsets: ["latin"].
Use hífens nos IDs de composição (v2-Scene06, nunca v2_Scene06).
Invoque superpowers:brainstorming com acompanhamento visual para decisões de estilo/layout. Maquetes HTML vencem prosa toda vez.
Escreva o documento de especificação. docs/superpowers/specs/YYYY-MM-DD-<nome>-design.md. Inclua uma seção de fidelidade de UI esquemática se alguma for necessária.
Revise a especificação você mesmo, depois o usuário a aprova. Nenhum código até o sinal verde.
Invoque superpowers:writing-plans. Verificação de higiene do modelo de plano antes de despachar (consulte references/project-scaffold.md).
Construa as primitivas de animação primeiro (TypedText, MaskReveal, PopIn, Cursor, ZoomPunch, FloatingElements, BRollLayer, Counter, IceCrack conforme necessário). Em seguida, os cartões de UI esquemática. Depois as cenas. Depois o mestre.
Invoque superpowers:subagent-driven-development. Limite os lotes de subagentes a 3-4 arquivos por despacho - lotes maiores às vezes ficam sem contexto no meio da tarefa. Consulte references/iteration-playbook.md.
Renderize a Cena 1 isoladamente. Estabeleça o estilo. Obtenha a aprovação do usuário antes do resto.
Itere em ondas. Limite cada onda a 5-8 correções. Execute a passagem de alinhamento de eventos internos uma vez após o render da linha de base - essa única passagem aperta o ritmo visivelmente.
Renderize o mestre na qualidade de publicação. --crf=14 --image-format=png (HD) ou --crf=15 --image-format=png --scale=2 (4K). Consulte references/render-export.md.
Verifique contra o mapa de batidas em velocidade 0.5x.

Índice de referências

O diretório references/ contém a profundidade. Carregue apenas o que você precisa para a fase atual.

ideal-sequence.md - o fluxo anotado completo, com justificativa
prereq-check.md - o que verificar antes de começar
asset-intake.md - fluxo de integração completo, fallback de ativos parciais, verificação de redimensionamento de ativos, higiene de nomenclatura
script-development.md - metodologia tela por tela quando o usuário não tem roteiro
reference-video-vibe.md - protocolo de análise Gemini (caminhos de API / CLI / AI Studio)
beat-sync.md - matemática da grade de batidas, regra de limite de cena, alinhamento de eventos internos, verificação de orçamento de digitação
project-scaffold.md - configuração mínima do Remotion, lista de verificação de commit, higiene de modelo de plano, essentials de .gitignore
animation-patterns.md - TypedText, MaskReveal, PopIn, ZoomPunch, FloatingElements, além de extensões
b-roll-integration.md - padrões BRollLayer, tratamentos de opacidade/mesclagem, desempenho de render
schematic-ui-fidelity.md - projetando UI falsa que pareça polida
click-positioning.md - três abordagens para manter os cliques do cursor nos alvos certos
writing-style.md - travessões e outras marcas de IA a evitar na cópia na tela
cursor-math.md - deslocamento de ponto de acesso, pontos-chave, transformação de proporção de escala
iteration-playbook.md - estrutura de ondas, revisões em lote, lotes de subagentes, reinícios de recarga a quente do Studio
render-export.md - comandos de render HD/4K, justificativa do CRF
gotchas.md - sublinhados em IDs de composição, avisos de fonte, carregamento itálico, problema de escala do MaskReveal
vertical-port.md - disciplina de portabilidade de reels 9:16

Ativos

assets/prompt-templates/ - modelos preenchíveis para integração de ativos, documentos de especificação, folhas de batidas
assets/code-templates/ - componentes testados em batalha (constantes de tema, easings, Cursor, MaskReveal, TypedText, PopIn, ZoomPunch, FloatingElements, BRollLayer, Counter, IceCrack, SchematicProfileCard, SchematicEmailComposer, SchematicApiPanel, Act2Master, Act2MasterVertical)

Scripts

scripts/detect-beats.py - rastreamento de batidas baseado em librosa. Emite BPM, primeiro bumbo, quadros de caixa/bumbo no fps alvo.
scripts/analyze-reference-video.sh + scripts/reference-video-prompt.md - wrapper Gemini Pro para análises de direção do YouTube.
scripts/align-internal-events.py - alinha eventos internos da cena com as batidas dentro de ±quadros de tolerância.
scripts/check-typing-budget.py - verifica se TypedText/TypedChars cabe na duração da cena antes do render.

Quando a skill NÃO deve ser usada

Iteração profunda em projeto Remotion existente. Se o usuário estiver 20+ commits em um filme e pedindo ajustes da onda N+1, não execute a integração novamente. Carregue references/iteration-playbook.md e references/beat-sync.md e vá em frente.
Demos não SaaS. Recapitulação de evento, montagem de depoimento, screencast de tutorial - os padrões de sincronização com batidas + cartões de UI de produto não se aplicam de forma limpa.
Filmagem documental ou de cabeça falante como assunto. Esta skill lida com b-roll como uma camada sob gráficos em movimento. Se a ação ao vivo é o assunto do filme (entrevistas, unboxing, walkthroughs), use um editor não linear como Premiere, DaVinci ou... (truncado para tradução).

Vídeo de Demonstração de Produto SaaS

O que é Vídeo de Demonstração de Produto SaaS?

Perguntar na sua IA favorita

Documentação