Communitygithub.com

talking-explainer

Convierte un tema en un vídeo explicativo animado 16:9 (1920x1080, 60fps) con un presentador animado que habla con sincronía de labios realista, usando la propia voz del usuario, texto cinético básico en pantalla, un estilo visual tipo Apple y la marca del usuario.

¿Qué es talking-explainer?

Talking Explainer es una skill para agentes de IA (como Claude Code, Cursor o Codex) que permite transformar cualquier tema en un vídeo explicativo de motion design con formato 16:9 (1920x1080, 60 fotogramas por segundo). La característica principal es un presentador animado que 'habla' con sincronización labial realista (seis formas de boca impulsadas por la voz), gestos en palabras clave y parpadeos. El vídeo utiliza la propia voz del usuario (grabada o clonada mediante ElevenLabs), texto en pantalla corto y en inglés básico, y un estilo visual minimalista tipo Apple (fondo blanco, tipografía Geist, tarjetas de vidrio, muelles críticamente amortiguados, iconos Solar, una lente azul). Cada escena incluye un zoom de cámara y un golpe de énfasis. La skill también soporta la creación de personajes propios a partir de prompts de imagen, el intercambio de la pista de voz sin reconstruir el vídeo (retime), la generación de cortes verticales 9:16 para TikTok/Reels/Shorts, y la inclusión de aplicaciones y logotipos reales en walkthroughs. El proceso completo incluye: redacción del guion con gancho inicial, grabación del usuario, storyboard con tiempos globales, trabajo paralelo de escenas con workers, renderizado y verificación de sincronía. Es la skill que se debe usar cuando el usuario solicite explícitamente un 'talking explainer', 'talking mascot', 'lip sync explainer' o cualquier video explicativo con un personaje que habla.

Compatible con~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/brewed-ops/talking-explainer/tree/main/skills/talking-explainer

Preguntar en tu IA favorita

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

Documentación

Talking Explainer

La voz es el reloj, el presentador HABLA (sincronía de labios), cada idea es primero una imagen cotidiana, cada escena tiene un zoom y un momento de énfasis, el estilo es Apple y el vídeo lleva la marca del usuario. Ejemplo resuelto: "REA - Reverse Engineer Anything" (129,0 s, 12 escenas) - references/example/ (SCRIPT, STORYBOARD, RETIME).

Rutas utilizadas a continuación:

  • <skill> = carpeta de esta skill. <kit> = <skill>/../explainer-kit. <engine> = <skill>/../spatial-film.
  • <home> = TALKING_EXPLAINER_HOME o ~/.talking-explainer; perfil = <home>/profile/ (compartido con explainer-kit).
  • <py> = el comando python guardado en <home>/config.json por setup-check (py -3.12 en Windows, python3 en macOS).

Ejecuta cada script de película desde la raíz del proyecto de la película. Los scripts son código probado: ejecútalos, nunca los regeneres. Juzga las escenas por las hojas de contacto, nunca leyendo el HTML de la escena en la sesión principal. Los workers reciben RUTAS de archivos.

Configuración (solo la primera vez)

Si no existe <home>/profile/brand.json, ejecuta la Fase S del explainer-kit (setup-check, entrevista de marca + profile.mjs init, voice.md, música). Su entrevista de marca establece el nombre del presentador (--presenter). Dos cosas adicionales para esta skill, preguntadas en la misma entrevista:

  • Las líneas de apertura y cierre en voice.md, palabra por palabra, con el nombre de pila del usuario (el gancho de apertura es "<afirmación>? ¿Es cierto? aquí, de ... vamos a desglosarlo").
  • El presentador: la demo parlante incluida (un dibujo animado inexpresivo con gafas), o su propio personaje; consulta "Tu propio personaje parlante" más abajo.

