Cómo crear vídeos con Remotion y skills de Claude Code sin saber nada de vídeos

No sé hacer vídeos. No sé de animación, ni de motion graphics, ni de transiciones entre escenas. Si me pones delante de After Effects cierro la pestaña en tres segundos.

Y esta semana he creado un vídeo promocional desde cero.

¿La trampa? Que no he tenido que aprender nada. Todo lo ha hecho Claude Code por mí, guiado por una skill que le enseña cómo funciona Remotion como si llevara años trabajando con él. Remotion es una herramienta que permite crear vídeos con código, pero lo bonito de esta historia es que ni siquiera necesitas saber eso para usarla.

En este post vamos a ver:

Qué es una skill y por qué convierte a la IA en tu equipo de producción de vídeo
Cómo instalar todo lo necesario paso a paso
Cómo crear tu primer vídeo solo con instrucciones en lenguaje natural
Qué está haciendo la comunidad para conseguir resultados más profesionales
Cómo construir tu propia skill para que los vídeos salgan siempre con tu estilo

🤖 Lanza las skills de Remotion con cualquier agente: OpenCode, Codex, Gemini CLI, Github Copilot… En este post uso Claude Code como ejemplo, pero el flujo es el mismo. Aprende todo lo que necesitas saber sobre las skills.

En 30 segundos ¶

Si ya sabes lo que es Claude Code y quieres ir al grano, esto es todo lo que necesitas:

1. Instala la skill de Remotion:

npx skills add remotion-dev/skills

Esto le da a Claude Code todo el conocimiento que necesita sobre Remotion: animaciones, transiciones, tipografía, audio, 3D… Más de 25 ficheros de buenas prácticas mantenidos por el propio equipo de Remotion.

2. Pídele lo que quieras:

Usa la skill de Remotion para crear un vídeo de 25 segundos
sobre las ventajas de Remotion

Claude Code se encarga de crear el proyecto, escribir el código, montar las escenas y dejarlo listo para que lo veas y lo ajustes. Tú no tocas ni una línea.

Si quieres entender cómo funciona por dentro y sacarle más partido, sigue leyendo.

Qué es una skill y por qué cambia las reglas del juego ¶

Antes de entrar en Remotion, necesitas entender qué es una skill en el contexto de los agentes de IA.

Una skill es un conjunto de instrucciones y buenas prácticas empaquetadas para que un agente como Claude Code, Codex o Cursor trabaje con una tecnología “como toca”. No es un plugin, no es una extensión. Es conocimiento estructurado que el agente lee y aplica mientras programa.

Piensa en ello así: cuando tú aprendes un framework nuevo, lees la documentación, ves tutoriales y poco a poco interiorizas los patrones. Una skill hace exactamente eso, pero para la IA. Le da contexto, restricciones y ejemplos para que no improvise ni genere código que “funciona pero está mal”.

En el caso de Remotion, la skill oficial se llama remotion-best-practices y la mantiene el propio equipo de Remotion. No es un proyecto de la comunidad ni un experimento: es código mantenido por quienes crean el framework. Cubre desde animaciones básicas hasta 3D con Three.js, pasando por subtítulos, transiciones, tipografías animadas, audio y mapas.

Para que te hagas una idea del nivel de detalle, la skill tiene más de 25 ficheros de reglas específicas:

Animaciones con interpolate y spring
Composiciones y secuencias
Transiciones con @remotion/transitions
Tipografías y text animations
Integración con TailwindCSS
Vídeos transparentes
Charts y visualización de datos
Contenido 3D con React Three Fiber

Y aquí está el punto clave: tú no necesitas conocer ninguno de esos ficheros. Claude Code los lee, los entiende y los aplica. Tú solo describes lo que quieres.

🎬 La skill de Remotion convierte a Claude Code en un motion designer que sabe React. Tú aportas la idea, él aporta la ejecución técnica.

Aquí hay algo que podría hacer cambiar tu futuro.

Usamos cookies de terceros para mostrar este iframe (que no es de publicidad ;).

Instalación paso a paso ¶

El proceso tiene dos fases: crear el proyecto Remotion y lanzar Claude Code dentro de él.

