Claude Code y remotion-best-practices para crear videos

Este capítulo explica cómo crear y generar desde cero un proyecto de video promocional de Remotion en local, combinando Claude Code con la skill remotion-best-practices.

Preparación previa

Antes de comenzar, asegúrate de que tu entorno local cumple los siguientes requisitos.

Dependencias	Requisitos de versión	Uso
Node.js	>= 18.0	Ejecutar Remotion y scripts de npm
npm / pnpm	Última versión estable	Gestión de paquetes de dependencias
Claude Code	Última versión	Generación de código asistida por IA y configuración del proyecto
remotion-best-practices	Instalado como skill	Proporciona normas y plantillas para proyectos de Remotion

Instalar Claude Code

El sitio oficial ofrece un script de instalación con un clic; elige el comando correspondiente según tu sistema y ejecútalo.

macOS、Linux、WSL：

curl -fsSL https://claude.ai/install.sh | bash

Windows PowerShell：

irm https://claude.ai/install.ps1 | iex

Windows CMD：

curl -fsSL https://claude.ai/install.cmd -o install.cmd && install.cmd && del install.cmd

Después de la instalación, verifica si se ha realizado correctamente:

$ claude --version
2.1.142 (Claude Code)

La primera ejecución requiere iniciar sesión en la cuenta de Anthropic y autorizar. Si no tienes una cuenta oficial, puedes consultarConfiguración de la API de Claude Code

Instalar la skill remotion-best-practices

Una skill es un paquete de capacidades ampliadas de Claude Code. remotion-best-practices encapsula las mejores prácticas y plantillas de código para proyectos Remotion.

¿Qué es una Skill?

Una skill es, en esencia, un documento de prompt estructurado (SKILL.md). Cuando Claude Code lo lee, obtiene conocimiento especializado y restricciones normativas del ámbito correspondiente.

La skill remotion-best-practices incluye el siguiente contenido:

Módulos de contenido	Descripción
Normas de estructura de directorios del proyecto	Define la estructura de capas estándar de compositions, components y assets
Uso de la API de animación	La forma estándar de escribir interpolate, spring y useCurrentFrame
Mejores prácticas de rendimiento	Normas para evitar renderizados redundantes, precarga de recursos estáticos, etc.
Plantilla de configuración de renderizado	Combinaciones de parámetros recomendadas como codec, fps, resolución, etc.

Método de instalación

En la terminal, entra en el directorio de tu proyecto y ejecuta el comando de instalación:

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

Tras una instalación correcta, puedes verificar que la skill ha sido reconocida:

claude skills list

Puedes ver una sección similar a la siguiente:

Installed skills:
  - remotion-best-practices  (active)

Dirección del código fuente de remotion-best-practices:https://github.com/remotion-dev/skills

Crear un proyecto de Remotion

Una vez completados todos los preparativos, inicia Claude Code en un directorio vacío y usa un Prompt para que monte el proyecto automáticamente.

Iniciar Claude Code y pasarle el Prompt

Podemos crear el directoriovideo-marker, y luego entrar:

mkdir video-marker
cd video-marker

En el directorio del proyecto, ejecuta:

claude

Una vez en la interfaz interactiva, pega el siguiente Prompt:

先读取 remotion-best-practices skill，然后创建一个 Remotion 项目。

目标：6 秒钟的「Hello Ejemplo」好莱坞风格片头视频，1920x1080，30fps.

效果要求：
- 纯黑背景
- "HELLO EJEMPLO" 文字以冲击力方式砸入画面，伴随冲击波扭曲效果
- 撞击瞬间爆发金色粒子
- 强烈的色差闪光（chromatic aberration）
- 文字落定后，绿色（#3A7EC2）轮廓光晕脉冲
- 顶部和底部黑色宽幅遮幅条像电影一样滑入

只需一个 Composition，不用拆分场景。整体质感对标好莱坞大片片头字幕。

Ahora solo espera a que se genere～

Cuando termine, te dirá cómo generar el archivo mp4:

Vista previa en el navegador:

cd hello-ejemplo
npm run dev

Resultado de la previsualización:

Generar mp4:

cd hello-ejemplo
npx remotion render HelloEjemplo out/hello-ejemplo.mp4

Información de exportación:

El video se encuentra en el directorio out:

El Prompt solicita explícitamente que Claude Code lea primero la skill, de modo que el código generado siga estrictamente las normas de remotion-best-practices, en lugar de depender de los hábitos predeterminados del modelo.

Qué hará Claude Code

Después de que Claude Code lea la skill, completará automáticamente los siguientes pasos:

Paso	Acción	Contenido generado
1	Inicializar el proyecto	package.json、tsconfig.json、remotion.config.ts
2	Crear la estructura de directorios	src/compositions、src/components、src/assets
3	Generar componentes Scene	Intro.tsx、FeaturesScene.tsx、StatsScene.tsx、Outro.tsx
4	Generar componentes comunes	TechCard.tsx、AnimatedCounter.tsx、CodeSnippet.tsx
5	Registrar Composition	Completar el ensamblaje de todas las escenas en Root.tsx

Más ejemplos

Ejemplo 1: Animación de conteo numérico

帮我用 Remotion 创建一个 8 秒的视频。背景是深色，画面中央显示一个数字，从 0 逐渐增长到 1,000,000，数字有弹跳动画效果，最后定格时出现"突破百万！"的字样。字体要大，颜色用金黄色。
Claude Code 接到这个指令后会：

Podemos pedirle directamente a la IA en Claude que nos exporte el video:

El video generado:

Ejemplo 2: Cuenta regresiva para el lanzamiento de un producto

用 Remotion 做一个 15 秒的产品发布倒计时视频。从 10 倒数到 0，每个数字出现时有缩放+透明度的过渡动画，背景用黑色，数字用白色大字体，右上角有"NEW"红色徽章。倒计时结束时全屏出现产品名称"CLAUDE PRO"，字体要震撼。

El video generado:

Puntos clave:Cuanto más específico sea el Prompt, mejor. Si describes claramente el tiempo, el color, los efectos y el contenido del texto, Claude Code puede hacerlo bien a la primera, sin necesidad de que lo ajustes repetidamente.

Entender la estructura del proyecto generado

Una vez que el proyecto esté configurado, la estructura de directorios es la siguiente:

hello-ejemplo/
├── package.json
├── tsconfig.json
├── remotion.config.ts
└── src/
    ├── index.ts              ← 入口，注册所有 Composition
    ├── Root.tsx              ← 主 Composition，拼接所有场景
    ├── compositions/
    │   ├── Intro.tsx         ← 开场 Logo 动画
    │   ├── ProblemScene.tsx  ← 问题引入场景
    │   ├── FeaturesScene.tsx ← 技术卡片展示
    │   ├── StatsScene.tsx    ← 数据统计场景
    │   └── Outro.tsx         ← 结尾 CTA
    ├── components/
    │   ├── TechCard.tsx      ← 单个技术卡片
    │   ├── AnimatedCounter.tsx ← 数字滚动
    │   └── CodeSnippet.tsx   ← 代码块动画
    └── assets/
        ├── colors.ts         ← 品牌色常量
        └── logo.svg

Explicación de los archivos principales

Root.tsxEs la entrada de todo el video; todas las escenas se ensamblan aquí en el orden de la línea de tiempo:

Diagrama de estructura de Root.tsx

import "./index.css";
import { Composition } from "remotion";
import { HelloEjemplo } from "./Composition";

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

El componente principal del video, que utiliza Series para ensamblar las escenas en orden:

const MainVideo = () => {
  return (
    <Series>
      <Series.Sequence durationInFrames={90}>   {/* 3秒 */}
        <Intro />
      </Series.Sequence>
      <Series.Sequence durationInFrames={210}>  {/* 7秒 */}
        <FeaturesScene />
      </Series.Sequence>
      <Series.Sequence durationInFrames={450}>  {/* 15秒 */}
        <StatsScene />
      </Series.Sequence>
      <Series.Sequence durationInFrames={300}>  {/* 10秒 */}
        <Outro />
      </Series.Sequence>
    </Series>
  );
};

Instalar dependencias y previsualizar

Cuando Claude Code haya generado el código, instala las dependencias siguiendo sus indicaciones:

npm install

Inicia Remotion Studio para previsualizar el video:

npx remotion studio

> [email protected] studio
> remotion studio

Remotion Studio running at http://localhost:3000

El navegador se abrirá automáticamentehttp://localhost:3000, puedes arrastrar la línea de tiempo para previsualizar el efecto de cada fotograma en tiempo real.

Si durante la previsualización la animación de alguna escena se ve demasiado rápida o demasiado lenta, dile directamente a Claude Code: 'la animación de entrada de las tarjetas en la escena 2 es demasiado rápida, alarga el retraso'. Localizará el código correspondiente y lo modificará.

Ajustes iterativos con Claude Code

Al previsualizar en Remotion Studio, si detectas un problema, puedes describirlo directamente en lenguaje natural en Claude Code sin necesidad de modificar el código manualmente.

Escenarios de ajuste comunes

