open-kbs/skills-demo-video

Vídeo de demonstração

Produz um MP4 em Full HD que demonstra o site ou aplicativo ativo do projeto: gravações reais de tela, narração no idioma do usuário, legendas embutidas, música de fundo e um link para compartilhar. Tudo é executado no contêiner com agent-browser, ffmpeg e o proxy de IA do projeto (cobrado dos créditos do projeto). Resultado típico: 1–3 min, 10–20 MB, cerca de 1–2 horas de trabalho do agente. Todo o trabalho fica em video/ (build/ e out/ ficam fora do git).

Quando usar

• "Faça um vídeo que mostre como o sistema funciona", promoção, anúncio, demonstração para cliente
• Um passo a passo para uma oferta, uma nota de versão ou uma landing page
• Não para gravações que o próprio usuário faz: nesse caso, escreva um roteiro de filmagem em docs/demo/script.md (cena, ação, texto a ser dito)

Pipeline (cada etapa é retomável: uma reexecução pula a saída já concluída)

Etapa	Comando	Saída
0. Configuração	bash .claude/skills/demo-video/setup.sh	ffmpeg, fontes de legenda, pastas video/
1. Roteiro	escrever video/vo/narrator.json e video/scenes.mjs (começar a partir de examples/)	o plano
2. Narração	node .claude/skills/demo-video/tts.mjs video/vo/narrator.json video/build/vo	s01.wav… + s01.txt (o que foi dito)
3. Tomadas	source .claude/skills/demo-video/rec-lib.sh depois take_start, mark, take_stop	video/build/rec/<take>.mp4 + .marks
4. Cartões	card_take <nome> "file://$PWD/video/cards/<nome>.html?…" <segundos>	video/build/rec/card-<nome>.mp4
5. Sons	node .claude/skills/demo-video/sfx.mjs	video/build/sfx/chime.wav, click.wav
6. Edição	node .claude/skills/demo-video/compose.mjs video/scenes.mjs	video/out/<nome>.mp4 (+ música se nenhuma for fornecida)
7. QA	node .claude/skills/demo-video/listen.mjs video/out/<nome>.mp4 "<pergunta>" e capturas de quadro	correções, depois etapa 6 novamente
8. Publicação	node .claude/skills/demo-video/publish.mjs video/out/<nome>.mp4 --cover 16	chave no armazenamento do projeto + JPG de capa

(.agents/skills/demo-video/ se foi instalado com npx skills add.)

Como fazer um bom vídeo

Roteiro primeiro. 10–15 linhas de narrador, uma ideia por linha, 8–15 palavras, no idioma do usuário. Apenas fatos: nunca afirme números, clientes ou prêmios que você não possa verificar nos dados do próprio projeto. Coloque nomes de marcas e siglas em pronounce para que sejam lidos corretamente. Cada linha corresponde a uma cena.

Voz. O proxy não tem modelo TTS; tts.mjs usa o modelo Live (gemini-3.8-live) lendo cada linha exatamente como escrita, mantém o melhor de 3 tentativas comparando a transcrição do próprio modelo com o roteiro (80% de correspondência de palavras) e escreve um WAV por linha. Vozes: Kore, Charon, Puck, Fenrir, Aoede. Uma voz para o narrador; uma diferente para um papel de "cliente". Leia os arquivos s*.txt após a execução e regenere qualquer linha que diferir (rm do seu wav e reexecute).

Tomadas. Comece de um estado limpo: novo contexto do navegador, carrinho vazio, rascunhos de formulário salvos (agent-browser eval 'sessionStorage.clear()' e o mesmo para chaves localStorage que o aplicativo usa), logado antes de gravar para que nenhuma senha seja digitada na câmera. Digite com typeslow, chame mark <rótulo> antes de cada clique que a edição cortará, aguarde respostas de IA com wait_gone "<texto de busca>", nunca role o elemento que você está mostrando para fora da tela. Clique por referência de elemento (@e12 do snapshot), não pelo texto do rótulo. take_start define a janela de visualização para 1600×900 (o padrão é 1280×720, muito pequeno para 1080p); uma tomada por cena. Quando o produto tiver um agente de voz, grave uma troca real por meio da própria API (examples/voice-exchange.mjs) e reproduza sobre um cartão em vez de falsificar.

Cartões. examples/cards/ tem uma introdução (números animados, logotipo, pílulas), um cartão de chamada de voz e um encerramento. Copie para video/cards/, altere cores, logotipo e textos para a marca. Passe tempos na URL (?t1=<s>) para que as animações caiam na voz.

Edição (scenes.mjs). Cada cena é composta por partes de uma tomada [take, in, out, speed, zoom?] mais áudio ['vo:s01', at]. Acelere a espera em 2–5×, faça zoom em painéis com texto pequeno, chapter chip em cada nova seção, cap: 'left' quando as legendas inferiores cobrirem a interface sendo mostrada, sfx para momentos de sucesso (adicionado ao carrinho, pedido realizado). A edição é armazenada em cache por cena; apenas cenas alteradas são re-renderizadas.

Áudio. A música de fundo é sintetizada por compose.mjs (sem risco de licenciamento) e reduzida sob a voz; defina music: 'path/to/track.mp3' em scenes.mjs para usar a própria faixa do usuário. A saída é normalizada para −16 LUFS.

QA antes de entregar. listen.mjs envia a mixagem para o Gemini: pergunte sobre dicção, palavras mal pronunciadas, equilíbrio entre música e voz, falhas e longos silêncios. Em seguida, capture um quadro por cena em resolução total (ffmpeg -ss <t> -i out.mp4 -frames:v 1 f.png) e examine: legendas sobrepondo a interface, texto cortado, estado errado na tela. Corrija, reexecute a etapa 6.

Entregar. Exclua os pedidos/dados de teste que as tomadas criaram, execute agent-browser close --all, faça commit das ferramentas e do script video/ (não build/, out/). Forneça o link, o caminho local, uma breve lista do que o vídeo mostra e qualquer coisa no produto que você corrigiu durante a gravação (gravar um fluxo do início ao fim geralmente encontra bugs reais; corrija-os, eles afetam usuários reais).

Publicação

publish.mjs envia para o armazenamento do projeto com o tipo de conteúdo correto (o upload simples de armazenamento serve o vídeo como download) e imprime a URL pública: com "storage": { "cloudfront": "media" } em openkbs.json o arquivo fica em <site>/media/<chave> assim que openkbs deploy configurar esse caminho. Sem armazenamento na CDN, coloque o arquivo em site/ e publique, ou compartilhe um openkbs storage download. --cover <segundos> também envia um quadro JPG como miniatura.

Requisitos

• Contêiner Studio: ffmpeg (a configuração instala), agent-browser, JWT do proxy em ~/.openkbs/projectJWT. Fora do Studio, defina OPENKBS_API_KEY.
• Fontes para legendas são baixadas por setup.sh em video/build/fonts (Golos Text, Fira Sans Extra Condensed: Latim + Cirílico, OFL).