Fase 1: el proyecto ¶

Abre tu terminal y lanza el scaffolding:

npx create-video@latest

El asistente te hará tres preguntas importantes. Para nuestro caso, las respuestas ideales son:

Template: elige “Blank”. Queremos partir de cero, sin ruido.
TailwindCSS: di que sí. Facilita el styling y Claude Code lo maneja con soltura.
Skills: di que sí. Esto es lo que instala las reglas de Remotion para el agente.

Si por algún motivo no instalaste las skills durante la creación del proyecto, puedes añadirlas después:

npx skills add remotion-dev/skills

Las skills quedarán instaladas en el directorio .claude/skills/ de tu proyecto.

Un detalle importante: el paquete de transiciones entre escenas no viene instalado de serie. Si quieres que tu vídeo tenga cambios suaves entre escenas (y créeme, los quieres), instálalo ahora:

npx remotion add @remotion/transitions

Esto añade @remotion/transitions con la misma versión que el resto de paquetes de Remotion, evitando problemas de compatibilidad. Sin este paquete, los cambios entre escenas serán cortes secos. Con él, Claude Code puede aplicar deslizamientos, fundidos y todo tipo de transiciones.

Fase 2: la previsualización ¶

Entra en la carpeta del proyecto y arranca el servidor de desarrollo:

cd mi-video
npm install
npm run dev

Esto abre Remotion Studio en el navegador, donde podrás ver en tiempo real todo lo que Claude Code vaya generando. Es tu ventana al resultado.

Fase 3: Claude Code ¶

Abre una segunda terminal, navega al mismo directorio y lanza Claude:

cd mi-video
claude

Ya está. Claude Code arranca con las skills de Remotion cargadas. A partir de aquí, todo es conversación.

Tu primer vídeo: las ventajas de Remotion ¶

Vamos a crear un vídeo corto que explique por qué Remotion es interesante. Sin tocar código, sin saber nada de vídeo, solo con instrucciones a Claude Code en lenguaje natural.

No necesitas preparar nada. No necesitas un guion escrito ni un storyboard dibujado. La IA te ayuda con todo eso.

Paso 1: el storyboard ¶

Lo natural es pensar que tienes que darle a Claude Code un guion detallado con escenas, duraciones y efectos. Pero no. Empieza sencillo y deja que la IA proponga:

Quiero un vídeo 1:1 de 25 segundos sobre las ventajas de Remotion

🥳 Este es el resultado. Está bien, pero podemos mejorarlo.

Eso es todo. Claude Code lee la skill, entiende cómo funciona Remotion y te propone un storyboard: cuántas escenas, qué dice cada una, qué estilo visual usar, qué transiciones aplicar. Te lo presenta antes de escribir una sola línea de código para que puedas decir “me gusta” o “cambia esto”.

Si quieres darle algo de dirección, puedes añadir preferencias sin entrar en tecnicismos:

Quiero un vídeo 1:1 de 25 segundos sobre las ventajas de Remotion.
Que tenga un estilo oscuro y moderno.
Que el texto sea grande y fácil de leer.

🥳🥳 Ha mejorado, es más legible, pero podemos hacer más.

Fíjate: no hay nombres de funciones, ni parámetros, ni formatos de resolución. Solo describes lo que quieres ver. Claude Code traduce “estilo oscuro y moderno” a una paleta concreta, “texto grande y fácil de leer” a tipografías y tamaños adecuados, y monta las escenas con las transiciones que mejor encajan.

Una vez que apruebes el storyboard, Claude Code genera el proyecto completo. Tú solo observas en el Studio cómo se va construyendo.

Paso 2: la iteración escena a escena ¶

Aquí viene lo bueno. El vídeo no te gusta del todo. Las animaciones van demasiado rápido, un texto no se lee bien, el cambio entre dos escenas es brusco.

No intentes arreglarlo todo de golpe. Ve pidiendo cambios uno a uno, describiendo lo que quieres sentir, no lo que la IA tiene que hacer por dentro:

Las animaciones van demasiado rápido,
quiero que los textos aparezcan con más calma

