Cómo generar vídeo con Claude Code y Remotion

Volver al blog

Hacer vídeo suele significar abrir un editor, mover clips en una línea de tiempo y exportar a mano cada vez que cambia un dato. Funciona para piezas únicas, pero se vuelve un suplicio en cuanto necesitas veinte versiones del mismo anuncio con distintos precios, o un resumen de resultados nuevo cada mes. La alternativa que usamos cuando el vídeo tiene que ser repetible es generarlo por código con Remotion, y dejar que un asistente de IA como Claude Code escriba ese código por nosotros. Este artículo es la guía sin rodeos que nos habría gustado encontrar: qué es, cómo funciona y cuándo merece la pena.

Qué es Remotion y por qué cambia las reglas

Remotion es una herramienta para crear vídeos describiéndolos con código en lugar de montándolos a mano. Suena abstracto, pero la idea es sencilla: el vídeo deja de ser un archivo cerrado que editas en una línea de tiempo y pasa a ser una especie de "receta" que se puede ejecutar las veces que quieras. Al final, esa receta produce un MP4 normal, idéntico al que daría cualquier editor.

Esa diferencia tiene tres consecuencias muy prácticas:

  • El vídeo es reproducible. Se guarda como texto, se puede recuperar cualquier versión anterior y se reconstruye exactamente igual en cualquier ordenador. Nada de "¿dónde está el proyecto final de verdad?".
  • El vídeo es dinámico. Si el contenido viene de una hoja de cálculo o de otro sistema, el mismo diseño genera infinitas variantes sin volver a montarlo.
  • El vídeo se automatiza. Crear uno es dar una orden, así que el proceso puede lanzarse solo: en serie, de noche, o cuando llegan datos nuevos.

La contrapartida es que Remotion tiene sus propias reglas, distintas de las de una web o una animación corriente. Un asistente de IA genérico no las conoce y mete la pata; por eso, como veremos, el paso clave es darle el contexto adecuado.

Dónde encaja Claude Code

Crear vídeos así, a mano, exige saber programar. Aquí entra Claude Code, el asistente de IA de Anthropic que trabaja directamente sobre tu proyecto: entiende el conjunto del trabajo, escribe y modifica los archivos, y —esto es lo importante— corrige solo sus errores hasta que algo funciona.

El cambio de mentalidad es este: dejas de montar cada animación y pasas a dirigir. Le dices "crea una intro de 5 segundos con el logo entrando desde abajo con un rebote suave y el eslogan apareciendo medio segundo después", y el asistente lo construye. Tú revisas el resultado y pides ajustes: "el rebote es demasiado brusco, suavízalo". Es una conversación, en lenguaje natural, sobre un resultado que siempre puedes deshacer y rehacer sin miedo.

Instala la skill oficial de Remotion antes de empezar

Hay un paso previo que marca una diferencia enorme en la calidad del resultado: instalar la skill oficial de Remotion. Una skill (habilidad) es, simplemente, un paquete de conocimiento que el asistente carga cuando detecta que trabajas con esa herramienta. Le enseña las reglas y las buenas prácticas, para que no improvise.

El equipo de Remotion publica la suya en skills.sh. Se instala con un solo comando:

npx skills add https://github.com/remotion-dev/skills --skill remotion-best-practices

También te la ofrece automáticamente al crear un proyecto nuevo. Lo interesante es cómo trabaja: no satura al asistente con un manual gigante, sino que le va dando solo la parte que necesita en cada momento (animación, audio, subtítulos…). El resultado es que Claude Code escribe como lo haría alguien del propio equipo de Remotion, en lugar de adivinar.

La capa que separa un buen vídeo de uno soso

