video-shotcraft：电影感产品视频制作

video-shotcraft：制作电影感产品视频

Una biblioteca de producción autocontenida: 152 tarjetas de recetas de tomas (con código fuente de demostración y galería de muestras dinámicas), una plantilla de video promocional completa ya verificada, componentes reutilizables, activos de audio y un flujo de trabajo de seis etapas. El enfoque actual son los videos promocionales de productos web/de escritorio, pero las tarjetas de tomas son vocabulario de efectos de movimiento genérico: también se pueden usar tarjetas individuales para tomas únicas en cualquier video.

Determinar el modo al invocar

El video promocional completo tiene tres modos que no se combinan entre sí. Antes de comenzar la recopilación de material, el storyboard o la implementación, primero determina si el usuario ya ha elegido explícitamente; si ya eligió, ejecuta directamente sin preguntar de nuevo ni cambiar a otro modo.

1. Usar plantilla directamente: Mantén el flujo de reemplazo original de Ink Press. Lee template/TEMPLATE.md y reemplaza las capturas de pantalla, el texto y la información de marca del producto objetivo según la estructura de tomas existente.
2. Creación autónoma y libre: Lee references/pipeline.md. El agente decide de forma autónoma la dirección visual, el mapeo de tomas, el storyboard, el material y el audio según los requisitos del usuario y el contenido del proyecto, y avanza continuamente hasta el video final; no se detiene a esperar la confirmación del usuario en las etapas de briefing del producto, styleframe, mapeo de tomas o storyboard.
3. Creación colaborativa: Lee references/guided-free-creation.md. El agente primero presenta juicios y propuestas fundamentadas, y el usuario confirma secuencialmente el briefing del producto, las decisiones de requisitos, la dirección visual, el mapeo de tomas y el storyboard final; una vez aprobado el storyboard, se procede a la etapa final de recopilación de material y producción de references/pipeline.md.

Cuando el usuario proporciona la ruta del proyecto, URL, grabación de pantalla o captura de página pero aún no ha seleccionado un modo, primero realiza una inspección mínima y de solo lectura del producto: comprende el posicionamiento del producto, las funciones principales, la estética visual de la página, el estado mostrable y los riesgos del material; no modifiques el proyecto de negocio, no recopiles datos sensibles, no escribas código de video. Después de la inspección, presenta los tres modos y explica:

• Si Ink Press es adecuado para el producto, los motivos concretos de idoneidad o no;
• Si la creación autónoma y la colaborativa son adecuadas cada una, y qué pistas visuales del producto se conservarían previsiblemente;
• Qué modo recomienda el agente y sus motivos y compensaciones.

Luego pregunta explícitamente: "Según la inspección del producto anterior, recomiendo usar el modo ××. ¿Continuamos con este modo?" También informa al usuario que puede visitar https://vincentwei1021.github.io/video-shotcraft/ para navegar por las muestras dinámicas y seleccionar los efectos de movimiento que desee usar en el video.

Cuando el usuario aún no ha proporcionado un proyecto o página inspeccionable, presenta brevemente los tres modos y luego pregunta; no recomiendes Ink Press por defecto solo porque es una plantilla existente.

• Si el usuario elige la plantilla: Lee template/TEMPLATE.md completamente y ejecuta según el flujo original de la plantilla.
• Si el usuario elige creación autónoma y libre: Lee references/pipeline.md completamente y el agente avanza de forma autónoma sin esperar confirmación etapa por etapa.
• Si el usuario elige creación colaborativa: Lee references/guided-free-creation.md completamente y colabora según sus nodos de confirmación.
• Si el usuario aún no ha decidido: Detente aquí y espera la selección; no elijas por defecto por el usuario ni comiences la producción.

Excepción uno: Cuando el usuario ya ha nombrado la plantilla Ink Press, se considera que el modo de plantilla está seleccionado. Por ejemplo, "Usa la plantilla Ink Press para hacer un video promocional de mi producto". En este caso, no preguntes de nuevo, lee template/TEMPLATE.md completamente y ejecuta según la ruta de la plantilla.

