4ndychu/natural-ai-demo-video

NAVI: videos demo AI naturales

NAVI convierte "haz un demo de X" en un MP4 terminado con subtítulos: sin rostro, sin micrófono y con una voz que suena como una persona explicando algo, no como si lo estuviera leyendo.

Estado: en desarrollo. La aplicación local en ui/ está completa con datos de ejemplo. El motor (toma de voz, sincronización, grabación, difuminado, renderizado) está en construcción. Hasta que esté listo, indícale al usuario claramente qué pasos puedes ejecutar realmente y cuáles no están disponibles aún. Nunca finjas que se ejecutó un paso.

Primero: verifica dónde te estás ejecutando

NAVI debe ejecutarse en la computadora del usuario: abre una aplicación local en su navegador, abre una segunda ventana del navegador para que inicie sesión en una cuenta de prueba, graba la pantalla y guarda la clave en su llavero. Eso funciona en Claude Code (terminal, IDE o la pestaña Code de la aplicación de escritorio).

Si te estás ejecutando en un sandbox en la nube (un chat normal de claude.ai o cualquier sesión sin acceso a la máquina del usuario), dilo de inmediato, en una o dos oraciones: NAVI necesita Claude Code en su computadora para grabar, y aquí aún puedes escribir y refinar el guion (versión hablada más subtítulos) para que esté listo para grabar después. No intentes instalaciones, grabaciones ni llamadas a ElevenLabs desde el sandbox.

Cuándo usarlo

• "Haz un video demo / recorrido / tour de producto / tutorial de <sitio o aplicación>"
• "Graba cómo en <aplicación web> con narración"
• "Repite la sección 3 de mi demo", "hazlo más tranquilo", "difumina el correo electrónico en 1:20"

No para: aplicaciones de escritorio, videos con una persona real en cámara, clonación de voz.

Reglas básicas (siempre)

1. Nunca escribas contraseñas, códigos o claves en un sitio. Se abre un navegador y el usuario inicia sesión él mismo, idealmente en una cuenta de prueba con datos falsos.
2. Nunca imprimas, registres ni confirmes la clave de ElevenLabs. Léela solo del llavero o del archivo de claves local del usuario. Envíala únicamente a ElevenLabs.
3. Pregunta antes de instalar cualquier cosa (Playwright, ffmpeg, el modelo de sincronización). Di qué es y aproximadamente su tamaño.
4. Muestra el costo de créditos antes de gastar créditos (muestras, grabación, repeticiones).
5. Los niveles de privacidad no son opcionales. El Nivel 1 siempre está difuminado. Advierte cuando el usuario active cifras de dinero o datos de otras personas.
6. Nunca pauses ni aceleres la voz para que se ajuste al video. El video se mantiene o se estira en su lugar.
7. Di claramente que el difuminado reduce el riesgo, no a cero. El usuario debe revisarlo antes de publicar.

El flujo

0. Primera ejecución (una vez)

• Solicita la clave de API de ElevenLabs (plan Starter o superior, acceso de texto a voz). Pruébala y muestra los créditos restantes. Guárdala en el llavero del sistema (macOS) o en un archivo local fuera de la carpeta de la habilidad (Linux), legible solo por el usuario.
• Verifica Playwright, ffmpeg y el modelo de sincronización. Pregunta, luego instala lo que falte.
• Pregunta qué sitio van a demostrar primero y abre un navegador para que el usuario inicie sesión. Guarda la sesión por sitio.
• Los usuarios que regresan se saltan todo esto. Solo cambia el sitio por demo.

1. Briefing

Obtén, con la menor cantidad de preguntas posible: qué mostrar, qué sitio, quién ve (principiantes / algo de experiencia / profesionales), duración (1, 3, 5 u 8 minutos), algo que mantener fuera de pantalla y qué voz. Los subtítulos y la etiqueta de esquina provienen de los valores predeterminados guardados del usuario (subtítulos incrustados, sin etiqueta de esquina) a menos que diga lo contrario. Nunca agregues una marca de agua, nombre de marca, etiqueta "Ilustrativo" ni ninguna otra superposición que el usuario no haya solicitado. Usa valores predeterminados sensatos en lugar de preguntar sobre todo. Un sitio nuevo significa un inicio de sesión único.

Si el usuario cambia de dirección a mitad de camino ("hazlo un demo de la página de pagos en su lugar"), conserva el demo actual como borrador y comienza un nuevo briefing a partir de lo que dijo.

2. Exploración

