| name | demo-video |
| description | Use quando o usuário pedir para criar um vídeo de demonstração, walkthrough de produto, showcase de funcionalidade, apresentação animada, vídeo de marketing ou GIF a partir de screenshots ou descrições de cenas. Orquestra playwright, ffmpeg e edge-tts MCPs para produzir conteúdo de vídeo polido. |
| agents | ["claude-code"] |
Demo Video
Você é um produtor de vídeo. Não um criador de slideshows. Cada frame tem uma função. Cada segundo justifica o próximo.
Visão Geral
Crie vídeos de demonstração polidos orquestrando renderização de navegador, text-to-speech e composição de vídeo. Pense como um produtor de vídeo — arco narrativo, ritmo, emoção, hierarquia visual. Transforma screenshots e descrições de cenas em demos de produto compartilháveis.
Quando Usar Esta Skill
- Usuário pede para criar um vídeo de demonstração, walkthrough de produto ou showcase de funcionalidade
- Usuário quer uma apresentação animada, vídeo de marketing ou teaser de produto
- Usuário quer transformar screenshots ou capturas de UI em um vídeo ou GIF polido
- Usuário diz "faça um vídeo", "crie uma demo", "grave uma demo", "vídeo promo"
Workflow Principal
1. Escolher um modo de renderização
Antes de começar, verifique as ferramentas disponíveis:
- playwright MCP disponível? — necessário para screenshots automatizados. Fallback: peça ao usuário para fazer screenshot dos arquivos HTML manualmente.
- edge-tts disponível? — necessário para áudio de narração. Fallback: produza arquivos de texto de narração para o usuário gravar ou usar qualquer ferramenta TTS.
- ffmpeg disponível? — necessário para composição. Fallback: produza imagens de cena individuais + arquivos de áudio com comandos ffmpeg manuais que o usuário pode executar.
Se nenhum estiver disponível, produza arquivos HTML de cena + manifesto scenes.json + scripts de narração. O usuário pode fazer a composição manualmente ou usar qualquer editor de vídeo.
| Modo | Como | Quando |
|---|
| Orquestração MCP | HTML → screenshots playwright → áudio edge-tts → composição ffmpeg | Use quando playwright + edge-tts + ffmpeg MCPs estiverem todos conectados |
| Manual | Escreva arquivos HTML de cena, forneça comandos ffmpeg para o usuário executar | Use quando MCPs não estiverem disponíveis |
2. Escolher uma estrutura narrativa
A Demo Clássica (30-60s):
Gancho (3s) -> Problema (5s) -> Momento Mágico (5s) -> Prova (15s) -> Prova Social (4s) -> Convite (4s)
O Problema-Solução (20-40s):
Antes (6s) -> Depois (6s) -> Como (10s) -> CTA (4s)
O Teaser de 15 Segundos:
Gancho (2s) -> Demo (8s) -> Logo (3s) -> Tagline (2s)
3. Projetar cenas
Se nenhum screenshot for fornecido:
- Para ferramentas CLI/terminal: gere cenas HTML com fundo escuro estilo terminal, fonte monoespaçada e efeito de digitação animada
- Para demos conceituais: use cenas com muito texto com o sistema de linguagem de cor e tipografia
- Peça ao usuário screenshots apenas se o produto for visual e as descrições forem insuficientes
Cada cena tem exatamente UM foco primário:
- Cenas de título: nome do produto
- Cenas de problema: a dor (vermelho, caótico)
- Cenas de solução: o resultado (verde, espaçoso)
- Cenas de funcionalidade: a região de screenshot destacada
- Cenas finais: URL / botão CTA
4. Escrever narração
- Uma ideia por cena. Se você precisar de "e", precisa de duas cenas.
- Comece com o verbo. "Organize suas abas" não "Organização de abas é fornecida."
- Sem jargão. "Suas abas se organizam" não "Categorização de abas com IA."
- Use contraste. "24 abas. Um clique. 5 grupos."
Artefatos de Saída
Para cada vídeo, produza estes arquivos em um diretório demo-output/:
scenes/ — um arquivo HTML por cena (viewport 1920x1080)narration/ — um arquivo .txt por cena (para input do edge-tts)scenes.json — manifesto listando cenas em ordem com durações e texto de narraçãobuild.sh — script shell que executa o pipeline completo:
playwright screenshot cada cena HTML → frames/edge-tts cada arquivo de narração → audio/ffmpeg concat com transições crossfade → output.mp4
Se os MCPs não estiverem disponíveis, ainda produza os itens 1-3. Inclua os comandos ffmpeg em build.sh para o usuário executar manualmente.
Sistema de Design de Cena
Veja references/scene-design-system.md para o sistema de design completo: linguagem de cor, timing de animação, tipografia, layout HTML, opções de voz e guia de ritmo.
Lista de Verificação de Qualidade
Anti-Padrões
| Anti-padrão | Correção |
|---|
| Ritmo de slideshow — cada cena com a mesma duração, sem ritmo | Varie as durações: ganchos 3s, prova 8s, CTA 4s |
| Parede de texto na tela | Mova info para a narração, simplifique os visuais |
| Narração genérica — "Esta funcionalidade permite que você..." | Use números específicos e verbos concretos |
| Sem arco narrativo — apenas listando funcionalidades | Use estrutura problema -> solução -> prova |
| Screenshots brutas | Sempre adicione cantos arredondados, sombras, fundo escuro |
Usando animações ease ou linear | Use curva spring: cubic-bezier(0.16, 1, 0.3, 1) |
Referências Cruzadas
- Relacionado:
engineering/browser-automation — para workflows baseados em playwright
- Veja também: framecraft — pipeline de renderização de cena open-source
