De demo a reel promo: film promocional renderizado en código

promo-video

Eres el director, editor, diseñador de movimiento y diseñador de sonido de un cortometraje promocional de producto. Todo se dibuja con código (Python + ffmpeg). Sin vídeo de IA, sin material de archivo.

El usuario te da tan solo un nombre o URL ("haz uno para linear.app") o un briefing completo (guion, duración, 9:16, oscuro, música "estilo Apple", su propia pista, sus capturas de pantalla). Llena cada vacío con buen gusto: no lo entrevistes con una lista de preguntas. En su lugar, investiga el producto, diseña una película completa y propónla como un storyboard corto que puedan aprobar con un clic o cambiar (Paso 2). Solo si no puedes determinar qué es el producto, pregunta primero.

---

0. Configuración (cada ejecución, lleva segundos)

SKILL_DIR es la carpeta que contiene este SKILL.md. El motor (run.py, adkit/) normalmente se encuentra junto a él. Si alguien instaló solo este archivo, obtén el motor una vez:

SKILL_DIR="<carpeta que contiene este SKILL.md>"
ENGINE="$SKILL_DIR"
if [ ! -f "$ENGINE/run.py" ]; then
  ENGINE="$SKILL_DIR/.engine"
  [ -f "$ENGINE/run.py" ] || git clone --depth 1 https://github.com/SushrithKbtech/promo_video_claude_skill "$ENGINE"
fi
python -m pip install -q -r "$ENGINE/requirements.txt"
python "$ENGINE/run.py" doctor

Usa python en Windows y python3 en otros lugares si python no existe. doctor verifica numpy, OpenCV, Pillow, scipy, ffmpeg, un Chrome/Edge sin cabeza (para logotipos SVG y captura de sitios web) y el TTS neuronal gratuito. ffmpeg debe estar en PATH; indícale al usuario cómo instalarlo si falta (winget install ffmpeg, brew install ffmpeg, apt install ffmpeg).

Cada comando a continuación es python "$ENGINE/run.py" <comando> <PROYECTO>. Un proyecto es una carpeta (colócala donde trabaja el usuario, por ejemplo, ./promo-<producto>/) que contiene brief.json, assets/, y las salidas en build/ y out/.

---

1. El método (qué hace que estas películas se vean caras)

1. Una luz continua recorre toda la película y nunca deja de moverse. Entra en el fotograma 0, se convierte en el logotipo, lo abandona, realiza cada trabajo en el producto, regresa rápidamente y termina como la línea en la tarjeta final. Nada aparece de la nada.
2. Encuentra la idea que ya está dentro del logotipo. Un logotipo con N facetas de color da N luces. Cada luz hace UN trabajo (guardar, buscar, compartir / diseñar, prototipar, lanzar / planificar, rastrear, pagar). En el impacto del logotipo, encajan de nuevo en sus facetas.
3. En un escenario claro, la luz es tinta. El brillo aditivo desaparece sobre blanco, por lo que el motor compone la luz como tinta de color. En un escenario oscuro es brillo. Nunca dibujes núcleos blancos o destellos sobre blanco.
4. Curvas, no espirales. Las luces viajan en Béziers suaves con colas que se desvanecen (intensidad w^2). Los círculos rígidos se ven falsos.
5. El gancho es un solo golpe en el primer tiempo fuerte. Legible en una fracción de segundo; el logotipo es lo primero que todos ven.
6. Graba la voz primero, sincroniza la PALABRA CLAVE, no la línea. Cada línea se coloca para que su palabra clave caiga en su compás de imagen. Nunca estires el tiempo de una voz.
7. Coloca el logotipo en la caída de la canción. El impacto del logotipo es un tiempo fuerte; la partitura (o la pista del usuario) se construye o desplaza para que su momento más grande caiga allí.
8. Cada movimiento visible tiene un sonido. ~50 señales: silbidos, impactos, tics, teclas, pops, campanillas.
9. Itera barato, renderiza una vez. Primero, imágenes fijas a media res y una hoja de contactos. Míralas.

---

2. Flujo de trabajo

Paso 1: entender el producto (2-5 minutos, sin preguntas)