Conocer las reglas garantiza un vídeo correcto, pero no necesariamente bonito. Sin guía, un asistente tiende a producir animaciones planas y robóticas: textos que aparecen con un fundido aburrido, movimientos sin ritmo. Para subir el listón existen skills de diseño que codifican el oficio de la animación profesional en reglas concretas. No hace falta entenderlas a fondo, pero estas son las ideas que convierten un vídeo soso en uno de aspecto comercial:

  • Movimiento con física, no mecánico. Lo que entra, gira o crece lo hace con una pizca de inercia y rebote, como en el mundo real, en lugar de deslizarse de forma rígida.
  • Aparecer con varios gestos a la vez. Un elemento no solo se desvanece: aparece combinando opacidad, una ligera subida y un pequeño crecimiento. Se nota más vivo.
  • Entradas escalonadas. Cuando entran varios elementos, lo hacen uno detrás de otro con un pequeño desfase, creando una cascada que se lee mejor que un aluvión simultáneo.
  • Salidas más rápidas que las entradas. Lo que se va, se va con decisión, para dejar paso a lo siguiente con energía.
  • Una marca centralizada. Colores, tipografías y tiempos viven en un único sitio, así que reajustar el estilo de todos los vídeos es cambiar una cosa, no cien.

Estas skills se instalan igual que la de Remotion, con un solo comando. Dos que merece la pena tener a mano:

  • ui-ux-pro-max, un catálogo de criterios de diseño de interfaces (estilos, paletas, tipografías y reglas de UX) que ayuda al asistente a tomar decisiones estéticas con fundamento. Su ficha está en skills.sh:
npx skills add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill --skill ui-ux-pro-max
  • frontend-design, la skill de diseño de interfaces de Anthropic, pensada para generar interfaces y composiciones cuidadas que huyen del aspecto genérico. Disponible también en skills.sh:
npx skills add https://github.com/anthropics/skills --skill frontend-design

Con una de estas cargadas junto a la de Remotion, el asistente no solo respeta las reglas técnicas: aplica un criterio visual que se nota en el resultado.

El flujo completo en cuatro pasos

1. Crear el proyecto

Remotion incluye un asistente que monta un proyecto en blanco en segundos. Puedes pedírselo a Claude Code o lanzarlo tú con un comando:

npx create-video@latest

El resultado es una carpeta vacía lista para empezar a "rodar".

2. Describir el vídeo

Con el proyecto abierto, le explicas a Claude Code qué quieres. Cuanto más concreto seas con la duración, el formato y el estilo, menos vueltas hará falta dar. Un buen primer encargo se parece a esto:

Crea un vídeo vertical (formato reel) de 6 segundos. Fondo degradado azul oscuro. En el centro, el texto "Lanzamiento 2026" que aparece con un fundido y una subida suave durante el primer segundo, se mantiene, y desaparece en el último medio segundo.

A partir de esa frase, el asistente escribe todo lo necesario. Tú no tocas el código: das instrucciones y revisas.

3. Previsualizar

Antes de generar el vídeo final, conviene verlo en directo. Remotion incluye un estudio en el navegador con su línea de tiempo y su botón de reproducción, que se abre con un comando:

npx remotion studio

Ahí ves el resultado al instante y vas pidiendo ajustes. Como cada cambio queda guardado, nunca pierdes una versión: si una prueba empeora el vídeo, se vuelve atrás sin drama.

Así se ve el estudio con un vídeo de prueba que montamos para este artículo: a la izquierda la lista de composiciones, en el centro la previsualización y abajo la línea de tiempo.

El estudio de Remotion en el navegador: a la izquierda la lista de composiciones con el vídeo "Lanzamiento" en formato 1080x1920 a 30 FPS, en el centro la previsualización del reel vertical "Lanzamiento 2026" sobre fondo degradado azul, y abajo la línea de tiempo con el cabezal de reproducción

4. Generar el vídeo final

Cuando convence, crear el MP4 es dar una orden y esperar:

npx remotion render

Y si prefieres no tocar la terminal, no hace falta: el propio estudio tiene un botón Render (arriba a la derecha, como se ve en la captura anterior). Al pulsarlo se abre un panel con los ajustes de exportación —el formato (vídeo, audio, imagen suelta o secuencia de imágenes), el codec, qué tramo del vídeo exportar, el nombre del archivo, la calidad o la resolución— y se genera con un clic, sin escribir nada.

Panel de ajustes de render de Remotion Studio: pestañas para vídeo, audio, imagen suelta y secuencia de imágenes; opciones de codec (H.264), rango de fotogramas, nombre del archivo de salida y un menú lateral con secciones como General, Picture, Audio y Encoding

