derrickgong87/demo-video-creation-skill

Habilidad de Creación de Video de Demostración

Crea un video de demostración de producto pulido a partir de una URL de empresa o activos del producto. El resultado predeterminado es un video de 60 a 90 segundos en 1080p o superior; renderiza en 4K cuando la máquina, los activos y el destino de entrega lo soporten.

Estándar de Operación

• Basa el video en la superficie real del producto: páginas web, pantallas de aplicación, flujos de trabajo con inicio de sesión, capturas de pantalla, activos proporcionados por el usuario o demostraciones públicas verificadas.
• Trata la entrada de solo URL como suficiente para comenzar. Infiere el producto, la audiencia, el flujo de trabajo principal y el sistema de marca a partir del sitio, luego pregunta solo por acceso faltante o preferencias de alto impacto.
• Prefiere la narración de gerente de producto sobre el marketing genérico. Muestra qué problema tiene el usuario, qué hace dentro del producto, qué cambia en la pantalla y por qué el resultado es importante.
• Usa Remotion para la composición de movimiento cuando sea práctico y FFmpeg para inspección, codificación, hojas de contacto, manejo de audio y conversión de entrega.
• Mantén las afirmaciones defendibles. No inventes métricas, logotipos de clientes, resultados de detectores, integraciones, estado de cumplimiento o precios a menos que estén verificados a partir del material fuente.
• Evita sobreadaptarse a un cliente anterior. Reutiliza el flujo de trabajo, los controles de calidad y los patrones de movimiento; no reutilices capturas de pantalla, copia, colores, precios, personas o correcciones versión por versión específicas de un cliente.

Entradas

Si el usuario proporciona solo una URL de sitio web:

1. Abre el sitio en un navegador, mapea la navegación, propuesta de valor, páginas de producto, precios, documentos de ayuda y estados interactivos visibles.
2. Captura capturas de pantalla de alta resolución de las páginas y superficies de interfaz de usuario que mejor expliquen el producto.
3. Construye una narrativa en torno al bucle de producto más fuerte descubierto en el sitio.
4. Indica cualquier límite de acceso si se requiere un área de producto con inicio de sesión.

Si el usuario proporciona más contexto, úsalo para elevar la calidad:

• Audiencia objetivo, plataforma de campaña, relación de aspecto, duración preferida, llamado a la acción, objetivo de lanzamiento.
• Pasos del flujo de trabajo del producto, acceso a cuenta de demostración, ejemplos de entrada o resultados esperados antes/después.
• Activos de marca, capturas de pantalla, referencias de video, fuentes, dirección musical, afirmaciones prohibidas y notas legales.

Enrutamiento de Referencias

• Lee references/capture-workflow.md antes de la investigación en el navegador, la captura con inicio de sesión o el trabajo de capturas de pantalla.
• Lee references/storytelling.md antes de escribir el guion, el storyboard, la lista de tomas o la narrativa del producto.
• Lee references/visual-system.md antes de elegir el lenguaje de movimiento, la tipografía, las transiciones, el diseño o la música.
• Lee references/remotion-ffmpeg.md antes de implementar el proyecto de video o renderizar archivos.
• Lee references/qc-checklist.md antes de dar el video por completo.

Flujo de Trabajo de Producción

1. Define el entregable

   • Confirma la duración objetivo, la relación de aspecto, la resolución, el idioma y la plataforma de entrega cuando estén disponibles.
   • Por defecto, 16:9, 60-90 segundos, 30fps, H.264 MP4, 1080p como mínimo.
   • Usa 4K cuando se solicite o cuando el video se vaya a usar para lanzamiento, inversores, conferencias o distribución de anuncios pagados.

2. Investiga el producto

   • Navega por el sitio web y las páginas del producto lo suficientemente profundo como para identificar el bucle principal, no solo la promesa de la página de inicio.
   • Construye un mapa rápido de características: usuario principal, punto de dolor, acción principal, salida visible del producto, prueba, CTA.
   • Si el producto está detrás de inicio de sesión, usa la sesión activa del navegador del usuario o pídele que inicie sesión, luego continúa desde la interfaz de usuario autenticada.

3. Captura evidencia del producto

   • Captura capturas de pantalla de escritorio a 2x o más escala de dispositivo cuando sea posible.
   • Captura estados llenos y vacíos si explican la transformación.
   • Nombra los activos por escena y estado, como dashboard-empty.png, workflow-result.png, pricing.png.
   • Mantén un manifiesto con URL, título de página, hora de captura, ventana gráfica, nombre de archivo y notas.

