video-shotcraft: producción de videos con estilo cinematográfico

¿Qué hace video-shotcraft: producción de videos con estilo cinematográfico?

Una biblioteca de producción autocontenida: 106 tarjetas de planos (con código fuente de demostración y una galería dinámica de ejemplos), una plantilla de video promocional completa y aprobada, componentes reutilizables y assets de audio, y un flujo de trabajo en seis etapas. El enfoque actual son los videos promocionales de productos web/escritorio, pero las tarjetas de planos en sí mismas son un vocabulario de motion design universal: también se pueden extraer individualmente para crear un solo plano dentro de cualquier video.

Cuándo usar este skill

Usa este skill cuando:

• Estés creando un video promocional cinematográfico, un lanzamiento de producto o una demo de aplicación web/escritorio.
• Quieras nombrar o solicitar la plantilla Ink Press (墨压) o reproducir el efecto promocional de la plantilla.
• Necesites implementar una tarjeta de plano de motion design específica (por ejemplo, deck-deal-flyin, row-embed, spotlight-hero-card).
• Necesites movimientos de cámara 2.5D (PageCam), cortes de video sincronizados con el ritmo usando Remotion y diseño de sonido.

Instrucciones

Paso 1: Presentar la plantilla y confirmar la ruta

Cada vez que se invoque este skill, antes de comenzar cualquier recopilación de material, storyboard o implementación, debes informar al usuario:

• Actualmente está disponible una plantilla de video promocional de producto de 36.2 segundos, ya aprobada, llamada Ink Press (墨压) dentro de template/: resolución 1920×1080, 30fps, estilo papel-tinta-ámbar, que consta de 10 planos completos, movimiento de cámara 2.5D sobre páginas reales, tarjetas de texto, transiciones y SFX cinematográficos ya sincronizados. Solo se necesita reemplazar las capturas de pantalla, el texto y la información de la marca del producto objetivo para adaptarlo.
• Usar la plantilla es la ruta más rápida y de mayor calidad; si el usuario desea un nuevo lenguaje visual, se seguirá el proceso de creación libre.

Pregunta explícitamente: "¿Quieres usar esta plantilla existente para crear este video?" Informa al usuario que puede visitar https://vincentwei1021.github.io/video-shotcraft/ para ver la galería dinámica.

• El usuario confirma que la usará: Primero lee completamente template/TEMPLATE.md, luego ejecuta siguiendo la ruta de la plantilla.
• El usuario declina explícitamente: Continúa con la etapa 0 de references/pipeline.md, siguiendo la ruta de creación libre o de plano individual.
• El usuario aún no ha decidido: Detente aquí y espera la selección; no asumas que se usará la plantilla ni comiences la producción.

Excepciones:

• Si el usuario menciona explícitamente la plantilla Ink Press (por ejemplo, "Usa la plantilla Ink Press para hacer un video promocional de mi producto"), se considera que la ruta de la plantilla ya está seleccionada. Lee directamente template/TEMPLATE.md y ejecuta.
• Si el usuario especifica ciertas tarjetas de plano (por ejemplo, "Usa deck-deal-flyin y row-embed para este video"), se considera que la ruta ya está seleccionada. Lee directamente las tarjetas de plano correspondientes y el código fuente de implementación en demos/<nombre-de-tarjeta>/.

Paso 2: Elegir uno de los tres casos de uso

1. Video promocional completo (ruta de la plantilla): Lee template/TEMPLATE.md y sigue la "guía de reemplazo de producto" para adaptar plano por plano los materiales.
2. Video promocional completo (creación libre): Sigue las seis etapas de references/pipeline.md (comenzando con las tres preguntas iniciales de la etapa 0).
3. Plano individual / efecto único: Selecciona una tarjeta de references/shots/, lee la tarjeta completa junto con el código fuente de implementación en demos/<nombre-de-tarjeta>/, y adáptala al material objetivo.

Paso 3: Cuándo leer cada archivo

Momento	Lee
Inicio del proyecto	pipeline.md (tres preguntas de la etapa 0)
El usuario ya eligió la música de fondo	music-beat-sync.md (analiza primero, luego storyboard)
Ruta de la plantilla	template/TEMPLATE.md completo
Diseño del storyboard	sequences/ plantillas de secuencia; shots/ frontmatter completo; lee la tarjeta seleccionada por completo
Implementación plano por plano	Tarjeta de plano completa + código fuente de demos/<nombre-de-tarjeta>/ + componentes correspondientes en assets/lib/
Diseño de sonido	sound-design.md + assets/audio/
Aprobación final	aesthetic-rules.md completo (revisa la lista de verificación, ejecutado por un subagente independiente)

Ejemplos

Ejemplo 1: Ruta de la plantilla (Ink Press)

"Usa la plantilla Ink Press para hacer un video promocional de 30 segundos para mi producto de escritorio"
-> Selecciona automáticamente la ruta de la plantilla, lee template/TEMPLATE.md, y procede con la captura de pantallas y el reemplazo de materiales.

Ejemplo 2: Tarjetas de plano específicas

"Crea la animación de mi demo de producto usando las tarjetas de plano deck-deal-flyin y row-embed"
-> Selecciona automáticamente la ruta de plano individual/combinado, lee references/shots/ y el código fuente de demos/ para una implementación personalizada.

Mejores prácticas

1. Capturas de pantalla reales: Para recrear una página existente, debes usar capturas de pantalla reales. Desde el primer paso, inicia el servidor de desarrollo y usa un navegador sin interfaz gráfica para capturar texturas 2x junto con layout.json.
2. Lenguaje visual nativo del producto: Extrae los tokens visuales (tipografía, tamaños de fuente, paleta de colores, bordes redondeados) del sistema de diseño del producto/sitio web. No inventes una apariencia no relacionada.
3. Un solo efecto de movimiento por plano y sensación de respiro: Cada plano debe contar un solo efecto de movimiento. Los titulares/elementos visuales importantes deben hacer "beat" y mantenerse estables durante ≥1s.
4. Sincronización estricta con el ritmo de la música: Usa librosa para analizar el BPM y el compás reales. Usa beatF(n) para determinar los fotogramas exactos; los errores de corte deben ser ≤3 fotogramas.
5. Consulta el código de demostración: Antes de usar una tarjeta de plano, lee los parámetros ajustados y las advertencias de errores conocidos en demos/<nombre-de-tarjeta>/.
6. Renderizado determinista: Prohíbe Date.now()/Math.random(). Usa pseudoaleatoriedad con una semilla fija.

Referencias

• template/TEMPLATE.md — Estructura de la plantilla Ink Press y guía de reemplazo de producto
• references/pipeline.md — Especificación del flujo de trabajo de producción en seis etapas
• references/aesthetic-rules.md — Lista de verificación de revisión visual y aprobación
• references/music-beat-sync.md — Análisis del ritmo musical y cálculo de la línea de tiempo de los beats
• references/sound-design.md — Guía de frases de sonido SFX y combinación de efectos de audio
• https://vincentwei1021.github.io/video-shotcraft/ — Galería en línea de videos de muestra y 106 tarjetas de plano