Claude Code entiende “con más calma” y ajusta los parámetros de animación. Tú ves el cambio al instante en el Studio sin saber qué ha tocado ni cómo funciona.

Otra iteración:

El texto de la tercera escena cuesta leerlo,
necesito más contraste con el fondo

Y otra más:

Quiero que el cambio entre escenas sea más suave,
como un deslizamiento, no un corte brusco

¿Ves lo que está pasando? No estás hablando de spring, ni de damping, ni de interpolate. Estás diciendo “más calma”, “más contraste”, “más suave”. La skill de Remotion se encarga de traducir esos deseos a código real.

Si en algún momento te animas a ser más específico, puedes. “Quiero que el texto aparezca letra a letra, como si alguien lo estuviera escribiendo” es una petición perfecta. Pero no es obligatorio. La IA trabaja con el nivel de detalle que tú le des.

Cada petición es breve. Cada cambio es visible al instante. Este flujo iterativo, de ajuste en ajuste, es lo que diferencia un resultado mediocre de uno profesional.

Paso 3: pedir más caña ¶

Ya tienes un vídeo que funciona. Las escenas tienen sentido, el texto se lee, las transiciones son suaves. Pero seamos sinceros: está correcto, no espectacular. Falta chispa.

Es el momento de pedirle más:

Quiero una versión más dinámica del vídeo de Remotion
con animaciones espectaculares hechas solo para este vídeo

🥳🥳🥳 ¡Menudo festival!

Fíjate en esa última parte: “hechas solo para este vídeo”. No quieres animaciones genéricas que podrían estar en cualquier clip. Quieres algo a medida, con personalidad.

Para que Claude Code pueda ir más allá de las animaciones básicas, merece la pena instalar un paquete extra:

npx remotion add @remotion/animation-utils

Este paquete añade utilidades para crear transformaciones CSS complejas y para interpolar estilos de forma avanzada. Con él, Claude Code tiene más herramientas a su disposición para hacer cosas como rotaciones combinadas con escalados, transiciones de color suaves o movimientos en varias dimensiones a la vez.

Y aquí hay algo que conviene pararse a pensar un momento.

Lo que está generando Claude Code no es un vídeo “mágico” sacado de la nada. Es código. Código React que se renderiza frame a frame. Eso significa que cada animación, cada transición, cada efecto visual tiene detrás una lógica programática que se puede leer, entender y modificar.

¿Por qué importa esto? Porque lo que la IA genera hoy, tú lo puedes reutilizar mañana. Si Claude Code crea un componente de animación espectacular para este vídeo, ese componente queda en tu proyecto. Puedes copiarlo, adaptarlo, combinarlo con otros. Es código tuyo, en tu repositorio, bajo tu control.

Esto es lo que diferencia a Remotion de los generadores de vídeo con IA tipo “caja negra”. Aquí no hay un modelo que escupe píxeles. Hay un agente que escribe código que tú puedes inspeccionar, versionar con Git y reutilizar en el próximo proyecto. El vídeo es el resultado, pero el código es el activo.

💡 Todo lo que genera Claude Code es código React en tu repositorio. No es magia efímera: es un activo que puedes reutilizar, versionar y adaptar.

Paso 4: el render ¶

Cuando el resultado te convenza, tienes dos caminos para exportar el vídeo.

El más directo es pedírselo a Claude Code:

Renderiza el vídeo a MP4 en la carpeta out/

Claude Code lanzará el proceso de render y en unos segundos (o minutos, dependiendo de la duración y resolución) tendrás tu archivo listo.

Pero hay una opción que a veces es más cómoda: exportar desde Remotion Studio. Si durante todo este proceso has tenido el Studio abierto con npm run dev, ya estás viendo tu vídeo en el navegador. Desde ahí puedes hacer clic en el botón de render, elegir formato, resolución y calidad, y lanzar la exportación sin salir de la interfaz. Es visual, rápido y no necesitas escribir nada en la terminal.

El Studio además te permite navegar por las escenas, ajustar el timeline y previsualizar a distintas velocidades antes de exportar. Si quieres retocar algo de último momento, es el sitio perfecto para hacerlo.