El ordenador genera el vídeo imagen a imagen y las une en el archivo final, exactamente como se veía en la previsualización. Y ya está: tienes un vídeo normal, listo para subir donde quieras. Este es el resultado real, generado enteramente por código, con las entradas escalonadas y la salida rápida de las que hablamos antes:

Infografía del flujo de trabajo con Claude Code y Remotion sobre una línea de tiempo, de la carpeta vacía al MP4, en cuatro pasos: 1) Crear el proyecto con "npx create-video@latest"; 2) Describir el vídeo en lenguaje natural; 3) Previsualizar con "npx remotion studio"; 4) Generar el vídeo final con "npx remotion render". Diseño de yuGraphik sobre fondo azul oscuro
Todo el flujo de un vistazo en cuatro pasos

Qué formato exportar para la web: MP4/H.264 o WebM/AV1

Terminado el render, queda una decisión que no aparece en ningún prompt: en qué formato subes el vídeo. Para este mismo artículo probamos las dos rutas con el reel de "Lanzamiento 2026", así que las cifras que siguen son reales, no de laboratorio.

  • MP4 con codec H.264. Es el que exporta Remotion por defecto y el más compatible: se reproduce en cualquier navegador, móvil o programa de edición sin sorpresas, con descodificación por hardware hasta en los dispositivos más modestos. Es la opción segura cuando el vídeo puede acabar en cualquier sitio fuera de tu control.
  • WebM con codec AV1. Comprime notablemente mejor que H.264 —entre un 30% y un 50% menos peso a calidad similar— a cambio de más tiempo de codificación. Su soporte ya es sólido en Chrome, Firefox y Edge, pero todavía cojea en versiones antiguas de Safari e iOS. Antes de descartar el H.264 como reserva, conviene comprobar la compatibilidad real en caniuse.com/av1.

Sobre el reel de este artículo hicimos cuatro pasadas, y cada ajuste quitó peso de verdad:

VersiónCódec / resoluciónPesoCambio
Render originalH.264, 1080×1920883 KB
Mismo tamaño en AV1AV1, 1080×1920, CRF 32218 KB-75%
Más compresiónAV1, 1080×1920, CRF 38148 KB-83% vs. original
Resolución ajustadaAV1, 720×1280, CRF 3880 KB-91% vs. original

El salto más grande no vino de subir el CRF, sino de bajar la resolución. El vídeo se muestra en esta página a un máximo de 520 px de alto: exportarlo a 1920 px era gastar bits en detalle que nadie llega a ver. Ajustar la resolución de salida al tamaño real en el que se va a reproducir el vídeo suele quitar más peso que apretar el codec.

La recomendación práctica: si necesitas compatibilidad máxima, exporta en MP4/H.264. Si priorizas el peso mínimo y controlas dónde se reproduce el vídeo, como en este artículo, exporta en WebM/AV1.

El detalle que lo cambia todo: el asistente revisa su propio trabajo

Aquí está la diferencia real entre pedirle algo a un chatbot y usar un asistente que trabaja sobre tu proyecto. Un fallo visual —un texto que se sale del recuadro, dos elementos que se solapan, un color que no se lee— no salta como un "error": el archivo es válido, pero el vídeo queda feo. Un asistente a ciegas te lo entregaría tan tranquilo.

Claude Code, con la skill cargada, cierra ese hueco revisándose a sí mismo:

  1. Monta el vídeo.
  2. Genera imágenes fijas de los momentos clave.
  3. Las mira —sí, las observa de verdad— buscando textos desbordados, solapamientos o contrastes pobres.
  4. Si algo no cuadra, lo corrige, vuelve a comprobarlo y repite hasta que queda bien.

Solo entonces te lo entrega. Es la diferencia entre "esto debería verse bien" y "he comprobado que se ve bien". Ese ciclo de montar, mirar, corregir es lo que convierte el flujo en algo fiable en lugar de una lotería.

Por qué el movimiento se siente natural

No necesitas dominar esto para dirigir al asistente, pero entenderlo te ayuda a pedir mejor. La clave de que una animación se sienta agradable es el tipo de movimiento. Frente a un desplazamiento mecánico y constante, Remotion sabe imitar muelles: elementos que llegan con inercia y se asientan con naturalidad, como objetos reales.