Abre el sitio con Playwright usando la sesión guardada. Mapea las pantallas, los clics exactos y los campos para la tarea, y cualquier cosa que cargue lentamente. No cambies datos reales; limítate a la cuenta de prueba.

3. Guion

Divide el video en secciones cortas (de aproximadamente 15 a 35 segundos cada una). Para cada sección, escribe dos líneas:

• Versión hablada (lo que dice la voz): cómo una persona lo explicaría en voz alta. Pequeños reinicios, reacciones y opiniones donde la pantalla lo merezca; muy pocos rellenos.
• Versión de subtítulos (lo que se muestra): limpia, corta, sin rellenos.

Sigue reference/voice-rules.md. Muestra ambas una al lado de la otra y obtén la aprobación antes de gastar créditos.

4. Voz

• Comienza con la configuración recomendada de la voz para el tipo de demo (recorrido de curso, demo rápida de SaaS, tour de producto).
• Controles deslizantes y sus rangos seguros: informalidad 3 a 8, energía 1 a 6, ritmo 0.94x a 1.08x, hesitaciones 0 a 3, respiraciones 0 a 2, maldiciones 0 a 2 (nunca dentro de las instrucciones; subtítulos limpios a menos que el usuario lo pida).
• La vista previa de texto es gratuita. Una muestra de audio cuesta aproximadamente 300 créditos; escuchar una voz por primera vez, alrededor de 120.
• Inclínate hacia la calma: mayor estabilidad y una entrega relajada. Evita líneas brillantes de una sola palabra. No agregues etiquetas de respiración.
• Si el usuario quiere una voz para toda una serie, bloquéala para el proyecto.

5. Privacidad

Aplica los niveles antes de grabar:

• Siempre difuminado: claves y tokens de API, contraseñas, códigos 2FA y de recuperación, números de tarjeta y banco, números de identificación, claves privadas, enlaces de inicio de sesión.
• Difuminado a menos que se permita: correos electrónicos, números de teléfono, nombres y fotos reales, direcciones, cifras de dinero, detalles de clientes, conteos de seguidores y miembros.
• Mostrado a menos que se difumine: estadísticas de uso, precios públicos, fechas.
• Más las palabras de ocultación del usuario.

6. Grabación

Consulta docs/engine.md. En resumen: genera una toma continua por sección, obtén marcas de tiempo de palabras, programa cada acción del navegador en su palabra, graba, mantén los fotogramas cuando una acción se extienda, nunca pauses el audio. Luego escanea los fotogramas en busca de cualquier cosa que el difuminado a nivel de página haya pasado por alto.

7. Revisión

Abre la aplicación local en el paso de Revisión. El usuario marca momentos (suena a IA, necesita difuminado, demasiado rápido) o escribe notas. Muestra el costo de repetición, luego repite solo las secciones marcadas. Registra las marcas con la configuración utilizada para que los valores predeterminados de voz mejoren con el tiempo.

8. Exportación

Aplica la configuración de subtítulos del demo (incrustados, .srt separado o desactivado) y la etiqueta de esquina (desactivada o el texto del usuario en la esquina elegida); cambiar cualquiera de ellos es solo un re-renderizado, sin créditos. Renderiza el MP4 (1080p), los subtítulos (.srt a menos que los subtítulos estén desactivados) y una transcripción, más una vista previa opcional de 720p, en la carpeta que el usuario nombre (por defecto ~/Movies/NAVI), para que un video pueda aterrizar directamente en el proyecto al que pertenece. Nombra los archivos según el título del demo.

Tus datos

Desde Configuración, el usuario puede eliminar la clave (recuérdale que también la revoque en ElevenLabs), olvidar los inicios de sesión guardados, restablecer la configuración o eliminar todo lo que NAVI guardó. Los videos terminados nunca se tocan. Desinstalar significa eliminar también esta carpeta de la habilidad.

Archivos

• reference/voice-rules.md: cómo escribir el guion hablado y generar una voz que suene humana. Léelo antes del paso 3.

• reference/recording-rules.md: cómo grabar la pantalla en sincronía con la voz. Léelo antes del paso 6.

• reference/privacy.md: los niveles de difuminado y las advertencias. Léelo antes del paso 5.

• config/defaults.json: rangos de controles deslizantes, preajustes, configuraciones por voz y valores predeterminados en pantalla.

• ui/index.html: la aplicación local (ábrela en un navegador; ?start=home|voice|review|settings, &theme=light|dark)

• ui/app.js: pantallas, estado y datos de ejemplo

• docs/engine.md: cómo funcionan la grabación, sincronización, difuminado y renderizado