Generación de Vídeo Animado de Conocimiento

El usuario proporciona un guion oral (texto o audio) + una imagen de referencia de estilo. Tú eres responsable de seleccionar la plantilla, diseñar el storyboard, escribir el código y renderizar el vídeo final.

Stack técnico: Remotion (escribir vídeo con React) + scripts Python (voz en off, alineación, mezcla de audio) + ffmpeg.

Principio fundamental: el estilo determina la herramienta. Primero define el tipo, luego selecciona las herramientas según la plantilla de ese tipo y escribe las escenas.

Autor: Xiao Bai · GitHub @newbaisays-aigc · Licencia MIT Repositorio del proyecto: https://github.com/newbaisays-aigc/knowledge-animation-video

Esta habilidad es independiente de la herramienta de IA concreta. Mientras tu entorno pueda leer SKILL.md, ejecutar comandos de shell y escribir archivos, podrás usarla. Para TTS, prioriza components/common/scripts/tts.py (Edge TTS, requiere conexión a internet); Si el entorno no permite instalar dependencias Python, usa la capacidad de síntesis de voz incorporada del host, generando el mismo vo.mp3 + tabla de tiempos por frase. No hay restricción en el modelo: cualquier modelo que pueda escribir código vale; cuando el código sea extenso, prioriza modelos con mayor capacidad de razonamiento.

Paso 1: Selección inicial (obligatorio, no omitir)

Pregunta al usuario las siguientes 4 cuestiones de una sola vez. Si la plataforma lo permite, usa pestañas; de lo contrario, enumera las preguntas con números y pide al usuario que responda.

Pregunta 1: Tipo de vídeo (para recordar: si quieres impacto elige 3D, para cercanía elige dibujo a mano, para deducciones elige fórmulas, para explicar estructuras elige infografía, para historia elige archivo, para obras de arte elige galería)

N.º	Tipo	Contenido adecuado	Público adecuado
A	Datos 3D	Datos duros: noticias de datos, lanzamientos de productos, informes sectoriales, análisis financieros	Creadores de contenido financiero/tech, editores de medios, profesionales de marketing y producto
B	Dibujo a mano	Opiniones e historias: historia y humanidades, fenómenos sociales, apuntes de lectura, psicología	Profesores de letras, formadores de pago, blogueros de lectura
C	Fórmula matemática	Fórmulas abstractas de matemáticas y física, principios de algoritmos e IA	Profesores de ciencias, estudiantes que hacen materiales, blogueros técnicos
D	Infografía	Procesos, métodos, arquitecturas de sistemas, funciones de producto, flujos de trabajo	Presentaciones laborales, formación empresarial, operaciones B2B y SaaS
E	Archivo vintage	Personajes históricos, eventos históricos, historia de inventos, historias de marca, objetos antiguos	Blogueros de historia, divulgación cultural, contenido de marca, turismo cultural
F	Galería de arte	Análisis de obras maestras, historia del arte, patrimonio, diseño, arquitectura, fotografía	Blogueros de arte, profesores de educación estética, museos y turismo cultural, diseñadores
G	Ayúdame a elegir	Cuando el usuario no está seguro, tras leer el guion, tú recomiendas	—

Pregunta 2: Proporción del vídeo

16:9 horizontal (1920×1080): Bilibili, Xigua, YouTube, materiales educativos
9:16 vertical (1080×1920): Douyin (TikTok), WeChat Video Channel, Xiaohongshu
1:1 cuadrado (1080×1080): Moments de WeChat, feeds de noticias

Pregunta 3: Modo de locución

Texto: el usuario proporciona texto y tú generas la voz (TTS)
Audio: el usuario proporciona un audio grabado y tú lo transcribes y alineas
Sin voz: solo imagen + música de fondo

Pregunta 4: ¿Quieres subtítulos?

Con subtítulos (recomendado por defecto): cada frase se muestra en la parte inferior, ideal para visualización en silencio en móvil
Sin subtítulos: imagen más limpia, adecuado para añadir subtítulos después en software como Jianying

Nota: cuando se selecciona "Sin voz" como modo de locución, los subtítulos son la única vía para que el espectador entienda el contenido; recuerda al usuario que se recomienda mantenerlos.

Tras preguntar, envía un mensaje separado pidiendo los materiales al usuario y espera su respuesta. No escribas el guion, no diseñes el storyboard ni hagas ninguna generación hasta que no hayas recibido ambos materiales.

Usa el siguiente mensaje (puedes adaptar los ejemplos según el tipo seleccionado):

De acuerdo, por favor envíame dos cosas:

Material 1: Locución Envía un texto o un audio grabado. Para la primera prueba, recomiendo algo corto, de 15 a 30 segundos (unas 60-120 palabras), para facilitar la prueba y ahorrar recursos. Si aún no tienes guion, dime el tema y la duración (ej. "presentar a Napoleón, 20 segundos") y yo te redacto una versión para que la confirmes.

Material 2: Referencia de estilo (muy importante) El estilo es difícil de describir con palabras; lo mejor es que me muestres una imagen. Puedes:

Subir una o varias imágenes

Enviar un enlace: de Pinterest, Xiaohongshu, Bilibili, YouTube (imagen o vídeo)

Si no tienes nada, responde "usar estilo por defecto"

Truco para buscar referencias: busca en Pinterest o Xiaohongshu "[palabra clave del tipo]" y elige la que más te guste.

Palabras clave de búsqueda por tipo: Galería → "museum art documentary motion"; Archivo vintage → "vintage documentary motion graphics"; Datos 3D → "数据可视化 3D" (visualización de datos 3D); Dibujo a mano → "手绘动画 / doodle explainer" (animación dibujada a mano / doodle explainer); Fórmula matemática → "3Blue1Brown 风格" (estilo 3Blue1Brown); Infografía → "信息图动画 / infographic motion" (animación infográfica / infographic motion).

Reglas al recibir los materiales:

El usuario solo da el tema sin guion: primero escribe el guion, envíalo por separado para confirmación del usuario, y luego continúa.
El usuario solo da la locución pero no la referencia: recuérdale que necesita una referencia. Solo cuando el usuario responda explícitamente "usar estilo por defecto", usa el estilo por defecto de la plantilla.
El usuario da un enlace: abre el enlace para obtener la imagen o vídeo real (para Pinterest, usa https://widgets.pinterest.com/v3/pidgets/pins/info/?pin_ids=<pin_id> para obtener la imagen o vídeo). Si es un vídeo, extrae 8-10 fotogramas distribuidos uniformemente y compón una imagen para visualizarlo. Si la interfaz no se abre, no te quedes bloqueado ni adivines el estilo por el texto del enlace — pide al usuario que suba una captura o imagen; solo si dice explícitamente "usar estilo por defecto", usa ese estilo.

Si el usuario eligió G (Ayúdame a elegir), tras leer el guion, recomienda según las siguientes reglas, explicando el motivo, y espera confirmación:

El guion contiene muchos números, porcentajes, rankings, crecimiento → A Datos 3D
Habla de una obra (pintura, patrimonio, arquitectura) con detalles dignos de ver → F Galería
Habla de personajes históricos reales, eventos, inventos, orígenes de marcas → E Archivo vintage
Basado en opiniones, historias, conceptos psicológicos, con pocos números → B Dibujo a mano
Aparecen fórmulas, teoremas, deducciones, pasos de algoritmos → C Fórmula matemática
Habla de pasos, procesos, marcos, relaciones entre módulos → D Infografía

Paso 2: Leer la plantilla

Una vez definido el tipo, lee solo el archivo de plantilla correspondiente; no los leas todos:

A → templates/3d-data.md
B → templates/hand-drawn.md
C → templates/math-formula.md
D → templates/infographic.md
E → templates/vintage-archive.md (además lee components/vintage-archive/README.md y reutiliza directamente la biblioteca de componentes)
F → templates/gallery.md (además lee components/gallery/README.md y reutiliza directamente la biblioteca de componentes)

Cada plantilla está estructurada en 7 bloques: Especificaciones definen dimensiones, estilo define apariencia, ritmo define tiempos, escenas definen acciones, música define emociones, herramientas definen implementación, entrega define revisión.

Reglas de ajuste:

Especificaciones y entrega: apenas se modifican; solo cambia la proporción a la seleccionada por el usuario.
Estilo, ritmo, escenas, música: se ajustan según el contenido del usuario y la imagen de referencia.
Herramientas: sigue la plantilla; no mezcles herramientas de otras plantillas.

Biblioteca de componentes: En components/ se almacenan componentes reutilizables ya ajustados. Cuando la plantilla correspondiente tenga una biblioteca de componentes, debes leer primero su README, priorizar la reutilización de componentes y scripts, y solo escribir nuevas escenas para este vídeo concreto. Así se asegura un resultado estable y se reducen errores. Actualmente hay:

components/common/: scripts comunes a todas las plantillas, incluyendo voz en off (tts.py), alineación de audio grabado (align.py), mezcla de tres versiones de audio (mix_audio.py) y exportación (export_versions.sh). En los pasos 4 y 7, usa directamente estos scripts.
components/3d-data/: implementación de referencia para datos 3D (código fuente de noticias financieras de SpaceX), incluyendo texto 3D en chino, trayectorias luminosas, suelo de rejilla, hologramas y transiciones de máscara
components/gallery/: Galería (lienzo de vidrio líquido WebGL, matemáticas de vista de cámara, carrusel de obras, lupa, tarjeta de archivo de obra y maquetación de detalles, con ejemplo completo de la Mona Lisa)
components/vintage-archive/: Archivo vintage (etiquetas de papel, tarjetas fotográficas, cintas, sellos, círculos rojos, placas de latón, hojear libro, lupa de latón, obra a pantalla completa, mesa de madera, superposición de película, más scripts de obtención de imágenes, envejecimiento, voz en off y mezcla de audio, con ejemplo completo de Napoleón)

Cuando logres un nuevo resultado satisfactorio, incorpora las partes reutilizables a la biblioteca de componentes.

Paso 3: Analizar la imagen de referencia

Examina cuidadosamente la imagen de referencia, extrae y anota los siguientes elementos (todas las escenas posteriores deben cumplirlos):

De 3 a 5 colores principales (escribe el valor hexadecimal, ej. #0B1E3F)
Fondo: color sólido / degradado / textura / oscuro o claro
Textura: plano / sombreado 3D / vidrio / papel / línea
Carácter tipográfico: negrita gruesa / redonda / manuscrita / con serifa
Características de composición: espacio en blanco, densidad de elementos, centrado o descentrado
Si la referencia es un vídeo, añade: movimiento de cámara, tipo de transición, entrada de texto, ritmo (rápido/lento)

Si el estilo de referencia entra en conflicto con la plantilla seleccionada (ej. eliges dibujo a mano pero la imagen de referencia es de vidrio 3D), primero comunica el conflicto al usuario, ofrece dos o tres opciones de fusión y espera su elección antes de continuar. No tomes decisiones por tu cuenta.

Paso 4: Procesar la locución y definir la línea de tiempo

Modo texto:

Primero, limpia ligeramente el texto: corrige errores tipográficos y elimina símbolos inadecuados para la lectura en voz alta (como ~ * #), sin cambiar el significado del usuario.
Usa components/common/scripts/tts.py para generar la voz en off y los tiempos por frase (los números escríbelos en cifras arábigas; si el entorno no soporta dependencias Python, usa la síntesis de voz incorporada del host, generando el mismo vo.mp3 y la tabla de tiempos por frase).

Modo audio:

Usa components/common/scripts/align.py <audio> <guion> <directorio_salida> para alinear. Si hay guion, los subtítulos usan el texto original del guion; si no hay guion, se usa el texto reconocido.
Si no hay guion, o si la similitud es inferior al 60%, entrega el resultado al usuario para que lo verifique.

Modo sin voz:

Estima la duración de cada frase a razón de 4-5 caracteres chinos por segundo.

Finalmente obtén una tabla de tiempos por frase, que servirá como base para el storyboard. La duración total del vídeo se basa en la duración de la voz en off; las imágenes deben sincronizarse con la voz.

Paso 5: Presentar el storyboard y esperar confirmación del usuario (no renderices directamente)

Enumera el storyboard en una tabla, una fila por escena:

Escena	Tiempo	Locución correspondiente	Contenido visual	Efecto	Efecto de sonido

Requisitos:

Una frase de locución normalmente corresponde a 1 escena; las frases largas pueden dividirse en 2.
Cada escena debe tener un "elemento protagonista" y debes describir claramente cómo se mueve (de dónde viene, hacia dónde va, cuánto tiempo dura).
Los números y palabras clave de la locución deben aparecer en la imagen.
Describe claramente el tipo de transición entre escenas.

Tras enviar el storyboard, pregunta al usuario: "¿Te parece bien este plan? ¿Qué escena quieres cambiar?" Solo continúa al paso 6 después de la confirmación del usuario. Este paso evita desperdiciar recursos si la dirección es incorrecta.

Paso 6: Generar el vídeo

Siguiendo los requisitos de "Herramientas definen implementación" de la plantilla, configura el proyecto, escribe el código y renderiza:

Inicializa un proyecto Remotion (si ya existe en el entorno, reutilízalo), establece el ancho y alto según la proporción elegida por el usuario, tasa de fotogramas 30.
Escribe cada escena como un componente independiente (Scene01, Scene02...), colócalos todos en el Composition principal ordenados por tiempo. Así, al modificar una escena posteriormente, solo tocas ese archivo.
Extrae la paleta de colores de la imagen de referencia y escríbela en un archivo de tema público; todas las escenas tomarán los colores de ahí.
Subtítulos (solo si el usuario eligió "con subtítulos" en la pregunta 4): muéstralos frase a frase, sincronizados con la voz en off. Si el usuario eligió "sin subtítulos", no renderices la capa de subtítulos, pero conserva la tabla de tiempos para puntos de sincronización. Para horizontal, colócalos en la parte inferior, aproximadamente al 8% desde abajo; para vertical, en la parte media-inferior, aproximadamente al 25% desde abajo, para evitar botones y áreas de texto de la plataforma.
Música de fondo y efectos de sonido: genéralos o selecciónalos según los requisitos de "Música define emociones" de la plantilla. El volumen de la música de fondo debe estar entre el 15% y el 25% del volumen de la voz, y reducirse automáticamente cuando haya voz.
Primero renderiza de 3 a 5 fotogramas clave para autoverificación (composición, desbordamiento de texto, concordancia de color con la referencia). Si no hay problemas, renderiza el MP4 completo.

Ante un error, lee el mensaje de error para identificar la escena concreta, modifica solo esa escena y no reescribas todo.

El diseño de empaquetado visual es un requisito obligatorio. No puedes simplemente colocar imágenes y texto sobre un fondo de color sólido. Cada escena debe extraer "elementos de empaquetado" de la referencia y convertirlos en componentes reutilizables, por ejemplo: textura de mesa o escena de fondo, marco de papel fotográfico o tarjeta, etiqueta de papel rasgado, cinta de banner, sello, círculo rojo dibujado a mano, placa de latón, paso de página de libro, grano de película, viñeta y parpadeo. Los números y palabras clave deben aparecer sobre estos elementos de empaquetado, no como texto desnudo.

Fuente de materiales y atribución (requisito obligatorio). Cuando se necesiten imágenes reales (personajes históricos, obras maestras, patrimonio), usa components/vintage-archive/scripts/fetch_commons.py para descargar desde Wikimedia Commons; este script genera también ATTRIBUTION.md, que registra el autor, licencia y página de origen de cada material:

Public domain (dominio público): no requiere atribución, pero se recomienda mantener la fuente en los créditos finales
CC BY / CC BY-SA: atribución obligatoria — en los créditos finales o en texto explicativo, incluye «Nombre de obra · Autor · Página de origen · Nombre de licencia»
CC BY-SA: además de la atribución, las obras derivadas deben publicarse bajo la misma licencia

Después de descargar, revisa la imagen antes de escribir la escena (ver trampa 1 en la sección 7). Antes de la entrega, revisa cada elemento en ATTRIBUTION.md para verificar que la atribución se ha cumplido. Las fuentes se descargan mediante setup_assets.sh; todas son OFL 1.1 / Apache 2.0, aptas para uso comercial e incrustación, pero debes conservar la declaración de licencia con el producto final.

Regla de legibilidad del texto: todo el texto debe colocarse dentro de los elementos de empaquetado; ningún texto debe quedar fuera de papel, tarjeta, banner, etc. Los sellos y etiquetas de énfasis deben usar colores de alto contraste (ej. amarillo con texto rojo, fondo oscuro con texto claro); no uses texto rojo semitransparente directamente sobre papel.

Música y efectos de sonido: Si el usuario tiene una biblioteca de materiales local (ej. una biblioteca de sonidos en la unidad D), pregunta primero la ruta, luego selecciona música de fondo según la emoción y efectos de sonido según las acciones (paso de página, papel, Polaroid, lápiz, transición de silbido, golpe de batería, graves, olas, etc.). La música de fondo debe elegirse como un fragmento que pueda terminar de forma natural al final del vídeo. Solo si no hay biblioteca de materiales, usa síntesis programática.

Paso 7: Entrega y modificación

Versiones de exportación: Antes de renderizar, pregunta al usuario qué versiones de sonido quiere exportar (se puede seleccionar múltiples; los efectos de sonido se mantienen en todas las versiones):

Versión completa: narración + música + efectos de sonido
Versión sin narración: música + efectos de sonido (ideal para que el usuario grabe su propia locución después)
Versión sin música: narración + efectos de sonido (ideal para que el usuario agregue música con derechos en la plataforma)

Procedimiento: renderiza la imagen una sola vez (sin sonido) y luego combina las diferentes pistas de audio; no renderices varias veces. En components/common/scripts/ hay scripts listos: mix_audio.py genera tres pistas de una vez, export_versions.sh las combina y exporta. Otras plantillas siguen el mismo enfoque.

Al entregar, informa al usuario:

Ubicación del archivo final, duración, proporción, si tiene subtítulos, qué versiones de sonido se exportaron
Qué plantilla se usó, cuáles son los colores principales
Un consejo: "Dime qué escena no te gusta, por ejemplo 'la Tierra del final quiero cambiarla de estilo', y solo modificaré esa parte."

Cuando el usuario solicite modificaciones:

Primero confirma qué número de escena es (si no estás seguro, deduce según la descripción del contenido en la tabla de storyboard).
Modifica solo el archivo del componente de esa escena; no toques ninguna otra.
Tras modificar, envía primero una captura al usuario para que confirme, y luego renderiza el vídeo completo de nuevo.

Al actualizar esta habilidad en sí misma

Si el usuario solicita modificar el contenido de la habilidad (añadir plantillas, componentes, documentación) y subirlo a GitHub:

Cada envío debe llevar una nueva etiqueta (tag), con el formato de versión vMAJOR.MINOR.PATCH, coincidiendo con metadata.version en el frontmatter.
No escribas manualmente git tag / git push / gh release; usa siempre tools/release.py:

python tools/release.py --bump minor --note "Descripción de esta actualización"

Esto hará secuencialmente: cambiar el número de versión → actualizar CHANGELOG.md → reempaquetar .skill → hacer commit → crear tag → subir → crear GitHub Release (incluyendo el paquete de distribución).

Después de modificar, no preguntes al usuario "¿quieres publicarlo?"; ejecuta directamente el comando anterior.

Lista de trampas detectadas en pruebas (obtenidas del primer vídeo de archivo vintage de 27 s; seguirlas ahorra muchas correcciones)

Obtención de materiales

Los nombres de archivo de Wikimedia Commons engañan. El título dice Winged Victory of Samothrace, pero al descargarlo resulta ser la inscripción en la pared. Tras obtener la imagen, revísala primero antes de escribir la escena; no asignes la imagen basándote solo en el nombre del archivo.
Las fotos en orientación vertical no deben ocupar toda la pantalla (FullPainting / objectFit:cover recortará el sujeto). Para fotos verticales, usa siempre una tarjeta fotográfica (PhotoCard) — la plantilla de archivo vintage es "fotos sobre una mesa", no imágenes a pantalla completa.

Escritura de escenas

Al colocar varias líneas de texto dentro de un contenedor con bordes curvos o forma irregular, no calcules la posición central con flex a ojo. El borde inferior de la superficie de papel de una cinta de banner (Ribbon) tiene una curva ascendente en el centro; en una ocasión, el subtítulo quedó completamente fuera del papel. Debes verificar la altura en el "punto más estrecho de la curva", o renderizar un solo fotograma y recortarlo ampliado 2 veces para inspeccionar visualmente el espacio en blanco.
Dale tiempo suficiente a los elementos de entrada para estabilizarse: cuando la escena tiene menos de 60 fotogramas, los elementos que entran con el resorte Drop pueden no haberse asentado antes de que se corte la escena (el papel sale volando por el borde derecho). Después del fotograma de entrada, deja al menos 30 fotogramas de estabilidad.

Ejecutar scripts

El parámetro de entrada de export_versions.sh debe ser el archivo que contiene registerRoot() (normalmente src/index.ts); pasar Root.tsx dará error "does not contain registerRoot".
Antes de renderizar, extrae 3-5 fotogramas clave para autoverificación; no renderices a ciegas de una vez. El método de autoverificación es recortar y ampliar una zona para comprobar si el texto se desborda, no mirar solo la miniatura del fotograma completo — un desbordamiento de 10 px que no se ve en el fotograma completo se ve perfectamente al ampliar.

generación-de-video-animado-de-conocimiento

¿Qué es generación-de-video-animado-de-conocimiento?

Preguntar en tu IA favorita

Documentación

Generación de Vídeo Animado de Conocimiento

Paso 1: Selección inicial (obligatorio, no omitir)

Paso 2: Leer la plantilla

Paso 3: Analizar la imagen de referencia

Paso 4: Procesar la locución y definir la línea de tiempo

Paso 5: Presentar el storyboard y esperar confirmación del usuario (no renderices directamente)

Paso 6: Generar el vídeo

Paso 7: Entrega y modificación

Al actualizar esta habilidad en sí misma

Lista de trampas detectadas en pruebas (obtenidas del primer vídeo de archivo vintage de 27 s; seguirlas ahorra muchas correcciones)

Lista de verificación previa a la entrega (revisar antes de cada renderizado completo del vídeo)

Skills relacionados

steipete/video-frames

steipete/summarize

openclaw/openclaw

obra/superpowers

affaan-m/ECC

affaan-m/everything-claude-code