Video de Lanzamiento de Producto
Crea una película de lanzamiento cuya historia, sistema visual, movimiento y evidencia provengan todos del producto que se lanza. El entregable es un video renderizado más el proyecto editable que lo produjo.
Usa HyperFrames cuando esté instalado. También se admite un proyecto Remotion; prefiere componentes remocn mantenidos sobre recrear primitivas de animación comunes. No cambies de pila después de que el storyboard sea aprobado.
Entradas a fijar
Antes de construir, establece:
- URL del producto o resumen de la fuente;
- audiencia y el único cambio de creencia que la película debe crear;
- relación de aspecto, duración objetivo, idioma y elección de narración;
- afirmaciones que pueden aparecer y la evidencia detrás de cada una;
- si un guion existente debe permanecer textual o puede ser reestructurado.
Si alguno de estos cambiara materialmente la película, pregunta una vez antes de comenzar.
Salida requerida
Mantén el proyecto editable. Como mínimo, produce:
capture/ copia del producto, capturas de pantalla, logotipos y tokens de diseño
STORYBOARD.md plan plano por plano aprobado
SCRIPT.md narración, cuando la película está narrada
design.md reglas de tipografía, color, espaciado, movimiento y encuadre
compositions/ fuente para cada plano
renders/launch.mp4 entrega final
No trates una vista previa, storyboard, hoja de contactos o borrador sin sonido como el video final.
Flujo de trabajo
1. Capturar el producto
Inspecciona la URL o los activos proporcionados. Preserva la copia exacta del producto, la UI real, logotipos, tipografía, colores y estados de la interfaz. Registra cada activo utilizable y su fuente. No inventes funciones, clientes, métricas o integraciones.
Si no existe ningún sitio web, crea un pequeño registro de fuente a partir del resumen y los activos suministrados para que los planos posteriores aún tengan una base trazable.
2. Elegir la historia
Escribe una oración para cada uno de estos antes del storyboard:
- la frustración actual de la audiencia;
- el mecanismo distintivo del producto;
- la prueba que el espectador debería creer;
- la acción que el espectador debería tomar.
Selecciona solo los compases que el material fuente soporta. Una película corta generalmente necesita un gancho, mecanismo, prueba y cierre; no necesita un inventario de funciones.
Lee references/story-and-shot-system.md al planificar la secuencia.
3. Establecer el sistema visual
Deriva design.md del producto capturado en lugar de una plantilla de video genérica. Define el lienzo, tipografía, roles de color, cuadrícula, áreas seguras, densidad visual, carácter de movimiento, tratamiento de subtítulos y familia de transiciones.
Limita la película a una gramática visual. La repetición crea identidad; un nuevo estilo para cada plano hace que la película parezca ensamblada a partir de plantillas.
4. Storyboard antes de la animación
Para cada plano, registra:
- hora de inicio y fin;
- trabajo narrativo;
- copia exacta en pantalla;
- activo fuente o estado de UI;
- composición e intención de cámara;
- entrada, desarrollo y salida;
- transición al siguiente plano;
- cualquier afirmación y su fuente de evidencia.
El fotograma debe continuar desarrollándose durante su duración útil. Evita una animación de entrada seguida de varios segundos de contenido estático.
Muestra el storyboard para aprobación antes de construir la película completa.
5. Construir con primitivas mantenidas
HyperFrames es preferido para secuencias de planos HTML. Para Remotion, lee references/remotion-and-remocn.md y usa remocn para comportamientos comunes de tipografía, terminal, gráficos, fondos y transiciones. La animación personalizada es apropiada solo cuando el producto requiere una idea de movimiento que la biblioteca no pueda expresar.
Cada plano debe ser determinista en un fotograma arbitrario. No confíes en temporizadores de tiempo de ejecución, aleatoriedad sin semilla o estado de interacción que un renderizador no pueda reproducir.
6. Revisar la película ensamblada
Antes de renderizar, inspecciona:
- primero, medio y último fotogramas de cada plano;
- cada costura de transición;
- ajuste de texto, recorte, contraste y áreas seguras;
- sincronización con narración y música;
- fidelidad del producto y precisión de las afirmaciones;
- la película completa a velocidad normal con audio;
- una pasada sin sonido, para que la historia visual aún tenga sentido.
Ejecuta node scripts/check-project.mjs <project-dir> para la compuerta del proyecto a nivel de paquete. También ejecuta las comprobaciones nativas de lint, validación y renderizado de la pila de video seleccionada.
Pausa para aprobación en la vista previa ensamblada. Renderiza el MP4 final solo después de la aprobación.
Límite de evidencia
Un ejemplo pulido demuestra la artesanía prevista; no prueba que el skill mejore el rendimiento del modelo. Informa por separado:
- comprobaciones de paquete y proyecto;
- renderizado final exitoso;
- revisión visual humana;
- cualquier evaluación comparativa, solo cuando existan ejecuciones registradas y puntuaciones.
Nunca llames evaluado al skill porque se produjo un video atractivo.
Condiciones de fallo
Detente en lugar de enviar cuando:
- la afirmación principal del producto no puede ser fuenteada;
- la UI capturada es reemplazada por una croma de interfaz inventada;
- un plano es ilegible en la resolución de entrega;
- narración e imagen discrepan;
- el proyecto no puede renderizar de manera determinista;
- la fuente editable o el MP4 final faltan.