Viva Video

A partir de un documento de producto, haz un video que se exprese con precisión, se vea claro y cada fotograma esté generado por código.

Diferencia con cinematic-product-video: ese usa SeedDance para generar metraje cinematográfico, orientado a la marca. Este no usa ningún metraje generado, todo se renderiza con código, orientado a la información. Ambas habilidades son independientes, no las mezcles.

Se entrega el video final, no un guion gráfico. Cuando solo se te pida cambiar especificaciones o indicaciones, detente en la revisión y validación de archivos; no inicies generación de pago ni renderizado completo.

Lo primero: leer y comprender el documento. Si este paso falla, todo lo demás estará mal

La razón principal por la que un video no se explica bien no es el renderizado, es no haber comprendido el documento antes de empezar a diseñar el diseño. El apartado comprehension de film-rules.yaml es bloqueante, compose_spec.py lo interceptará.

Hay que producir tres documentos

Archivo	Contenido	Propósito
`UNDERSTANDING.md`	Qué es, qué problema resuelve a quién, cadena causal del mecanismo, números clave y sus condiciones de medición, tres preguntas que el espectador debe poder responder al terminar, lo que el documento no afirma, puntos no entendidos marcados como `unknown`	Evita que el video diga cosas incorrectas o exageradas
`CLAIMS.md`	Una línea por conclusión: afirmación / fuente original / mecanismo / beneficio / condiciones limitantes / evidencia visual / redacción de riesgos	Cada frase del video debe poder rastrearse hasta esta tabla
`CONCEPT_MAP.md`	Capítulo del documento → afirmación → mecanismo y beneficio → sujeto y acción visual → malas interpretaciones prohibidas → evidencia necesaria para juzgar	Traduce "qué contar" a "qué dibujar"

Al mismo tiempo, rellena las conclusiones en content.understanding de content.yaml, que compose_spec.py validará.

Cierra el documento y responde estas cinco preguntas

Si no puedes responder, vuelve a leer; no continúes con dudas.

¿Cuál es el problema que resuelve esto?, ¿cómo lo hacía el usuario antes y cuál era su dolor?
Explica el mecanismo como una cadena causal, sin saltos intermedios.
¿Qué número prueba mejor la conclusión?, ¿bajo qué condiciones se midió?, ¿sigue siendo válido si cambian las condiciones?
¿Cuál es la interpretación errónea más probable que el espectador pueda tener?, ¿cómo debe prevenirla la imagen?
¿Qué frases del documento son lenguaje de marketing y no deben presentarse como hechos?

Después de comprenderlo, reorganiza, no copies el índice

El orden debe ser: problema → costo del método antiguo → nuevo mecanismo → evidencia → límites de aplicación → siguiente paso. Cada escena solo cuenta una conclusión; la conclusión primero, luego el mecanismo, luego la evidencia. Cuando un término aparezca por primera vez, explícalo en una oración.

Prohibido: usar "mejora significativa", "actualización completa", "optimización notable" en lugar de los números específicos dados en el documento; inventar números si el documento no los da; presentar la hoja de ruta como algo ya entregado; reescribir el código de ejemplo de una manera más bonita pero que no funcione; adivinar el contenido de un capítulo por su título si no se ha entendido. compose_spec.py buscará estas frases hechas y reportará errores.

Punto de control

Antes de escribir content.yaml, pasa al usuario UNDERSTANDING.md, el esquema de los capítulos, una conclusión por capítulo, y el prototipo visual previsto para cada capítulo. No pases a la capa visual si la capa factual no ha sido aprobada. Repetir este paso es lo más barato; repetir el video final es lo más caro.

Fuente del método: la tabla de decisiones de transición, el trío de enfoque, el esqueleto energético, la prueba de tres metros y la sección de tipografía china están tomados de huashu-design (Tío Hua). Lo que se ha tomado, lo que se ha visto pero no se ha tomado, y por qué no se ha tomado, se registra en references/borrowed-from-huashu-design.md.

Estructura de tres capas, solo la capa intermedia cambia cada vez

Capa	Archivo	Al hacer un video
Capa de reglas	`references/film-rules.yaml`	No se modifica. Qué debe cumplirse: comprender el documento, un hecho por fotograma, correspondencia uno a uno entre voz en off y unidades de información, iluminar lo que se dice, cero cortes en bruto, densidad mínima, invariantes de renderizado R01–R30, puertas de aceptación Q01–Q38, métodos de medición y umbrales
Paquete temático	`themes/<name>/theme.yaml`	Se modifica solo para cambiar la apariencia. Cómo se ve: derivación de colores, tamaño de fuente, coordenadas, dibujo de tarjetas y navegación, curvas de easing, selección de transiciones, cantidad de tinta del enfoque, BPM e instrumentación de la música de fondo
Contenido del producto	Tu `content.yaml`	Solo escribe esto. Comprensión, hechos, capítulos, afirmaciones, métricas, recursos de marca, tabla de pronunciación, método de explicación y unidades de información de cada capítulo
Producto sintetizado	`video-spec.resolved.yaml`	No lo modifiques a mano, lo genera un script

