🎬 O que é um walkthrough
Um walkthrough — ou vídeo de demonstração — percorre uma aplicação web real, tela por tela, mostrando o app em uso: abrir, clicar, preencher, gerar, ver o resultado. Nada é desenhado; tudo é capturado da tela de verdade.
O walkthrough responde "como eu uso isso?" mostrando a resposta na própria interface. Em vez de descrever botões e campos, ele aparece tocando neles — com um cursor que cai exatamente no controle e narração explicando cada passo.
Na prática: 5 a 8 passos + a CTA final dão um vídeo de cerca de 35 a 50 segundos. O arco típico é abrir o app → ação 1 → ação 2 → … → resultado → CTA.
O passo de abertura costuma ser a tela inicial (marcada intro:true) para apresentar o app. O último passo de conteúdo costuma ser o resultado (zoom:true), com um zoom suave que valoriza a entrega.
⚖️ Demonstrativo vs explicativo
São duas skills irmãs com o mesmo motor de render (HyperFrames) e a mesma CTA, mas propósitos opostos. Uma mostra um app real; a outra explica um conceito abstrato com cenas animadas.
| Aspecto | 🖱️ video-demonstrativo | 🎬 video-explicativo |
|---|---|---|
| Objetivo | Mostrar um app sendo usado | Explicar um conceito |
| Visual | Screenshots reais | Motion graphics animados |
| Entrada | Link do app / localhost | Um assunto / tema |
| Captura | agent-browser navega o app | Não há captura |
| Formato | 16:9 (telas landscape) | 16:9 e 9:16 |
- ✓ Existe um app/site com uma tela navegável
- ✓ O usuário deu um link ou um localhost
- ✓ Quer mostrar como uma feature funciona na prática
- ✓ O foco é o produto, não a ideia por trás
- → O tema é abstrato, sem interface para mostrar
- → Você quer ilustrar com diagramas e animações
- → Precisa de versão vertical (Shorts/Reels)
- → O foco é educar sobre um conceito
Ambas terminam na CTA do AutomationsAI e usam TTS local + HyperFrames. A diferença está na origem do visual: tela capturada (demonstrativo) versus cena desenhada (explicativo).
🤔 Quando usar cada um
Existe um teste de uma pergunta que decide a skill em segundos — e elimina a dúvida antes mesmo de começar o roteiro.
"Existe uma tela para mostrar?"
Se a resposta é sim — há um app, um localhost, uma URL navegável —, é demonstrativo. Se não há interface, só uma ideia para ilustrar, é explicativo.
Se sim, é o sinal mais forte de demonstrativo. A própria entrada da skill é o link do app.
Verbos de demonstração ("mostrar", "gravar a tela", "passo a passo usando") apontam para demonstrativo.
Aí é explicativo — o conteúdo será motion graphics, não captura de tela.
Uma única pergunta ao usuário resolve casos ambíguos sem custo.
Demonstrativo exige o app acessível durante a captura (ex.: localhost:8000 rodando). Sem o app no ar, não há o que navegar — confirme isso antes de prometer o vídeo.
📋 Casos de uso
O walkthrough brilha sempre que o objetivo é mostrar um produto em funcionamento. Quatro situações cobrem a maioria dos pedidos.
Um novo usuário vê os primeiros passos do app: cadastro, tela principal, primeira ação de valor. Reduz o atrito de quem acabou de chegar.
Demonstra uma funcionalidade específica de ponta a ponta — útil quando uma feature nova precisa de um "como funciona" rápido.
Vídeo de anúncio que mostra o produto real em ação no momento do lançamento, com a CTA do AutomationsAI no fim.
Responde "como faço X?" com um vídeo curto mostrando o caminho exato na tela — anexável a um chamado ou base de ajuda.
Saber se é onboarding, feature, lançamento ou suporte ajuda a escolher quais passos entram no vídeo — e qual é o "resultado" que merece o zoom final.
🖱️ O que a skill entrega
Quatro elementos transformam screenshots estáticos num vídeo que parece gravação de tela profissional: moldura de navegador, cursor animado, destaque/zoom e narração.
Os prints reais entram dentro de uma moldura de navegador (barra + URL) para parecer uma janela de verdade. Por cima, um cursor global animado mira a bounding box real de cada controle, clica com pulse + ripple, e o resultado ganha um zoom suave. A narração TTS amarra tudo.
- ✓ Cursor cai exato no controle (box real, não no olho)
- ✓ Clique vira pulse + ripple visíveis
- ✓ Zoom suave realça o resultado final
- ✓ Timing sincroniza com os WAVs medidos por ffprobe
- ✗ Estado dinâmico (vídeo, dados ao vivo) vira print estático
- ✗ Não carrega o site ao vivo dentro do vídeo
- ✗ App com login exige credenciais de teste
- ✗ Movimento real só no modo v3 (roadmap, ainda não implementado)
📐 Formato de saída
A saída é um MP4 em 16:9, narrado em PT-BR e terminado na CTA do AutomationsAI. O formato landscape não é estético — é técnico: telas de app são largas.
Toda saída termina na mesma cena: "CONTINUA EM" + AutomationsAI (AutomationsAI em creme, .CLUB em âmbar com glow) + 🌐 automationsai.net. A narração fecha com "Isso é conteúdo do AutomationsAI ponto CLUB. Acesse: inema ponto club." Já vem pronta no template de composição.
Como telas de app são landscape, o template gera 16:9. Uma versão vertical exigiria recortar/reenquadrar a região ativa — está no roadmap, não no fluxo padrão. Não prometa Shorts de um walkthrough sem alinhar o reenquadre.
🔗 A entrada é o link
Diferente de skills que partem de um briefing ou roteiro, o ponto de partida do demonstrativo é literalmente o link do app — e ele precisa estar acessível.
- ✓ O app está no ar e responde
- ✓ A tela-alvo é alcançável a partir da URL
- ✓ Há credenciais de teste se houver login
- ✓ Largura cabe no 16:9 (≤ ~1280)
- ✗ App offline — não há o que navegar
- ✗ Login sem credenciais (capture só telas públicas)
- ✗ Tela depende de dados ao vivo que somem
- ✗ URL inacessível pela máquina que captura
O primeiro passo prático é garantir que o link abre e que a jornada-alvo é navegável. Sem isso, todo o resto do pipeline (captura, narração, render) não tem sobre o que trabalhar.
📋 Resumo do Módulo 1.1
- ✓ Walkthrough = app real navegado passo a passo, narrado
- ✓ Demonstrativo MOSTRA app; explicativo EXPLICA conceito
- ✓ Teste de 1 pergunta: "existe uma tela para mostrar?"
- ✓ Casos: onboarding, feature, lançamento, suporte
- ✓ Entrega: moldura + cursor + zoom + narração
- ✓ Saída 16:9, narrada, CTA; entrada é o link do app