Excepción dos: Cuando el usuario ya ha especificado claramente que quiere usar o hacer referencia a ciertas tarjetas de tomas, la restricción de tomas ya está seleccionada. Por ejemplo, "Usa deck-deal-flyin y row-embed para este video" o "Referencia el efecto de spotlight-hero-card". En este caso, no presentes la plantilla ni preguntes si se debe usar; confirma las tomas especificadas según las reglas de resolución de nombres de la Galería, lee cada tarjeta por completo y localiza el código fuente de demostración preciso según la "Implementación de referencia" de la tarjeta. Las tomas individuales se pueden ejecutar una vez que el material objetivo esté claro; si el video promocional completo aún no ha especificado si se adopta la creación autónoma o colaborativa, solo pregunta por estos dos modos, y las tomas especificadas sirven como restricciones para la producción posterior, sin equivaler automáticamente a creación colaborativa.

Cuatro usos

1. Video promocional completo (ruta de plantilla): Para un efecto muy similar al video de la plantilla → lee template/TEMPLATE.md y sigue la "Guía de reproducción con reemplazo de producto" para adaptar el material toma por toma.
2. Video promocional completo (creación autónoma y libre): Para un nuevo estilo y autorizar al agente a decidir de forma autónoma → lee references/pipeline.md, desde la comprensión del producto hasta la inspección final de forma continua, sin detenerse a esperar confirmación etapa por etapa.
3. Video promocional completo (creación colaborativa): Para participar en decisiones clave → lee references/guided-free-creation.md, confirma el briefing del producto, las decisiones de requisitos, la dirección visual, el mapeo de tomas y el storyboard final; una vez aprobado, continúa desde la recopilación de material final del pipeline.
4. Toma única / efecto único: Selecciona una tarjeta de references/shots/ (o deja que el usuario elija en la galería gallery/), lee la tarjeta completa y localiza el código fuente de demostración preciso según la "Implementación de referencia", y adáptalo al material objetivo.

Límite entre creación autónoma y colaborativa

La creación autónoma y libre delega las decisiones creativas y de ingeniería al agente. El agente deriva dinámicamente el enfoque del producto, la dirección visual, el mapeo de tomas, el storyboard, el procesamiento de material y el esquema de audio a partir del contenido del proyecto, registra los juicios clave y ejecuta directamente; a menos que falten entradas necesarias que no se puedan inferir de forma segura, no pregunta, no se detiene etapa por etapa, ni solicita confirmación de productos intermedios. Los requisitos explícitos del usuario siempre son vinculantes y no pueden ser anulados por la selección predeterminada del agente.

La creación colaborativa sí utiliza la confirmación etapa por etapa. Por defecto, lee references/guided-free-creation.md, y en cada ronda solo hace 1–3 preguntas que más reduzcan el retrabajo, y se detiene para esperar la confirmación del usuario en el briefing del producto, las decisiones de requisitos, la dirección visual, el mapeo de tomas y el storyboard final. El usuario confirma la dirección del negocio y la creatividad; el agente completa de forma autónoma el método de recopilación, los parámetros de implementación, los puntos de anclaje de SFX, el proyecto de Remotion, el renderizado y el QA técnico.

En la creación colaborativa, cuando el usuario dice explícitamente "decide tú completamente" o "salta la confirmación y hazlo directamente", cambia a creación autónoma y libre y registra esta elección; no pretendas avanzar de forma autónoma mientras sigues solicitando confirmación etapa por etapa.

El mapeo de función a toma es solo "qué sintaxis de movimiento usar", no un storyboard completo. Después de confirmar el mapeo en la creación colaborativa, el agente debe continuar dando el orden de las tomas, la duración, las imágenes específicas, el estado de la página, la fuente del material, los subtítulos, las transiciones y los SFX; solo después de confirmar el storyboard completo se procede a la recopilación de material final. Cuando el usuario copia el nombre de una toma de la Galería, solo necesita proporcionar el nombre de la tarjeta o "nombre de tarjeta · nombre de estilo", y el agente se encarga de leer la tarjeta de receta local y el código fuente de demostración.

Conceptos centrales