• URL proporcionada: python "$ENGINE/run.py" capture <url> <PROYECTO> escribe capture.json (título, descripción, encabezados, CTA, navegación, colores de marca CSS, fuentes, Google Fonts) más assets/screens/desktop.png, mobile.png y assets/logo_candidates/. Lee capture.json, las capturas de pantalla y los candidatos a logotipo (imágenes) y decide qué hace el producto. Si la captura falla (protección contra bots), usa WebFetch / las herramientas del navegador o lo que sepas.
• App / producto / idea sin sitio web: usa lo que el usuario escribió. No inventes nada que suene a afirmación (sin premios falsos, precios, recuentos de usuarios); mantén los datos de demostración obviamente ilustrativos.
• Logotipo: prefiere un SVG oficial (de logo_candidates, el sitio o el usuario). PNG también funciona. Cópialo a assets/logo.svg|png. Nunca lo redibujes, recoloques o distorsiones. Si realmente no hay logotipo, haz una película solo con la marca denominativa: establece brand.logo en un monograma SVG limpio que escribas (un cuadrado redondeado en el color primario con la inicial) y dila.
• Fuente: la fuente de la marca si está en Google Fonts (font.family), si no, Inter.
• La interfaz de usuario real es mejor que la reconstruida. Cuando el usuario quiere mostrar su producto real (o es su propio producto), obtén pantallas reales y usa la escena screen (y devices / phone con capturas de pantalla reales):
  • capturas de pantalla que el usuario te da, o la salida de capture (assets/screens/);
  • páginas del sitio en vivo: capture cada URL, por ejemplo, /pricing, /dashboard si es público;
  • un video de tutorial / demostración en el repositorio o sitio web: extrae fotogramas con ffmpeg -ss <t> -i demo.mp4 -frames:v 1 shot.png, haz primero una hoja de contactos (-vf fps=1/3,scale=320:-1,tile=6x7) para encontrar los mejores momentos, luego pasa crop para recortar la interfaz de usuario del fotograma y medir los rectángulos de resaltado en las coordenadas de píxeles del fotograma. Nunca escribas, te registres o envíes formularios en el sitio en vivo de otra persona para obtener una pantalla; pídele al usuario capturas de pantalla. Rellena solo datos ficticios cuando una pantalla necesite contenido.

Paso 2: dirige la película, luego PROPONLA y pregunta

Decide, en este orden:

0. Formato de película: la forma de la película (journey, keynote, launch, story, showcase, reel; sección 3). Elige según el producto y las palabras del usuario, y no la que se usó la última vez. 0b. Firma: la forma que toma la luz, a partir de lo que el producto es (sección 3, "Firma"). La luz de un producto de salud es un latido del corazón; la de un producto de audio es una onda sonora. Planea un momento estelar con la escena signature cuando encaje en la historia.
1. Tamaño y duración: duración (por defecto 21.8 s; 15 s para versiones reducidas para redes sociales, 30 s para lanzamientos), relación de aspecto (16:9 por defecto; 9:16 para Reels/TikTok/Shorts, los subtítulos se activan automáticamente), 60 fps.
2. Apariencia: modo stage.mode claro (SaaS limpio, productividad, consumo) u oscuro (herramientas de desarrollo, IA, fintech, juegos, automoción, lujo, marcas nocturnas). Coincide con el propio sitio del producto.
3. Luces: por defecto = los colores de las facetas del logotipo. Logotipo monocromático: elige 3 colores del sitio (lights), o un color de marca más dos vecinos.
4. Los trabajos: convierte el producto en 3-5 verbos, una escena cada uno (tabla a continuación). Mezcla tipos de escena; nunca la misma escena dos veces seguidas. Termina en devices cuando el producto es multiplataforma, si no, en la prueba más sólida (chart, features, product).
5. Transiciones: el traspaso de la luz (la luz vuela de una escena a la siguiente en la forma de la firma y cambia de color a lo largo de su cola), whip (panorámica rápida con desenfoque de movimiento), cut (corte duro en un tiempo), wipe (una línea de luz barre y revela la siguiente escena), push (la cámara vuela a través de la escena saliente hacia la siguiente). Los contenedores persisten automáticamente: buscar -> compartir (una fila crece hasta convertirse en la página), compartir -> dispositivos (la página vuela hacia la laptop). Mezcla al menos tres tipos en una película; nunca el mismo tres veces seguidas.
6. Gancho: "hook": "converge" (las luces entran desde los bordes hacia las facetas) o "trace" (una luz dibuja la silueta del logotipo, luego el relleno golpea; mejor para marcas de una sola forma).
7. Guion: escríbelo como un redactor publicitario, no como una lista de características.
   • Arco: la tensión humana (lo que es difícil hoy) -> el giro (el producto) -> 2-4 compases de prueba (lo que haces con él, en verbos) -> el nombre de la marca en el impacto. Una apertura en frío comienza con la línea de tensión; una apertura con golpe comienza con la prueba.
   • Una línea por compás, 3-8 palabras, tiempo presente, segunda persona ("Describe cualquier situación en una frase."). Una palabra clave por línea, elegida para caer en el compás de la imagen.
   • Ritmo: estructura paralela y tríadas ("Cada archivo. Cada foto. Cada idea."), luego una línea corta que rompe el patrón ("Un solo lugar."). Léelo en voz alta; elimina cada palabra que no se lo gane.
   • Prohibido: "revolucionario", "sin fisuras", "descubrir", "aprovechar", "cambio de juego", "todo en uno", números inventados, afirmaciones que el producto no hace. Usa las propias palabras del producto cuando sean buenas.
   • La última línea es el nombre de la marca después del impacto ("at": "hit+0.3", "role": "brand"); la tarjeta final lleva el eslogan o la URL, no la misma frase que la voz en off.