🔁 La clave no es pedir el vídeo perfecto de golpe. Es iterar en pequeño: storyboard, luego escena por escena, luego una versión más dinámica, luego el render. Cada petición breve y concreta.

Más allá de lo básico: lo que la gente ya está haciendo ¶

Hasta aquí el tutorial. Pero lo interesante de verdad es lo que está pasando en la comunidad.

Vídeos promocionales que analizan tu código ¶

Existe una skill llamada create-promo-video que va más allá. No solo genera Remotion: primero analiza tu repositorio, intenta inferir el branding del proyecto (colores de tu CSS, tipografías del Tailwind config, logos en la carpeta public/) y construye un vídeo promocional con la estructura hook → problema → solución → CTA.

Es una skill creada por la comunidad que demuestra algo poderoso: puedes crear tus propias skills para especializar al agente en tu tipo de vídeo.

Si tu empresa tiene una paleta de colores, unas tipografías corporativas y un estilo visual definido, puedes empaquetar todo eso en un fichero BRAND.md y hacer que Claude Code lo respete en cada vídeo que genere. Sin improvisaciones.

Galería de prompts como inspiración ¶

Remotion mantiene una Prompt Gallery en su web con ejemplos reales: rutas de viaje en mapas 3D, rankings animados con Three.js, titulares de noticias con highlight, demos de producto, overlays transparentes para llamadas a la acción…

Cada ejemplo incluye el prompt exacto que se usó y el vídeo resultante. Esto es oro por dos razones:

Encontrar inspiración visual sin tener que describir desde cero lo que quieres. Si ves un efecto que te gusta, puedes tomar el prompt como punto de partida.
Copiar y adaptar prompts que ya están probados, cambiando el contenido pero manteniendo la estructura que funciona.

Por ejemplo, hay un prompt para un anuncio de “Cursor Agent Skills” que incluye reglas de marca explícitas, efectos typewriter con velocidades concretas y pausas por tarjeta. Ese nivel de detalle es justo lo que convierte un resultado “aceptable” en algo que puedes publicar sin vergüenza.

La galería se actualiza con envíos de la comunidad, así que el catálogo crece cada semana. Si consigues un resultado que te gusta, puedes enviar tu propio prompt para que otros se inspiren.

El sistema de animaciones que marca la diferencia ¶

En los foros de Reddit y Hacker News se repite un patrón entre quienes consiguen resultados más profesionales: no dejan que la IA improvise las animaciones.

Lo que funciona es definir un sistema de movimiento cerrado. Dos o tres tipos de spring() con parámetros concretos, dos o tres interpolate() para opacidad, posición y escala. Y prohibir cualquier animación fuera de ese sistema salvo excepciones justificadas.

Es como tener una guía de estilo, pero para el movimiento. Si cada escena usa un spring distinto y un easing aleatorio, el vídeo parece un PowerPoint con ansiedad. Si todas las entradas comparten los mismos parámetros, el resultado es cohesivo y limpio.

Las transiciones entre escenas también importan. El paquete @remotion/transitions que instalamos antes ofrece presets y un componente <TransitionSeries> que Claude Code puede usar desde el primer commit. La diferencia entre un “corte a negro” y un wipe suave con timing consistente es la diferencia entre amateur y profesional.

El problema del “ojo de diseño” ¶

En Hacker News hay un hilo donde se repite una frase: “Sin ojo de diseño, la IA no te salva”. Y es verdad, pero con matices.

Si tu prompt es “haz algo bonito”, el resultado será genérico. Pero no necesitas ser diseñador para mejorar tus instrucciones. Basta con describir lo que ves en vídeos que te gustan: “quiero un fondo oscuro con letras claras”, “que las transiciones sean suaves, no bruscas”, “que el texto no ocupe toda la pantalla, que respire”.

Con el tiempo irás afinando el vocabulario. Pero la barrera de entrada es baja: describe lo que quieres ver, no cómo se programa.

La IA necesita criterios concretos, pero “concreto” no significa “técnico”. Significa que en lugar de decir “hazlo bonito” dices “quiero algo limpio, con poco texto por pantalla y colores que no cansen la vista”. Eso ya es suficiente para guiar al agente.

