pj1433139082-hue/video-design-skills

remotion-build — Generar Videos Remotion

Genera videos MP4 con React siguiendo DESIGN.md (output de remotion-consult). Los subtítulos son el único eje temporal, las animaciones se importan desde la librería global y los recursos se enrutan a través de rutas cross-harness.

Flujo de Trabajo

Paso 0 — Selección de Modo (elegir uno de cuatro antes de empezar)

1. Por plantilla de categoría: El usuario quiere un estilo predefinido, o elige entre las cuatro categorías de remotion-shared/categories/ (subtítulos de locución / visualización de datos / demo de producto / animación de marca) → leer DESIGN.template.md + motion-list.md de esa categoría, heredar el sistema de diseño y solo cambiar contenido y subtítulos.
2. Inspirándose en una referencia: El usuario da un video de referencia (prioridad máxima) o elige de remotion-shared/video-real-library.md → desglosar su estilo de subtítulos, transiciones y ritmo, y replicarlo con componentes de la librería global de animaciones.
3. Diseño libre: Sin referencia ni plantilla → solo evitar los prompts inversos de video-anti-slop.md.
4. Siguiendo un DESIGN existente (output de consult): La consulta ya ha definido el DESIGN + los samples de estilo aprobados → ejecutar estrictamente según los tokens y la sección 8 del DESIGN, sin volver a preguntar sobre la dirección de estilo (el Paso 0.5 solo alinea los criterios de aceptación, no repite la Fase 1 de clarificación). Si no está seguro, listar las opciones al usuario.

Elección del backend de renderizado (quinta dimensión, marcada en DESIGN): Además de los cuatro modos anteriores, se debe decidir el backend de renderizado (por defecto Remotion; solo si DESIGN lo marca o el usuario lo pide se usa HyperFrames):

• Núcleo Remotion (por defecto): Animaciones complejas en React / tarjetas shotcraft / capas en src/ + Sequence + useCurrentFrame. Se usa cuando se busca la máxima libertad de animación.
• Núcleo HyperFrames (HeyGen open source HTML→MP4, opcional): Atributos de datos en index.html + timeline de GSAP (npx hyperframes init/render, gratuito local) → más cercano a la sensación web, incluye npm run check (lint + contraste + movimiento). Recursos/BGM/subtítulos/verificación se reutilizan, solo cambia la escritura del renderizado. Reglas en references/hyperframes-guide.md.
• Decisión: Tarjetas de cámara complejas (flip/partículas/3D) o proyecto existente de Remotion → Remotion; animaciones puras HTML/GSAP, quieres sensación web, necesitas lint integrado → HyperFrames. No mezclar los dos núcleos en el mismo proyecto.

Paso 0.5 — Alineación de Requisitos + Criterios de Aceptación (grill-me, obligatorio, ≤10 rondas)

Ejecutar la habilidad grill-me para alinear: requisito en una frase, relación de aspecto/duración/plataforma, fuente de subtítulos (.srt/.vtt/guion de locución/desde cero), modo, dirección de estilo. Debe producir criterios de aceptación en cuatro categorías:

• Estructural: Categoría/relación de aspecto/duración/fps
• Visual: Fuente de subtítulos/esquema de colores/composición coherente con DESIGN.md o referencia (en modo libre "sin olor a IA")
• Contenido: Todas las frases de subtítulos presentes, sin errores tipográficos, timestamps que cubran todo el video, texto real
• Técnico: Alineación de subtítulos por fotograma (los fotogramas de inicio y fin de cada frase tienen el subtítulo presente), extracción de stills correcta, renderizado MP4 exitoso

Si no se alinea en 10 rondas → registrar los puntos pendientes y continuar con la construcción asumiendo el riesgo.

Paso 1 — Flujo Impulsado por Subtítulos (Núcleo)

Según references/captions-guide.md:

1. Enrutamiento de fuente: Ya hay .srt/.vtt → usarlo directamente; hay guion de locución.md → redactar un borrador de .srt; desde cero → primero redactar un guion de locución y luego .srt.
2. parseSrt({input}) → Caption[], validar segmentos vacíos/ solapamiento de tiempos/ fuera de límites.
3. Alineación de fotogramas: startFrame = Math.round((startMs/1000)*fps), endFrame = Math.round((endMs/1000)*fps), cada frase como <Sequence from={startFrame} durationInFrames={endFrame-startFrame}>.
4. Resaltado a nivel de palabra/frase: createTikTokStyleCaptions → componente CaptionLayer; para frases completas en chino con un solo token → degradar a nivel de frase (decision del highlightMode en DESIGN.md).
5. El ritmo visual se vincula al inicio de cada frase en ms; la duración total del video durationInFrames = round(max(endMs)/1000*fps) + trailing.
6. Después de modificar palabras, llamar a serializeSrt para sobrescribir.

Paso 1.5 — Reconstrucción de srt Impulsada por Locución (suposición temporal realmente activada, primero locución, luego extracción de fotogramas)

La locución es un paso obligatorio para videos de voz en off (no preguntar al usuario): Generación TTS → medición real con ffprobe → reconstrucción de srt para definir la línea de tiempo, basando la secuencia temporal en la medición real del TTS (DESIGN §4 suposición temporal realmente activada). Primero locución, luego extracción de fotogramas — para evitar que después de alinear el srt en el Paso 1, la locución lo reconstruya y anule los pasos anteriores.

1. python scripts/media/tts_gen.py --provider edge-tts --lines lines.txt --save-dir public/audio/ --voice <voice> (por defecto sin clave; cuando MiniMax esté disponible, cambiar explícitamente a --provider minimax, para TTS en la nube doméstica ver mmx-media-pipeline.md §2).
2. Medir la duración real de cada frase con ffprobe (ffprobe -show_entries format=duration), con una pausa de 0.8s entre frases.
3. Reconstruir srt (rebuild_srt.py): start/end de cada frase = acumulación de duración real + pausa; escribir en public/captions.srt.
4. Actualizar los intervalos de fotogramas de las SHOTS raíz según el nuevo srt (round(ms/1000*fps)), cada Sequence debe tener <Audio src={staticFile("audio/s{n}.mp3")}>.
5. BGM: Si no se necesita música generada por IA, obtener de la biblioteca de recursos con licencia del proyecto; si se necesita música generada por prompt, usar por defecto ACE-Step generación local, con el backend musical en la nube como alternativa opcional. Una vez obtenida, recortar a la duración total del video (ffmpeg -t segundos de video), bajar el volumen para no opacar la locución (0.22-0.3).
6. Presupuesto de fotogramas por escena + verificación previa de sincronización de tarjetas (para evitar que "animaciones clave no aparezcan", experimentado 3 veces): El to-from de cada frase en el srt reconstruido es el presupuesto de fotogramas de esa escena. Antes de escribir tarjetas o animaciones de datos, verificar: el último fotograma clave dentro de la tarjeta ≤ presupuesto de la escena, de lo contrario, comprimir la sincronización de la tarjeta (no esperar a la verificación para darse cuenta) —
   • Frases cortas (2-3s≈60-90f): las animaciones finales como sellos/barridos circulares/iluminaciones periódicas son las más propensas a exceder el presupuesto (S2 sello rojo original 70-88f excede 68f de la frase → comprimir a 55-65f; S6 iluminación periódica original 46-70 excede 70f → comprimir a 46-64; S9 barrido de 5 círculos original 136f excede 128f de la frase → comprimir a 108f).
   • Regla: Último fotograma clave de la tarjeta = inicio + duración total en cascada + tiempo de congelación final, debe ser ≤ presupuesto de la frase; si excede, comprimir proporcionalmente la duración de cada stagger/animación individual, manteniendo el tiempo de congelación final ≥4f.

Paso 2 — Buscar Referencia

La referencia dada por el usuario es la máxima prioridad → video-real-library.md → diseño libre. Si hay referencia, usar el "método de descomposición de animaciones" (referencia → combinación de componentes de la librería global de animaciones, ver motion-patterns-video.md).