Ese movimiento se puede ajustar para conseguir distintas sensaciones, y le puedes pedir a Claude el carácter que buscas:

Sensación que pidesCómo se muevePara qué encaja
Enérgico y con reboteLlega rápido y rebota un poco antes de pararseInsignias, iconos, avisos que deben llamar la atención
Limpio y precisoLlega veloz y se frena en seco, sin reboteTexto corporativo, fotos, títulos serios
Lento y solemneArranca pesado y avanza con calmaFondos, degradados, imágenes grandes de apertura

Es justo el tipo de matiz que un editor profesional ajusta a mano durante horas y que aquí se resuelve con una frase.

El superpoder: vídeos con plantilla, a escala

Todo lo anterior ya es cómodo, pero el motivo de peso para adoptar este enfoque es la producción masiva de variantes. La idea: conviertes tu diseño en una plantilla y le indicas qué partes cambian —un titular, una cifra, un color, una imagen—.

A partir de ahí, el mismo vídeo sirve para un anuncio con "Ahorra un 20 %" en azul y para otro con "Envío gratis" en verde. Y con una lista de datos, Claude Code puede generar cientos de vídeos de una tacada. Cuando los datos vienen de otro sistema —una hoja de cálculo, una base de datos, una fuente de noticias—, el vídeo incluso ajusta su duración solo según el contenido.

El resultado deja de ser un archivo muerto: es una pieza viva que se reconstruye infinitas veces a partir de tus datos. Aquí un editor de vídeo tradicional simplemente no compite: hacer cien versiones a mano es inviable; con plantilla, es automático.

Tu marca dentro del asistente: una skill con tu manual corporativo

Vimos al principio que una skill es un paquete de conocimiento que el asistente consulta. Pues bien: además de la skill oficial de Remotion, puedes crear la tuya propia con la identidad de tu marca. Es, probablemente, la idea más valiosa de todo este enfoque para una empresa.

La idea es meter en esa skill dos cosas:

  • Las reglas de tu marca (tu manual corporativo en versión que el asistente entiende): los colores exactos, las tipografías, el tono, cómo y cuándo usar el logotipo, los márgenes de seguridad, qué está permitido y qué no.
  • Los recursos de marca a los que el vídeo puede acceder directamente: el logotipo en sus distintas versiones, los iconos, las tipografías, fondos o texturas, fotografías de producto…

Con eso instalado, no tienes que volver a explicar tu marca cada vez. Le pides "haz un reel anunciando el nuevo servicio" y el asistente ya sabe qué azul es el tuyo, qué tipografía usar, qué versión del logo poner según el fondo y dónde encontrar el icono que necesita. El vídeo sale on-brand por defecto, no por casualidad.

Las ventajas se notan enseguida:

  • Coherencia automática. Todos los vídeos respiran la misma identidad, sin revisiones interminables para corregir un color o un logo mal puesto.
  • Nada de assets sueltos. Se acabó el "¿dónde estaba el logo en blanco?" o usar una versión antigua: el asistente tira siempre del recurso correcto.
  • Escala sin perder el hilo. Cien vídeos personalizados que, aun siendo distintos, parecen claramente de la misma marca.
  • Coherencia entre personas. Da igual quién pida el vídeo: el resultado sigue las mismas reglas, porque el criterio vive en la skill, no en la cabeza de una persona.
  • Una marca, un sitio. Si la identidad evoluciona —nuevo color, nuevo logo—, se actualiza la skill una vez y todos los vídeos futuros heredan el cambio.

Es la versión llevada al vídeo de algo que ya defendemos en web: la marca como sistema reutilizable, no como un archivo que cada cual interpreta a su manera.

Más allá de lo básico: voz, datos y subtítulos

Remotion no vive aislado: tiene paquetes oficiales que lo conectan con servicios externos, y Claude Code sabe cablearlos por ti. No necesitas saber qué hace cada uno, pero conviene conocer el mapa de lo que se puede enchufar a un vídeo de marca:

Mapa de integraciones de Remotion alrededor de un vídeo de marca: en el centro el vídeo (Remotion) y seis módulos que se conectan a él: Voz en off (ElevenLabs, OpenAI TTS), Subtítulos (Whisper, ElevenLabs), Datos en vivo (Sheets, Notion, API REST), Tipografías (Google Fonts), Animaciones (LottieFiles, After Effects) e Imágenes IA (gpt-image, Nano Banana). Diseño de yuGraphik sobre fondo azul oscuro
Todo lo que Claude Code puede enchufar a tu vídeo de marca
Para quéServicio o API externaCómo se conecta
Voz en off (texto → audio)ElevenLabs, OpenAI TTSGeneran la narración a partir de un guion con voces realistas; Remotion la sincroniza con la imagen
Subtítulos automáticos (audio → texto)OpenAI Whisper, ElevenLabs Speech-to-Text, o Whisper en tu propio ordenadorLos paquetes @remotion/openai-whisper e @remotion/install-whisper-cpp transcriben el audio; @remotion/captions los deja listos para el efecto "karaoke" palabra por palabra
Datos en vivoGoogle Sheets, Notion, Airtable, una base de datos o cualquier API RESTEl vídeo lee los datos en el momento de generarse, así que siempre sale con la cifra más reciente
TipografíasGoogle Fonts@remotion/google-fonts carga cualquiera de sus fuentes sin instalar nada
Animaciones prediseñadasLottieFiles, After Effects@remotion/lottie incrusta animaciones vectoriales ya hechas, miles disponibles
GIFs y stickersGiphy, Tenor@remotion/gif los integra y mide su duración para encajarlos en la línea de tiempo
Imágenes con IAAPIs de generación de imagen como gpt-image-2 (OpenAI) o Nano Banana (Google Gemini Flash, en sus versiones 2 y 3.1)Las imágenes generadas entran como un asset más del vídeo: fondos, ilustraciones o variantes de producto a medida

Más allá de esa tabla, hay tres cosas que conviene tener claras sobre cómo trabaja el asistente con estas piezas:

  • Los subtítulos pueden ser locales o en la nube. Si prefieres no enviar el audio a ningún servicio, Whisper corre en tu propio ordenador; si priorizas comodidad, la API de OpenAI o de ElevenLabs lo resuelve en segundos. Tú eliges la balanza entre privacidad y rapidez.
  • Gráficos y datos. Animar barras, líneas o contadores a partir de una tabla es directo, ideal para resúmenes de resultados; con los datos llegando de una hoja de cálculo o un panel, el gráfico se redibuja solo.
  • Imágenes, audio y clips de vídeo. Se integran, se recortan y se combinan con las animaciones; el asistente se encarga de los detalles técnicos para que, por ejemplo, los vídeos insertados no parpadeen.

La gracia es que tú no instalas ni configuras nada de esto: le dices a Claude Code "añade voz en off con ElevenLabs y subtítulos automáticos" y él elige el paquete adecuado, lo conecta y lo deja funcionando.

Producir mucho: el trabajo en la nube

Crear vídeos en tu ordenador está bien para piezas sueltas, pero generar cientos a la vez lo satura. Para producir a gran escala, el trabajo pesado se delega a la nube, que lo reparte entre muchas máquinas trabajando en paralelo. Lo que en local tardaría minutos se resuelve en segundos. Para cualquier servicio que genere vídeo bajo demanda o campañas con miles de variantes, esto no es un lujo: es lo que hace viable la idea.

Cuándo conviene este enfoque (y cuándo no)

No es la herramienta para todo. Esta es la frontera que usamos para decidir:

Caso de uso¿Claude Code + Remotion?
Intros y outros de marca reutilizablesSí, ideal
Vídeos personalizados a escala (datos, nombres)Sí, es donde más brilla
Resúmenes de resultados o informes recurrentes
Anuncios con muchas variantes (idiomas, precios)
Documental, entrevista o pieza narrativa únicaNo: usa un editor de vídeo tradicional
Edición creativa libre sobre metraje grabadoNo: el código no aporta ventaja

La regla es sencilla: si el vídeo se repite con variaciones, este enfoque gana; si es una pieza única e irrepetible, no.

Por qué nos gusta este flujo en una agencia

