GenVid Promo

¿Qué hace GenVid Promo?

Produce el video final, no solo un guion o storyboard. Construye una composición Remotion determinista cuya narración, imágenes, afirmaciones del producto y sincronización estén verificadas.

Inicio obligatorio

1. Inspecciona la invocación en busca de un proveedor TTS y un valor de clave API o una referencia explícita a una variable de entorno/secreto.
2. Si falta alguno de los dos, detente y pregunta: ¿Qué proveedor TTS debo usar y cómo debo acceder a su clave API? Prefiere una variable de entorno secreta como OPENAI_API_KEY o GEMINI_API_KEY; no la confirmaré ni la imprimiré.
3. No elijas un proveedor en silencio, asumas una clave existente, sintetices voz de marcador de posición ni continúes más allá de esta compuerta.
4. Carga inmediatamente la habilidad instalada remotion-best-practices en su totalidad. Carga su regla video-layout antes del diseño; carga sus reglas de audio, transiciones, subtítulos, FFmpeg y metadatos cuando se utilicen esas características. Di explícitamente que se está utilizando esta dependencia. Si no está disponible, indícalo y usa references/production-pipeline.md como respaldo mínimo.
5. Lee references/tts-providers.md antes de implementar la síntesis. Verifica los modelos actuales del proveedor y los formatos SDK/API con la documentación oficial porque cambian.

Flujo de trabajo

1. Establece el brief

Determina el producto, la audiencia, el objetivo de lanzamiento, la plataforma, la relación de aspecto, la duración objetivo, el tono, la llamada a la acción (CTA), la configuración regional y las afirmaciones requeridas. Infiere opciones creativas reversibles cuando falten. Pregunta solo por aquellas opciones que alteren materialmente el resultado.

Por defecto: 1920x1080, 30 FPS, 35-75 segundos, un narrador, subtítulos y una CTA clara. Añade composiciones verticales o cuadradas cuando el canal solicitado las necesite.

2. Verifica el producto real

Inspecciona el repositorio y ejecuta la aplicación real cuando esté disponible. Traza las rutas reales, componentes, estados de datos, tokens de diseño, fuentes, iconos, copia, nombres de planes, precios y comportamiento de las características. Para un producto en vivo, inspecciona la experiencia renderizada real con automatización del navegador. Nunca inventes una pantalla, capacidad, métrica, testimonio, precio o interacción.

Usa imágenes del producto en este orden:

1. Importa componentes reales en un arnés controlado de Remotion/demo con datos simulados deterministas.
2. Extrae componentes de visualización seguros para animación preservando el DOM real, tokens, copia y estados.
3. Construye réplicas derivadas de la fuente solo cuando los componentes reales no puedan renderizarse fuera de la aplicación; compáralas con capturas de pantalla reales y divulga este respaldo.
4. Usa capturas de pantalla o grabaciones de pantalla solo donde los componentes seguros para animación no sean prácticos.

No expongas secretos de producción ni mutiles datos en vivo solo para filmar un estado.

3. Escribe la historia y el storyboard

Usa un arco compacto: gancho -> problema -> revelación -> prueba mediante uso real -> mayores beneficios -> CTA. Dale a cada escena un mensaje y una imagen focal. Escribe la narración de la escena antes de la sincronización final.

Crea storyboard.json usando references/storyboard-schema.md. Incluye el estado exacto de la interfaz de usuario, la procedencia del componente/fuente, las acciones, la narración, las afirmaciones y la intención de transición para cada escena.

4. Construye el sistema Remotion

Crea un sistema visual reutilizable para tokens de producto, tipografía, áreas seguras, marcos de navegador/dispositivo, cursor, resaltados, texto de máquina de escribir, movimientos de cámara y transiciones. Usa useCurrentFrame() con interpolate() o llamadas spring() justificadas; nunca animaciones o transiciones CSS.

Prefiere movimiento diseñado: enfoque de cámara, revelaciones enmascaradas, movimientos de eje compartido, encadenamientos de buen gusto, continuidad de objetos y escalonamiento temporal. Evita el movimiento aleatorio, las cuadrículas de tarjetas genéricas, las interfaces de usuario pequeñas y los puntos focales en competencia simultáneos.

5. Genera y sincroniza la narración

Genera un archivo de audio por escena. Conserva la transcripción como fuente de verdad. Mide la duración real del audio y escribe voiceover-manifest.json; deriva la duración de la escena del audio más la introducción y el margen de respiro. Inicia la narración después de que la imagen se establezca y programa las acciones visibles en la oración exacta que las describe.

No estires el audio para que se ajuste a escenas fijas. Regenera o reajusta el tiempo cuando la entrega y las imágenes diverjan. Añade subtítulos a partir de la transcripción conocida; usa STT solo cuando la salida hablada difiera lo suficiente como para requerir marcas de tiempo a nivel de palabra.

Ejecuta node <skill-dir>/scripts/validate-genvid.mjs <storyboard> <manifest> [project-root] antes de renderizar.

6. Renderiza e inspecciona

Renderiza fotogramas representativos cerca de la entrada, el punto medio, la interacción clave y la salida de cada escena. Inspecciónalos con el tamaño de visualización normal. Corrige recortes, texto ilegible, superposición accidental, deriva del cursor, interfaz de usuario infiel, tiempo muerto, cortes abruptos y desajustes de narración.

Renderiza el MP4 final con H.264, BT.709 y audio AAC de alta calidad a menos que el destino requiera otro formato. Observa el resultado completo con sonido. Confirma el tiempo de ejecución, las dimensiones, los códecs, la presencia de audio, la CTA final y las rutas de los artefactos.

Estándar de finalización

Finaliza solo cuando exista el MP4 y haya sido visto o muestreado a lo largo de toda la línea de tiempo. Informa la ruta renderizada, las dimensiones, los FPS, la duración, el proveedor/modelo/voz de TTS, la fuente de las imágenes del producto, las afirmaciones verificadas, las pruebas realizadas y cualquier respaldo intencional de réplica/captura.