Communitygithub.com

createsomethingq3k/vibe-knowledge-film

Transforma un concepto de conocimiento en un cortometraje animado sin narración, cuadro por cuadro con código puro: fondo oscuro con formas geométricas brillantes, subtítulos en la parte inferior, sincronizado con la música «Vibe Conocimiento Pro (Pequeña Canción de la Mente Abierta)» o una banda sonora generada sintéticamente, en 1920×1080 a 30 fps durante aproximadamente 2:40, produciendo un MP4, una tabla de datos y un registro de producción.

¿Qué es vibe-knowledge-film?

Esta habilidad permite a un agente de IA (como Claude Code, Cursor o Codex) convertir un tema educativo o conceptual en un cortometraje animado de estilo «Vibe Conocimiento Pro» o «Bit Nueva Palabra», sin narración, donde cada fotograma se dibuja mediante código Canvas puro. Es especialmente útil para desarrolladores, divulgadores y creadores de contenido que desean presentar conceptos complejos de manera visual, atractiva y precisa, sin necesidad de voz en off. La habilidad admite dos modos de producción: sincronización con una pista musical proporcionada por el usuario (como la «Pequeña Canción de la Mente Abierta») o generación sintética de la banda sonora. El flujo de trabajo guía al usuario desde la elección del tema, la verificación de hechos y la escritura del guion de subtítulos, hasta la implementación del código en `film.js`, el uso de Playwright para la exportación fotograma a fotograma, la composición final con ffmpeg y la verificación automática de calidad. Además, incluye un riguroso proceso de validación de fuentes, sincronización audiovisual y detección de errores comunes, garantizando que cada dato mostrado sea verificable y que la animación coincida perfectamente con la música. Ideal para creadores que buscan un control total sobre la animación y la fidelidad a los hechos, evitando la narración tradicional o el video real.

Compatible con✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/createsomethingq3k/vibe-knowledge-film/tree/HEAD

Preguntar en tu IA favorita

Abre un nuevo chat con esta habilidad de agente ya precargada.

Documentación

Vibe Conocimiento Pro (animación cuadro por cuadro con código)

Especificaciones del producto final: 1920×1080, 30 fps, aproximadamente 159 segundos (ajustado a la canción) o personalizable, sin voz humana, un subtítulo chino por pantalla, todo el metraje dibujado con código Canvas. El ejemplo «Semivida» (examples/halflife/) está compuesto enteramente por componentes; verifica la réplica: es fotograma a fotograma idéntico al original en 67 fotogramas; la mezcla de audio coincide muestra a muestra. examples/gallery/ es una demostración del mismo conjunto de componentes aplicado a un tema diferente.

Este tipo de metraje funciona para el público por tres razones: hechos reales (años, datos originales, artículos), imágenes en constante movimiento y revelaciones sincronizadas con la música. Cada regla a continuación está diseñada para mantener estos tres pilares.

Reglas fundamentales (cada una tiene una razón por la que falló antes)

  • Cada número, nombre, año y cita que aparece en pantalla debe tener una fuente, registrada en la tabla de datos; si no se puede encontrar, no se escribe y se marca la imagen como «Ilustrativa». La IA tiende a “inventar como si fuera real” al escribir citas; en la versión anterior de «Semivida», la famosa cita en inglés de Rutherford era inventada.
  • La marca de agua solo debe mostrar el nombre del usuario o el título del video. Al copiar fotogramas de referencia, la IA tiende a incluir el nombre del autor original (en un demo anterior, la esquina superior derecha decía «Bit Nueva Palabra»), lo que equivale a una suplantación.
  • La música de fondo solo debe ser proporcionada por el usuario y tener licencia; no se extraen pistas de audio de videos de otras personas, no se descargan de sitios no autorizados, y la habilidad no incluye ninguna canción. Al publicar en Bilibili, añade la música a través del proceso de publicación de Bilibili.
  • Los créditos finales y el texto de publicación deben incluir una declaración de creación con IA.
  • renderFrame(t) solo depende de t: usa VF.rng(seed) para números aleatorios, no uses temporizadores, no almacenes estado entre fotogramas. De lo contrario, la exportación temblará y cada renderizado será diferente.

Preparación

SK=~/.claude/skills/vibe-knowledge-film
$SK/engine/setup.sh          # Verifica node / ffmpeg(libx264) / numpy, instala paquetes de Playwright, busca el navegador local