Paso 3 — Prompts Inversos (versión condensada para video, única restricción dura)

• No usar el mismo ritmo de subtítulos durante todo el video (todas las frases de la misma duración, resaltado a nivel de palabra sin diferenciación que inunda la pantalla).
• No usar la misma composición centrada en cada escena, ni solo fundidos o solo cortes duros.
• No cortar la imagen de manera uniforme (un corte cada N segundos = sin respiración).
• No usar un fondo degradado púrpura-índigo por defecto, ni la típica fuente de IA.
• No usar subtítulos de narración genéricos ("Bienvenido", "Comencemos").
• Las animaciones son obligatorias: Cada escena debe tener al menos una animación de entrada + una transición entre escenas.
• Hasta aquí.

Paso 4 — Construcción (Línea de Base Técnica)

Según references/remotion-build-guide.md:

• Inicialización del proyecto: Copiar el esqueleto desde _dev/remotion-tutorial + npm i @remotion/captions@<versión alineada> + mantener la ruta de Chrome.
• Importar componentes desde la librería global de animaciones (工作台/视频/_动效库/) o copiar a src/components/.
• Inserción opcional de tarjetas de cámara: Si DESIGN §8.2 elige tarjetas, seguir los "Pasos de inserción de tarjetas de cámara" en remotion-shared/video-shots-spec.md (incluyendo marcas de intención [copy]/[借思路]); para videos en chino, por defecto tomar prestada la idea.
• Capas en src: Root.tsx / theme.ts / captions.ts / components/.
• Animaciones deterministas (useCurrentFrame/interpolate/spring, prohibido Math.random y temporizadores del navegador).
• Si existe DESIGN.md, ejecutar estrictamente según los tokens.
• Recursos según references/video-image-spec.md a través de enrutamiento cross-harness (Codex image_gen / ida y vuelta de prompts GPT / imágenes dadas por el usuario).
• Verificación posterior a la generación de recursos contra el esquema (obligatorio): Después de generar los recursos, verificar frase por frase contra el esquema de DESIGN §8 — ① ¿La imagen se ajusta a la semántica/composición de esa frase? (evaluación de visión con puntuación de ajuste, <7 regenerar o ajustar el prompt) ② ¿Las palabras clave grandes son coherentes con la escena y no la obstruyen? ③ ¿El orden z de las capas coincide con el diseño del esquema? Si no → ajustar las palabras clave o regenerar los recursos, no "generar y usar" ; para cada elemento visual, probar múltiples candidatos y elegir el mejor.

Paso 5 — Cierre de Verificación (Tabla de Nodos grill-me)

Nodo	Disparador	Límite de Rondas	Condición de Salida
Inicio	Paso 0.5	10 rondas	Criterios de aceptación finalizados
Modificación	El usuario pide cambios	5 rondas/vez	Qué cambiar está claro, cada ronda se verifica contra los criterios de aceptación
Final	Antes de la entrega	4 rondas	Revisar cada criterio de aceptación uno por uno

Acciones de verificación obligatorias (primero extraer fotogramas, luego renderizar, para evitar renderizados largos que se desperdicien): Cuantificación por capas (4 capas, realizadas en los momentos de prueba de DESIGN §8.2: fotograma clave = inicio de frase / mitad / estado final 0.82):

• Capa 1 Imagen de fondo (la escena en sí): python scripts/media/layout_calc.py <escena.png> — composición/espacio en blanco/área de texto sugerida (buscar espacio según la estructura de espacio en blanco de la imagen, no forzar que la parte superior esté limpia; si la parte superior está invadida → mover el texto a la zona sugerida text_zone, o regenerar una imagen más limpia);
• Capa 2 Imagen de fondo + texto (still con texto): Punto de colocación del texto de layout_calc + frame_judge --subtitle-hex con contraste WCAG real (texto grande ≥3.0 / cuerpo ≥4.5);
• Capa 3 + Animación (fotogramas continuos): Diferencia de fotogramas/visión de fotogramas continuos para juzgar que la animación realmente ocurre + la animación no se superpone a la escena (si la tarjeta es una imagen completa, no se superpone a la escena; modo visual ver §8.2);
• Capa 4 General (video completo): frame_judge del video completo + audio_sync_check.py sincronización audio-video + verificación de oclusión + puntuación de las cuatro habilidades + prueba de acción.