1. Para replicar páginas existentes se deben usar capturas de pantalla reales; la interfaz de usuario hecha a mano se limita a escenarios no replicados, y la calidad y claridad de la expresión son requisitos estrictos. Al representar páginas reales del producto, el primer paso es iniciar un servidor de desarrollo local, usar un navegador sin cabeza para capturar texturas 2x de página completa + recorte de elementos + tabla de coordenadas layout.json. En escenarios no replicados (apertura abstracta / segmento de marca / componente de visualización independiente) se permite UI hecha a mano, pero si no alcanza una calidad de nivel de publicación o el espectador no entiende lo que expresa, vuelve a la ruta de capturas de pantalla. Los datos de página se tratan según el riesgo: los datos de demostración públicos solo se pueden conservar después de que el briefing del producto lo confirme explícitamente; los datos sensibles de clientes, personales, internos, claves, en tiempo real u otros deben reemplazarse con contenido ficticio o desensibilizado, y congelarse antes de la recopilación.

2. El lenguaje visual de todo el video debe surgir del propio producto, no se debe crear un conjunto ajeno de "piel de video promocional". Antes de hacer el styleframe, extrae del sistema de diseño, el código fuente o los estilos calculados del producto/sitio web y escribe la especificación de diseño: familia de fuentes y pesos, jerarquía de tamaños de fuente, altura de línea / espaciado de letras, cuadrícula, espaciado, alineación, densidad de información y radios de esquina, así como colores de fondo / superficie / cuerpo / énfasis / estado, degradados y materiales. Todos los títulos, subtítulos, números, tarjetas de texto, tipografía, transiciones, partículas, efectos de luz y otras combinaciones de colores de efectos en el video deben reutilizar o extender con moderación estos tokens, al mismo tiempo que coinciden con el tono, el gusto y la textura del producto. Al seguir la ruta de plantilla o tarjetas de tomas, solo se hereda su estructura de tomas, sintaxis de movimiento, ritmo y parámetros ajustados; la fuente, la tipografía, la combinación de colores y los materiales deben re-skinizarse según el producto objetivo. Si la narrativa requiere desviarse de la estética del producto, en la creación colaborativa primero explica el motivo y pide confirmación al usuario; en la creación autónoma, escribe el motivo y las compensaciones en la especificación de diseño y continúa.

3. La sensación cinematográfica proviene de la coordinación del movimiento de cámara, la iluminación, el ritmo y el sonido, no de animaciones llamativas. Lo que ha sido repetidamente aprobado es: arco de acción completa de un solo protagonista (foco → acercamiento → flotación → retorno), aceleración impulsada por metáforas físicas (reparto de cartas), toma de órbita en plano lateral inclinado, frase de sonido riser → impact → sparkle. La entrada de elementos masivos depende del movimiento en sí, no de destellos individuales: los destellos decorativos / inundación de brillos parecen baratos; los efectos de luz de punto único de alta calidad son aceptables.

4. Cada toma solo cuenta un efecto de movimiento; después de que la información clave se asienta, debe haber respiración. Una técnica de animación (vuelo, apilamiento, paso de página) solo es protagonista una vez en todo el video; las tomas repetidas y los taglines repetidos se eliminan. La preferencia de ritmo es unidireccional: todos los comentarios históricos apuntan a "ralentizar / quedarse", nunca ha habido un "demasiado lento": la marca de logotipo se mantiene ≥1s después de asentarse, el final de efectos masivos deja 0.5s de quietud, el movimiento del protagonista de apertura da suficiente 3s. Al organizar la línea de tiempo, presupuesta fotogramas para hold/rest.

5. En videos con BGM de ritmo fuerte, todas las transiciones y efectos deben sincronizarse con el compás. Si el usuario ya ha elegido la música → antes de comenzar, realiza un análisis de ritmo (ajuste de cuadrícula de libros para obtener BPM/fase real + ubicación de bombos en tres categorías: kick/snare/hihat), la cuadrícula se aprueba solo después de verificar la cobertura de transitorios; luego se hace el storyboard; la línea de tiempo se escribe con el compás beatF(n), los acentos dispersos se anclan a transitorios reales en lugar de puntos de interpolación de cuadrícula, después del renderizado, se extrae la pista de audio del video final y se prueba que el error de punto de corte sea ≤3f. La metodología se encuentra en references/music-beat-sync.md. Los videos con BGM se entregan en dos versiones: con BGM y sin BGM (conservando SFX), renderizadas desde la misma línea de tiempo mediante el inputProp bgm, para que el usuario pueda añadir su propia música posteriormente.