La línea divisoria entre la capa de reglas y el paquete temático es solo una: cambiar la apariencia no debería poder cambiar "la voz en off debe coincidir con la imagen". El criterio permanece en la capa de reglas, la apariencia se delega al paquete temático; theme_contract escribe ambas como listas verificables por máquina; si al paquete le falta una clave, se sale de los límites o intenta modificar el criterio, validate_spec.py lo rechaza en el acto. El paquete predeterminado es daylight (fondo casi blanco + tarjetas blancas + degradado de tres puntos de anclaje del color de marca), es la apariencia predeterminada de la habilidad. Cómo escribir un nuevo paquete se explica en themes/README.md.

SKILL=~/.agents/skills/viva-video
cp $SKILL/templates/content.example.yaml ./content.yaml
# Primero comprende el documento, rellena understanding; luego rellena el resto de TODO
python3 $SKILL/scripts/compose_spec.py  ./content.yaml -o ./video-spec.resolved.yaml  # Añade --theme <nombre_paquete> para cambiar la apariencia
python3 $SKILL/scripts/validate_spec.py ./video-spec.resolved.yaml --self-test

examples/content.viva-video.yaml es un ejemplo de relleno (el video de lanzamiento de la propia viva-video 1.0, 7 capítulos).

Modelos de voz y video: el usuario da lo que usa, si no da nada, usa solo sus propias capacidades

La habilidad no incluye direcciones ni claves de ningún modelo de voz o video.

Si el usuario explica cómo invocar su síntesis de voz, reconocimiento de voz o modelo de video (comando, documento de API, script existente, todo vale): empaquétalo como un comando y escríbelo en providers.json; luego tts.mjs, pron_calibrate.mjs, asr_check.mjs --backend command lo usarán. La clave solo se queda en las variables de entorno o en la configuración del usuario, no se escribe en archivos de proyecto, registros ni mensajes.
Si el usuario no lo dice: usa solo las capacidades que el agente tenga a mano. Si hay herramientas de voz listas en el entorno, úsalas; si no, genera un video solo con subtítulos, sin voz en off, y marca la comprobación de pronunciación como not_tested. No adivines ni busques direcciones y claves de ningún servicio.

El formato, el orden de búsqueda y la tabla de degradación se explican en references/providers.md.

Las tres primeras cosas al cambiar de producto, el orden no se puede invertir

Uno: Determinar la pronunciación

El TTS chino lee Rspack como una palabra inglesa completa, y la s intermedia se pierde: la transcripción inversa real se convierte en Spac.

La solución es hacer que el TTS lea letra por letra, no transcribir el nombre a caracteres chinos. Escritura: RS + espacio + el resto de la palabra inglesa.

Mostrado	Enviado al TTS	Pronunciación
Rspack	`RS pack`	R-S-pack
Rsbuild	`RS build`	R-S-build
Rstest	`RS test`	R-S-test
Rsdoctor	`RS doctor`	R-S-doctor

Medición real del 2026-11-04 (con una voz femenina china, velocidad 1.24, sintetizada y luego transcrita inversamente con faster-whisper local):

Escritura	Transcripción inversa	Veredicto
`Rspack`	Spac	No, se pierde la s
`RS pack`	RSPAC	Adoptado, longitud total de los cuatro nombres 7.78s
`R S pack`	RS Pack	Válido, ligeramente más largo
`R 斯 pack`	OSPAC	No, el carácter chino "斯" desvía la R anterior
`R-S-pack`	RS Pack	No, el guión introduce una pausa, la frase completa es 1.5s más larga
`而斯派克`	而斯派克	No, todo se vuelve chino, la palabra inglesa desaparece

Las unidades deben expandirse: en la medición real, 915.8 ms se lee como «915.8 metros». Escríbelo como «915.8 毫秒». pronounce.py hace esto automáticamente (solo reemplaza las unidades después de los números).

Las abreviaturas en letras (SSR / BFF / SWC / CLI), decimales, porcentajes, números de versión 3.0 se leen correctamente en las pruebas reales, no los reescribas innecesariamente.

python3 scripts/pronounce.py --self-test                 # 8 pruebas
python3 scripts/pronounce.py "El análisis tomó de 915.8 ms a 51.6 ms."
node     scripts/pron_calibrate.mjs --terms terms.json   # Al cambiar de producto/timbre, prueba real para elegir la escritura
node     scripts/asr_check.mjs --spec video-spec.resolved.yaml --voice voice/

Al cambiar de timbre, velocidad o introducir nuevos nombres técnicos, siempre ejecuta primero pron_calibrate.mjs para una prueba real; no copies las conclusiones anteriores. La pronunciación de las letras varía según el timbre. Sin una prueba de regresión, no se puede marcar la pronunciación como aprobada; que pase la ASR no significa que el sonido sea natural; si no se ha escuchado, márcalo como not_tested.

Dos: Determinar el color temático y el degradado

python3 scripts/theme_resolve.py --svg brand/logo.svg --out qa/theme-resolution.json
python3 scripts/theme_resolve.py --hex '#F93920'

Sigue design.theme.resolution_order: especificado por el usuario → SVG de la marca → variables CSS del sitio web → color decorativo del documento → fallback. El color original obtenido se convierte primero a OKLCH, se recorta el brillo a 0.45–0.62 y la cromaticidad a 0.12–0.22, se conserva el tono original. Cuando se sale del sRGB, se marca la cromaticidad para mapearlo; no se permite el recorte por canal: el recorte cambia el tono, lo que anula la normalización.

