Usando Claude Code y Remotion para Crear Videos Demostrativos Sin Habilidades de Diseño

Rompiendo el cuello de botella del vídeo de demostración

Un desarrollador tenía un producto funcional listo para lanzar, pero se enfrentó a un obstáculo común: no tenía vídeos de demostración, ilustraciones ni gráficos en movimiento. Al contactar con diseñadores de motion, recibió presupuestos de entre 300 y 1.000 dólares por vídeo, con plazos de 6 a 10 semanas y solicitudes de archivos Figma y guías de marca que no existían. Esto llevó a meses de procrastinación.

La solución técnica

En un fin de semana, el desarrollador implementó un enfoque completamente diferente:

• Remotion: Framework de generación de vídeos basado en React donde "vídeos como código" significa no tener que arrastrar líneas de tiempo ni menús de exportación, solo JSX y matemáticas.
• Claude Code: Se utilizó para escribir e iterar sobre componentes de vídeo, con habilidades específicas para transiciones de Remotion y diseño frontend.
• Claude Skills: Específicamente remotion-transitions para cortes de escena y frontend-design para ilustraciones.

Flujo de trabajo y resultados

El desarrollador siguió este proceso:

• Ilustraciones de características: Claude Code utilizó la habilidad de ilustración para generar visuales del producto basados en SVG directamente en los componentes de la página de destino, reduciendo lo que le habría llevado a un diseñador días a solo unas horas.
• Reconstrucción de la página de destino: Transformó capturas de pantalla provisionales en secciones de interfaz de usuario animadas y con marca real utilizando el mismo flujo de trabajo.
• Creación de reels: Cada reel en Remotion es un componente de React. Claude Code crea la estructura de la escena, el desarrollador ajusta el tiempo y el texto, y luego exporta. El primer reel tomó ~3 horas, el segundo ~90 minutos, y ahora están por debajo de una hora por reel.

Los resultados fueron inmediatos: miles de visualizaciones en los reels y mensajes directos preguntando si el producto estaba en vivo. El desarrollador señala que no es diseñador ni editor de vídeo y apenas sabía qué era Remotion hace un mes, pero las herramientas le permitieron leer su base de código, comprender el lenguaje visual de su producto y generar componentes de vídeo escena por escena con vista previa instantánea.

Costos totales de producción: $0 (aparte de la suscripción a Claude Code). El desarrollador enfatiza que no está en contra de los diseñadores de motion, pero no puede igualar esta velocidad de iteración con un flujo de trabajo de agencia.