Blog

Cómo convertir a Claude en un director de vídeo con Remotion

Ashley Innocent

Ashley Innocent

23 January 2026

Cómo convertir a Claude en un director de vídeo con Remotion

Remotion acaba de lanzar las Habilidades de Agente (Agent Skills), y esto lo cambia todo para la creación de videos con IA.

npx skills add remotion-dev/skills

Eso es todo. Un comando, y Claude Code se convierte en un experto en creación de videos que entiende el framework de video basado en React de Remotion a la perfección.

¿Qué son las Habilidades de Agente de Remotion?

Las Habilidades de Agente son "manuales de instrucciones" que enseñan a agentes de IA como Claude Code cómo usar correctamente herramientas y frameworks específicos. Las habilidades oficiales de Remotion le dan a Claude un conocimiento profundo de:

Sin estas habilidades, Claude podría generar código Remotion con errores o incorrecto. Con las habilidades, escribe componentes de video con calidad de producción en el primer intento.

💡
¿Quieres construir una API de generación de video? Este tutorial también cubre la creación de endpoints REST para el renderizado de video bajo demanda. Usa Apidog para diseñar, probar y documentar tus APIs de generación de video con pruebas automatizadas y colaboración en tiempo real.
button

Lo Que Construirás

En este tutorial, harás lo siguiente:

En resumen

# 1. Crear un proyecto Remotion
npx create-video@latest my-video && cd my-video

# 2. Instalar Habilidades de Agente (¡el paso clave!)
npx skills add remotion-dev/skills

# 3. Iniciar Claude Code y describir tu video
claude

# 4. Renderizar
npx remotion render <composition-name> out/video.mp4

Ese es todo el flujo de trabajo. Las Habilidades de Agente enseñan a Claude cómo escribir código Remotion adecuado, para que puedas centrarte en describir lo que quieres en lugar de depurar componentes de React.

Requisitos previos

Antes de empezar, asegúrate de tener:

RequisitoVersiónComando de Verificación
Node.js18+node --version
npm o yarnÚltimanpm --version
Claude CodeÚltimaclaude --version
Editor de códigoVS Code recomendado -

También deberías tener:

Paso 1: Instalar Remotion y Crear Tu Proyecto

Primero, crea un nuevo proyecto Remotion usando la CLI oficial.

1.1 Abre tu terminal y ejecuta:

npx create-video@latest my-first-video

1.2 Cuando se te pregunte, selecciona estas opciones:

? ¿Cómo te gustaría nombrar tu proyecto? my-first-video
? Elige una plantilla: blank
? ¿Usar TypeScript? Yes
? ¿Instalar dependencias? Yes

1.3 Navega a tu proyecto:

cd my-first-video

1.4 Verifica la instalación:

npm run dev

Esto abre Remotion Studio en tu navegador en http://localhost:3000. Deberías ver un lienzo en blanco con una línea de tiempo en la parte inferior.

Resultado esperado: Una ventana del navegador con la interfaz de Remotion Studio.

Paso 2: Instalar las Habilidades de Agente de Remotion

Aquí es donde ocurre la magia. Un comando le da a Claude Code un conocimiento de nivel experto de Remotion.

2.1 En el directorio de tu proyecto, ejecuta:

npx skills add remotion-dev/skills

Cuando veas Added skill: remotion mostrado, la instalación fue exitosa.

2.2 ¿Qué acaba de pasar?

El comando añadió una habilidad a .claude/skills/remotion/ en tu proyecto. Esta carpeta contiene SKILL.md—el manual de instrucciones que enseña a Claude cómo escribir código Remotion adecuado.

2.3 Verifica la instalación:

Verifica que el archivo de habilidad existe:

ls .claude/skills/remotion/

Salida esperada:

SKILL.md

2.4 La estructura de tu proyecto ahora se ve así:

my-first-video/
├── .claude/
│   └── skills/
│       └── remotion/
│           └── SKILL.md      # El "cerebro" que enseña Remotion a Claude
├── src/
│   ├── Root.tsx
│   ├── Composition.tsx
│   └── index.ts
├── public/
├── remotion.config.ts
├── package.json
└── tsconfig.json