Descripción del problema	Cómo decírselo a Claude Code
La animación de las tarjetas es demasiado rápida	En FeaturesScene, reduce el spring stiffness de las tarjetas a 80
El color de fondo no es el correcto	Cambia el color de fondo de todas las escenas a #0d1117
El contador de números no es fluido	Usa el easing easeOutCubic en el AnimatedCounter de StatsScene
Quiero añadir una escena	Añade una escena de 10 segundos después de StatsScene que muestre la función de instancia en línea
El tamaño de la fuente del texto es demasiado pequeño	Cambia la tipografía del título principal de Intro.tsx a 96px

Describe el problema directamente en la terminal de Claude Code; este encontrará el archivo correspondiente y lo modificará. Una vez modificado, Remotion Studio se actualizará automáticamente en caliente.

Renderizar el video final

Cuando el resultado sea de tu agrado, renderízalo como archivo MP4:

Comando de renderizado

npx remotion render \
src/index.ts \ # Archivo de entrada
EjemploPromo \ # ID de Composition, consistente con Root.tsx
out/ejemplo-promo.mp4 \ # Ruta de salida
--codec=h264 \ # Formato de codificación, mejor compatibilidad
--width=1920 \ # Ancho de salida
--height=1080 # Alto de salida

Rendering EjemploPromo (1800 frames)
Progress: ████████████████████ 100%
Rendered in 2m 34s → out/ejemplo-promo.mp4

Mejores prácticas de Remotion: deja que la IA te ayude a hacerlo mejor

La velocidad de renderizado depende de la complejidad de la escena y del rendimiento de la máquina. Si el video es largo y tiene muchos efectos, puedes añadir--concurrency=4el parámetro para activar el renderizado paralelo multiproceso, la velocidad puede aumentar de 3 a 4 veces.

En la práctica, hay algunos trucos que pueden mejorar enormemente la calidad de tus videos. Si añades estas instrucciones a tu Prompt, el resultado será notablemente diferente:

🎬 Fotogramas por segundo y dimensiones

Dile a Claude Code a qué plataforma vas a publicar: para Douyin usa1080×1920 vertical, para Bilibili usa1920×1080 horizontal, para WeChat usa1:1 cuadrado。
La tasa de fotogramas (fps) recomendada es30fps(fluido) o60fps(ultra fluido, archivo más grande).

🎞 Ritmo de animación

Usa la función de Remotionspring()para hacer animaciones con elasticidad, es 10 veces más natural que la animación lineal. Di "usar efecto de easing elástico" en el Prompt.
Cuando el texto aparezca letra por letra, dile a Claude que use "retardo stagger", cada letra aparece sucesivamente con intervalos de unos pocos fotogramas.
Añade 0.5 segundos de fundido de entrada y salida al principio y al final del video, se verá más profesional.

🎨 Textura visual

No uses colores sólidos para el fondo, haz que Claude use degradados o texturas de cuadrícula, para mejorar la textura al instante.
Al añadir subtítulos, pon a las letras untext-shadow, el texto blanco es más claro sobre fondo oscuro.
Usa el plugin@remotion/motion-blurpara gráficos de datos, con efecto de desenfoque en movimiento, más parecido a una toma cinematográfica.

⚡ Eficiencia de renderizado

En la fase de desarrollo usanpx remotion previewpara previsualizar, renderiza y exporta solo cuando estés satisfecho, ahorra tiempo.
Si el video es muy largo, haz que Claude active el--concurrencyparámetro de renderizado paralelo, varias veces más rápido.
Para los recursos de imágenes y fuentes usastaticFile()como referencia, evita errores de ruta.

Preguntas frecuentes

Claude Code no ha leído la skill

Si el código generado no cumple con la norma remotion-best-practices, significa que la skill no se leyó correctamente.

Añade esta frase explícitamente al inicio del Prompt:

Forzar la lectura de la skill

Before writing any code, read the remotion-best-practices skill file completely.

Error al iniciar Remotion Studio

La causa común es que la versión de Node.js es demasiado baja. Compruébalo y actualiza:

Actualizar Node.js

# Usar nvm para cambiar a Node.js 20
nvm install 20
nvm use 20

La animación spring() solo muestra el primer fotograma

Esto se debe a que cuando el valor deframe - delayes negativo, spring devuelve 0.

Añade la protección clamp:

Corregir el problema de fotogramas negativos

const scale = spring({
frame: Math.max(0, frame - delay), // Asegurarse de que el valor pasado no sea negativo
fps,
config: { damping: 12, stiffness: 180 },
});

Otras extensiones