O que Vídeo de demonstração de aplicativo faz?

Ideia central

O estilo está no aplicativo. Crie uma interface escura e cinematográfica que tique, pulse e anuncie resultados reais; depois grave essa interface; em seguida, adicione uma barra de legendas reservada, close-ups e cartões tipográficos de título e encerramento na edição.

Se o conteúdo ainda não for um aplicativo — um pipeline, um conjunto de dados pontuado, um modelo de custo, uma CLI —, monte-o primeiro como um pequeno frontend pronto para câmera (consulte FRONTEND_STYLE.md e theme.css). Não pule diretamente para slides tipográficos ou um modelo de vídeo.

Não gere a demonstração com um modelo de geração de vídeo, um modelo de geração de imagem ou TTS. Cartões de título e encerramento são tipografia. O padrão da imagem é silencioso; não adicione música de banco de imagens ou narração, a menos que o briefing peça som.

Um exemplo trabalhado e anonimizado de três cortes (legendas sobrepostas vs. uma apresentação de slides vs. uma barra reservada em uma sessão ao vivo) está em REFERENCE_CASE.md.

Ativos

Todos os caminhos são relativos a esta pasta da skill.

FRONTEND_STYLE.md — tokens de design, padrões de componentes, voz de texto, especificações de movimento, lista de verificação pré-gravação
theme.css — variáveis CSS prontas para uso, aurora / vidro / brilho, keyframes
tailwind-theme.css — trecho @theme do Tailwind v4
./record_demo_template.py — gravador Playwright parametrizado
./edit_demo.py / ./edit_demo.sh — título, legendas, close-ups, cartão de encerramento, codificação
example_timeline.json — lista de batidas que o editor lê
REFERENCE_CASE.md — exemplo trabalhado anonimizado e as lições de três cortes

Estilo visual (referência rápida)

Tema no aplicativo (também em FRONTEND_STYLE.md e theme.css):

Função	Hex
Tinta da página	`#05060A` / `#0A0C14` / `#11131F` / `#1A1D2E`
Texto do corpo	`#E5E7F0`
Ciano (no escopo / ao vivo)	`#22D3EE` / `#67E8F9`
Violeta (motor pesado ou pago)	`#A855F7` / `#A78BFA`
Fúcsia (final do gradiente)	`#F0ABFC`
Esmeralda (combinação / conclusão / totais)	`#10B981`
Rosa (ameaça / parada forçada)	`#F43F5E`
Âmbar (lacuna, suposição, não aprovado)	`#F59E0B`
Ouro (explosão de conquista)	`#FBBF24`

Lavagem aurora, grade de 48px com fade, cartões de vidro, brilhos codificados por cor. Inter para interface, JetBrains Mono para relógios e feeds, números tabulares. Carregue as fontes; nomeá-las em um tema não é suficiente (theme.css inclui a importação). O herói é font-black tracking-tight com cerca de 48–60px, com uma palavra em um gradiente de texto #67E8F9 → #A78BFA → #F0ABFC. Kickers são 11–13px maiúsculos com 0.14–0.25em.

Tema da barra de legendas / cartão de título (a camada de edição, não o aplicativo):

Função	Hex
Fundo	`#08070C`
Regra dourada / kicker	`#E1A01D`
Manchete	`#F3ECE3`
Subtítulo	`#9A958C`

O tipo da manchete no editor é um grotesco itálico pesado. ./edit_demo.py usará ./fonts, ou APP_DEMO_FONT / APP_DEMO_FONT_ITALIC, ou uma fonte DejaVu / Liberation do sistema. Geist Italic 900 é um bom substituto se você a tiver.

Movimento

Easing compartilhado: cubic-bezier(0.16, 1, 0.3, 1). Contadores se movem a partir do valor anterior (1.1s padrão, 1.6s em blocos de KPI, 1.8s em projeções). Passos ativos pulsam (1.4s) com um anel em expansão (1.3s). A conclusão é uma marca de seleção com mola mais uma explosão de partículas. Um toast de conquista segura por cerca de 1.7s. O CTA e o passo ativo brilham (loop de 1.6s).

Distribua os eventos recebidos para que cada passagem seja legível (cerca de 1.5s após o término de um passo). Horários e contagens do servidor permanecem reais; apenas quando aparecem é atrasado. Após a execução terminar, aguarde cerca de 900ms e, em seguida, role suavemente para um herói de resultados com escala.

Voz do texto

Escreva como um trailer, depois prove com números.

