01 Por qué hacer vídeo con código
Un modelo de lenguaje devuelve texto, así que el truco es que ese texto sea un programa: una página HTML con tiempos o un componente de React que, dado un instante, pinta exactamente un fotograma. Un navegador sin interfaz captura los fotogramas uno a uno y FFmpeg los une en un MP4.
La ventaja es el determinismo: el mismo archivo produce siempre el mismo vídeo. Cambiar el color de marca o un texto es editar una línea y volver a renderizar, sin abrir un editor de vídeo. Y como Claude Code puede ejecutar el render y mirar los fotogramas resultantes, puede corregirse a sí mismo.
| Herramienta | Ideal para | Licencia |
|---|---|---|
| Brag | Vídeo de lanzamiento de 15-25 s a partir de tu proyecto o de una web, con música y texto para redes | MIT |
| HyperFrames | Piezas a medida en HTML, CSS y librerías como GSAP: explicadores, pitches, subtítulos animados | Apache 2.0 |
| Remotion | Plantillas en React que se rellenan con datos: series, catálogos, vídeos personalizados | Gratis para particulares y empresas de hasta 3 empleados; licencia de empresa por encima |
02 Prepara el estudio
- ✓Node.js 22 o superior (node --version).
- ✓FFmpeg instalado y accesible desde la terminal (ffmpeg -version).
- ✓Una carpeta de trabajo vacía o la carpeta del proyecto que quieres presentar.
- ✓Claude Code abierto en esa carpeta con el modelo más capaz que tengas y el esfuerzo alto (comando /effort) para vídeos nuevos.
# Comprobar que HyperFrames puede renderizar en tu equipo
npx hyperframes doctor
# Skills de HyperFrames (el conjunto básico)
npx hyperframes skills update
# Skills de Remotion
npx skills add remotion-dev/skills
# Solo la versión ligera de Brag, sin plugin
npx skills add https://github.com/latent-spaces/brag --skill brag-slim/plugin marketplace add latent-spaces/brag
/plugin install brag@bragHyperFrames también se distribuye como plugin de Claude Code (claude plugin marketplace add heygen-com/hyperframes y luego claude plugin install hyperframes@hyperframes). Elige una vía, plugin o skills sueltas, para no tener duplicados.
03 Un vídeo de lanzamiento con Brag
Brag analiza el repositorio (colores, tipografías, README, pantallas) o una URL, decide el ángulo y el gancho, y deja en brag-output/ el vídeo, una portada, el plan y unas frases para publicar. Con Opus 5.5 cambia automáticamente a brag-slim, que construye el vídeo sin HyperFrames; si quieres el flujo clásico o narración, usa --full o --voice.
| Opción | Valores | Por defecto |
|---|---|---|
| --format | landscape, vertical o square | landscape |
| --duration | segundos | automático, 15-25 s |
| --tone | un preset o una descripción libre | lo infiere del proyecto |
| --no-music / --no-sfx | desactiva música o efectos | activados |
| --voice | narración (solo flujo completo) | desactivada |
/brag --format vertical --duration 20
Antes de construir, enséñame el plan: a quién va dirigido el vídeo, el gancho de los dos primeros segundos, los tres momentos del producto que vas a mostrar y cómo termina. Usa solo capturas, textos y cifras reales del proyecto; si te falta un dato, pregúntamelo en lugar de inventarlo. Espera mi aprobación antes de renderizar.04 Piezas a medida con HyperFrames
Cuando el vídeo no es un lanzamiento o necesitas controlar cada toma, trabaja con HyperFrames directamente. La skill /hyperframes actúa de enrutador: entiende qué pides y carga el flujo adecuado. Antes de renderizar, check detecta errores, contraste insuficiente y desbordes, y snapshot exporta fotogramas clave en PNG para revisarlos.
npx hyperframes init mi-video
cd mi-video
npx hyperframes preview # vista previa con recarga en vivo
npx hyperframes check # validación antes del render
npx hyperframes render # exporta el MP4Usando /hyperframes, convierte el documento ./propuesta.md en un vídeo explicativo horizontal de 40 segundos para enviar a un cliente.
1. Resume en una frase el mensaje principal y propón un guion de tomas (duración, texto en pantalla y movimiento de cada una) en docs/guion.md. Espera mi visto bueno.
2. Construye la composición con la paleta de marca que te indico: [colores y tipografías].
3. Ejecuta el check, corrige lo que reporte y saca snapshots de las tomas clave para que las revise antes del render final.05 Series de vídeos con datos en Remotion
Remotion brilla cuando un vídeo es una plantilla: le pasas un título, una cifra o una imagen y sale una variante. Una hoja de cálculo con 50 filas son 50 vídeos. Las skills oficiales incluyen /remotion-create para crear composiciones, /remotion-studio para la vista previa y /remotion-render para exportar.
npx create-video@latest # asistente para crear el proyecto
npx remotion studio # vista previa y línea de tiempo en el navegadorUsando /remotion-create, crea una plantilla de vídeo cuadrado de 10 segundos para presentar productos de un catálogo. Recibe como props: nombre, precio, frase corta y ruta de imagen; nada de textos fijos dentro de la animación. Un color de acento, movimientos con muelles (spring) sin rebote exagerado y el logo al final. Genera un datos.csv con tres productos de ejemplo, renderiza un vídeo por fila en out/ y dime cuánto tarda cada render para estimar un lote de 100.06 Dirección y revisión: que no parezca genérico
Sin referencias, cualquier modelo tiende al mismo resultado: texto centrado, degradado de fondo y todo entrando con un fundido. Dos hábitos lo evitan: darle una referencia (un fotograma o un vídeo que te guste, indicando qué copiar —ritmo, tipo de corte, textura— y qué no) y obligarle a mirar su propio render antes de darlo por bueno.
Usa FFmpeg para extraer de out/video.mp4 una hoja de contactos con dos fotogramas por segundo y una versión a 360 px de ancho para simular un móvil. Mira ambas y puntúa del 1 al 10: gancho inicial, legibilidad en móvil, calidad del movimiento, coherencia con la marca y ritmo (que algo cambie cada pocos segundos). Enumera los tres problemas más graves con el segundo exacto en que ocurren, corrígelos, vuelve a renderizar solo esos tramos y enséñame la nueva hoja de contactos.- ✓Textos que se solapan durante una transición.
- ✓Elementos que se desplazan a velocidad constante en vez de acelerar y frenar.
- ✓Texto borroso porque se escala con la cámara.
- ✓Segundos muertos en los que no pasa nada.
- ✓Un salto visible si el vídeo tiene que repetirse en bucle.
07 Cómo aprovecharlo en una empresa o agencia
Lanzamientos y novedades
Un vídeo corto por cada funcionalidad nueva de tu SaaS o cada colección de tu tienda, en los tres formatos de redes.
Contenido recurrente
La cifra de la semana, el producto destacado o un resumen mensual generados desde una hoja de cálculo con Remotion.
Propuestas comerciales
Un explicador de 30-45 segundos que acompañe a un presupuesto o una demo, montado con HyperFrames a partir del documento.
Servicio para clientes
Un paquete cerrado de vídeo de lanzamiento con un máximo de rondas de cambios. Revisa la licencia de Remotion si tu equipo supera los 3 empleados.
Cuando el proceso ya te funciona, conviértelo en una skill propia con tus reglas de marca, las herramientas que usas y el orden de pasos. Así el siguiente encargo se reduce a una frase.
Preguntas frecuentes
No para empezar. Claude escribe y ejecuta el código; tú das la dirección y revisas. Sí ayuda entender lo básico de HTML o React si quieres retocar algo a mano.
El chat puede escribir la animación, pero no renderizarla ni revisar los fotogramas. Para el ciclo completo necesitas un agente con terminal como Claude Code.
Empieza con Brag para un vídeo de lanzamiento. Si necesitas más control pasa a HyperFrames, y si vas a producir muchas variantes con datos, a Remotion.
Sí. Pide a Claude que use tu pista sin modificarla y que mida su ritmo antes de colocar los cortes. Asegúrate de tener los derechos de uso de la música.
En un archivo .env fuera del control de versiones. Indica a Claude el nombre de la variable y nunca pegues la clave en el prompt.
Sobre el autor
Equipo editorial de appyweb
Marketing, SEO y desarrollo con IA
Especialistas de appyweb en SEO, publicidad, desarrollo web y automatización con IA.