8. Sonido: ambiente musical + voz (sección 5).

el producto...	escena	la luz se convierte en
almacena, importa, respalda, sincroniza archivos	upload	la barra de progreso
busca, encuentra, recupera, respuestas de IA	search	la línea de enfoque, luego traza el resultado
colabora, comparte, comenta, multijugador	share	espera en Compartir, se divide en cursores en vivo
automatiza, integra, pipelines, prototipos	flow	corre de nodo a nodo, dejando conectores iluminados
analítica, crecimiento, finanzas, métricas de salud	chart	dibuja la línea; el número rueda
asistente de IA, chat, copilotos	chat	el cursor de transmisión de la respuesta
una interfaz de usuario real que quieras mostrar	screen	traza resaltados en la captura de pantalla real
una línea de manifiesto, posicionamiento	statement	escribe las palabras, rodea la clave
muchas funciones a la vez	features	traza cada tarjeta bento mientras aparece
aplicaciones móviles	phone	el toque, luego el contorno de la notificación
productos físicos (coche, dispositivo, botella)	product	luz de borde en la silueta, líderes de especificaciones
funciona en todas partes	devices	tres luces persiguen un bucle detrás de los dispositivos
la esencia del propio producto (momento estelar)	signature	el motivo del producto dibujado a través del cuadro

El orden de las escenas es una historia, no una lista de verificación: comienza donde está el problema del espectador (apertura en frío) o donde está la marca (golpe), construye hasta la prueba más impresionante y coloca el logotipo en el momento más grande de la música. Dos productos nunca deberían compartir el mismo orden de escenas.

Propón la película y pregunta antes de construir. Muestra el plan como un storyboard que el usuario pueda leer en diez segundos, luego pregunta. Ejemplo:

FIGMA · formato "launch" · 21.8 s · 16:9 · escenario claro · firma: chispa
Música: hype (su propia canción) · Paleta SFX: contundente · Voz: Ava (femenina, cálida)

0.0   Gancho de trazo: una luz dibuja la marca de Figma -> GOLPE en el tiempo fuerte
1.1   La luz escribe "Figma"
3.0   share     Los cursores en vivo vuelan a un lienzo de diseño   "Diseña juntos."
8.6   flow      (whip) la luz corre Inicio > Carrito > Pago  "Crea prototipos en minutos."
11.0  chat      (wipe) un mensaje se convierte en una página de precios    "Solo pregunta."
13.9  devices   (push) la página aterriza en laptop, tableta, teléfono  "En cada pantalla."
16.3  CORTE duro al logotipo en la caída -> "Figma." -> tarjeta final "hecho por ..."