Flujo de trabajo (tres puntos de confirmación, confirmar antes de continuar)

① Tema y enfoque → Confirmación 1

Con AskUserQuestion, pregunta (la opción recomendada va primero):

  • Tema: Si el usuario solo da una dirección, ofrece 3 candidatos. Un buen tema = concepto complejo × punto emocional que resuene en “ti” (entropía → la sensación de abrumo en la vida; semivida → ¿olvidar es traicionar?), preferiblemente con un giro contraintuitivo. Ver references/story.md.
  • Música: bgm (el usuario proporciona un archivo con licencia, como la Pequeña Canción de la Mente Abierta, las imágenes se sincronizan con la canción, la duración = duración de la canción) o synth (sintetizada por código, duración personalizada).
  • Atribución (qué poner en la marca de agua), duración (por defecto, sigue la canción, 159 segundos).

② Verificación → Tabla de hechos

Cada hecho que aparecerá en pantalla: declaración | fuente | nivel de confianza (T1: literatura original / T2: fuente secundaria autorizada / T3: solo se puede decir “se dice”) | en qué frase se usa. La verificación a menudo reescribe la historia: en «Semivida», al verificar se encontró “el olvido es una ley de potencia, cuanto más antiguo más estable”, lo que derribó el subtítulo original y se convirtió en el giro final. Si encuentra conflictos, detente e informa al usuario.

③ Guion de subtítulos + storyboard → Confirmación 2

Escribe en seis partes (gancho → título → ancla histórica → demostración del mecanismo → giro contraintuitivo → conexión con el espectador → dedicatoria y referencias), una frase por pantalla, ≤ 6.5 caracteres/segundo, palabras clave resaltadas con {}, frases que necesitan fuente llevan un texto pequeño en el punto 4. Cada parte del storyboard debe incluir: qué está pasando en la imagen (una frase de subtítulo corresponde a una acción en pantalla), lo que “realmente se está calculando” (usando datos reales, fórmulas reales, simulaciones con una semilla fija), y efectos de sonido. Plantilla templates/tabla de hechos y storyboard de subtítulos.md. Muestra la tabla de hechos + el storyboard de subtítulos al usuario; espera su aprobación antes de escribir código.

④ Construir el proyecto, escribir film.js

$SK/engine/new_film.sh <directorio> <nombre>                 # Esqueleto de seis partes
$SK/engine/new_film.sh <directorio> <nombre> --from halflife  # Comenzar desde/por referencia a «Semivida»

Primero, elige los componentes según el contenido a mostrar: references/components.md tiene una tabla “qué mostrar → qué usar”, examples/gallery/componentes.png es una vista general de todos los componentes. La plantilla del esqueleto ya usa componentes para las seis partes; solo necesitas cambiar los datos y el texto; si los componentes no son suficientes, escribe funciones locales en film.js (API en references/engine.md, escritura completa en examples/halflife/film.js). Reglas:

  • Haz primero la escena más difícil, mira si se sostiene como imagen fija, luego haz las demás.
  • Los subtítulos, escenas y efectos de sonido se escriben según el “tiempo del storyboard”; la sincronización con la canción se deja para el warp (paso ⑤), no modifiques puntos de tiempo uno por uno.
  • Cada 2–3 segundos debe haber una nueva acción en la escena; para pausas largas, añade micro-movimientos (flujo de luz, barrido de luz, movimiento lento). El movimiento de respiración integrado en el motor tiene una amplitud pequeña; por sí solo no evita la “quietud”.
  • Las palabras nuevas que aparecen (dibujadas en la escena, no en los subtítulos) deben añadirse a strings.

⑤ Música y puntos de sincronización

  • bgm: Coloca la canción en el directorio del proyecto, ejecuta python3 $SK/engine/analyze_bgm.py <canción> --json out/bgm.json. Si es la Pequeña Canción de la Mente Abierta, primero compara el sha256 con data/kaizhi-xiaoqu.json: si coinciden, usa directamente la cuadrícula de compases y los puntos de anclaje sugeridos; si no coinciden (otras fuentes pueden tener un desplazamiento general de 0.1–0.3 segundos), reconstruye la cuadrícula basándote en los puntos de entrada de baja frecuencia recién medidos. Luego, en meta.music.warp, escribe los puntos de anclaje: destello blanco del título → primer drop, pregunta/silencio → sección de caída, revelación del giro → segundo drop, punto final y dedicatoria → inicio de la frase musical. Detalles en references/music.md.
  • synth: En meta.music.synth, escribe los niveles de cada voz y la envolvente de silencio por sección (modifica el SYNTH del ejemplo).

