4ndychu/natural-ai-demo-video

NAVI: vídeos de demonstração natural com IA

NAVI transforma "fazer uma demo de X" em um MP4 finalizado com legendas: sem rosto, sem microfone e com uma voz que soa como uma pessoa explicando algo, não lendo.

Status: em desenvolvimento. O aplicativo local em ui/ está completo com dados de exemplo. O mecanismo (voz, temporização, gravação, desfoque, renderização) está sendo construído. Até que seja lançado, informe claramente ao usuário quais etapas você pode executar de verdade e quais ainda não estão disponíveis. Nunca finja que uma etapa foi executada.

Primeiro: verifique onde você está executando

NAVI precisa ser executado no próprio computador do usuário: ele abre um aplicativo local no navegador, abre uma segunda janela do navegador para o usuário fazer login em uma conta de teste, grava a tela e mantém a chave no chaveiro. Isso funciona no Claude Code (terminal, IDE ou a aba Code do aplicativo de desktop).

Se você estiver executando em uma sandbox na nuvem (um chat normal do claude.ai, ou qualquer sessão sem acesso à máquina do usuário), diga isso imediatamente, em uma ou duas frases: NAVI precisa do Claude Code no computador do usuário para gravar, e aqui você ainda pode escrever e refinar o roteiro (versão falada mais legendas) para que esteja pronto para gravar depois. Não tente instalações, gravações ou chamadas ElevenLabs a partir da sandbox.

Quando usar

• "Faça um vídeo de demonstração / walkthrough / tour do produto / tutorial de "
• "Grave como fazer em com narração"
• "Refaça a seção 3 da minha demo", "deixe mais calmo", "desfoque o e-mail em 1:20"

Não para: aplicativos de desktop, vídeos com uma pessoa real na câmera, clonagem de voz.

Regras básicas (sempre)

1. Nunca digite senhas, códigos ou chaves em um site. Um navegador é aberto e o usuário faz o login, idealmente em uma conta de teste com dados falsos.
2. Nunca imprima, registre ou faça commit da chave ElevenLabs. Leia apenas do chaveiro ou do arquivo de chave local do usuário. Envie apenas para ElevenLabs.
3. Pergunte antes de instalar qualquer coisa (Playwright, ffmpeg, o modelo de temporização). Diga o que é e aproximadamente o tamanho.
4. Mostre o custo de créditos antes de gastar créditos (amostras, gravação, refações).
5. Os níveis de privacidade não são opcionais. O nível 1 está sempre desfocado. Avise quando o usuário ativar valores financeiros ou dados de outras pessoas.
6. Nunca pause ou acelere a voz para caber no vídeo. O vídeo espera ou estica.
7. Diga claramente que o desfoque reduz o risco, não a zero. O usuário deve assistir antes de publicar.

O fluxo

0. Primeira execução (uma vez)

• Solicite a chave da API ElevenLabs (plano Starter ou superior, acesso de texto para fala). Teste-a e mostre os créditos restantes. Armazene-a no chaveiro do sistema (macOS) ou em um arquivo local fora da pasta da skill (Linux), legível apenas pelo usuário.
• Verifique Playwright, ffmpeg e o modelo de temporização. Pergunte e instale o que estiver faltando.
• Pergunte qual site será demonstrado primeiro e abra um navegador para o usuário fazer login. Salve a sessão por site.
• Usuários recorrentes pulam tudo isso. Apenas o site muda por demonstração.

1. Briefing

Obtenha, com o menor número possível de perguntas: o que mostrar, qual site, quem está assistindo (iniciantes / alguma experiência / profissionais), duração (1, 3, 5 ou 8 minutos), algo para manter fora da tela e qual voz. Legendas e rótulo de canto vêm das configurações padrão salvas do usuário (legendas queimadas, sem rótulo de canto), a menos que ele diga o contrário. Nunca adicione marca d'água, nome de marca, tag "Ilustrativo" ou qualquer outra sobreposição que o usuário não pediu. Use padrões sensatos em vez de perguntar sobre tudo. Um novo site significa um login único.

Se o usuário mudar de direção no meio do caminho ("faça disso uma demonstração da página de pagamentos"), mantenha a demonstração atual como rascunho e inicie um novo briefing a partir do que ele disse.

2. Explorar