6. Para usar efectos de movimiento de tarjetas de tomas, primero se debe analizar el índice de la Galería y leer el código de demostración preciso. Primero usa gallery/api/library.json para validar el nombre de la tarjeta y el style-key, luego localiza el TSX específico según la "Implementación de referencia" del documento de la tarjeta. Las tarjetas de receta proporcionan semántica y tablas de parámetros; el código fuente de demostración preciso es la verdad de los parámetros ajustados (curvas de easing, proporciones de tiempo, momento del enmascaramiento, escritura evasiva de trampas conocidas). Se permiten adaptaciones, pero los parámetros marcados como "trampas/puntos débiles" conocidos en la tarjeta no deben degradarse: el estándar de calidad solo aumenta, no disminuye. Escribir desde cero basándose solo en el nombre de la tarjeta y la comprensión significa abandonar toda la acumulación de ajustes.

7. La creación colaborativa antepone los elementos de confirmación de bajo coste; la creación autónoma deja el mismo juicio como registro de ejecución. El orden de briefing del producto → tabla de decisiones de requisitos a ejecución → dirección textual → styleframe → mapeo de tomas → storyboard no cambia; la creación colaborativa los entrega al usuario para confirmación nivel por nivel; la creación autónoma los selecciona y avanza continuamente. Ninguno de los dos modos debe entrar en la implementación toma por toma cuando la dirección no está definida.

8. Aceptación a lo largo de todo el proceso + revisión independiente antes de la entrega. A partir de la etapa 5, cada toma se autoinspecciona con npx remotion still para obtener fotogramas estáticos; después de cada ronda de modificaciones, renderiza el video completo + extrae fotogramas con ffmpeg para revisión; antes de la entrega, se debe asignar un subagente con contexto limpio para una revisión final independiente. La entrada de la revisión incluye el video final, los fotogramas clave, el briefing del producto, la tabla de decisiones de requisitos a ejecución, la dirección visual/styleframe confirmada o registrada según el modo actual, el mapeo de función a toma, los nombres/variantes de la Galería, el TSX de demostración preciso, las muestras de referencia/fotogramas extraídos de la Galería, el storyboard final, las tarjetas de tomas seleccionadas y los criterios estéticos; según references/final-review.md, verifica simultáneamente la coherencia del esquema, la integridad funcional, la fidelidad de las tomas, la calidad técnica visual/audio y la seguridad de los datos, y emite un informe con evidencia de números de fotograma artículo por artículo. El creador tiene sesgo de confirmación sobre su propia producción; la primera inspección nunca debe delegarse al usuario.

9. Renderizado determinista: Prohíbe Date.now()/Math.random(), todas las semillas pseudoaleatorias fijas (mulberry32/hash, la semilla se deriva del índice), cada fotograma es reproducible.

Flujo de trabajo

La creación autónoma y libre ejecuta references/pipeline.md desde la etapa 0 de forma continua, sin esperar confirmación del usuario etapa por etapa. La creación colaborativa primero completa las etapas 0–3 de comprensión del producto, dirección visual, mapeo de tomas y confirmación del storyboard según references/guided-free-creation.md, luego continúa desde la etapa 4 de recopilación de material final del pipeline, sin repetir preguntas ni rediseñar. Las etapas 2–3 escanean los frontmatter de cada tarjeta en references/shots/ y seleccionan tomas según la curva de energía; las etapas 5–7 se comparan continuamente con references/aesthetic-rules.md para autoinspección; la etapa 6 lee references/sound-design.md; los videos con ritmo marcado siguen references/music-beat-sync.md en todo momento.

Después de entregar el video final de cualquier modo, por defecto pregunta al usuario una vez si necesita exportar simultáneamente un archivo de proyecto de CapCut (剪映工程, que permite modificar el contenido/tamaño/color de los subtítulos, cambiar la velocidad/reordenar las tomas, ajustar o reemplazar el audio en CapCut); si el usuario lo necesita o lo solicita explícitamente, lee references/jianying-export.md y ejecuta.

Cuándo leer cada archivo