Los tres colores de anclaje del degradado se mueven en la misma dirección a lo largo del círculo cromático hacia el ancla magenta (H=350°), con un intervalo recortado entre 55° y 86°, y el secundario en el 40%. Ir en ambas direcciones haría que el degradado retrocediera a medio camino, pareciendo un error. Si se introduce el color principal del video de referencia, se puede reproducir su propio #376CFF → #8E33F2 → #E3429B.

Dos pendientes: para los títulos usa la pendiente de saturación completa, para los números grandes ≥96px usa el nivel más claro (L +0.13, C −0.06) — el área grande de los números grandes, si estuviera completamente saturado, abrumaría al título.

Clasificación de contraste: tinta del cuerpo de texto 4.5, letras grandes del color de marca 3.0, valor numérico principal ≥96px 2.3 (la medición real del video de referencia es 2.37–2.86, si se endurece más, todo el degradado se volvería turbio).

Rojo, verde y naranja son colores semánticos, no participan en la derivación. Prohibido usar el rojo de error como borde de contenedor normal o decoración.

Tres: Elegir el prototipo visual y el método de explicación para cada capítulo

Prototipo visual se elige de los ocho en scene_language.archetypes: gráfico de dependencias, código y relaciones, solicitud-respuesta, descubrir primero y luego solicitar, indicadores antes y después, matriz de capacidades, máquina de estados, arquitectura en capas. No se pueden repetir dos capítulos adyacentes.

Método de explicación (explanation_mode) se elige de explanation_modes.vocabulary, que determina si esta página se mueve o no y cómo. Primero mira qué tipo de información es, luego consulta la tabla de selección (ver la sección «Cómo explicar información abstracta» más abajo).

Unidad de información cada capítulo escribe 3–5 etiquetas cortas; esto es tanto el límite inferior de densidad como el límite superior de «demasiado contenido en una imagen».

Los tres elementos serán validados por compose_spec.py.

Diseño: ¿Está lleno o disperso?

El título siempre es en dos partes: «preámbulo, conclusión»

La tinta de la primera parte, la segunda parte completa en degradado. La división solo puede caer en un signo de puntuación, y la parte de la conclusión ocupa el 35%–70%.

Conciso, lineal, ｜Cada paso también es válido por separado
Declarado una vez,  ｜Comprobación en tiempo de ejecución y documentación listas automáticamente
Prueba real en la misma máquina,  ｜Ejecuta más, más rápido y más barato

Se escribe como headline_lead + headline_emphasis en content.yaml, y compose_spec.py valida la proporción y la división. Ten en cuenta que es diferente de title (nombre del capítulo): el nombre del capítulo va en la página del capítulo y la navegación; headline es el título grande de la página de contenido.

Presupuesto de degradado: como máximo 1 título + 1 valor numérico principal + 2 palabras clave por página. Si se supera, ya no será una señal de énfasis. El degradado no está permitido en texto <32px (crea bandas discontinuas en las pruebas reales), no se puede añadir borde, sombra paralela, brillo, ni movimiento.

Primero llena las ranuras, luego da el contenido clave

Dibuja todas las ranuras en el primer fotograma de la escena — bordes del contenedor, título de la ranura (chip + título + línea separadora), esqueleto del contenido; luego solo cambia el contenido y la opacidad, la caja delimitadora no se mueve. El contenido clave (valor numérico, código, etiqueta) se deja para cuando la voz en off lo mencione.

Esta regla resuelve tres cosas al mismo tiempo: el diseño está lleno desde el primer fotograma, el espectador no ve una página vacía «donde el contenido aún no ha crecido»; no hay sacudidas de reflujo durante el proceso de relleno; la primera impresión es la estructura de esta página, sabiendo que se explicarán varias cosas más adelante.

El esqueleto debe tener un título o una estructura de marcador de posición, no un rectángulo redondeado en blanco puro.

La cabecera de la ranura no debe esperar junto con el contenido. Error medido el 2026-11-05: dos tipos de ranuras feature y stage colgaban el título del evento de revelado del contenido, por lo que al inicio de la página, las dos tarjetas inferiores eran rectángulos blancos puros. La cabecera pertenece al contenedor, el contenido al ritmo.

Esta regla tiene un criterio a nivel de píxel (mitad real de R18): el rectángulo blanco máximo en el área de texto del primer fotograma de la escena (justo después de la transición) es ≤ 0.26. Si solo se prueba el fotograma de pausa, no se puede ver: en el fotograma de pausa, la página está, por supuesto, llena; no se puede ver el estado medio vacío de los primeros ocho segundos.

Las ranuras que aún no tienen contenido no deben oscurecerse. Mira la sección «Enfoque» a continuación: si las ranuras vacías también se reducen al nivel desactivado, la página se percibe inmediatamente como «aún no ha crecido», que es exactamente el problema que la preasignación de ranuras pretende resolver. En las pruebas reales, al aumentar la opacidad de las ranuras vacías de 0.38 a 0.80, el rectángulo blanco máximo del primer fotograma de siete escenas se redujo de 0.29–0.62 a 0.058–0.199.

El contenido sin marco debe estar contenido

Los usuarios comentaron: «cuando no hay tarjetas, está muy disperso». La regla se ha endurecido:

Cada unidad de información en el área de texto debe pertenecer a un contenedor oa un grupo etiquetado
Solo se permiten tres tipos sin marco: una lista de puntos clave justo debajo del contenedor, una conclusión en la parte inferior de la página, y el kicker y el título en la parte superior
Los puntos clave sin marco deben compartir el borde izquierdo y el ancho con el contenedor adyacente, como máximo 7 columnas de ancho, como máximo 4 elementos, con la forma «número de círculo + título corto en negrita + dos puntos + cuerpo de texto» comenzando en la misma línea
Todos los bloques de texto sin marco en una misma página solo pueden tener un borde izquierdo
Si el contenido sin marco ocupa más del 40% del área de texto, debe colocarse dentro de un contenedor

Prohibido: tres o cuatro párrafos de texto centrados y con espacios en blanco entre sí; usar líneas en blanco para «llenar» la distancia; que aparezcan más de dos tipos de bordes izquierdos en una página.

Límite inferior de densidad (área de texto `[120, 280, 1680, 610]`)

Indicador	Límite inferior	Método de medición
Ocupación de contenedores occupancy	≥ 0.55	Caja delimitadora del objeto de escena
Extensión vertical	≥ 0.72	Caja delimitadora del objeto de escena
Extensión horizontal	≥ 0.86	Caja delimitadora del objeto de escena
Rectángulo blanco máximo	≤ 0.14	Caja delimitadora del objeto de escena
Banda blanca máxima	≤ 150 px de diseño	Caja delimitadora del objeto de escena
Unidades de información independientes	≥ 3	Lista de objetos de escena
Rectángulo blanco máximo en fotograma estable	≤ 0.20	Mapa de bordes del fotograma estable

El último elemento es a nivel de píxel y los capítulos/páginas de portada/final están exentos. No usar «proporción de píxeles que no son de fondo»: este estilo visual son tarjetas blancas sobre un fondo casi blanco; la tarjeta de relleno se convertirá en el color modal, y la métrica se invertirá (en la prueba real, el video de referencia tenía 0.144, la versión considerada estéticamente pobre tenía 0.419, la dirección completamente incorrecta). El mapa de bordes no se ve afectado.

Cuando el contenido sea insuficiente, complementa según density.escalation. El paso 0 es volver atrás y comprobar si las ranuras no están preasignadas o el contenido no está en contenedores; la mayoría de las «áreas vacías» se deben a esto, no a la falta de contenido. Prohibido dejar espacio en blanco directamente. Prohibido agrandar la fuente para llenar el diseño. Prohibido usar partículas, halos o bloques geométricos para suplantar unidades de información.

El caparazón de la ventana se determina por la cantidad de información, no por la preferencia

Se debe usar: el contenido pertenece naturalmente a una interfaz (archivo, configuración, terminal, editor, tablero, informe); las unidades de información ≤3 parecen escasas y necesitan un límite para recogerse; se quiere expresar la relación de pertenencia «nombre de archivo + contenido».

No se debe usar: hay una forma de representación más precisa y se puede llenar el área de texto; los dos encuadres anteriores ya se han usado de forma consecutiva; el contenido es un mecanismo abstracto en lugar de una interfaz concreta.

Si se usa, debe estar lleno: tasa de llenado de contenido ≥ 78%. El título de la ventana debe ser el nombre de archivo real, no «Ejemplo» o «Demo». Escenas de ventana en todo el video ≤ 50%, no tres encuadres consecutivos con la misma composición.

Diagramas de relaciones y diagramas de flujo

Al menos 4 nodos y 3 aristas. Los nodos deben tener un título y una línea de explicación. Cada arista dirigida debe tener una etiqueta de acción y una flecha, ambos extremos anclados a puntos límite del ID del objeto real; si el punto final está vacío, es un defecto. Debe ir acompañado de un panel de explicación, que ocupe el 30%–42% del ancho del área de texto: pseudocódigo, fragmento de configuración, tabla de estados, ejemplo de mensaje, barra de indicadores, secuencia de pasos (cualquiera de ellos). Pseudocódigo de 5–12 líneas, cada línea correspondiente a un nodo o arista en el diagrama, resaltado en sincronía durante el renderizado.

Página de indicadores

Además del valor numérico principal, al menos 2 elementos de apoyo: gráfico de comparación antes y después, desglose de composición, bloque de condiciones de prueba, un segundo indicador del mismo mecanismo, la configuración real que produce el indicador, definición de referencia. Los gráficos comparten línea base, escala y valores. Las unidades diferentes (qps y ms) deben estar en gráficos separados o en ejes separados. Orden: primero muestra el valor original y las condiciones de prueba → cambio al nuevo valor → se establece el margen de mejora → se mantiene estable. Los números son monoespaciados, las unidades fijas, solo se enfatiza una vez.

Tipografía china: las reglas occidentales no se pueden copiar directamente

	Regla	Por qué