Herói: uma metáfora curta, uma palavra gradiente. O subtítulo diz o que o espectador verá desbloquear e que eles chegarão a uma leitura de custo e confiança.
CTA ao vivo: um verbo de ignição. CTA de repetição: um verbo de reprodução.
Cada passo tem um título concreto e uma conquista de 2–3 palavras em Title Case, exibida como toast na conclusão e marcada com estrela na linha.
Lacunas são trabalho, não falhas. Ameaças têm um escudo nomeado. Saída não aprovada é marcada na interface. Uma linha de segurança / somente leitura permanece no cabeçalho.
Custos são exatos (dígitos fracionários suficientes para que um valor abaixo de centavo não se torne $0.00) e rotulados como medidos vs. estimados. Suposições são nomeadas no bloco.
A comparação de custo ou valor do fluxo de trabalho completo, e suas ressalvas, vivem no produto para que a câmera possa rolar até eles.

UX da demonstração

?replay=<id> (?speed= opcional) inicia automaticamente uma execução previamente medida com seus tempos reais, e a interface diz que é uma repetição.
?run=<id> (?backend= opcional) reabre uma execução concluída para retomadas do painel sem nova cobrança.
Caminho ao vivo: carregar ou conectar dados reais → confirmar um mecanismo pago, se necessário → acender → linha do tempo com ritmo + feed de solicitações → painel, projeções, painel de custo, ressalvas.

Fluxo de trabalho