🎨 No necesitas ser diseñador. Solo necesitas tener una referencia: busca un vídeo que te guste y describe lo que ves. Eso ya es un brief.

Construye tu propia skill: el siguiente nivel ¶

Si vas a crear vídeos con frecuencia, merece la pena dedicar una hora a montar tu propia skill. No es complicado. Una skill mínima para vídeos de marca necesita tres cosas:

Un fichero BRAND.md con tu paleta de colores, tipografías, logos y prohibiciones (“no usar gradientes”, “no usar glow”, “fondo siempre oscuro”).
Un fichero MOTION.md con tu sistema de animaciones: qué springs usas, qué interpolaciones, qué duraciones tienen tus transiciones, qué easing aplicas.
Una estructura de componentes base: TitleCard, LowerThird, FeatureCallout, CTA. Componentes que ya llevan incorporado tu sistema de movimiento y tu branding.

Por ejemplo, un BRAND.md podría empezar así:

# Marca visual

## Colores
- Primario: #1E293B (slate oscuro)
- Acento: #3B82F6 (azul eléctrico)
- Texto: #F8FAFC (blanco cálido)
- Prohibido: gradientes de más de 2 colores, colores neón

## Tipografía
- Títulos: Inter Bold, 64px mínimo
- Cuerpo: Inter Regular, 32px mínimo
- Máximo 6 palabras por frame

## Animaciones permitidas
- Entrada: spring con damping 14, stiffness 120
- Salida: fade de 10 frames
- Transiciones: slide horizontal, 15 frames

Con eso, cada vez que le digas a Claude Code “crea un vídeo promo para X”, partirá de tus reglas y no de las suyas. El resultado será consistente, reconocible y alineado con tu marca. Sin improvisar cada vez.

En la comunidad ya hay gente compartiendo skills propias que no solo generan Remotion, sino que orquestan todo el flujo: motion graphics + locución + música de fondo. Un “full stack del vídeo” donde el agente entrega algo cercano a un producto publicable.

La skill create-promo-video de alentodorov es un buen ejemplo para estudiar. Su enfoque de analizar el repositorio para inferir branding y luego construir un vídeo con estructura narrativa (hook → problema → solución → CTA) es una plantilla que puedes adaptar a tus necesidades.

Problemas que te vas a encontrar ¶

No todo es un camino de rosas. Estos son los escollos más comunes que se mencionan en foros y guías:

El setup inicial puede dar pereza. Remotion necesita Node.js, un bundler y varias dependencias. El comando npx create-video@latest simplifica mucho el proceso, pero si tu entorno tiene alguna particularidad (versiones de Node incompatibles, permisos, proxies), prepárate para algo de fricción. En Hacker News hay quien menciona que este setup inicial es lo que más echa para atrás a los que prueban Remotion por primera vez.

Las skills instaladas “no se notan”. Si tras instalar las skills Claude Code sigue generando código Remotion genérico, verifica que el contenido existe en .claude/skills/. A veces hay problemas de caché o de versión. Reinstalar con npx skills add remotion-dev/skills suele resolverlo. También comprueba que estás ejecutando Claude Code dentro del directorio del proyecto, no fuera.

El render puede ser lento. Un vídeo de 30 segundos a 1080p no se renderiza al instante. Si necesitas iterar rápido, trabaja con duraciones cortas y resoluciones bajas hasta tener el resultado que buscas. Luego haz el render final en alta calidad. Un truco que comparten en Reddit: durante la fase de iteración, reduce el vídeo a 10 segundos y 720p. Cuando el estilo esté cerrado, amplía la duración y sube la resolución.

Los vídeos largos requieren arquitectura. Para clips de 15-30 segundos, un prompt y unas iteraciones bastan. Pero si quieres algo de varios minutos, necesitas pensar en componentes reutilizables, escenas modulares y un sistema de diseño robusto. No es solo “hazme un vídeo más largo”. En Reddit hay un caso documentado de alguien que produjo 13 minutos de vídeo limpio combinando Remotion y Claude, pero tuvo que organizar el proyecto con un registro de componentes y una arquitectura pensada para escalar.

