Demostración de Producto
Convierte la aplicación de este repositorio en un video de demostración puntuado, subtitulado y cuadro perfecto usando solo node + playwright + ffmpeg. El pipeline es determinista: toda la demo se re-renderiza y re-puntúa desde una copia limpia del repositorio.
El pipeline, en orden
| Paso | Receta | Salida |
|---|---|---|
| 1. Guion | 01-script.md | tabla de escenas, líneas de VO con códigos de tiempo, cuadrícula rítmica |
| 2. UI independiente | 02-standalone-ui.md | componentes de la app renderizados desde una carpeta estática |
| 3. Composición | 03-composition.md | un árbol de React como función pura de un reloj |
| 4. Grabación | 04-record.md | cuadros PNG → másteres H.264 visualmente sin pérdida |
| 5. Subtítulos + VO | 05-captions-vo.md | archivos laterales SRT/VTT, guion de voz con códigos de tiempo |
| 6. Sonido | 06-sound.md | sfx-cues.json, reproductor de vista previa en vivo, mezclador automático |
| 7. Música | 07-music.md | cama ecualizada y con ducking que comienza en el drop |
| 8. Ensamblaje | 08-assemble.md | intro + transición + pistas → exportación final |
Trabaja los pasos en orden; cada uno consume la salida del paso anterior. Los pasos 5-8 son opcionales para un borrador sin sonido, pero obligatorios para una película de calidad de lanzamiento.
Un solo prompt inicial ejecuta todo
Cuando el usuario pida una demo, orquesta los ocho pasos tú mismo. Nunca entregues al usuario una lista de pasos ni le digas que vuelva con el siguiente prompt. En su lugar, pregúntale al usuario directamente en la conversación exactamente en los momentos en que necesites algo que solo él puede proporcionar, y adjunta el artefacto que haga la pregunta respondible en segundos:
- Después del paso 1: muestra la tabla de escenas y el guion de voz, pide aprobación antes de escribir cualquier código. Reajustar un guion es barato; reajustar una película renderizada no lo es.
- Después del renderizado de prueba: muestra los 4 cuadros de muestra, pide continuar antes del renderizado completo largo.
- En el paso 5: entrega el bloque de voz etiquetado listo para pegar (sin notas de sincronización) y pide la ruta del archivo de audio generado.
- En el paso 7: entrega el prompt del generador de música que escribiste y pide la ruta del archivo generado. Ambas solicitudes se pueden agrupar con las del paso 3 si el usuario prefiere un solo viaje a las herramientas.
- Después de la vista previa puntuada: entrega un corte pequeño para escuchar antes de exportar los másteres finales.
Entre preguntas, continúa sin verificar. Si el usuario rechaza un recurso opcional (voz, música), continúa sin él en lugar de detenerte.
Seguimiento de progreso (ejecuciones reanudables)
Mantén demo/PROGRESS.md en el repositorio de destino: una línea por paso con estado (pendiente / en progreso / hecho) y las rutas de los artefactos producidos. LÉELO PRIMERO en cada sesión; un pipeline a medio terminar se reanuda desde su última pregunta en lugar de reiniciarse. Actualízalo después de cada paso.
Reglas de decisión
- El usuario no tiene guion ni historia → comienza en 01. Nunca empieces escribiendo código.
- El usuario tiene un video que tartamudea → solo 04 (la grabación cuadro por cuadro lo soluciona).
- El usuario quiere sonido/SFX en un video existente → 06 (archivo de cues + mezclador), luego 07 si hay música.
- La demo del usuario "se siente falsa" → las reglas de honestidad en 01 y 03 (datos reales, totales que reconcilian).
- El usuario pregunta cuánto dura / qué forma tiene → 45-60s, una afirmación por escena, ~6 escenas, arco: problema → drop → magia → interacción → prueba → marca.
- El clon de voz suena lento y plano → las correcciones en 05.
- Los SFX llegan tarde o quedan enterrados → offsets de impacto medidos + normalización de pico en 06.
No negociables (aplica estos incluso si no se piden)
- Datos honestos. Los fixtures deben ser reales: artículos reales, precios impresos, totales que reconcilien. Nunca inventes números más redondos.
- Nada se desvanece. Todo sella, desliza, rasga o encaja. Los fundidos se leen como una disculpa. La suavización (easing) vive en un máximo de tres ayudantes compartidos.
- Nunca grabes la pantalla. Renderiza cuadro por cuadro mediante el contrato de búsqueda (04).
- Ningún sonido es mejor que un sonido forzado. Máximo ~10 cues por minuto, uno por giro narrativo, nada repetido consecutivamente.
- Dos másteres. Subtítulos quemados + limpio, desde una composición mediante una bandera
window.__NO_CAPTIONS. - Sin negro plano. Cada escena oscura se apoya en el propio arte o fondo de pantalla del producto, desenfocado y atenuado; el primer cuadro es la miniatura. Sólo negro plano cuando es la superficie real del producto (03).
Plantillas
Scripts funcionales en templates/: record.mjs (renderizador de cuadros determinista con playwright, reanudable), mix-audio.mjs (mezclador ffmpeg basado en cues; --vo para una pista de voz re-cronometrada, --bgm para la cama musical), retime-vo.mjs (corta una lectura generada en sus silencios y coloca cada frase en su código de tiempo asignado), sfx-cues.example.json (una partitura real de 10 cues), package.json (los scripts npm). Cópialos en un directorio demo/ en el repositorio de destino y adapta las rutas; cada receta indica cuándo.
Habilidades complementarias
Si el repositorio de destino usa Remotion o ElevenLabs, instala también sus habilidades oficiales; esta habilidad cubre el pipeline y el gusto, las suyas cubren sus APIs:
npx skills add remotion-dev/skills
npx skills add elevenlabs/skills
Lo que recibe el usuario (además de la película)
Dos artefactos listos para pegar, de modo que la carga de trabajo humana sea exactamente dos trabajos de pegado: un bloque de voz etiquetado para la herramienta de voz (05) y un prompt de estilo para el generador de música (07). Nunca hagas que el usuario escriba ninguno de los dos.
Salidas de referencia
Cuatro demos prueban el pipeline en productos no relacionados: la demo de Vouch (54.3s, división de recibos), una demo de Excalidraw (35.5s, filmada sobre el componente npm real @excalidraw/excalidraw, fuente en este repositorio bajo examples/excalidraw), Asakiri Studio (54s, un editor de cursos Tauri+React, componentes reales empaquetados con esbuild), y Colosseum (54s, una app multimedia Windows Qt/QML, superficies reconstruidas a partir de sus tokens y sus propias capturas de pantalla; ver la ruta native-app en 02). El repositorio de Vouch github.com/Anshgrover23/vouch contiene el directorio demo/ completo y funcional, la composición, el runtime empaquetado, el archivo de cues y los subtítulos, como implementación de referencia. El manual con cada número y fallo: https://anshgrover23.github.io/product-demo-playbook/