Altura de línea	display 1.15, título 1.35, cuerpo de texto 1.65	Los caracteres chinos son bloques de cuadrícula llena, sin el espacio natural entre minúsculas del alfabeto occidental; un espacio entre líneas insuficiente los hará emborronados. La línea completa china es aproximadamente 0.2 más alta que la occidental
Espaciado entre caracteres	display (>60px) −0.02em, título 0, cuerpo de texto 0	El espaciado entre caracteres chinos es naturalmente uniforme. Añadir espaciado positivo a los títulos los hará flojos; el display negativo hará que los trazos choquen. Solo las etiquetas cortas en mayúsculas occidentales necesitan 0.08–0.15em
Longitud de línea	22–38 caracteres por línea, óptimo 28–32	La densidad de información del chino es alta; la misma anchura contiene más información que el texto occidental; una línea demasiado larga hará que el lector se pierda al volver a la siguiente
Pila de fuentes	Occidental primero, chino después	Coincidencia carácter por carácter: la fuente occidental no contiene puntos de código CJK, por lo que los caracteres chinos pasan naturalmente a la fuente china. Escrito al revés, los caracteres occidentales serán absorbidos por los feos caracteres occidentales de la propia fuente china
Énfasis	Cambiar el peso de la tinta o añadir color de fondo	El chino no tiene cursiva; la cursiva sintética del navegador/renderizador distorsionará los caracteres chinos. Lo mismo para la negrita sintética, ambas están prohibidas
Comillas	Comillas angulares «」『』	Las comillas curvas en las fuentes chinas ocupan un ancho completo y tienen forma occidental, visualmente flotantes
Números	Usar la fuente occidental + tabular-nums	De lo contrario, 1 y 8 no tienen el mismo ancho y las columnas de datos temblarán de izquierda a derecha

Las fuentes monoespaciadas deben verificarse para las formas de letra CJK. JetBrains Mono no tiene CJK; los comentarios chinos en las ventanas de código se convertirán en caracteres de bloque. Se debe agregar explícitamente una fuente de respaldo para chino en la familia de fuentes mono.

Prueba de tres metros

Pausa cualquier fotograma; la palabra más grande de la imagen debe ser legible a tres metros de distancia; reduce el fotograma clave al tamaño de una pantalla de teléfono y aún así debe leerse. El espectador presta menos atención a cada fotograma de un video que a una imagen fija, el tamaño de la fuente solo puede ser mayor, nunca menor. Esta regla y el límite inferior de densidad actúan como límites superior e inferior entre sí: el límite inferior de densidad evita los espacios vacíos, la prueba de tres metros evita «reducir el tamaño de la fuente para meterlo todo».

Un fotograma solo cuenta una cosa

Comentarios de usuarios: el contenido, los efectos y la voz en off deben expresar la información con claridad, sin ambigüedades, no debe haber demasiado contenido en una sola imagen. Cada regla de esta sección puede ser evaluada por motion_audit.py, no son sugerencias estéticas.

Presupuesto de información: además del límite inferior, también hay un límite superior

	Valor	Descripción
Límite inferior de unidades de información	3	Por debajo de esto, la página está vacía
Límite superior de unidades de información	5	Por encima de esto, la prueba de fotograma estático de 2 segundos fallará
Cantidad total de texto en el área de contenido	≤ 120 unidades de conteo	Los caracteres chinos se cuentan por carácter, las palabras en inglés por palabra
Nueva información que entra por tiempo	1 lugar	Un conjunto de `stagger` cuenta como un lugar

El conteo se realiza por el contenedor más externo o grupo etiquetado; los elementos secundarios dentro del grupo no se cuentan por separado. En el video de referencia, en el tiempo 01:32, según esta medida, hay 3 unidades (ventana de código de configuración + grupo de tarjetas de dispositivos en la nube + barra de proceso); aunque hay 5 tarjetas, siguen contando como 1 unidad.

Si se supera, no reduzcas el tamaño de la fuente para meterlo. Sigue este orden: divide en dos escenas → fusiona elementos similares en un grupo con título → mueve los detalles al panel de explicación.

La trayectoria de lectura sigue la forma F, y es medible

En los estudios de seguimiento ocular, la fijación en el área de contenido se concentra en tres lugares: la barra horizontal superior (kicker y título), la segunda barra horizontal (primera fila del contenido principal) y la barra vertical izquierda (el borde izquierdo compartido). Aplicado a este video:

Punto de inicio: la primera unidad de información revelada de la escena debe tener su centro de gravedad en la esquina superior izquierda del área de texto (x normalizado ≤ 0.50, y ≤ 0.45)
Orden: el centro de gravedad vertical de la secuencia de revelado no disminuye monotónicamente, permitiendo como máximo un salto hacia arriba
Barra vertical: los bloques de texto sin marco comparten un borde izquierdo (R14), los contenedores se alinean con la cuadrícula de columnas por la izquierda (R13)
Información previa: el título, el título de la ranura y las dos primeras palabras del título del punto clave deben llevar información por sí mismos. Los títulos que comienzan con «Acerca de», «Nuestro», «Mejor», «Cómo» serán rechazados directamente por compose_spec.py.

Prueba real (dentro de content_box, 12 fps, centro de gravedad del cambio 1.5 segundos después de cada cambio de plano):

	Inicio x	Inicio y	Proporción de planos que se extienden hacia abajo
Video de referencia	0.393 ± 0.121	0.336 ± 0.126	67%
Versión anterior considerada estéticamente pobre	0.660 ± 0.175	0.498 ± 0.152	48%

El video de referencia comienza desde la esquina superior izquierda y se extiende hacia abajo; esa versión comenzó desde el centro, ligeramente hacia la derecha, y se extendió hacia afuera — esta es una de las causas directas de «parecer disperso», y no tiene nada que ver con lo apretado o suelto del diseño.