Consejo profesional: Si la habilidad no es reconocida, ejecuta npx skills add remotion-dev/skills de nuevo o reinicia Claude Code.

Paso 3: Crea Tu Primer Video con Claude Code

Ahora usemos Claude Code para generar un video completo. Abre tu terminal en el directorio del proyecto.

3.1 Inicia Claude Code:

claude

3.2 Describe tu video:

Escribe este prompt a Claude Code:

Crea un video de introducción de 5 segundos para una empresa de tecnología llamada "DevFlow".

Requisitos:
- Resolución: 1920x1080
- Tasa de fotogramas: 30fps
- Fondo: Gradiente oscuro de #1a1a2e a #16213e
- Secuencia de animación:
  1. El texto del logo "DevFlow" aparece gradualmente de opacidad 0 a 1 (fotogramas 0-30)
  2. El logo se agranda ligeramente con un efecto de rebote (fotogramas 15-45)
  3. El eslogan "Build faster. Ship smarter." aparece gradualmente debajo (fotogramas 45-90)
  4. Todo se mantiene durante los fotogramas restantes

Usa tipografía moderna y limpia con la familia de fuentes Inter.

3.3 Claude Code genera los archivos:

Claude Code creará o modificará estos archivos:

src/Root.tsx - Definición de composición:

import React from 'react';
import { Composition } from 'remotion';
import { DevFlowIntro } from './DevFlowIntro';

export const RemotionRoot: React.FC = () => {
  return (
    <>
      <Composition
        id="devflow-intro"
        component={DevFlowIntro}
        durationInFrames={150}
        fps={30}
        width={1920}
        height={1080}
      />
    </>
  );
};

src/DevFlowIntro.tsx - Componente de video principal:

import React from 'react';
import {
  AbsoluteFill,
  useCurrentFrame,
  interpolate,
  spring,
  useVideoConfig,
} from 'remotion';

export const DevFlowIntro: React.FC = () => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  // Logo fade in (frames 0-30)
  const logoOpacity = interpolate(frame, [0, 30], [0, 1], {
    extrapolateRight: 'clamp',
  });

  // Logo bounce scale (frames 15-45)
  const logoScale = spring({
    frame: frame - 15,
    fps,
    from: 1,
    to: 1.1,
    config: {
      damping: 10,
      stiffness: 100,
    },
  });

  // Tagline fade in (frames 45-90)
  const taglineOpacity = interpolate(frame, [45, 90], [0, 1], {
    extrapolateLeft: 'clamp',
    extrapolateRight: 'clamp',
  });

  return (
    <AbsoluteFill
      style={{
        background: 'linear-gradient(135deg, #1a1a2e 0%, #16213e 100%)',
        justifyContent: 'center',
        alignItems: 'center',
        fontFamily: 'Inter, sans-serif',
      }}
    >
      <div style={{ textAlign: 'center' }}>
        <h1
          style={{
            fontSize: 120,
            fontWeight: 700,
            color: 'white',
            margin: 0,
            opacity: logoOpacity,
            transform: `scale(${frame >= 15 ? logoScale : 1})`,
          }}
        >
          DevFlow
        </h1>

        <p
          style={{
            fontSize: 36,
            color: 'rgba(255, 255, 255, 0.8)',
            marginTop: 24,
            opacity: taglineOpacity,
            fontWeight: 400,
          }}
        >
          Build faster. Ship smarter.
        </p>
      </div>
    </AbsoluteFill>
  );
};

3.4 Previsualiza tu video:

Si Remotion Studio no está ejecutándose, inícialo:

npm run dev

Selecciona "devflow-intro" del menú desplegable de composición. Usa la línea de tiempo para navegar por tu video y previsualizar las animaciones.

Resultado esperado: Tu video de introducción reproduciéndose con las animaciones de aparición gradual del logo y el eslogan.

Paso 4: Refina Tu Video con Prompts de Seguimiento