1. npx remotion compositions confirmar el id real;
2. Extraer 3-5 stills (inicio de frase / final de frase / fotograma de transición) — extraer "fotogramas de estado final" no a mitad de la animación (lección aprendida 2026-08-17): Elegir fotogramas después de que la acción esté completa (estado final 0.82 / después del tiempo de congelación), no extraer fotogramas durante la animación en curso — los fotogramas a mitad de la animación pueden hacer que la visión/el ojo humano juzgue erróneamente "falta/estático/marco negro" (S2 sin sello rojo a mitad del flip, S6 sin punto de período a mitad del desplazamiento del odómetro, S7 sin tarjeta de retrato a mitad de la línea de tiempo son todos errores en el momento de la extracción; solo extraer fotogramas de estado final es correcto). Los subtítulos existen y están alineados, la composición no está rota;
3. Verificación de alineación de subtítulos: En el fotograma de inicio de la frase, el subtítulo ya debe aparecer; en el fotograma final, no debe desaparecer antes de tiempo;
4. Criterios duros automatizados: Después de la extracción, ejecutar python scripts/media/frame_judge.py preview/*.png --subtitle-hex <color de subtítulos de DESIGN, ej. E8833A> --subtitle-threshold 3.0 --text-bg-hex <color de fondo de la cápsula de texto, ej. F2F0EB> (--text-region si el texto está en una esquina, pasar la posición real tl/tr/bl/br/center, para evitar falsos positivos en la parte inferior; --text-bg-hex si el fondo de la cápsula es conocido, calcular directamente el contraste entre los subtítulos y el fondo real, omitiendo la moda — la moda captura el color de la escena, no es precisa cuando el texto está sobre la escena; umbral de texto grande 3.0 / cuerpo 4.5; cualquier FAIL desencadena una revisión); opcional pip install iqa-pytorch y luego agregar la puntuación estética NIMA (>6.5 registrar como referencia); umbrales de métricas en references/video-quality-metrics.md; FAIL de brillo en diseño oscuro no bloquea (ver explicación de diseño oscuro en métricas, la prioridad es el contraste);
5. Cada still se verifica contra una checklist (si <3 elementos débiles, desencadena revisión):
   • Composición: ≥2 elementos visuales, no todos centrados, orden z correcto de las capas (bg/mid/fg)
   • Subtítulos: Existen y están alineados, legibles (contraste ≥3:1), sin errores tipográficos
   • Transiciones: Hay transición/animación de entrada entre frases, no corte seco o estático
   • Recursos: Sin texto basura de IA, las capas cumplen §8.1, superposiciones transparentes limpias
   • Animación: Al menos 2 tipos de animación presentes (entrada/salida de recursos + fuente + fondo, elegir dos de tres), el fondo tiene animación
   • Sin olor a IA: Verificar contra los prompts inversos de video-anti-slop.md
6. Verificación de oclusión + verificación de modo visual (inspirado en paper-collage-video spatial-contract, ampliado 2026-08-16): Verificar frase por frase en los stills — ① La cápsula de texto grande está en el área reservada (espacio en blanco superior) ② El sujeto principal no presiona la zona de texto grande/subtítulos ③ El primer plano no oculta el sujeto del plano medio/fondo ④ Las animaciones de las tarjetas no se superponen a la imagen de la escena: Tarjetas de imagen completa (odómetro/cuadrante/columna de partículas/campo oscuro de luz focal) nunca se superponen a la imagen de la escena (elegir uno de tres modos visuales, ver DESIGN §8.2) ⑤ El significado de la animación se corresponde con el significado de la frase (la visión determina qué expresa la columna de partículas/barrido de luz/desplazamiento numérico en esa escena, si es coherente con la semántica de la locución; si el significado no está claro, desencadena revisión). Oclusión/significado poco claro → cambiar el modo visual o eliminar la tarjeta innecesaria.
7. Puerta de seguridad de revisión de las cuatro habilidades (cualquier puerta no superada → revisión, no solo referencia): Ejecutar con subagentes independientes (hallmark/taste ejecutados por agentes independientes, no autoevaluación por parte del modelo principal):
   • taste-skill Pre-Flight (40+ comprobaciones de gusto)
   • hallmark audit (57 puertas de seguridad anti-AI slop)
   • ui-ux-pro-max (Principios UX: legibilidad/jerarquía/consistencia)
   • open-design/anti-ai-slop ("Siete pecados capitales" anti-plantillas) Verificar contra stills/video completo, puntuar por el número de elementos superados (revisión complementaria, para evitar autoevaluación): hallmark 57 puertas superadas ≥90% (≥51 elementos) para aprobar, taste 40+ elementos superados ≥85% para aprobar, ui-ux-pro-max / open-design todos los elementos clave superados; listar los elementos no superados para desencadenar revisión, solo cuando se superen todas las puertas se procede al renderizado y entrega.
8. npx remotion render <id> out/final.mp4;
9. Momento de prueba de acción (inspirado en paper-collage-video proof moments): Según DESIGN §8.2, extraer fotogramas en los momentos de prueba de cada frase (inicio de frase / mitad / estado final 0.82) + verificar que el tipo de acción realmente ocurrió (la entrada ya ocurrió / sigue en movimiento / estado final congelado); ffmpeg -vf "fps=4" extraer fotogramas continuos → la visión determina que la acción ocurrió según DESIGN — un fotograma estático de desplazamiento no es prueba de acción (partículas/ luz focal / números deben ser confirmados con fotogramas continuos); transiciones suaves/entradas y salidas sin saltos (video-quality-metrics §4.6);
10. Verificación de sincronización audio-video (eje principal del video de locución, revisión complementaria): Ejecutar en el video final python scripts/media/audio_sync_check.py out/final.mp4 public/captions.srt — el inicio de cada frase en el srt debe tener sonido de locución dentro de ±0.15s (RMS≥0.01), silencio al inicio de la frase = locución desalineada/faltante/corte al final de la frase → revisión;
11. Revisar cada criterio de aceptación uno por uno → STATUS PASS/FAIL/BLOCKED, NEXT_OWNER.

Líneas Rojas

• Los subtítulos son la restricción dura: captions.srt existe y es la única fuente de la línea de tiempo; la duración se deriva de él.
• Primero extraer fotogramas, luego renderizar: Si los stills no pasan, no se renderiza el video completo.
• La inserción de tarjetas de cámara no es obligatoria: Si DESIGN §8 elige tarjetas, se insertan (copiar shotcraft/demos/{clase}/{tarjeta} y adaptar); si no se eligen tarjetas o son proyectos en chino que toman prestada la idea, no se considera una omisión; las tarjetas no insertadas no generan BLOCKED.
• Los recursos deben ser imágenes reales generadas, no SVGs: Los recursos principales son preferiblemente Codex o un backend de imágenes ya configurado; las transparencias se gestionan con --transparent/remove_white_bg.py.
• Las tarjetas de datos programáticas deben priorizar la copia real de la versión completa de shotcraft, no escribir SVG simplificados a mano (lección aprendida 2026-08-17): Las tarjetas de datos creadas desde cero (cuadrantes/anillos/odómetros/gráficos) si se escriben como SVG simplificados a mano (círculo/línea/path simples, sin marcas de escala/zona roja/cubo/resplandor) quedarán toscas (S9 ring versión escrita a mano visión mmx 3.5/10, copia real de NeedleSweepSelftest de shotcraft con todos los detalles 8.5/10). Las tarjetas de datos siempre deben copiar la versión completa de shotcraft demos/data, typography (escala/principal-secundario/resplandor/cubo de la esfera/punta de la aguja, etc.), y luego re-aplicar la paleta de colores; solo las decoraciones simples (manchas de fondo/rieles base) pueden ser dibujadas programáticamente.
• La reconstrucción de srt impulsada por locución es obligatoria (Paso 1.5, primero locución, luego extracción de fotogramas): En videos de locución, el Paso 1.5 debe realizar TTS → ffprobe → reconstruir srt para definir la línea de tiempo (la secuencia temporal se basa en la medición real del TTS, DESIGN §4), la verificación de extracción de fotogramas ocurre después de la reconstrucción del srt de locución, sin preguntar al usuario.
• No cambiar la dirección del diseño: Si DESIGN.md está definido, seguirlo; si se necesita cambiar la dirección, volver a remotion-consult.
• Prohibido inventar: No fabricar subtítulos/datos.

Archivos de Referencia

Archivo	Cuándo Leerlo
references/captions-guide.md	Paso 1 Alineación de timestamps de subtítulos (Núcleo)
references/remotion-build-guide.md	Paso 4 Normas de ingeniería
references/motion-patterns-video.md	Paso 2/5 Implementación de animaciones
references/video-image-spec.md	Paso 4 Enrutamiento de recursos
references/codex-imagegen.md	Paso 4 Cuando los recursos usan Codex
references/mmx-media-pipeline.md	Paso 4 Backend de medios (MiniMax opcional + cadena de degradación TTS/BGM + problemas conocidos)
references/video-quality-metrics.md	Paso 5 Métricas de juicio automatizado (frame_judge.py + umbrales VMAF/NIMA/ASL)
references/hyperframes-guide.md	Paso 0 Cuando el núcleo de renderizado es HyperFrames: atributos de datos HTML/GSAP/reglas check + CLI
references/hyperframes-blocks.md	Cuando el núcleo de renderizado es HyperFrames, elegir bloques de animación: 154 bloques de registry por categoría (equivalente a shotcraft)
.claude/skills/remotion-shared/video-anti-slop.md	Paso 3 Línea base de prompts inversos
.claude/skills/remotion-shared/video-tokens-spec.md	Al escribir theme.ts
.claude/skills/remotion-shared/categories/{categoria}/motion-list.md	Elegir combinaciones de animación
.claude/skills/remotion-shared/video-shots-spec.md	Sistema de tarjetas de receta de cámara + técnicas autorizadas (construcción elegir tarjetas de cámara: copiar demos/{clase}/{tarjeta} al proyecto)
.claude/skills/remotion-shared/aesthetic-judgment/	Paso 5 Verificación: Juicio de fotografía/edición/maquetación frontend en seis ejes (<3 desencadena revisión)
.claude/skills/ui-ux-pro-max/SKILL.md	Motor de reglas de diseño: Paso 4 Consultar principios UX durante la construcción + prioridades
.claude/skills/taste-skill/SKILL.md	Paso 5 Verificación final: Pre-Flight 40+ elementos (autocomprobación antes de la entrega)
.claude/skills/hallmark/SKILL.md	Paso 5 Revisión de diseño: 57 puertas de seguridad / hallmark audit (antes de la verificación)
资料库/AI工具/design-skills/open-design/craft/anti-ai-slop.md	Paso 3 Reglas anti-plantillas ("Siete pecados capitales") + 151 alternativas de sistema de diseño
.claude/skills/design-shared/review-panel.md	Panel de revisión: Perspectiva de agency-agents + sistema de diseño/biblioteca de referencia estética (puntuación de verificación Paso 5)

Salida y Cierre

STATUS: PASS | FAIL | BLOCKED
Productos: Ruta de out/final.mp4 + ruta de extracción de fotogramas preview/
Criterios de aceptación: Cada elemento  Cumplido / No cumplido / Pendiente
NEXT_OWNER: user (ver resultado) | remotion-consult (cambiar dirección)
Pendientes: Elementos pendientes