En yuGraphik trabajamos con la misma filosofía en web: generamos sitios por código en lugar de depender de constructores visuales, porque el resultado es más rápido, fiable y barato de mantener (lo contamos en Next.js vs WordPress). El vídeo por código es la extensión natural de esa idea: la marca vive en piezas reutilizables y producir la versión número cien cuesta lo mismo que la primera.

Sumarle un asistente como Claude Code derriba la barrera que tenía este enfoque —había que saber programar—: ahora describes lo que quieres, el asistente lo construye, comprueba que se ve bien y tú diriges. El conocimiento técnico sigue importando para los acabados y para montar los procesos automáticos, pero el primer vídeo está al alcance de cualquiera que sepa explicar qué imagina.

Conclusión

Generar vídeo con Claude Code y Remotion no sustituye al editor de vídeo para la pieza creativa única, pero resuelve de forma elegante lo que ese editor no sabe abordar: el vídeo repetible y a escala. El flujo es corto —crear, describir, previsualizar, generar—, el asistente revisa su propio trabajo, y el resultado es una pieza que puedes recuperar, automatizar y multiplicar por tus datos.

Si en tu negocio el vídeo se ha convertido en una tarea repetitiva —los mismos formatos una y otra vez con datos distintos—, es justo el escenario donde este enfoque ahorra más tiempo. En nuestro servicio de desarrollo web aplicamos estas mismas ideas de automatización; si quieres explorar cómo encajaría en tu marca, hablemos.

Preguntas frecuentes

¿Necesito saber programar para generar vídeo con Claude Code y Remotion?

No para empezar. Claude Code escribe el código por ti a partir de instrucciones en lenguaje natural, y tú revisas el resultado en una vista previa, como quien revisa un borrador. Saber programar ayuda para los acabados finos, pero un primer vídeo se consigue describiendo lo que quieres y dejando que el asistente lo monte.

¿Qué es Remotion exactamente?

Remotion es una herramienta que permite crear vídeos describiéndolos con código en lugar de montándolos a mano en un editor. Al final exporta un MP4 normal, como cualquier otro vídeo. Su gran ventaja es que el mismo diseño se puede reutilizar con datos distintos, lo que lo hace ideal para vídeos que se repiten: informes, anuncios o piezas personalizadas a gran escala.

¿Para qué sirve usar Claude Code en este flujo?

Claude Code es un asistente de IA que trabaja en tu ordenador: tú le describes el vídeo en lenguaje natural —'haz una intro de 5 segundos con el logo entrando desde abajo'— y él escribe el proyecto, genera imágenes de prueba, comprueba cómo queda y corrige sus propios errores antes de entregarte el resultado.

¿Puedo generar muchos vídeos automáticamente con datos distintos?

Sí, y es donde más brilla este enfoque. Defines qué partes del vídeo cambian (un texto, una cifra, una imagen, un color) y generas el mismo diseño con cientos de combinaciones a partir de una lista de datos, una hoja de cálculo o una conexión a otro sistema: vídeos personalizados para campañas, resúmenes de resultados o felicitaciones.

¿Cómo instalo la skill de Remotion en Claude Code?

El equipo de Remotion publica una skill oficial (un paquete de conocimiento que enseña al asistente las reglas de la herramienta). Se instala con un comando: 'npx skills add https://github.com/remotion-dev/skills --skill remotion-best-practices'. A partir de ahí, Claude Code aplica automáticamente las buenas prácticas de Remotion al generar vídeo.

¿Cuánto cuesta y qué necesito para crear los vídeos?

Remotion es gratuito para particulares y equipos de hasta tres personas; las empresas más grandes necesitan una licencia comercial. Para crear vídeos sueltos basta con un ordenador normal; cuando hay que producir muchos a la vez, el trabajo se acelera en la nube, repartiéndolo entre varias máquinas. El coste real suele ser el tiempo de proceso, no la herramienta.

Volver al blog
• DISEÑOS QUE INSPIRAN • WEBS QUE DESTACAN

¿Listo para expandir tu negocio?

Transforma tu presencia digital con soluciones web personalizadas que convierten visitantes en clientes.

Solicita tu presupuesto gratis