El poder de Claude Code es el refinamiento iterativo. Mejoremos nuestro video.

4.1 Añade un efecto de fondo de partículas y cambia el esquema de color

Añade un sutil fondo de partículas animado con pequeños puntos blancos
que flotan lentamente hacia arriba. Mantenlo minimalista - alrededor de 20-30 partículas,
muy baja opacidad (0.1-0.2), y movimiento lento.
Cambia el gradiente a un tema azul-púrpura:
- Color inicial: #0f0c29
- Color intermedio: #302b63
- Color final: #24243e
Hazlo un gradiente de 3 paradas.

4.3 Añade una señal de efecto de sonido (opcional):

Añade un comentario de marcador donde un efecto de sonido de "silbido" debería reproducirse
cuando el logo rebote. Añadiré el audio más tarde.

Cada vez que das retroalimentación, Claude Code modifica el código relevante y puedes previsualizar los cambios inmediatamente en Remotion Studio.

Paso 5: Añade Contenido Dinámico con Props

Haz tu video reutilizable aceptando props dinámicos. Esto te permite generar múltiples videos con contenido diferente.

5.1 Pide a Claude Code que añada props:

Refactoriza el video para que acepte estas props:
- companyName (string) - reemplaza "DevFlow"
- tagline (string) - reemplaza el texto del eslogan
- primaryColor (string) - color principal del gradiente
- secondaryColor (string) - color secundario del gradiente

También añade validación de esquema Zod para la seguridad de tipos.

5.2 Claude Code genera el esquema:

src/DevFlowIntro.tsx (actualizado):

import { z } from 'zod';

export const introSchema = z.object({
  companyName: z.string().default('DevFlow'),
  tagline: z.string().default('Build faster. Ship smarter.'),
  primaryColor: z.string().default('#0f0c29'),
  secondaryColor: z.string().default('#24243e'),
});

type IntroProps = z.infer<typeof introSchema>;

export const DevFlowIntro: React.FC<IntroProps> = ({
  companyName,
  tagline,
  primaryColor,
  secondaryColor,
}) => {
  // ... el componente usa estas props
};

src/Root.tsx (actualizado):

import { Composition } from 'remotion';
import { DevFlowIntro, introSchema } from './DevFlowIntro';

export const RemotionRoot: React.FC = () => {
  return (
    <>
      <Composition
        id="company-intro"
        component={DevFlowIntro}
        durationInFrames={150}
        fps={30}
        width={1920}
        height={1080}
        schema={introSchema}
        defaultProps={{
          companyName: 'DevFlow',
          tagline: 'Build faster. Ship smarter.',
          primaryColor: '#0f0c29',
          secondaryColor: '#24243e',
        }}
      />
    </>
  );
};

5.3 Prueba con diferentes props en Remotion Studio:

En Remotion Studio, haz clic en el panel de Props y modifica los valores:

{
  "companyName": "Apidog",
  "tagline": "Design. Debug. Test. Document.",
  "primaryColor": "#1e3a5f",
  "secondaryColor": "#0d1b2a"
}

La previsualización se actualiza en tiempo real.

Paso 6: Crea un Video Multi-Escena

Construyamos un video más complejo con múltiples escenas.

6.1 Prompt para Claude Code:

Crea un video de demostración de producto de 30 segundos con estas escenas:

Escena 1 (0-5 segundos): Animación de introducción del logo
Escena 2 (5-12 segundos): Muestra de características con 3 iconos apareciendo uno por uno
  - Icono 1: Cohete (Velocidad)
  - Icono 2: Escudo (Seguridad)
  - Icono 3: Gráfico (Análisis)
  Cada icono debe deslizarse desde la izquierda con un desvanecimiento

Escena 3 (12-22 segundos): Maqueta del panel de control del producto
  - Muestra una maqueta simple de la interfaz de usuario
  - Resalta diferentes secciones secuencialmente

Escena 4 (22-30 segundos): Llamada a la acción
  - "Comienza tu prueba gratuita"
  - La URL del sitio web aparece gradualmente