⑥ Autoverificación (sin producir el video completo)

node $SK/engine/export.mjs <directorio> events          # Tabla de efectos de sonido + temporización de subtítulos
node $SK/engine/export.mjs <directorio> stills          # out/stills.png, vista general de 16 fotogramas; también se puede especificar segundos 3,16.9,43.6
cd <directorio> && python3 -m http.server 8765 --bind 127.0.0.1   # Abre film.html en el navegador, arrastra la línea de tiempo, escucha la música

Revisa fotograma por fotograma: si el texto se sale de los límites, si la imagen está medio vacía, si las curvas se ajustan a los puntos de datos, si algo flota en la posición incorrecta, si los subtítulos y las acciones coinciden. El código no reporta errores; solo se ve al revisar: en «Semivida», en este paso se detectaron 5 errores.

⑦ Producción + Control de calidad

$SK/engine/build.sh <directorio>        # Tabla de efectos → música → renderizado fotograma a fotograma → mezcla a -14 LUFS → qa.py (en segundo plano, tarda unos 5–12 minutos)
$SK/engine/build.sh <directorio> --skip-render   # Solo cambios de audio

qa.py marca con ✗ lo que debe cambiarse; ! debe cambiarse o, al entregar, explicar que es intencional. La máquina también puede equivocarse: si reporta “pantalla negra”, verifica primero extrayendo fotogramas; los fondos oscuros a menudo se malinterpretan. Interpretación en references/qa.md.

⑧ Entrega → Confirmación 3

Entrega al usuario: ruta del video final, duración, resultados del control de calidad, áreas que aún no son suficientemente buenas. Completa registro de producción.md (cada punto de fallo: fenómeno → causa → solución, que al hacer un tutorial se convierten en una lista de tomas). Si necesita texto de publicación, ver references/publish.md.

Referencia rápida de comandos

ComandoFunción
engine/setup.shVerificación e instalación del entorno
engine/new_film.sh <directorio> <nombre> [--from halflife]Crear nuevo proyecto (copia una instantánea del motor dentro, para que futuras actualizaciones del motor no afecten proyectos antiguos)
node engine/export.mjs <directorio> events / stills [segundo,…] / render [inicio fin]Exportar tabla de efectos de sonido / vista general / video (dar inicio y fin solo renderiza un segmento)
python3 engine/audio.py <directorio>Música + efectos de sonido → out/mix.wav
python3 engine/analyze_bgm.py <canción> [--json archivo]BPM, compases, curva de energía, puntos de entrada de baja frecuencia
engine/build.sh <directorio> [--skip-render]Un solo comando para producción + control de calidad
python3 engine/qa.py <directorio> [video final]Control de calidad independiente

Archivos de referencia (léelos según sea necesario)

ArchivoCuándo leerlo
references/story.mdElección del tema, estructura de seis partes, reglas de subtítulos, clasificación de la tabla de hechos
references/style.mdEspecificaciones visuales: colores, fuentes, cinco capas de imagen, coordenadas de diseño, densidad de animación
references/components.mdAntes de escribir escenas: 21 componentes + 5 fábricas de datos, “qué mostrar → qué usar”, parámetros
references/engine.mdAPI básica de VF, campos de metadatos, escritura de escenas
references/music.mdDos modos de música, estructura de la Pequeña Canción de la Mente Abierta, detección de drops, puntos de anclaje warp, tabla de efectos de sonido
references/qa.mdSignificado de cada elemento del control de calidad, umbrales y falsos positivos comunes
references/pitfalls.mdRevísalo antes de empezar: 30 errores encontrados al hacer «Semivida» + errores de proyectos similares
references/publish.mdTexto de publicación, declaración de IA, manejo de música y referencias
examples/halflife/Ejemplo completo: film.js (versión de componentes), tabla de hechos y storyboard de subtítulos, registro de producción
examples/gallery/Guía de componentes: el mismo conjunto de componentes aplicado a un tema diferente; componentes.png vista general
data/kaizhi-xiaoqu.jsonEstructura medida y puntos de anclaje sugeridos para la Pequeña Canción de la Mente Abierta

Skills relacionados