La imagen y la voz en off deben contar la misma historia

Cada unidad de información debe indicar a qué frase de la voz en off corresponde, y el tiempo de revelado debe caer dentro de [inicio de la frase −0.4, fin de la frase +0.8] segundos. Si no se puede escribir la frase correspondiente, significa que esta unidad no se menciona en la voz en off y debe eliminarse o agregarse su explicación.

El texto en la imagen son frases de conclusión, nombres técnicos, valores numéricos, etiquetas; no es una transcripción frase por frase de la voz en off — escuchar y leer la misma frase al mismo tiempo compite entre sí. Los subtítulos son una pista independiente, no se incluyen en el presupuesto de texto.

La voz en off también debe decir una cosa a la vez

Una frase, un hecho. Dos hechos, escribe dos frases; no uses «al mismo tiempo» ni «y» para unirlos. Una sola frase ≤ 32 unidades de conteo.
La primera frase de cada escena es la conclusión; después se dan el mecanismo y la evidencia.
No uses «eso», «este» de forma consecutiva para referirte a algo; si hay una frase de por medio, vuelve a decir el nombre.
La primera vez que aparezca un término, explícalo en la misma frase; no lo dejes para la siguiente.
Si dices un número, en la misma frase o en la inmediatamente siguiente, debes dar las condiciones de medición.
Prohibido: leer listas de palabras clave («más rápido, más fuerte, más estable»), paralelismos con tono publicitario, tres nombres técnicos en una frase, repetir el contenido que ya está claro en la imagen.

Copia cada frase de la voz en off en CLAIMS.md para hacer el mapeo; las frases que no se puedan mapear, o bien se eliminan, o bien se complementan como conclusiones con fuente.

Prueba de fotograma estático de 2 segundos

Toma el fotograma de pausa de la escena, tapa la voz en off y los subtítulos, pide a alguien que no conozca el producto que diga la conclusión y el número de esa página. Si no puede, es que la página no está clara. Registra por escena passed / failed / not_tested; si no se hace, es not_tested.

Cómo distribuir la duración: primero asigna el presupuesto de pausa, luego programa los efectos de movimiento

La duración de un video de múltiples planos no se distribuye uniformemente. Cuatro segmentos del esqueleto, la proporción es un indicador duro:

Segmento	Proporción	Energía	Contenido	Indicador duro
Apertura	8–12%	Baja	Presentación de la marca + una frase que explica de qué trata todo el video	Después de que la marca de texto se asiente, pausa ≥ 1 segundo; el fotograma 0 es la portada completa
Presentación	10–16%	Baja-media, la más lenta de todo el video	Primer capítulo, la sección de mayor calidad visual	—
Ascenso	52–64%	Media-alta y baja alternadas	Un plano, una capacidad	Entre cada 1–2 planos de contenido, inserta una página de capítulo para reducir la energía
Cierre	10–16%	El pico de todo el video	Resumen + números clave + CTA	No se desvanece; se mantiene hasta el último fotograma después de leer

Orden: ① Enumera la lista de capacidades para contar el número de planos → ② Primero reserva el tiempo de inmovilidad inviolable (tiempo de espera de la marca de texto, pausa de lectura, página de capítulo completa mantenida 1.1 segundos, final mantenido 2 segundos) → ③ El tiempo restante se asigna a los efectos de movimiento → ④ Elige las transiciones borde a borde; la duración de la transición se resta del presupuesto de los dos planos adyacentes, no se añade tiempo adicional.

No se permiten dos planos consecutivos de alta energía. La página de capítulo es la «tarjeta de respiración» que reduce la energía: es de baja densidad, gran espacio en blanco, 2–6 caracteres; no la conviertas en otro plano de información, eso equivaldría a no haberla insertado.

Lista negra de decoraciones de plantilla

Estas no son «feas», es que «se nota que son de plantilla». Si aparecen, elimínalas:

Agregar una etiqueta pequeña en mayúsculas inglesas sobre cada título · Cadena de palabras unidas por puntos «A · B · C» · Decoración de flecha al final de un botón o etiqueta · Cambiar el color de una sola palabra en el título · Usar numeración 01/02/03 para contenido que no es una secuencia · Iconos emoji no relacionados con el mecanismo · Tarjetas redondeadas con barra de color a la izquierda · Partículas brillantes, flujo de datos, HUD holográfico, neón · Fondo oscuro con halo de neón para simular tecnología.

El criterio es «¿ha surgido del contenido?», no «¿se parece a una plantilla?». La numeración es legal cuando realmente se trata de una secuencia (capítulos, etapas de derivación); el degradado es legal cuando se deriva del color de la marca.

Uniones: cero cortes en bruto en todo el video

Comentarios de usuarios (2026-11-05): «La transición entre cada capítulo y el siguiente debe ser muy natural, no mostrarse directamente, lo que resulta muy brusco». Los videos de lanzamiento reconocidos como excelentes no tienen ni un solo corte en bruto en todo el metraje. Si se quiere un efecto de «corte», que sea un corte diseñado.