Usa el componente <Sequence> para organizar las escenas.
Duración total: 900 fotogramas a 30fps.

6.2 Claude Code genera la estructura de la escena:

import { Sequence, AbsoluteFill } from 'remotion';
import { LogoIntro } from './scenes/LogoIntro';
import { FeatureShowcase } from './scenes/FeatureShowcase';
import { DashboardMockup } from './scenes/DashboardMockup';
import { CallToAction } from './scenes/CallToAction';

export const ProductDemo: React.FC = () => {
  return (
    <AbsoluteFill style={{ backgroundColor: '#0a0a0a' }}>
      {/* Escena 1: Introducción del Logo (fotogramas 0-150) */}
      <Sequence from={0} durationInFrames={150}>
        <LogoIntro />
      </Sequence>

      {/* Escena 2: Muestra de Características (fotogramas 150-360) */}
      <Sequence from={150} durationInFrames={210}>
        <FeatureShowcase />
      </Sequence>

      {/* Escena 3: Maqueta del Panel de Control (fotogramas 360-660) */}
      <Sequence from={360} durationInFrames={300}>
        <DashboardMockup />
      </Sequence>

      {/* Escena 4: Llamada a la Acción (fotogramas 660-900) */}
      <Sequence from={660} durationInFrames={240}>
        <CallToAction />
      </Sequence>
    </AbsoluteFill>
  );
};

6.3 Claude Code crea componentes de escena individuales:

src/scenes/FeatureShowcase.tsx:

import { useCurrentFrame, interpolate, AbsoluteFill } from 'remotion';

const features = [
  { icon: '🚀', label: 'Speed', delay: 0 },
  { icon: '🛡️', label: 'Security', delay: 30 },
  { icon: '📊', label: 'Analytics', delay: 60 },
];

export const FeatureShowcase: React.FC = () => {
  const frame = useCurrentFrame();

  return (
    <AbsoluteFill
      style={{
        justifyContent: 'center',
        alignItems: 'center',
        gap: 80,
        flexDirection: 'row',
      }}
    >
      {features.map((feature, index) => {
        const slideIn = interpolate(
          frame - feature.delay,
          [0, 30],
          [-100, 0],
          { extrapolateRight: 'clamp', extrapolateLeft: 'clamp' }
        );
        const opacity = interpolate(
          frame - feature.delay,
          [0, 30],
          [0, 1],
          { extrapolateRight: 'clamp', extrapolateLeft: 'clamp' }
        );

        return (
          <div
            key={index}
            style={{
              display: 'flex',
              flexDirection: 'column',
              alignItems: 'center',
              transform: `translateX(${slideIn}px)`,
              opacity,
            }}
          >
            <span style={{ fontSize: 80 }}>{feature.icon}</span>
            <span style={{ fontSize: 24, color: 'white', marginTop: 16 }}>
              {feature.label}
            </span>
          </div>
        );
      })}
    </AbsoluteFill>
  );
};

Paso 7: Añade Audio a Tu Video

7.1 Añade una pista de música de fondo:

Coloca tu archivo de audio en la carpeta public:

public/
└── audio/
    └── background-music.mp3

7.2 Pide a Claude Code que integre el audio:

Añade música de fondo desde public/audio/background-music.mp3
- Aparición gradual durante los primeros 30 fotogramas
- Desvanecimiento durante los últimos 30 fotogramas
- Establece el volumen a 0.5

7.3 Claude Code añade el componente de Audio:

import { Audio, interpolate, useCurrentFrame, useVideoConfig } from 'remotion';
import { staticFile } from 'remotion';