Estilize o frontend para a câmera. Se ainda não houver interface, monte uma. Aplique theme.css (e tailwind-theme.css se o aplicativo usar Tailwind v4). Siga a lista de verificação em FRONTEND_STYLE.md.
Trave os dados reais. Use uma execução ao vivo ou um dispositivo de repetição fiel. Cada legenda posterior deve poder citar um número que aparece na tela ou nas próprias métricas da execução.
Grave com Playwright em 1920×900. Sem pílulas de legenda na página — elas cobrem a interface. Roteirize uma tomada contínua (página inicial → fluxo de trabalho → resultados) com pausas de 2–4s e uma rolagem lenta. Use ./record_demo_template.py. Mantenha a taxa de quadros nativa do Playwright (frequentemente 25 fps).
Edite com ./edit_demo.sh. A tela é 1920×1080: um painel de aplicativo de 1920×900 sobre uma barra reservada de 180px (#08070C / #E1A01D / #F3ECE3 / #9A958C). Cerca de 2s de cartão de título, cortes secos (não crossfades de 1s), close-ups de ~0.4s com 1.3× apenas no painel do aplicativo (a barra permanece fixa). Termine na comparação de custo ou valor no aplicativo, depois um cartão de ressalvas de ~3s. Alvo de 60–70s. Silencioso por padrão (uma faixa AAC silenciosa é aceitável para compatibilidade com tocadores).
Verifique os quadros. Confirme que a barra nunca cobre a interface, que os close-ups não cortam a barra e que cada figura legendada está na tela ou rotulada como uma suposição.
Walkthroughs de processo pertencem a um deck separado. Cartões de arquitetura, como funciona e conclusões não substituem a sessão neste vídeo.

Voz da legenda

Kicker: algumas palavras maiúsculas espaçadas (SESSÃO AO VIVO, MISSÃO CUMPRIDA, A PEGADINHA).
Manchete: uma ou duas frases curtas. Ponto final, não reticências.
Coloque o fato medido surpreendente primeiro: contagens, tempo, custo, o que foi capturado.
Aponte para o que está na tela agora, depois adicione a conclusão. Não narre um tutorial.
Quando cortar para um painel de custo no aplicativo, diga que é o próprio painel do aplicativo, não um slide.

Modos de falha

Erro	Correção
Sobreposição de legenda HTML/CSS na página	Barra reservada sob o aplicativo, sempre
Colagem de capturas de tela ou slides tipográficos de "processo" como corpo	Grave a sessão; mova os cartões de processo para um deck
Crossfades entre cada batida	Cortes secos; reserve o movimento para close-ups e o próprio aplicativo
Figuras inventadas ou arredondadas sem rótulo	Copie os dígitos da execução; rotule as suposições
Close-up amplia todo o quadro de 1080p e corta a barra	Amplie apenas o painel de 1920×900
Terminar em arquitetura ou em um gráfico de como funciona	Termine na comparação de custo/valor do produto, depois nas ressalvas
Gerar uma "demonstração" com um modelo de vídeo	Apenas Playwright + ffmpeg
Narração ou música adicionada "para torná-lo cinematográfico"	O padrão é silencioso; a imagem e as legendas conduzem
Interface plana, números surgindo, sem painel de custo no aplicativo	Estilize o aplicativo primeiro (`FRONTEND_STYLE.md`); não tente corrigir apenas na edição
Herói ou CTA escrito como uma página de configurações	Metáfora + palavra gradiente; verbo de ignição para ao vivo, verbo de reprodução para repetição
Fontes nomeadas no CSS, mas nunca carregadas	Adicione a importação de Inter + JetBrains Mono de `theme.css`
Conjunto de dados ou CLI gravado como slides porque "não há aplicativo"	Monte um pequeno frontend para estilo primeiro, depois grave-o

Início rápido

Requer ffmpeg e Python 3.

python3 -m venv .venv && .venv/bin/pip install playwright pillow && .venv/bin/python -m playwright install chromium

# 1. Estilize o aplicativo (theme.css / FRONTEND_STYLE.md) para que ele tenha um bom desempenho na câmera.
# 2. Depois que o aplicativo estiver em execução e actions() no gravador tiver sido preenchida:
.venv/bin/python ./record_demo_template.py --out demo_raw.webm
./edit_demo.sh --input demo_raw.webm --timeline example_timeline.json --output demo.mp4

Opcional: coloque Geist (ou outro grotesco itálico pesado) em ./fonts, ou defina APP_DEMO_FONT e APP_DEMO_FONT_ITALIC.

Propósito

Criar um vídeo dramático de demonstração, promoção ou lançamento de um aplicativo funcional a partir de uma sessão real. Estilize um frontend pronto para câmera, grave-o com Playwright e componha uma barra de legendas reservada, close-ups e cartões tipográficos de título e encerramento com ffmpeg. Um pipeline, conjunto de dados, modelo de custo ou CLI é montado como esse frontend primeiro.

Entradas

Um aplicativo em execução na URL base do gravador (--base, padrão http://127.0.0.1:8765 em record_demo_template.py), ou um pequeno frontend criado para a gravação.
Dados reais, ou uma repetição fiel de uma execução previamente medida. Figuras legendadas vêm da tela ou das métricas da execução, ou são rotuladas como suposições.
actions() preenchido dentro de record_demo_template.py.
Um JSON de linha do tempo no formato de example_timeline.json.
ffmpeg, Python 3, playwright e pillow. Opcional: grotesco itálico em ./fonts, ou APP_DEMO_FONT e APP_DEMO_FONT_ITALIC.
theme.css, tailwind-theme.css quando o aplicativo usa Tailwind v4, e a lista de verificação em FRONTEND_STYLE.md.

Saídas

Tomada bruta de record_demo_template.py (.webm, ou .mp4 com --transcode).
Arquivo editado de edit_demo.sh: 1920×1080 H.264, geralmente 60–70s, AAC silencioso. Um painel de aplicativo de 1920×900 fica sobre uma barra de legendas de 180px, com um cartão de título de ~2s, cortes secos, close-ups de ~0.4s com 1.3× no painel do aplicativo e um cartão de ressalvas final de ~3s.

Não-objetivos

Modelos de geração de vídeo, modelos de geração de imagem e TTS.
Música de banco de imagens ou narração, a menos que o briefing peça som.
Sobreposições de legenda na página, colagens de capturas de tela e slides de processo com crossfade como corpo.
Figuras inventadas, ou figuras arredondadas que não são rotuladas.
Usar um deck de arquitetura ou como funciona no lugar da sessão.

Verificações

A lista de verificação pré-gravação de FRONTEND_STYLE.md passa, incluindo Inter e JetBrains Mono carregados e um quadro legível de 1920×900.
A barra reservada nunca cobre a interface. Close-ups movem apenas o painel de 1920×900, para que a barra permaneça com largura total e sem cortes.
Cada figura legendada está na tela ou nas métricas da execução, ou tanto a legenda quanto o cartão de encerramento a chamam de suposição ou projeção.
Os cortes são secos, a duração é de cerca de 60–70s, e a faixa está silenciosa, exceto pelo AAC silencioso que o editor multiplexa.
bash -n edit_demo.sh e python3 -m py_compile em edit_demo.py e record_demo_template.py ambos são bem-sucedidos.

Modos de falha e recuperação

Use a tabela Modos de falha acima. Recuperação:

O que você vê	O que fazer
Legendas cobrem botões ou gráficos	Exclua a sobreposição na página. Coloque a linha na linha do tempo e execute novamente `./edit_demo.sh`.
O corpo são imagens estáticas, uma colagem ou crossfades	Grave a sessão com `./record_demo_template.py` e corte seco entre as batidas.
Um close-up corta a barra	Mantenha `zoom` na batida. `edit_demo.py` dimensiona apenas o painel do aplicativo.
Um número na legenda não está na tela	Copie o dígito do painel ou da métrica da execução, ou rotule a suposição no bloco e no cartão de encerramento.
Interface plana, números que surgem ou nenhum painel de custo	Reestilize a partir de `theme.css` e `FRONTEND_STYLE.md`, depois grave novamente.
O editor sai porque não encontra uma fonte	Adicione um `.ttf` em `./fonts`, ou defina `APP_DEMO_FONT` e `APP_DEMO_FONT_ITALIC`, depois execute novamente `./edit_demo.sh`.
A fonte é um notebook, CLI ou planilha	Crie o frontend pequeno de `FRONTEND_STYLE.md` em torno dos dados reais, depois grave-o.

Vídeo de demonstração de aplicativo

O que é Vídeo de demonstração de aplicativo?

Perguntar na sua IA favorita

Documentação