La IA no es un diseñador. Si tu único feedback es “hazlo más bonito”, el resultado será impredecible. Pero no hace falta hablar como un profesional del vídeo. Basta con ser descriptivo: “quiero más espacio entre las líneas de texto”, “el fondo es demasiado claro”, “la animación de entrada debería venir desde la izquierda”. Cuanto más concreto seas describiendo lo que quieres ver, mejor.

Flujo de trabajo resumido ¶

Para que lo tengas claro, este es el proceso completo en cinco pasos:

Crea el proyecto con npx create-video@latest (template Blank, TailwindCSS sí, Skills sí).
Arranca el Studio con npm run dev para tener preview en tiempo real.
Lanza Claude Code en otra terminal dentro del mismo directorio.
Describe tu vídeo con lo que quieres contar, cuánto debe durar y qué estilo te gustaría. Deja que la IA proponga el storyboard.
Itera en pequeño: pide cambios describiendo lo que quieres ver, pide una versión más dinámica cuando estés listo, y exporta desde el Studio o desde la terminal.

Y cuando estés listo: render a MP4 y a publicar.

No necesitas ser motion designer ¶

Hace unos años, crear un vídeo promocional con animaciones limpias requería After Effects, horas de trabajo y conocimientos específicos. Después llegó Remotion y lo trajo al mundo del código. Ahora, con las skills de IA, ni siquiera necesitas aprender Remotion.

¿Significa esto que los motion designers sobran? Para nada. Un profesional del movimiento y la narrativa visual siempre sacará mejores resultados. Pero para el developer que necesita un vídeo de producto, un clip para redes o una demo animada, esta combinación elimina la barrera de entrada.

No tienes que aprender un framework nuevo. No tienes que pelear con keyframes ni curvas de Bézier. Solo necesitas saber qué quieres contar, describir cómo quieres que se vea y dejar que la IA se encargue de la implementación.

Y aquí viene algo que a mí me parece revelador: con más de 88.000 instalaciones semanales y presencia en Claude Code, Cursor, Gemini CLI, OpenCode y Codex, la skill de Remotion ya no es un experimento. Es una herramienta de producción que miles de developers usan cada semana.

El truco, como siempre, está en dar instrucciones claras. Cuanto más preciso sea tu brief, mejor será el vídeo. Y eso no requiere conocimientos técnicos: requiere criterio y la capacidad de describir lo que imaginas.

Así que la próxima vez que necesites un vídeo y pienses “no sé hacer esto”, recuerda: no necesitas saber. Solo necesitas saber pedirlo.

🚀 La mejor habilidad que puedes desarrollar para trabajar con IA no es técnica. Es saber describir con precisión lo que tienes en la cabeza.

¿Es para ti? ¶

Remotion + IA no es la solución para todo. Antes de lanzarte, conviene saber dónde brilla y dónde se queda corto.

Remotion es para ti si:

Necesitas vídeos promocionales, demos de producto o clips para redes sociales
Quieres resultados reproducibles: el mismo código genera el mismo vídeo, siempre
Te interesa poder parametrizar tus vídeos (cambiar textos, colores o datos y regenerar)
Buscas animaciones de texto, gráficos, datos y motion graphics con un acabado limpio
Tienes Node.js instalado y algo de comodidad con la terminal (aunque sea básica)

Remotion no es para ti si:

Necesitas vídeos con música original o efectos de sonido complejos (Remotion puede reproducir audio, pero no lo genera ni lo compone)
Buscas edición de vídeo tradicional: cortar clips, mezclar grabaciones de cámara, color grading
Quieres resultados tipo “texto a vídeo” con imágenes generadas por IA al estilo Sora o Runway
Tu equipo no tiene acceso a un entorno con Node.js ni a un agente de IA como Claude Code
El vídeo que necesitas es una pieza larga con narrativa compleja, entrevistas o material grabado

En resumen: Remotion con IA es ideal para vídeos cortos, animados y basados en texto o datos donde quieres control total sobre el resultado. Si lo que necesitas es un editor de vídeo, After Effects o DaVinci Resolve siguen siendo tus herramientas.