4. Escribe la historia del producto

   • Comienza con el problema del usuario o el resultado deseado en lenguaje sencillo.
   • Avanza por el bucle del producto en este orden: configuración, acción, transformación, revisión/prueba, flujo de trabajo más amplio, CTA.
   • Mantén el texto lo suficientemente corto para un video en movimiento. Usa subtítulos como anclajes, no párrafos.
   • Usa una copia que suene natural para la audiencia; evita frases genéricas de IA como "desbloquear productividad" a menos que el producto realmente lo diga.

5. Diseña el sistema de movimiento

   • Usa los colores y la tipografía reales de la marca como base, luego añade una fuente de visualización o acento restringida si mejora la jerarquía.
   • Usa capturas de pantalla del producto como los activos principales. Añade marcos de navegador, rutas de cursor, zooms, máscaras, líneas de escaneo, paneles de comparación o tipografía cinética solo cuando aclaren el flujo de trabajo.
   • Elige transiciones que coincidan con el producto: líquida/ondulada para transformación fluida, barrido de escaneo para análisis, revelación con foco para prueba, empuje espacial para navegación, comparación dividida para antes/después.
   • Mantén el movimiento continuo. Los cambios de escena deben sentirse como si la cámara o la interfaz se moviera a través de una historia de producto, no diapositivas separadas.

6. Construye y renderiza

   • Usa la plantilla de inicio en assets/remotion-starter/ cuando un andamio de proyecto sea útil.
   • Renderiza imágenes de revisión o una hoja de contacto antes de renderizar el video final.
   • Renderiza primero en 1080p para control de calidad, luego el final en 4K si se solicita.
   • Usa FFmpeg o ffprobe para verificar duración, resolución, códec, velocidad de fotogramas y flujo de audio.

7. Control de calidad antes de la entrega

   • Verifica que ningún texto se superponga, se recorte de forma incómoda o se vuelva ilegible en cortes rápidos.
   • Verifica que botones, cursores, llamadas y máscaras se alineen con la interfaz subyacente.
   • Verifica que todas las capturas de pantalla sean lo suficientemente nítidas a la escala final.
   • Verifica que la música sea instrumental, segura en derechos y equilibrada bajo cualquier voz en off o efectos de sonido.
   • Proporciona el MP4 final más artefactos de producción útiles: storyboard, manifiesto de activos, hoja de contacto y proyecto fuente cuando sea relevante.

Scripts Reutilizables

• scripts/create_demo_brief.py crea un resumen estructurado a partir de una URL y contexto opcional del producto.
• scripts/qc_video.py inspecciona los metadatos del video final con ffprobe y señala problemas de resolución, duración, códec y audio.
• scripts/make_contact_sheet.py crea una hoja de contacto visual con FFmpeg para una revisión rápida.

Ejecuta los scripts desde una carpeta de proyecto o con rutas absolutas. Son ayudantes, no un reemplazo del juicio visual.

Plantilla de Inicio

Copia assets/remotion-starter/ en el proyecto de trabajo al comenzar un nuevo video. Reemplaza la configuración de marcador de posición en src/demoConfig.ts, añade capturas de pantalla a public/ o a los activos estáticos de Remotion, y adapta las escenas a la narrativa del producto.

El inicio es intencionalmente genérico:

• Incluye una composición de historia de producto con escenas de apertura, flujo de trabajo, prueba y CTA.
• Usa espacios reales para capturas de pantalla pero recurre a marcadores de posición de interfaz de usuario limpios.
• Incluye primitivas de movimiento para fundidos, zooms, movimiento de riel, énfasis de cursor y paneles de comparación.
• Evita copia, colores o activos específicos del cliente.

Barra de Finalización

No des el video por terminado hasta que estas condiciones sean verdaderas:

• La historia del producto se deriva de evidencia real del producto.
• El render final es al menos 1080p, o el usuario aceptó explícitamente un objetivo inferior.
• El video ha sido inspeccionado visualmente a través de imágenes fijas, render de vista previa o hoja de contacto.
• La metadatos de FFmpeg/ffprobe confirman resolución, duración, códec de video y estado de audio.
• Cualquier límite de licencia o fuente de música, fuentes, material de archivo o páginas de terceros está documentado.
• El usuario recibe un archivo de video concreto, no solo un plan o guion.