export const ProductDemo: React.FC = () => {
  const frame = useCurrentFrame();
  const { durationInFrames } = useVideoConfig();

  // Aparición/desvanecimiento de audio
  const volume = interpolate(
    frame,
    [0, 30, durationInFrames - 30, durationInFrames],
    [0, 0.5, 0.5, 0],
    { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' }
  );

  return (
    <AbsoluteFill>
      <Audio src={staticFile('audio/background-music.mp3')} volume={volume} />
      {/* ... resto de escenas */}
    </AbsoluteFill>
  );
};

Paso 8: Renderiza Tu Video

Ahora exportemos tu video a un archivo.

8.1 Renderiza desde la línea de comandos:

# Renderiza a MP4 (recomendado para la mayoría de los usos)
npx remotion render company-intro out/company-intro.mp4

# Renderiza con props personalizadas
npx remotion render company-intro out/apidog-intro.mp4 \
  --props='{"companyName":"Apidog","tagline":"Design. Debug. Test. Document."}'

8.2 Opciones de renderizado:

# Alta calidad (más lento)
npx remotion render company-intro out/video.mp4 --crf=18

# Menor calidad (más rápido, archivo más pequeño)
npx remotion render company-intro out/video.mp4 --crf=28

# Renderizar como GIF
npx remotion render company-intro out/video.gif --codec=gif

# Renderizar como WebM
npx remotion render company-intro out/video.webm --codec=vp8

# Renderizar rango de fotogramas específico
npx remotion render company-intro out/preview.mp4 --frames=0-90

8.3 Progreso del renderizado:

Verás una salida como:

ℹ Renderizando fotogramas 0-150
████████████████████████████████████████ 100% | 150/150 fotogramas
✓ Renderizado 150 fotogramas en 12.3s (12.2 fps)
✓ Video codificado en 3.2s
✓ Video guardado en out/company-intro.mp4

Resultado esperado: Un archivo de video renderizado en tu directorio out/.

Paso 9: Escala con Remotion Lambda (Opcional)

Para renderizar videos a escala (cientos o miles), usa Remotion Lambda.

9.1 Instala las dependencias de Lambda:

npm install @remotion/lambda

9.2 Configura las credenciales de AWS:

# Configurar credenciales de AWS
aws configure

# Crear rol de Remotion Lambda
npx remotion lambda policies role

9.3 Despliega tu función Lambda:

# Desplegar la función de renderizado
npx remotion lambda functions deploy

# Desplegar tu sitio de video
npx remotion lambda sites create src/index.ts --site-name=my-videos

9.4 Renderiza vía Lambda:

npx remotion lambda render \
  --function-name=remotion-render \
  --serve-url=https://your-bucket.s3.amazonaws.com/sites/my-videos \
  --composition=company-intro \
  --props='{"companyName":"ClientCo"}'

9.5 Renderizado programático:

import { renderMediaOnLambda } from '@remotion/lambda/client';

const result = await renderMediaOnLambda({
  region: 'us-east-1',
  functionName: 'remotion-render',
  composition: 'company-intro',
  serveUrl: 'https://your-bucket.s3.amazonaws.com/sites/my-videos',
  codec: 'h264',
  inputProps: {
    companyName: 'Apidog',
    tagline: 'Design. Debug. Test. Document.',
  },
});

console.log('URL del video:', result.url);

Paso 10: Construye una API de Generación de Video

Crea un endpoint de API que genere videos bajo demanda.

10.1 Pide a Claude Code que cree un servidor Express:

Crea un servidor API Express.js con estos endpoints:

POST /api/videos/generate
- Acepta: template, props, format
- Dispara un renderizado de Remotion Lambda
- Devuelve: jobId, status

GET /api/videos/status/:jobId
- Devuelve el progreso del renderizado y la URL de descarga cuando esté completo

Incluye manejo de errores adecuado y validación Zod.

10.2 Claude Code genera el servidor:

server/index.ts:

import express from 'express';
import { renderMediaOnLambda, getRenderProgress } from '@remotion/lambda/client';
import { z } from 'zod';

const app = express();
app.use(express.json());

const generateSchema = z.object({
  template: z.enum(['company-intro', 'product-demo']),
  props: z.record(z.unknown()),
  format: z.enum(['mp4', 'webm', 'gif']).default('mp4'),
});

app.post('/api/videos/generate', async (req, res) => {
  try {
    const { template, props, format } = generateSchema.parse(req.body);

    const { renderId, bucketName } = await renderMediaOnLambda({
      region: 'us-east-1',
      functionName: 'remotion-render',
      composition: template,
      serveUrl: process.env.REMOTION_SITE_URL!,
      codec: format === 'gif' ? 'gif' : 'h264',
      inputProps: props,
    });

    res.json({
      jobId: renderId,
      bucketName,
      status: 'processing',
    });
  } catch (error) {
    res.status(400).json({ error: (error as Error).message });
  }
});

app.get('/api/videos/status/:jobId', async (req, res) => {
  const { jobId } = req.params;
  const { bucketName } = req.query;

  const progress = await getRenderProgress({
    renderId: jobId,
    bucketName: bucketName as string,
    region: 'us-east-1',
    functionName: 'remotion-render',
  });

  res.json({
    status: progress.done ? 'completed' : 'processing',
    progress: progress.overallProgress,
    downloadUrl: progress.outputFile,
  });
});

app.listen(3001, () => {
  console.log('API de Video ejecutándose en http://localhost:3001');
});

10.3 Prueba tu API con Apidog:

Usa Apidog para probar tus endpoints de generación de video:

  1. Crea una nueva solicitud a POST /api/videos/generate
  2. Establece el cuerpo:
{
  "template": "company-intro",
  "props": {
    "companyName": "TestCorp",
    "tagline": "Testing made easy"
  },
  "format": "mp4"
}
  1. Envía y verifica que la respuesta contiene un jobId
  2. Consulta el endpoint de estado hasta que status: "completed"

Las funciones de prueba automatizadas de Apidog te ayudan a validar que tu pipeline de generación de video funciona de manera fiable.

Ejemplo Completo: Generador de Videos de Marketing

Aquí tienes un ejemplo completo que puedes usar como plantilla.

Prompt para Claude Code:

Crea un generador de videos de marketing completo con estas características:

1. Plantilla: "social-promo"
   - Duración: 15 segundos (450 fotogramas a 30fps)
   - Resolución: 1080x1080 (cuadrado de Instagram)

2. Escenas:
   - Texto de gancho (0-3s): Texto grande y en negrita que capta la atención
   - Imagen del producto (3-9s): Muestra un producto con efecto Ken Burns
   - Lista de características (9-12s): 3 puntos clave apareciendo secuencialmente
   - CTA (12-15s): "Comprar ahora" con animación pulsante

3. Props:
   - hookText: string
   - productImageUrl: string
   - features: string[] (array de 3 elementos)
   - ctaText: string
   - brandColor: string

4. Incluye atenuación de audio cuando aparece texto

Genera todos los archivos necesarios para que esto funcione.

Claude Code generará una plantilla de video completa y lista para producción que podrás personalizar y renderizar a escala.

Resolución de Problemas Comunes

Problema: "No se puede encontrar el módulo 'remotion'"

# Solución: Reinstalar dependencias
rm -rf node_modules
npm install

Problema: Fuentes no cargan

// Añade la importación de la fuente a tu componente
import { loadFont } from '@remotion/google-fonts/Inter';

const { fontFamily } = loadFont();

// Usar en estilos
style={{ fontFamily }}

Problema: El video se renderiza en negro

Problema: Claude Code no reconoce las habilidades de Remotion

# Reinstala la habilidad
npx skills add remotion-dev/skills

# Verifica que .claude/skills/remotion/SKILL.md existe
ls .claude/skills/remotion/

# Reinicia Claude Code

Problema: Errores de desajuste de versión

# Verifica y actualiza las versiones de Remotion
npx remotion versions

# Esto a menudo soluciona problemas de compatibilidad

¿Construyendo APIs de generación de video? Prueba Apidog gratis para diseñar, probar y documentar tus endpoints. Valida esquemas de solicitud, automatiza escenarios de prueba y asegura que tu pipeline de video maneje los casos extremos con elegancia.

button

Practica el diseño de API en Apidog

Descubre una forma más fácil de construir y usar APIs

Registrarse gratisDescargar