Abra o site com Playwright usando a sessão salva. Mapeie as telas, os cliques e campos exatos para a tarefa e qualquer coisa que carregue lentamente. Não altere dados reais; use a conta de teste.

3. Roteiro

Divida o vídeo em seções curtas (cerca de 15 a 35 segundos cada). Para cada seção, escreva duas linhas:

• Versão falada (o que a voz diz): como uma pessoa realmente explica em voz alta. Pequenas pausas, reações e opiniões onde a tela as merece; poucos preenchedores.
• Versão da legenda (o que é mostrado): limpa, curta, sem preenchedores.

Siga reference/voice-rules.md. Mostre ambas lado a lado e obtenha aprovação antes de gastar quaisquer créditos.

4. Voz

• Comece com as configurações recomendadas da voz para o tipo de demonstração (walkthrough de curso, demo rápida de SaaS, tour de produto).
• Controles deslizantes e suas faixas seguras: casualidade 3 a 8, energia 1 a 6, ritmo 0,94x a 1,08x, hesitações 0 a 3, respirações 0 a 2, palavrões 0 a 2 (nunca dentro de instruções; legendas limpas a menos que o usuário peça).
• A prévia de texto é gratuita. Uma amostra de áudio custa cerca de 300 créditos; ouvir uma voz pela primeira vez cerca de 120.
• Incline-se para o calmo: maior estabilidade e uma entrega relaxada. Evite linhas brilhantes de uma palavra. Não adicione tags de respiração.
• Se o usuário quiser uma voz para uma série inteira, bloqueie-a para o projeto.

5. Privacidade

Aplique os níveis antes de gravar:

• Sempre desfocado: chaves e tokens de API, senhas, 2FA e códigos de recuperação, números de cartão e banco, números de identificação, chaves privadas, links de login.
• Desfocado a menos que permitido: e-mails, números de telefone, nomes e fotos reais, endereços, valores financeiros, detalhes de clientes, contagens de seguidores e membros.
• Mostrado a menos que desfocado: estatísticas de uso, preços públicos, datas.
• Além disso, palavras de ocultação do usuário.

6. Gravar

Veja docs/engine.md. Em resumo: gere uma tomada contínua por seção, obtenha timestamps das palavras, agende cada ação do navegador na palavra correspondente, grave, segure quadros quando uma ação exceder o tempo, nunca pause o áudio. Em seguida, escaneie os quadros para qualquer coisa que o desfoque de nível de página não pegou.

7. Revisar

Abra o aplicativo local na etapa de Revisão. O usuário marca momentos (soa como IA, precisa de desfoque, muito rápido) ou digita notas. Mostre o custo da refação e refaça apenas as seções marcadas. Registre as marcas com as configurações usadas para que os padrões de voz melhorem ao longo do tempo.

8. Exportar

Aplique a configuração de legenda da demonstração (queimada, arquivo .srt separado ou desligada) e o rótulo de canto (desligado ou texto do usuário no canto escolhido); alterar qualquer um é apenas uma re-renderização, sem créditos. Renderize o MP4 (1080p), legendas (.srt, a menos que as legendas estejam desligadas) e uma transcrição, além de uma prévia opcional em 720p, na pasta que o usuário nomear (padrão ~/Movies/NAVI), para que um vídeo possa cair diretamente no projeto ao qual pertence. Nomeie os arquivos com o título da demonstração.

Seus dados

Nas Configurações, o usuário pode remover a chave (lembre-o de revogá-la na ElevenLabs também), esquecer logins salvos, redefinir configurações ou excluir tudo que NAVI salvou. Os vídeos finalizados nunca são tocados. Desinstalar significa excluir também esta pasta da skill.

Arquivos

• reference/voice-rules.md: como escrever o roteiro falado e gerar uma voz com som humano. Leia antes do passo 3.

• reference/recording-rules.md: como gravar a tela em sincronia com a voz. Leia antes do passo 6.

• reference/privacy.md: os níveis de desfoque e avisos. Leia antes do passo 5.

• config/defaults.json: faixas de controle deslizante, predefinições, configurações por voz e padrões na tela

• ui/index.html: o aplicativo local (abra em um navegador; ?start=home|voice|review|settings, &theme=light|dark)

• ui/app.js: telas, estado e dados de exemplo

• docs/engine.md: como funcionam a gravação, temporização, desfoque e renderização