Cada unión de escenas debe declarar una transición, cuya duración se resta a partes iguales del presupuesto de cada uno de los dos planos adyacentes: la transición no se añade a la duración del video, se toma prestada de los dos planos. La ventana es [límite − duración/2, límite + duración/2], durante la cual las dos escenas están en la pantalla simultáneamente.

Dos planos adyacentes	Transición a usar	Duración	Cómo hacerlo
Portada → Página de capítulo	Fundido cruzado	0.62s	La portada se desvanece y se desenfoca gradualmente, mientras que el número del capítulo se resuelve a partir del desenfoque
Cuerpo de texto → Página de capítulo	Fundido cruzado	0.58s	Mientras la página anterior se desvanece, el número entra con desenfoque, dos eventos en la misma ventana
Página de capítulo → Cuerpo de texto	Barrido de prisma	0.92s	El número se amplía y se vuelve borroso → una banda de luz arcoíris barre oblicuamente → la página siguiente ya está formada detrás de la banda de luz, el contenido clave aún no se muestra
Cuerpo de texto → Final	Fundido cruzado	0.62s	Igual que arriba
Cuerpo de texto → Cuerpo de texto (cambio de plano dentro del mismo capítulo)	Relevo de desenfoque	0.50s	Solo se cambia el desenfoque, sin desplazamiento horizontal

Barrido de prisma: se cubre toda la pantalla con una gasa fina de surface_tint (pico 0.62), una banda de luz de 1420 de ancho barre en un ángulo de 17°, con colores de anclaje: color principal 0.34 → color de énfasis secundario 0.30 → acento 0.26. Prohibido: destello blanco, borrado de pantalla completa, volteo de página, rotación.

Las uniones se adhieren a las pausas de la voz en off (move on pause): solo se adelantan, no se retrasan, límite superior 0.8 segundos. El costo de mover la línea de visión durante un silencio auditivo es el más bajo para el espectador.

Evaluación (R27): toma fotogramas de la ventana de unión a 12 fps, calcula la cantidad de cambio fotograma a fotograma de la pantalla completa; el cambio de un solo fotograma ≤ 0.55 del cambio total de la ventana. Un corte en bruto concentraría más del 90% del cambio en un solo fotograma. En las pruebas reales, las siete uniones de esta versión cayeron entre 0.155 y 0.35.

La portada debe ser el fotograma 0. El reproductor toma t=0 como póster; si el fotograma 0 está en blanco, la portada no existe. Por lo tanto, la portada no genera movimiento mediante la entrada de elementos: los elementos ya están todos presentes desde el principio; el movimiento proviene de tres cosas que no cambian la caja delimitadora: anillos concéntricos estáticos, dos barridos de luz, y cuando la voz en off menciona una dirección, la etiqueta correspondiente se ilumina. El criterio es que la tasa de cobertura del borde del área de texto en el fotograma 0 sea ≥ 0.90 veces la del fotograma de pausa de la portada. Incluso la decoración debe estar en su lugar en el fotograma 0 — en la prueba real, si el anillo se hace como una aparición gradual de 0→1, esta proporción es solo de 0.673.

Enfoque: ilumina lo que se dice, pero lo dicho debe seguir siendo legible

Comentarios de usuarios (segunda ronda): «Cuando se habla de un contenido, los demás contenidos están en gris, destacando el contenido que se está explicando». Comentarios de usuarios (tercera ronda): «Justo después de hablar, se vuelve gris inmediatamente, ni siquiera he terminado de leer» «No debe ser demasiado borroso, sino oscurecerse, pero de forma que se pueda ver el contenido» «Si el contenido ya explicado está relacionado con el que se explica a continuación, no lo oscurezcas temporalmente».

Cuatro estados, solo se presiona la cantidad de tinta, no se reduce la claridad

Estado	Cantidad de tinta	Tarjeta	Cuándo
active	1.0	Sombra, borde de color principal	La voz en off lo está explicando. Se reconoce por «flotar hacia arriba», no porque los demás estén borrosos
read	0.70	Sin sombra, borde normal	Ya se ha explicado. La tinta se reduce a aproximadamente `#5A6070` visualmente, el contraste sigue siendo 6:1, legible a tres metros
waiting	0.88	Normal	Aún no le toca. Solo una ligera reducción, la página debe sentirse llena
settled	1.0	Normal	La voz en off ha terminado, toda la página vuelve a ser opaca

No usar desenfoque. Esta regla entra en conflicto con «el trío desactivado debe incluir blur» de huashu-design; aquí se resuelve según las necesidades del video informativo: la función del desenfoque es hacer que los elementos dejen de competir por la atención, pero el espectador del video informativo aún necesita volver a leerlos. El desenfoque solo se reserva para dos lugares: las transiciones entre escenas y la entrada/salida del número de página del capítulo.

Cuándo empezar a oscurecer

          Inicio de frase         Fin de frase      +1.0s        +0.8s
             |--------------|------------|------------|
   active    ============================>
   Oscurecer                                  [===Degradado===]  read

Una unidad no puede empezar a oscurecerse antes de que termine su propia frase de voz en off (declaración de R30).
Después de que termine, deja 1.0 segundo para que el espectador termine de leer, luego usa 0.8 segundos para bajar lentamente la opacidad.
La práctica anterior era «cambiar el enfoque tan pronto como comience la siguiente frase». El espectador aún está leyendo la pieza anterior, pero la imagen ya se la ha arrebatado.