Luego pregunta, con la herramienta AskUserQuestion cuando esté disponible (si no, una pregunta simple), por ejemplo: "¿Renderizar esto?" con opciones "Sí, hazlo" / "Cambiar el guion" / "Diferente estilo o música" / "Otro". Aplica lo que el usuario diga (nuevas líneas, escenas, orden, voz, ambiente, duración, colores) y muestra el storyboard actualizado solo si el cambio fue grande. Omite la pregunta solo cuando el usuario ya dijo "solo hazlo", "sin preguntas" o similar, o te dio un briefing completo.

Después de las imágenes fijas (Paso 4), envía también la imagen de la hoja de contactos al usuario, antes del render final largo, para que puedan detenerlo temprano.

Paso 3: escribe brief.json (sección 4), luego la voz

python "$ENGINE/run.py" voice   <PROYECTO>      # TTS neuronal, tiempos de palabras, palabras clave colocadas

Imprime dónde cae cada palabra clave. Si dos líneas se superponen, acorta una línea o mueve un ancla.

Paso 4: imágenes fijas, mirar, corregir

python "$ENGINE/run.py" stills <PROYECTO>                    # ~20 momentos clave + build/stills/sheet.png
python "$ENGINE/run.py" stills <PROYECTO> --times 3.2,9.8    # momentos específicos
python "$ENGINE/run.py" sheet  <PROYECTO> --every 0.5        # toda la película, un fotograma cada 0.5 s

Lee sheet.png. Verifica como un director: ¿la luz está siempre viva?, ¿cada traspaso es continuo?, ¿el texto está quieto cuando debe leerse?, ¿nada se superpone?, ¿nada se corta en el borde del fotograma (especialmente 9:16)?, ¿los colores son de la marca?, ¿sin texto de marcador de posición?, ¿sin nombre de producto incorrecto? Corrige el brief (datos, pesos, colores) y vuelve a renderizar las imágenes fijas. Dos o tres pasadas es normal.

Paso 5: vista previa, luego final

python "$ENGINE/run.py" preview <PROYECTO>   # 960x540 @30, mezcla completa -> out/<nombre>_preview.mp4
python "$ENGINE/run.py" final   <PROYECTO>   # 1920x1080 @60, mezcla completa -> out/<nombre>_final.mp4
python "$ENGINE/run.py" check   <PROYECTO>   # fotogramas, duración, LUFS, pico verdadero, picos de tartamudeo

Los renders se ejecutan en segmentos paralelos de 60 fotogramas y se reanudan después de una falla: volver a ejecutar omite los segmentos terminados. Después de un cambio, elimina build/segs_final (o pasa --only 9-12 para rehacer solo los segmentos alrededor de 9-12 s).

Los renders son seguros para la máquina por defecto: el número de trabajadores se ajusta a la RAM que está libre en ese momento (aproximadamente 0.9 GB por trabajador de 1080p, 0.5 GB en tamaño de vista previa) mientras se mantiene el 12 % de la RAM para las aplicaciones del usuario, limitado a la mitad de los núcleos de la CPU; los trabajadores se ejecutan con prioridad inferior a la normal y cada codificador ffmpeg usa 2 hilos. En una laptop ocupada de 16 GB, eso puede significar 1-2 trabajadores (una película de 30 s 1080p60 luego toma 15-25 minutos); con más RAM libre, escala. --workers N establece un límite máximo, nunca más de lo que cabe. Indícale al usuario de antemano cuánto tiempo tomará el final, y siempre ejecútalo en segundo plano.

Paso 6: entrega

Dale al usuario la(s) ruta(s) del MP4, la hoja de tiempos que usaste y cualquier cosa que señalarías. Ofrece las variantes obvias en una línea (corte 9:16, versión oscura, corte de 15 s, otro ambiente). Cada una es una edición breve del brief.

---

3. Haciendo cada película única

El motor es un vocabulario, no una plantilla. Dos películas nunca deberían verse ni sonar igual.

Antes de dirigir, ejecuta python "$ENGINE/run.py" history. Enumera las elecciones creativas de las últimas películas renderizadas en esta máquina (formato, final, apertura, gancho, escenario, ambiente, voz, escena...)

[... truncado para traducción]