Momento	Leer
Inicio del proyecto y modo no definido	Inspección mínima de solo lectura, luego ofrecer tres modos de video promocional completo y recomendar
Creación autónoma y libre	pipeline.md (el agente completa las etapas 0–7 de forma autónoma, sin esperar confirmación etapa por etapa)
Creación colaborativa	guided-free-creation.md (confirmar etapas 0–3), luego continuar desde pipeline.md etapa 4
El usuario ya ha elegido BGM	music-beat-sync.md (analizar primero, luego hacer storyboard)
Ruta de plantilla	template/TEMPLATE.md completo
Diseño de storyboard	Plantillas de secuencia en sequences/ (rellenar el esqueleto del video primero); todos los frontmatter en shots/; leer las tarjetas seleccionadas por completo
Implementación toma por toma	Tarjeta de toma completa + código fuente de demostración preciso según "Implementación de referencia" + componentes correspondientes en assets/lib/
Diseño de sonido	sound-design.md + assets/audio/
Aceptación	final-review.md + aesthetic-rules.md completo (lista de verificación ejecutada por subagente independiente)
Después de la entrega del video (exportación a CapCut)	jianying-export.md + módulos de plataforma en jianying-export/

Uso de activos

• assets/lib/ Los componentes se copian al nuevo proyecto y se modifican libremente (no importan esta biblioteca). Lista: PageCam (cámara de página 2.5D — base de todas las tomas de "página real"), DigitRoll, FlashCut, Caption, FlatPanel, VerticalTicker (muro infinito 3D), helpers(rand/shake/camera/motion). FlatPanel y helpers/camera requieren dependencias three + @react-three/fiber + @remotion/three; el resto solo necesita remotion.
• assets/scripts/capture-template.mjs se copia y se modifica la CONFIG en la parte superior (BASE/rutas/selectores).
• assets/audio/ Los efectos de sonido se copian directamente para uso comercial gratuito (ver audio/ATTRIBUTION.md): audio/bgm/ son opciones de BGM de ritmo fuerte; audio/sfx/<categoría>/ 149 efectos de sonido en 16 categorías (transition, impact, riser, camera, ui, text, paper, film, light, data, scifi, mech, glass, fluid, crowd, counter). Para buscar sonidos, primero ve al directorio de la categoría; la lista completa está en sound-design.md. El vocabulario sparkle tiene el nombre de directorio light/ (no sparkle/); S1 prohíbe el timbre pero no la acción — si la imagen realmente tiene un clic/interruptor, debe acompañarse de sonido foley, pero la mitad de ui/ son sonidos de retroalimentación sintéticos (tone/bleep/notification) que deben escucharse uno por uno, no se puede aprobar todo el directorio (lista en sound-design 3.3); las muestras largas y los materiales de sonido ligero tienen cada uno su propia lista que requiere tratamiento especial (sound-design 4.1).
• demos/ Código fuente de implementación de cada tarjeta: la mayoría son demos en escala de grises autocontenidas (algunas importan componentes de UI falsos de demos/_fixtures/Fixtures.tsx, algunas importan texturas de páginas reales de demos/_textures/); cópialas al proyecto de Remotion y se pueden ejecutar; algunas demos usan @remotion/motion-blur (CameraMotionBlur), requieren npm i @remotion/motion-blur; la lista está en demos/README.md.
• template/ Proyecto completo renderizable: npm install && npx remotion render src/index.ts AiflPromo out/promo.mp4.
• jianying-export/ Módulo de exportación de proyecto de CapCut: mac_draft.py (probado en Mac CapCut 11.2), windows_draft.py (implementado según la ruta de soporte upstream, no verificado en hardware real), smoke_test.py (prueba de humo mínima para entornos nuevos). El flujo, la extracción de la línea de tiempo y el método de creación de pistas están en references/jianying-export.md; requiere venv + pip install pyJianYingDraft.
• gallery/ Galería estática: es mejor dar directamente al usuario la versión en línea https://vincentwei1021.github.io/video-shotcraft/library.html ; para ejecutarla localmente, primero ejecuta gallery/fetch-media.sh para descargar las muestras (mp4 no está en git), luego cd gallery && python3 -m http.server 4178. 152 tarjetas, 209 muestras dinámicas se pueden navegar/buscar/seleccionar múltiples y copiar nombres de tarjetas — ideal para que el usuario elija tomas mientras ve las muestras.