Valores predeterminados (no volver a preguntar)

  • Narración en el idioma del perfil, al estilo del usuario desde voice.md. En pantalla = texto corto en inglés básico (~6 palabras por línea de titular). La duración es libre si el mensaje llega (~150-160 palabras por minuto en una toma natural).
  • El usuario graba la toma a partir del guion (su clon de voz de ElevenLabs o su propio micrófono). La Fase 1 entrega el guion como párrafos listos para pegar y ESPERA un MP3. Generarlo a través de la API (<engine>/scripts/el-tts.py, clave en la variable de entorno EL, nunca en disco) solo cuando lo soliciten.
  • Apertura = gancho primero: comienza con la afirmación más sorprendente del tema como pregunta, luego la línea de apertura de voice.md. El NOMBRE del tema aparece en el párrafo 2. Cierre = la línea de cierre de voice.md + el cta del perfil.
  • Temas conceptuales reciben UNA analogía cotidiana contada literalmente (REA: la receta secreta de un café). Temas de "cómo funciona" sobre la propia herramienta o sistema del usuario reciben un recorrido por lo real en su lugar - references/real-apps.md. También herramientas y plataformas de terceros: nombra los productos reales, recorre el flujo de solicitud real y usa el texto, la configuración y los números de las propias plataformas leídos de sus páginas en vivo. Por defecto, usa el recorrido para cualquier tema técnico.
  • Corte corto (<= 30 s): ~2,6 palabras/s, 4 párrafos = 4 fotogramas (gancho + identificación / nombre / la única imagen / cierre), un cierre de una línea, 2 trabajadores x 2 escenas.
  • Temas de noticias / actualidad: investiga primero la cobertura en vivo (medios locales + un artículo profundo), luego escríbelo de forma equilibrada: cada afirmación tiene su autor en la voz ("según la agencia...", "los críticos dicen..."), el miedo tiene su escala real, luego una serie numerada de zonas grises donde las declaraciones oficiales se contradicen entre sí o un detalle clave no es público, un párrafo justo sobre los aspectos positivos y una conclusión con preguntas que hacer, nunca un veredicto. Cualquier cosa que solo haya dicho un resumen de búsqueda (la página en sí no cargó) permanece en el bloque de hechos de SCRIPT.md marcada como "No verificado, NO narrado". 16 fotogramas / ~700 palabras está bien para estos.
  • Guion a partir de una transcripción pegada: mantén los hechos de la fuente y su orden de ideas, reescribe cada línea en la voz del narrador (nunca lo traduzcas línea por línea), y elimina las partes del presentador original ("Yo construí...", demostraciones de código, su nombre). Las pegadas largas se truncan alrededor de 50.000 caracteres: indica dónde cayó el corte en SCRIPT.md, luego completa la parte faltante con el mecanismo estándar, verificado como cualquier otra afirmación. Guarda el texto pegado en references/source-transcript.txt el primer día y conserva las personas nombradas y los hitos de la fuente.
  • Personas reales = tarjetas de persona, nunca etiquetas: retrato (foto en duotono o ilustración parecida) + nombre + rol en una línea + año. Enumera cada persona nombrada con su escena en SCRIPT.md bajo "Personas en pantalla".
  • Estilo = Apple: luz blanca (#F5F5F7 de fondo), Geist con tracking específico por tamaño, vidrio simulado (.ap-glass - nunca backdrop-filter dentro del rig 3D), paneles .ap-window / .ap-dark, muelles críticamente amortiguados sp() (back.* prohibido), moderación (una idea por fotograma, pulsos <= 1,1), una espina LENTE azul. Color = significado, reescrito por película. El andamio lo establece todo.
  • Iconos = Solar (480 Design, https://solar-icons.vercel.app) - bold-duotone para iconos principales, linear para la interfaz de usuario, desde references/icons-solar.html. Nunca Lucide ni Phosphor. La obra es CC BY 4.0: cada entrega le da al usuario la línea "Iconos: Solar by 480 Design (CC BY 4.0)" para la descripción del video.
  • Movimiento: titulares que se materializan en sus palabras (levantar + desenfoque -> 0, muelle), animación de interfaz de usuario para cualquier herramienta, diagramas explicativos, ADEMÁS un zoom de cámara (ZOOM) y un golpe de énfasis (ÉNFASIS: pulso, barrido de marcador, dibujo de subrayado, tirón de enfoque, entrada numérica) en cada escena. Ley de fluidez a 60 fotogramas por segundo.
  • 1920x1080, 60fps. Logotipo de la marca en el gancho, logotipo en esquina en el medio, tarjeta final = logotipo + cta.

Fases

#FaseHacerPuerta
1Guion + tomaInvestiga el tema (hechos reales, con fuentes). Carga <kit>/references/voice-script.md + <home>/profile/voice.md. Apertura con gancho + cierre arriba, sin "!", UNA analogía (o el recorrido), 12 párrafos = 12 fotogramas (forma: references/example/SCRIPT.md). Escribe los nombres que se dicen como letras ("R-E-A"). Las afirmaciones sobre lo que la IA "no puede hacer" deben ser ciertas para los modelos actuales. Sin números de jerga (páginas, no tokens; cantidades redondeadas). Escribe <film>/SCRIPT.md, entrega al usuario los párrafos como TEXTO PLANO (sin bloque de código, nada después del último párrafo - pegan todo el mensaje en ElevenLabs; los consejos de grabación van en un mensaje anterior), ESPERA el MP3; ffprobe su duraciónla toma en mano, duración anotada
2Andamio + tiemposnode <skill>/scripts/new-talking-explainer.mjs <film> --name <slug> --mp3 <take.mp3>; <py> <kit>/scripts/transcribe.py assets/audio/vo.mp3 src/timing --lang <code> --prompt "<nombres, jerga>"; <py> <kit>/scripts/words.py src/timing/vo-words.json (la hoja de referencia)la transcripción coincide con el guion
3StoryboardEscribe STORYBOARD.src.md en tiempos GLOBALES (abajo) con la forma de references/example/STORYBOARD.md: un fotograma por párrafo, cortes en pausas de oraciones (suma = fin de voz + 2,8 s), encabezados un campo por línea (- start: / - duration: / - src:), cada bloque marca sus golpes ZOOM y ÉNFASIS en palabras clave, color = significado, hechos reales + extras ficticios, una COSTURA DE POSICIÓN ESCÉNICA donde dos escenas comparten un objeto principal. <py> src/storyboard-local.py -> STORYBOARD.md. Muestra al usuario la lista de fotogramas (una línea cada uno)su "adelante"
4Contrato + presentador + audioEdita + ejecuta src/set-film.py (escenas + duración de la voz). Edita + ejecuta src/set-presenter.py (poses ~0,1 s antes de sus palabras clave; pensar/caminar no tienen bocas - nunca mientras la voz habla). Base musical: <py> <engine>/scripts/bgm-cut.py assets/audio/bed.mp3 assets/audio/bgm-edit.wav --len <total> --a 0 <total+3> --fade-out 2.6 (una película más larga que la base repite el cuerpo: --a 0 <len> --b <bar> <len> --b ... --xfade 0.3) -> <py> <kit>/scripts/master-audio.py --len <total> -> <py> <engine>/scripts/build-presenter.py (imprime "sincronía de labios: N poses") -> <py> <kit>/scripts/build-brand.py (imprime la ventana del logotipo en esquina). Reescribe cada parte [FILM] de frame.md con un script <engine>/scripts/patch_exact.py. Edita + ejecuta src/set-cues.py. <py> <engine>/scripts/make-harness.py; <py> <skill>/scripts/make-packets.py; node <engine>/scripts/test-scene.mjs m-presenter "<5 veces>"hoja del presentador: bocas abiertas al hablar, poses en la clave
5Escenasreferences/workers.md: 6 workers Sonnet x 2 escenas, máximo 4 a la vez (una ronda de correcciones cuenta), su plantilla de prompt (ley de zona incl. picos de empuje, el límite de 0.12, solo Solar, la barra Apple, nunca inventar números). Revisa los medios tú mismo; corrige rondas al MISMO workercada hoja coincide con su bloque, legible a escala de hoja
6Envío<py> <engine>/scripts/fromto-scan.py compositions/s*.html (0) -> <py> <engine>/scripts/assemble.py -> npx hyperframes@<film.json> lint . + check . -> <py> <engine>/scripts/seam-check.py + node <kit>/scripts/seam-diff-all.mjs -> node <engine>/scripts/render-final.mjs <slug>-1080p60 (en segundo plano; termina con un escaneo flash) -> transcribe el RENDER a .hyperframes/work/sync + <py> <kit>/scripts/sync-check.py src/timing/vo-words.json .hyperframes/work/sync/vo-words.json -> <py> <skill>/scripts/frames.py renders/<slug>-1080p60.mp4 frames.jpg --at <uno por escena> y --zone --at <cada pico ZOOM> -> node <engine>/scripts/encode-web.mjs renders/<slug>-1080p60.mp4 renders/web --name <slug> --poster <t> -> entrega las rutas + la línea de crédito de Solarlint/check 0 errores, costuras 0.00% fuera de la caja del presentador, 0 flashes, sincronía mediana ~0.000s, nada a la izquierda de la línea roja en ningún pico

Escribe los tiempos UNA VEZ, en segundos globales

Convertir 20 escenas de tiempos de palabras a tiempo local a mano es donde se introducen errores. En STORYBOARD.src.md asigna a cada fotograma - start: <global> y marca las palabras clave como "palabra"@g<global>; los rangos ZOOM y los tiempos de "salir antes de" pueden ser números globales simples. <py> src/storyboard-local.py escribe STORYBOARD.md con cada tiempo local, verifica que los inicios encadenen y que cada señal quepa en su escena, e imprime la lista de escenas para set-film.py. Los efectos de sonido (src/set-cues.py) y el presentador (src/set-presenter.py) también se escriben en segundos globales.

Intercambio de toma / idioma / apertura después de la construcción (retime, nunca reconstruir)

Nueva toma -> haz una copia de seguridad de compositions/, film.json, STORYBOARD.md, src/ en .hyperframes/work/<old>/, mueve el render antiguo a renders/<old>/ -> copia la toma a assets/audio/vo.mp3 -> transcribe -> nuevos cortes en set-film.py -> poses del presentador, base musical, master, build-presenter, build-brand, set-cues, make-harness -> escribe RETIME.md (por escena: cada golpe -> su nueva palabra clave @ tiempo local; las escenas con contenido NUEVO reciben un bloque completo; forma references/example/RETIME.md; "este archivo prevalece sobre los tiempos de STORYBOARD.md") -> parchea la duración de frame.md / ventana del logotipo / costuras -> SendMessage a cada mismo worker su sección RETIME (4 a la vez). Las escenas se ACORTAN en una toma más rápida: dile a los workers que acorten los muelles antes de soltar un golpe.

Corte vertical / TikTok / Reels / Shorts (port, nunca reconstruir)

  1. <py> <skill>/scripts/port-portrait.py <film> <film>-9x16 - una carpeta NUEVA (la película 16:9 permanece intacta): copia la fuente + el audio, mueve las escenas enviadas a references/src-16x9/ (la especificación de los workers), escribe el contrato vertical (zonas de frame.md para la interfaz de TikTok, breve de worker, inicio 1080x1920, tamaño set-film), mueve al presentador abajo a la izquierda (escala x0.9, pies y 1640).
  2. Desde la nueva raíz: <py> src/set-film.py -> build-presenter.py -> build-brand.py (logotipo vertical = centro superior en y 150, debajo de las pestañas de la plataforma) -> make-harness.py -> test-scene.mjs m-presenter (presentador x ~26-556, y ~1074-1640).
  3. Workers: mismos pares, prompt = "PORT" (comienza desde la fuente 16:9, mantén copia/golpes/señales/colores/iconos/poses de costura, reautoriza solo el diseño + la cámara) + la ley de zona vertical: titular y 260-500, escenario x 60-1020 / y 520-1060 (texto x <= 920 debajo de y 680), inferior derecho x 580-920 / y 1080-1520, presentador x 20-560 / y 1060-1660, nada por encima de y 250 ni por debajo de y 1540. Los pares que copian el objeto de otro par van al final.
  4. Envía como fase 6 con render-final.mjs <slug>-1080x1920p60; frames.py --zone detecta vertical y dibuja la caja del presentador + las líneas de la interfaz de la plataforma. El master 1080p60 se sube a TikTok tal cual. Fallos de primera pasada: objetos principales aplastados en la parte inferior derecha (convierte el golpe en un héroe en el escenario, encoge el tipo de visualización en su lugar); un titular de 2 líneas que choca con una pila que se eleva en un empuje (>= 40 px de espacio en el pico); una tarjeta secundaria arrastrada más allá de y 1540 por un empuje (retrocede/atenúa durante ese empuje).

Aplicaciones reales + logotipos reales

Una película sobre la configuración del usuario muestra las APLICACIONES REALES: logotipos de la fuente, colores de la aplicación desde el CSS de la propia aplicación (scripts/app-tokens.py), los nombres y números de carpeta reales del usuario, una lista de privacidad antes de que comience cualquier worker. Receta: references/real-apps.md. frame.md levanta la regla de "sin terceros..." para incluir logotipos y capturas de pantalla de aplicaciones reales, con atribución. Los workers reciben los tokens de color de la aplicación y la regla: mostrar la aplicación real, nunca un genérico. Los nombres de las aplicaciones son texto, los logotipos son imágenes desde assets/refs/. La lista de privacidad se escribe en el propio frame.md del contrato: "Privacidad: solo se muestran aplicaciones y carpetas que el usuario ha aprobado explícitamente. No se capturan credenciales, tokens ni datos de usuario."

Tu propio personaje parlante

Tres prompts de imagen (cuerpo completo, retrato de 3/4, gesto de saludo) -> <engine>/scripts/make-talking-head.py (genera 3 vistas, entrena un LoRA, renderiza la hoja de poses). El nombre del personaje se convierte en --presenter en el perfil. La hoja debe tener: 6 bocas (A, E, I, O, M, X), 4 poses (firmes, hablar, pensar, caminar), 2 variaciones de parpadeo. El fondo de la hoja es verde cromático para composición. Prueba: make-harness.py + test-scene.mjs m-presenter "5 veces" -> la boca se mueve con la forma correcta en las sílabas acentuadas. Si la sincronización falla: vuelve a ejecutar build-presenter.py con --retime .05 (desplazamiento medio fotograma).

Salida

renders/<slug>-1080p60.mp4 (master), renders/<slug>-web.mp4 (web), frames.jpg (contact sheet con marcas de tiempo de los picos ZOOM). El render termina con un escaneo flash: verifica que no haya fotogramas en blanco. Entrega: las rutas de los archivos + una línea de crédito para Solar.

Notas

  • Esta skill requiere que explainer-kit y spatial-film estén instalados como skills adyacentes.
  • La variable de entorno EL debe contener la clave API de ElevenLabs para generación de voz por API.
  • El flujo asume que el usuario tiene ffprobe, python3 (o py -3.12 en Windows), y node instalados.
  • Para temas complejos, el script de storyboard verifica automáticamente la cadena de tiempos y la coherencia de las señales.

Individual skills in this repo

This repo contains 1 individual skill — each has its own dedicated page.

Skills relacionados