Dos piezas relacionadas se iluminan y oscurecen juntas

La configuración y sus límites de aplicabilidad, el valor numérico y sus condiciones de medición: estos pares de contenido declaran el mismo focus_group: mientras se hable de cualquier elemento del grupo, todo el grupo se mantiene activo; después de que el último elemento del grupo termine de hablarse + 1.0 segundo, todo el grupo se oscurece junto.

Evaluación (R28)

Toma un fotograma en el momento en que cierta unidad se desenfoca y el mismo fotograma de la pausa; compara la amplitud de gradiente promedio dentro de la caja delimitadora de la misma unidad. El estado desenfocado ≤ 0.85 del estado de pausa.

Usar el gradiente promedio en lugar del número de bordes umbralizados: cuando solo se presiona el contraste sin agregar desenfoque, el umbral puede pasar todo o no pasar nada, y la métrica se desvinculará del procesamiento. El gradiente promedio cambia linealmente con el contraste; cuando la cantidad de tinta es 0.70, mide alrededor de 0.70.

Revelado: el contenido de apoyo está desde el principio, solo los elementos clave esperan la voz en off

Comentarios de usuarios (tercera ronda): «El cuadro del medio no tiene contenido, el cuadro inferior no tiene contenido pero tiene estilo; a primera vista parece extraño» «En realidad, se puede mostrar primero el contenido menos importante. Lo importante se muestra con mecanografía cuando se explica» «Normalmente solo se necesita mecanografiar el contenido. Si ya se ha mecanografiado y luego se vuelve a mencionar esta línea, se resalta el fondo».

Esta regla reduce el alcance de la segunda ronda «dejar el contenido clave para cuando la voz en off lo mencione», no lo anula: solo se deja para después un elemento clave por unidad, no toda la tarjeta.

Lo que se debe dibujar desde el principio

Tarjeta, chip, título, línea separadora, etiqueta de línea, línea secundaria, estructura. Una unidad solo deja un elemento clave para esperar la voz en off: ese valor numérico, ese código, ese grupo de etiquetas.

Solo se usa un tipo de efecto de movimiento por línea

Momento	Qué usar	No se permite apilar
Primera aparición	Mecanografía, de izquierda a derecha, carácter por carácter, 0.4–1.0 segundos	Sin barrido de luz, sin banda de color de fondo, sin barra de color a la izquierda
Mencionado de nuevo más tarde	Banda de resaltado de fondo `#FFF4D6` + barra de color a la izquierda de 3px, 0.42 segundos	—

El resaltado es el lenguaje de «mencionado de nuevo». Si se resalta la primera vez, este lenguaje desaparece y el espectador no puede distinguir qué es nuevo.

En la versión anterior, a cada línea se le asignó un barrido de luz para cumplir con «la proporción de fotogramas con cambio ≥ 0.45»; las palabras del usuario fueron «hay demasiados efectos de movimiento para el texto correspondiente». Para cumplir con la cantidad de movimiento, se apilaron efectos decorativos; ahora esto se rechaza directamente.

Cuándo se puede usar la pantalla esqueleto

Se puede usar cuando el contenido realmente debe dejarse para explicar más tarde y el esqueleto en sí está diseñado, pero debe cumplir: que tenga título y estructura (no un rectángulo redondeado blanco puro), las barras de marcador de posición no sean de la misma longitud (para que parezca el contorno de un contenido real), el esqueleto no supere el 60% de la altura de la tarjeta, y los esqueletos de cada tarjeta no sean exactamente iguales.

La voz en off y la imagen deben contar la misma historia; esto es un requisito fundamental

Comentarios de usuarios (tercera ronda): «Por favor, asegúrate de que la voz en off, el contenido de la imagen y los efectos de movimiento sean consistentes. ¡¡¡Esto es un requisito fundamental!!!».

El fracaso de la segunda versión fue que la declaración en sí misma era incorrecta: R22 solo comprueba «si el tiempo de revelado cae dentro de la ventana de tiempo de la frase declarada», pero nunca comprueba si esta frase está explicando esta unidad. Por lo tanto, la tarjeta de 2.8x se colgó en «otro tiempo de 12.6 segundos se redujo a 4.0 segundos» — esa frase explicaba la segunda línea de otra tarjeta — la ventana de tiempo, por supuesto, coincidía, y la puerta, por supuesto, estaba toda verde.

R29: Correspondencia uno a uno, y el texto coincide

Cada unidad de información declara exactamente una frase de voz en off.
Dos unidades no pueden compartir una frase, a menos que sean el mismo grupo de stagger y entren juntas en el mismo tiempo.
Cada frase de voz en off en la escena debe ser declarada por alguna unidad; no se permiten frases huérfanas.
El texto de esta frase debe contener la palabra clave de esa unidad: título de la tarjeta, etiqueta de línea, valor numérico, texto de la etiqueta, nombre de archivo (cualquiera de ellos). Por lo tanto, cada unidad de información en content.yaml debe escribir keywords.

R30: La imagen sigue a la voz en off

Capa de declaración: dim_t >= tiempo de finalización de la frase de esa unidad + 1.0 segundos.
Capa de medición real: durante la reproducción de cada frase de voz en off, debe haber un cambio visible dentro del marco de la unidad correspondiente.

Preguntar en tu IA favorita

Documentación