Cómo hacer videos promocionales con IA, paso a paso

Los videos promocionales de xyCloser y de XY Task, dos productos que construimos con mi equipo en BBR Tek, no los grabó nadie. No hubo cámara, ni estudio, ni editor de video. Los hizo la IA a partir del código de cada app, y yo dirigí: aprobé el guion, pedí cambios y elegí qué versión salía.

En este tutorial te muestro todas las herramientas y skills que usamos, en el orden en que se usan, con lo que aprendimos en el camino. Y para que lo veas en un minuto, este reel resume todo el proceso. Lo hicimos con las mismas herramientas.

Los videos que salieron

xyCloser es un CRM con IA que llama a tus leads, les da seguimiento por WhatsApp, Instagram y correo, y hace los anuncios. Su primer video cuenta la vida de un lead en 24 segundos: entra, el agente de IA lo llama y agenda la reunión, recibe el seguimiento y termina como venta cerrada en el tablero. Después vinieron una versión de 60 segundos, una vertical y esta en español para Reels, "Una sola app en vez de seis".

XY Task es una plataforma de operaciones para equipos: tickets, tareas, turnos, recursos humanos, facturación y contabilidad en una sola app. Su tour pasó por cuatro versiones en dos días (9 y 10 de octubre de 2026): de 44 a 84 segundos, y en la última se sumó Xy, la mascota, que aparece en los momentos clave y habla en un idioma inventado.

Las herramientas, de un vistazo

• Claude Code con la skill /brag: lee el código de la app, entiende qué hace y escribe el guion escena por escena.
• Capturas reales: la app corriendo en modo demo, con datos de prueba, capturada con Chrome sin interfaz.
• Hyperframes: convierte una página HTML en video, cuadro por cuadro. Es de código abierto, de HeyGen.
• Nano Banana Pro: las imágenes y las mascotas. Lo usamos desde el estudio de xyCloser, a $0,039 por imagen.
• Veo 3.1 y Kling 3.0 Pro: le dan movimiento a esas imágenes. Veo animó a Xy y le puso voz.
• ffmpeg: recorta, quita fondos, mezcla el audio, codifica y revisa el video final.
• Música y voz: pistas con licencia o música generada con código, y narración con Kokoro, una voz abierta, verificada con Whisper.

Paso 1: instala Claude Code y la skill /brag

Todo empieza en Claude Code, el agente de Anthropic que trabaja dentro de tu proyecto. Una skill es un paquete de instrucciones que le enseña a hacer un trabajo concreto. /brag es la skill que convierte un proyecto en un video de lanzamiento corto. Se instala con dos comandos y se usa con uno:

/plugin marketplace add https://github.com/latent-spaces/brag.git
/plugin install brag@brag
/brag --format vertical

Puedes pedirle el formato (horizontal, vertical o cuadrado), el tono (pulido, de tráiler, de parodia de startup) y si quieres voz. También acepta dirección libre, como "que parezca el tráiler de una película".

Paso 2: deja que lea el código y escriba el guion

/brag no mira el sitio por fuera: lee el código. Antes de escribir una sola escena responde nueve preguntas: qué es la app, para quién es, qué la hace distinta, cuál es su afirmación más fuerte y qué pantalla real conviene mostrar. Con eso escribe brag-plan.md, un guion con esta forma:

• Gancho (2 a 3 segundos): lo que decide si alguien sigue mirando.
• Revelación (2 a 4 segundos): el producto aparece.
• Momentos clave (5 a 12 segundos): dos o tres cosas que hace, mostradas con la app real.
• Cierre (2 a 4 segundos): la marca, la frase y a dónde ir.

Aquí es donde más vale tu criterio. En xyCloser el ángulo que funcionó fue no describir el producto, sino seguir a un solo lead de principio a fin. En XY Task fue tomar la frase de su propia landing ("Tickets. Tasks. HR. Shifts. Billing. One platform.") y probarla módulo por módulo. Lee el guion, pide cambios y aprueba antes de seguir.

Paso 3: captura pantallas reales, con datos de prueba

Un video de producto convence cuando muestra el producto. Para XY Task capturamos 25 pantallas de la app corriendo en modo demo, a 3840 x 2160, para poder acercar la cámara sin que se pixele. El video anima esas capturas: movimientos de cámara, cursor, clics, el pegado de una lista y los resaltados.

La regla que nunca se rompe: datos de prueba siempre. En xyCloser el lead se llama Kevin Ortiz y no existe; en XY Task la empresa y las personas son de ejemplo. Nada de clientes reales, correos reales ni cifras del negocio.

Paso 4: Hyperframes convierte el HTML en video

Hyperframes es lo que hace posible todo esto. Cada escena es HTML normal, con atributos que dicen cuándo entra y cuánto dura, y la animación es una línea de tiempo que se puede pausar en cualquier punto. Así se ve una escena:

<div class="clip" data-start="4" data-duration="6">
  <h1>One platform.</h1>
</div>

Como cada cuadro depende solo del tiempo, el render siempre sale igual. El tour de XY Task son 84 segundos a 30 cuadros por segundo: 2.520 cuadros, cada uno dibujado por Chrome sin interfaz. Antes de renderizar, npx hyperframes check revisa el código, los textos que se cortan o se tapan y el contraste. Después, npx hyperframes render saca el MP4.

Paso 5: imágenes y mascotas con Nano Banana Pro y Veo

Para lo que no existe en la app usamos IA generativa, siempre desde el estudio de imagen y video de xyCloser. Así nació Xy, la mascota de XY Task: Nano Banana Pro hizo tres conceptos (un robot brillante, una criatura peluda y un robot de peluche) y ganó la criatura color menta. Con esa imagen como referencia salieron cinco poses del mismo personaje sobre fondo magenta: saluda, celebra, duda, guarda un secreto y vuela.

Después Veo 3.1 animó cada pose y le puso voz, en un idioma inventado que nadie entiende. Un recorte propio quitó el fondo magenta sin dejar el halo rosado en el pelaje, y en el tour Xy aparece en ocho momentos: unos 16 de los 84 segundos, para no competir con el texto. Xyro, la mascota de xyCloser, salió del mismo proceso. Para tomas con personas usamos Kling 3.0 Pro, que convierte una foto en un clip de cinco segundos.

Una regla que aprendimos rápido: nunca le pidas texto, cifras ni pantallas a un generador de video. Los deforma o los inventa. Eso va en HTML; la IA generativa queda para personajes, objetos y tomas.

Paso 6: música, efectos y voz

La música no es un fondo: marca el ritmo del corte. /brag trae pistas con licencia junto con un mapa de dónde caen sus golpes. En el video de xyCloser, a 110 golpes por minuto, los tres momentos fuertes caen justo en un golpe: la reunión agendada a los 8,74 segundos, el tablero a los 18,56 y la marca a los 22,37.

Para XY Task la música se compuso con código: una pieza a 120 golpes por minuto donde cada compás dura dos segundos, así cada escena empieza en un compás. Los efectos (clics, el pegado, un ding por tarea creada) están afinados en la misma tonalidad.

Para la voz hay dos caminos. En la versión de 60 segundos de xyCloser, la llamada del agente usa voces del sistema filtradas para que suenen a teléfono, con el tono de llamada sintetizado. Para narrar, como en el reel de arriba, usamos Kokoro, una voz abierta que corre en tu computadora, y verificamos cada frase con Whisper: si Whisper no entiende una palabra, la gente tampoco. Así detectamos que "Uno" sonaba "Unos" y cambiamos la numeración por "Primera, Segunda, Tercera".

Paso 7: revisa antes de entregar

Hoy, antes de publicar, cada video pasa por una revisión automática con ffmpeg: que no haya cuadros negros largos ni congelados, que no haya silencios, que el volumen quede entre -16 y -11 LUFS (fuerte, pero sin distorsión) y una hoja con un cuadro a mitad de cada escena para mirar a ojo. Después se elige el mejor cuadro como portada, se graba como primer cuadro del video para que sea la miniatura en todas partes, y se escribe el texto para publicarlo.

Lo que aprendimos

• El gancho manda. Se decide antes que todo lo demás. En el reel de arriba es "Estos videos no los grabó nadie", con los dos videos corriendo desde el primer cuadro.
• Rápido no es parpadeo. El ritmo lo dan los cortes y el movimiento; cada texto se queda el tiempo justo para leerlo.
• Lo vertical va en marcos verticales. Un reel dentro de una ventana horizontal se ve cortado.
• Itera en versiones, no desde cero. XY Task tuvo cuatro versiones y cada una partió de la anterior: más ganchos, el modelo de proveedores, permisos y, al final, Xy.
• Tu voz es la dirección. La IA hace el trabajo pesado, pero el ángulo, el tono y qué se queda fuera los decides tú.

Cuánto cuesta

Claude Code va con tu plan de Claude. Hyperframes, ffmpeg, Chrome, Kokoro y Whisper son gratis y corren en tu computadora. Lo único que se paga por uso es lo generativo: cada imagen de Nano Banana Pro cuesta $0,039 en xyCloser y los clips de Veo o Kling se cobran por clip. Un video de producto sin mascota ni tomas generadas puede salir sin gastar un dólar extra.

¿Quieres videos así para tu negocio?

Esto es lo mismo que enseño en el taller y lo que hacemos con mi equipo para empresas: videos de producto hechos desde tu propia app, sin grabar. Si quieres verlo aplicado a tu caso, agenda una Consultoría VIP.

Agenda tu Consultoría VIP →