Cómo creé un video de motion graphics profesional con Claude Code + Remotion (sin edición)

AAndy Lo
Computing/SoftwareSmall Business/StartupsPhotography/ArtInternet Technology

Transcript

00:00:00Echen un vistazo a este video explicativo que creamos.
00:00:02Marte, el planeta rojo, un mundo que ha cautivado a la humanidad durante siglos.
00:00:08Es el cuarto planeta desde el sol, situado justo después de la Tierra en nuestro sistema solar.
00:00:14Esto no fue editado en After Effects.
00:00:16No tocamos los fotogramas clave y no animamos nada a mano.
00:00:21Claude utilizó la nueva habilidad Remotion Agent, lo construyó y lo renderizó por nosotros.
00:00:26El movimiento, los tiempos, todo, se hizo simplemente mediante prompts.
00:00:30Pero primero, las habilidades de Claude.
00:00:33Si han estado siguiendo la IA últimamente, las habilidades de Claude son el tema del momento.
00:00:38Todo el mundo habla de ellas, pero esto es lo que son en realidad.
00:00:43Manuales de instrucciones que enseñan a Claude a dominar herramientas y flujos de trabajo específicos.
00:00:49Son paquetes de conocimientos especializados que transforman a Claude de un asistente general...
00:00:54...en un experto en dominios como producción de video, análisis de datos o automatización.
00:01:00Y cuando combinas habilidades con Claude Code y la herramienta de codificación de Anthropic...
00:01:05...desbloqueas algo muy potente.
00:01:07Y ahora, Remotion.
00:01:09Es un framework que permite crear videos usando código de React,
00:01:13la misma tecnología que impulsa los sitios web modernos.
00:01:15Pero aquí está el problema.
00:01:16Remotion es increíblemente potente, pero complejo.
00:01:20Necesitas entender React, librerías de animación, funciones de tiempo y renderizado de video.
00:01:26Es una herramienta de desarrollo que ha estado fuera del alcance de la mayoría.
00:01:30Por eso, esta habilidad de Remotion Agent cambia las reglas del juego.
00:01:33Le da a Claude un conocimiento profundo de todo el framework de Remotion,
00:01:37como estructurar composiciones, coreografiar animaciones,
00:01:41gestionar tiempos, manejar activos, todo.
00:01:45Así que, en lugar de que Claude adivine el código de video, ahora entiende el framework...
00:01:50...como un desarrollador experto en Remotion.
00:01:53Es la misma configuración que los desarrolladores ya usan para generar videos automáticamente.
00:01:58Y al final de este video,
00:02:00podrán dirigir gráficos en movimiento profesionales mediante prompts.
00:02:04Así que, empecemos.
00:02:05Primero, necesitamos instalar la habilidad de Claude para Remotion.
00:02:08Para ello, vamos a escribir este comando aquí.
00:02:11Pueden encontrar este comando en la herramienta del sitio web de Remotion.
00:02:14Y seleccionaremos todos estos modelos de la lista pulsando espacio y luego enter.
00:02:19Cuando la habilidad de Claude esté instalada en el proyecto,
00:02:22abriremos la terminal de Claude Code y le pediremos que inicie un nuevo proyecto de Remotion.
00:02:28Esperemos a que termine la configuración.
00:02:30Ya ha terminado de configurar el proyecto y la plantilla.
00:02:38Simplemente sigan estas instrucciones para lanzar el Remotion Studio.
00:02:42Y veamos qué aspecto tiene. Genial.
00:02:45Así es como se ve Remotion.
00:02:46Es como una app de edición de video, pero programas cada escena.
00:02:51Ahora que tenemos el proyecto instalado y ya saben cómo se ve Remotion,
00:02:56pasemos al desarrollo.
00:02:59Nuestro desarrollo tiene nueve fases.
00:03:02Las fases 1 a 3 establecerán los sistemas donde opera Claude.
00:03:07Las fases 4 a 7 crean los activos y definen los componentes utilizables.
00:03:13Y las fases 8 a 9 son la ejecución.
00:03:16Dicho esto, procedamos.
00:03:19Primero, por supuesto, la fase 1.
00:03:21Ahora que ya lo hemos instalado todo,
00:03:25abramos esta guía de construcción que hicimos específicamente para este video.
00:03:29Y aunque esta guía es para desarrollar el video específico que queremos hacer,
00:03:35también pueden adaptarla y usarla para crear otros videos que deseen,
00:03:39una vez que entiendan cómo funcionan estos prompts.
00:03:42Si quieren una copia de este prompt,
00:03:44pueden consultar nuestra comunidad gratuita donde subimos guías como esta.
00:03:48Así ustedes también podrán construir con IA.
00:03:51Copiemos el prompt de la fase 1 y peguémoslo en Claude Code.
00:03:56Y luego pulsamos enter.
00:03:57Lo que hace este prompt es establecer una base técnica...
00:04:02...que Claude debe seguir a lo largo del desarrollo.
00:04:06Pueden pensar en ello como reglas y patrones que debe seguir.
00:04:09Esto es muy importante porque la mayoría de los proyectos fallan,
00:04:13no porque la gente carezca de dirección visual,
00:04:16sino porque no se le dan reglas concretas a la IA y termina haciendo lo que quiere.
00:04:23Una vez terminada la fase 1, así es como se verá.
00:04:27Y se creará un archivo markdown de desarrollo.
00:04:31Claude ha terminado de sentar las bases.
00:04:34Así que ahora podemos pasar a la siguiente fase, la fase 2.
00:04:37Ahora vamos a establecer la dirección de arte y el sistema visual para este video.
00:04:42Este es un paso realmente importante en el flujo de trabajo.
00:04:46Hasta ahora, hemos configurado el entorno y nos hemos asegurado de que Claude entienda Remotion.
00:04:52Lo que estamos haciendo aquí es decirle a Claude cómo pensar visualmente antes de escribir código real.
00:05:00Abran de nuevo la guía de construcción.
00:05:03Verán una sección etiquetada como fase 2.
00:05:05Pueden copiar el prompt completo exactamente como está.
00:05:10Y luego vuelvan a Claude Code en su terminal.
00:05:15Peguen el prompt y pulsen enter.
00:05:17Y dejen que Claude se encargue por un momento.
00:05:21Quiero hacer una pausa aquí y explicar por qué este prompt es tan importante.
00:05:25Porque aquí es donde mucha gente se adelanta o intenta controlar demasiado las cosas.
00:05:30Este prompt no le pide a Claude que construya el video completo todavía.
00:05:35Lo que está haciendo es establecer un pensamiento sistémico.
00:05:39Estamos definiendo las reglas del mundo sobre el que Claude va a construir.
00:05:43Piénsenlo como dirección creativa, no como instrucciones.
00:05:46Le decimos a Claude cosas como el tono general, las restricciones visuales,
00:05:52cómo debe sentirse el movimiento y cómo tomar decisiones de diseño cuando algo no esté definido.
00:06:00Esto es vital porque nunca vamos a describir cada píxel de este video, ¿verdad?
00:06:07Eso sería imposible.
00:06:08Pero al mismo tiempo, no queremos que Claude adivine al azar o invente patrones que no encajen.
00:06:15Este prompt crea control sin microgestión.
00:06:19Y le da a Claude un marco de referencia en el cual operar.
00:06:22En lugar de adivinar qué significa "limpio" o "moderno", tiene una definición compartida con nosotros.
00:06:29En lugar de alucinar, ahora tiene tanto la habilidad técnica...
00:06:33...como los límites creativos para trabajar correctamente.
00:06:36Pulsamos enter y esperamos a que Claude lo procese.
00:06:39Bien, una vez que Claude termine, verán que ha creado un archivo de dirección de arte,
00:06:44detallando cómo debe razonar y ejecutar futuras decisiones.
00:06:48Al llegar al desarrollo real, no teman iterar en esta parte.
00:06:55Quieren que su proyecto tenga la dirección de arte que desean.
00:06:58Así que es posible que tengan que pedirle a Claude que cambie o añada cosas.
00:07:02Y así, hemos desbloqueado la siguiente fase del flujo de trabajo.
00:07:07Ahora tenemos un lenguaje visual compartido entre ustedes y la IA.
00:07:12Claude sabe cómo pensar en este video antes de escribir una composición o secuencia.
00:07:18Y eso es un gran avance.
00:07:19Llegados a este punto, hemos establecido con éxito la dirección de arte y el control visual.
00:07:24Aún no hemos construido el video.
00:07:26Pero hemos sentado las bases para que la construcción real sea predecible y profesional.
00:07:31Con la dirección de arte fijada, lo siguiente es elaborar la historia del video.
00:07:37Este paso finaliza el sistema que necesitamos.
00:07:40Pasamos de cómo debe sentirse el video a lo que sucede realmente momento a momento.
00:07:47El objetivo aquí es muy sencillo.
00:07:49Definir las escenas, el flujo y el tiempo,
00:07:52para que el video tenga sentido antes de animar nada.
00:07:56Volvamos a la guía de construcción y busquemos el prompt de la fase 3.
00:08:02Copiamos todo el contenido.
00:08:03Una vez lo tengan, vuelvan a Claude Code.
00:08:08Peguen el prompt y pulsen enter.
00:08:10Y ahora esperamos a que Claude lo procese.
00:08:13Claude toma la dirección de arte definida antes y la usa para crear una línea de tiempo.
00:08:18Decide cuántas escenas necesitamos, de qué es responsable cada una,
00:08:23y cuánto tiempo debe permanecer cada momento en pantalla.
00:08:27Esto es lo que nos permite construir un video de 10 o 60 segundos...
00:08:32...que se sienta intencionado en lugar de apresurado o aleatorio.
00:08:36Cuando Claude termine, verán un desglose del video en escenas.
00:08:40Cada escena tiene un papel claro.
00:08:43Suele haber un gancho inicial, el mensaje principal, momentos de apoyo y un cierre, ¿verdad?
00:08:52Esto es, efectivamente, un guion gráfico, solo que redactado.
00:08:56Es como un storyboard, pero escrito en texto en lugar de imágenes.
00:09:02En este punto, pueden pedirle a Claude que ajuste cosas.
00:09:05Si una escena no encaja con lo que quieren crear, simplemente díganlo.
00:09:10Si quieren reordenar secciones o eliminar una, este es el momento.
00:09:15Aquí es donde otra gente se queda atascada,
00:09:17pensando que tienen que aceptar el primer resultado.
00:09:20En realidad, no es así.
00:09:21Trátenlo como un borrador colaborativo.
00:09:25Y eso es todo.
00:09:27En este caso, la estructura parece sólida, ¿cierto?
00:09:30El ritmo tiene sentido, las escenas fluyen lógicamente y se ajusta a la duración buscada.
00:09:37Así que, en lugar de seguir iterando, le daremos a Claude la señal de salida.
00:09:41Solo tienen que decirle a Claude que proceda...
00:09:45...y cree el archivo del guion gráfico basado en esta estructura.
00:09:48Al hacerlo, Claude generará un archivo dedicado...
00:09:52...que representa la línea de tiempo completa del video.
00:09:55Este archivo se convierte en la única fuente de verdad de lo que vamos a construir.
00:10:00Y así, ya tenemos la historia del video confirmada.
00:10:04Sabemos qué pasa, cuándo pasa y por qué existe.
00:10:08Aún no hay nada animado, pero la decisión creativa más difícil ya está tomada.
00:10:13Con el guion gráfico listo, pasamos a la fase 4,
00:10:18que consiste en definir nuestro inventario de activos.
00:10:20Este es uno de esos pasos que pueden parecer opcionales al principio,
00:10:24pero es crítico si buscan resultados limpios y consistentes.
00:10:28El objetivo es simple: definir qué activos existen...
00:10:33...y cómo deben verse antes de intentar crearlos, animarlos o colocarlos.
00:10:38Este paso es crucial porque separa las decisiones de diseño de la lógica de la escena.
00:10:44Esa separación es lo que evita que las cosas se rompan más adelante.
00:10:48Y he aquí por qué esto importa.
00:10:50Si le pides a Claude que diseñe un activo, decida cómo debe verse,
00:10:54y determine dónde va en una escena, todo al mismo tiempo,
00:10:59estás acumulando demasiadas decisiones en un solo paso, y ahí es donde falla.
00:11:04Obtienes resultados inconsistentes y deficientes.
00:11:07Volvamos a la guía de construcción y copiemos el prompt de la fase 4.
00:11:11Cuando lo tengan, vuelvan a la terminal de Claude, péguenlo y pulsen enter.
00:11:17Ahora esperamos a que Claude procese.
00:11:19Mientras tanto, les explico qué hace este prompt tras bambalinas.
00:11:24Aún no está creando elementos visuales.
00:11:25Está definiendo los parámetros de diseño para cada activo que necesitaremos.
00:11:29Cosas como los objetos, el uso del color, etc.
00:11:33Un error común es saltarse esto y dejar que cada escena invente sus propios activos.
00:11:39Así es como acabas con un video donde cada escena parece muerta y no se siente cohesiva.
00:11:45Cuando Claude termine, creará un archivo de inventario de activos bien estructurado.
00:11:53Cada activo tendrá un nombre y parámetros definidos.
00:11:57En este punto, no necesitan cambiar mucho a menos que falte algo o sea innecesario.
00:12:04Si quieren añadir o cambiar algo, simplemente pídanselo a Claude.
00:12:10Y así, ya tenemos una lista completa de activos y un sistema de diseño que los rige.
00:12:17Eso significa que cuando Claude empiece a generar componentes de Remotion,
00:12:22no estará adivinando qué aspecto deben tener.
00:12:25Los tomará directamente de este inventario.
00:12:28Con las especificaciones de activos fijadas, podemos pasar a la fase 5,
00:12:33que es la generación de los activos en sí.
00:12:36Ahora produciremos las piezas concretas que se usarán en todo el video.
00:12:42Hasta ahora, hemos estado separando responsabilidades deliberadamente.
00:12:48Primero el sistema, luego la dirección de arte, el guion gráfico y las especificaciones.
00:12:56Este paso convierte esas definiciones en activos reales utilizables sin mezclar tareas,
00:13:04lo que prepara el código de Claude con instrucciones y contexto muy claros.
00:13:10Por eso este método funciona de forma tan fiable.
00:13:13Vamos a verlo paso a paso.
00:13:15Tomemos el prompt de la fase 5 de la guía y peguémoslo en la terminal de Claude.
00:13:20Pero antes de pulsar enter, un detalle importante.
00:13:23Al trabajar en proyectos grandes con muchos activos de diferentes tipos,
00:13:29es buena idea generarlos por lotes según su categoría.
00:13:33Me refiero a añadir una regla al prompt que le diga a Claude...
00:13:37...que genere una categoría de activos a la vez.
00:13:40Esto reduce las posibilidades de que la IA alucine y disminuye el riesgo...
00:13:45...de que Claude confunda estilos entre activos no relacionados.
00:13:49En nuestro caso, este video no tiene un inventario de activos enorme.
00:13:53Así que simplemente generaremos todo de una sola vez.
00:13:57Solo ten en cuenta que a medida que tus proyectos crezcan, el procesamiento por lotes se vuelve una mejor práctica.
00:14:03Muy bien, esta parte suele tardar un poco, así que ten paciencia.
00:14:08Una vez que termine, tómate un momento para revisar el resultado y ver si están todos los activos que necesitas.
00:14:15Normalmente, encontrarás todo en la carpeta SRC.
00:14:20Y así de fácil, ya tenemos un conjunto completo de activos generados y listos para usar.
00:14:25Ya no son solo ideas abstractas.
00:14:28Son bloques de construcción reales que se reutilizarán en las escenas,
00:14:32que es lo que le dará al video la consistencia que buscamos.
00:14:36Con todos nuestros activos listos, el siguiente paso es darles movimiento.
00:14:41Esta es la fase seis, y el objetivo aquí es definir cómo se comporta cada uno de nuestros activos.
00:14:47No son las escenas finales todavía, solo los bloques de movimiento que se reutilizarán en todas partes.
00:14:53Esto es lo que podríamos llamar primitivas de movimiento.
00:14:56Básicamente, estamos creando un lenguaje de movimiento compartido para todo el video.
00:15:01Así que, en la guía de construcción, copia el prompt de la fase seis y pégalo en Claude Code.
00:15:07Ahora, aquí viene un cambio de mentalidad importante.
00:15:10No necesitamos ser muy técnicos en este punto.
00:15:13No estamos listando cada fotograma clave ni describiendo cada animación al detalle.
00:15:18Y la razón por la que podemos hacer esto es por el trabajo previo.
00:15:23Porque en las primeras fases del proyecto, establecimos cómo debe pensar Claude.
00:15:28Definimos reglas de desarrollo, patrones, principios visuales, narrativa,
00:15:33y restricciones de diseño usando todos esos archivos Markdown.
00:15:37Esto le da a Claude una comprensión profunda del estilo, el ritmo y el tono que buscamos.
00:15:44Así que, llegados a este punto, podemos confiar en que evalúe el proyecto en su conjunto
00:15:48y proponga patrones de movimiento lógicos.
00:15:50Una vez pegado el prompt, podemos darle a Enter.
00:15:55Claude empezará a analizar los activos y a generar las primitivas de movimiento.
00:15:58Un error común aquí es intentar controlar demasiado este paso.
00:16:02Si intentas microgestionar el movimiento en esta etapa,
00:16:05terminarás fijando movimientos específicos de una escena en tu sistema de animación.
00:16:10Y eso hará que sea más difícil de reutilizar después.
00:16:13En su lugar, buscamos patrones de movimiento generales y flexibles
00:16:17que se sientan consistentes en todo el video.
00:16:21Ahora bien, eso no significa que Claude lo haga todo perfecto.
00:16:25No pasa nada.
00:16:26Nuestro trabajo no es esperar un movimiento impecable a la primera, ¿verdad?
00:16:31Nuestro trabajo es conseguir una base sólida.
00:16:34Sin duda volveremos a pulir momentos específicos más tarde, cuando veamos los resultados de las escenas.
00:16:39Tras un poco de procesamiento, Claude termina.
00:16:42Y así de rápido, ya tenemos un conjunto de primitivas de movimiento definidas para el proyecto.
00:16:47Estas son reutilizables, consistentes y están alineadas con el sistema visual
00:16:52y narrativo que establecimos anteriormente.
00:16:54Este es un gran hito.
00:16:57Ya tenemos los activos y tenemos el movimiento.
00:17:00Estamos muy cerca de convertir todo esto en un video.
00:17:04Y ahora, las fases 7 y 8.
00:17:06Estas son las partes en las que básicamente lo unimos todo.
00:17:09Es probable que algunas de las cosas que este prompt le pedirá a Claude
00:17:12ya se hayan tenido en cuenta durante las fases iniciales.
00:17:17Aun así, es importante ejecutarlas para crear los componentes necesarios
00:17:22y asegurarnos de que no queden cabos sueltos.
00:17:25Simplemente ejecútalos en la terminal de Claude Code
00:17:28pidiéndole que se salte las cosas que ya ha hecho.
00:17:31Muy bien, ahora que todo eso está terminado,
00:17:34por fin tenemos luz verde para construir las escenas y montar el video, ¿vale?
00:17:40Esta es la fase 9.
00:17:42Y honestamente, esta es la parte más fácil de todo el flujo de trabajo
00:17:46porque todo el pensamiento complejo ya se ha hecho por nosotros.
00:17:50Así que sigamos adelante.
00:17:51En este punto, Claude ya no está adivinando.
00:17:54Está ejecutando dentro de un sistema que configuramos cuidadosamente.
00:17:57Nuestro objetivo aquí es muy sencillo.
00:17:59Generar el código para cada escena.
00:18:02Revisar cómo queda.
00:18:05Y luego ensamblarlo todo en un único video final pulido.
00:18:10Primero, copia el prompt de la fase 9 de la guía de construcción,
00:18:13pégalo en la terminal de Claude y pulsa Enter.
00:18:17Lo que hace este prompt es instruir a Claude
00:18:21para que empiece a construir las escenas animadas reales
00:18:23utilizando todo lo que hemos creado hasta ahora.
00:18:26Aquí se unen la dirección de arte, el guion gráfico, los activos
00:18:29y las primitivas de movimiento.
00:18:32Ahora bien, lo ideal, especialmente para proyectos grandes,
00:18:35es generar las escenas una a una.
00:18:38Y por eso diseñamos el prompt de esa manera.
00:18:41Aunque este video solo dura un minuto y 30 segundos,
00:18:45aprender esta mejor práctica ahora te ahorrará muchos problemas después.
00:18:49Cuando las escenas se generan individualmente,
00:18:52es mucho más fácil depurarlas, iterar
00:18:55y hacer cambios específicos sin romper todo el video.
00:18:59Así que, una vez terminada la escena uno, pasamos a generar el resto.
00:19:04Y cuando termine, querremos ver qué hemos construido.
00:19:08Puedes pedirle a Claude que ejecute Remotion Studio por ti
00:19:10y te dará la URL.
00:19:12O simplemente puedes ejecutar "npm start" en la terminal.
00:19:16Ya estamos dentro de Remotion Studio, vamos a darle a reproducir.
00:19:21Y enseguida puedes ver que la dirección de arte
00:19:24y el estilo visual son consistentes en cada una de las escenas.
00:19:28Esa es una muy buena señal.
00:19:29Si el video se siente un poco plano, es totalmente normal.
00:19:34Por ahora solo hemos creado las escenas, todavía no hemos
00:19:38montado el video por completo ni pulido las transiciones.
00:19:42Así que, desde aquí, volveremos al código de Claude,
00:19:45plantearemos los problemas observados y le diremos exactamente qué queremos mejorar.
00:19:50Como los parámetros exactos de cómo creemos que deben moverse las escenas.
00:19:56El problema exacto que usemos aquí no es tan importante.
00:19:58Tu resultado podría ser diferente en cada sección respecto al mío.
00:20:04El problema exacto que usemos aquí no es tan importante.
00:20:07Tu resultado podría ser diferente en cada sección comparado con el mío.
00:20:10Y eso también es algo bueno, porque aquí es donde empiezas
00:20:14a desarrollar la habilidad de pulir y depurar tu propio trabajo.
00:20:17Ya no te limitas a seguir prompts.
00:20:20Estás tomando decisiones finales.
00:20:22Y después de hacer eso, revisamos el video de nuevo.
00:20:25Y así, todo se siente más ajustado.
00:20:28El movimiento es más limpio, las transiciones son mejores,
00:20:31y el video por fin empieza a sentirse intencional en lugar de mecánico.
00:20:35Bien, pero no nos vamos a detener aquí.
00:20:37La última capa es la voz en off y la música de fondo.
00:20:41Para esto, usaremos el SDK de ElevenLabs.
00:20:44Haremos esta parte rápido.
00:20:46Ve a la documentación de ElevenLabs.
00:20:49Copia el comando adecuado para tu configuración.
00:20:52Como estamos usando Node.js, usaremos ese.
00:20:56Luego pídele a Claude que ejecute el comando y configure la integración de ElevenLabs para la voz y la música.
00:21:03Claude creará un archivo ENV donde podrás pegar tu clave API de ElevenLabs.
00:21:09Después de eso, puedes pedirle a Claude que genere un guion de voz en off
00:21:13que coincida con el video que has construido.
00:21:16Y una vez que esté todo conectado y listo, veamos el resultado de nuevo.
00:21:20Marte, el planeta rojo, un mundo que ha cautivado a la humanidad durante siglos.
00:21:27Es el cuarto planeta desde el sol, situado justo después de la Tierra en nuestro sistema solar.
00:21:31En su punto más cercano, Marte está a 225 millones de kilómetros de la Tierra.
00:21:37Eso es un viaje de siete meses en nave espacial.
00:21:41Prepara tu paciencia.
00:21:42Marte tiene aproximadamente la mitad del tamaño de la Tierra, un mundo pequeño pero no por ello menos fascinante.
00:21:48Un día en Marte dura casi lo mismo que en la Tierra: 24 horas y 37 minutos.
00:21:54¿Pero un año? Eso toma 687 días terrestres, casi dos de nuestros años.
00:22:01La atmósfera es extremadamente delgada, solo el 1% de la de la Tierra.
00:22:05Sin duda necesitarás un traje espacial.
00:22:07¿Por qué es tan rojo?
00:22:09El óxido de hierro, el herrumbre, cubre la superficie dándole a Marte su color característico.
00:22:15Marte alberga el Monte Olimpo, el volcán más grande del sistema solar,
00:22:19tres veces más alto que el Everest.
00:22:21Y hay agua, congelada en los polos y posiblemente oculta bajo tierra,
00:22:27la clave para la exploración futura.
00:22:29Ya hemos enviado cinco rovers a explorar: Sojourner, Spirit, Opportunity, Curiosity y Perseverance.
00:22:37Un día, los humanos pisarán Marte,
00:22:40construiremos hábitats, plantaremos banderas y lo llamaremos nuestro segundo hogar.
00:22:45¡Marte nos espera!
00:22:46Así es como se ve nuestro video explicativo sobre Marte.
00:22:51Un video explicativo totalmente construido, pulido, limpio y profesional.
00:22:56Hecho a partir de un sistema, no por pura adivinanza.
00:22:59La narrativa fluye, los visuales se ven geniales y las transiciones...
00:23:05La narrativa fluye, los visuales se ven geniales y cada transición funciona de forma muy fluida.
00:23:12Muy bien, alejémonos un segundo para ver lo que acabamos de hacer.
00:23:16Pasamos de una carpeta vacía a un video profesional totalmente renderizado.
00:23:22Sin After Effects, sin línea de tiempo, sin fotogramas clave.
00:23:26Usamos Claude Code, Remotion y Agent Skills como un único sistema.
00:23:32Y dirigimos el resultado en lugar de construir manualmente cada pieza.
00:23:38Ese es un activo real que puedes publicar, enviar e integrar en tu flujo de trabajo hoy mismo.
00:23:44Y esa es la conclusión más importante.
00:23:47El poder no es solo que la IA sea más rápida, sino que estas herramientas funcionan juntas.
00:23:52Cuando Claude Code entiende Remotion y Skills inyecta el conocimiento adecuado en el momento justo,
00:23:59ya no trabajas como un creador en solitario, trabajas como un pequeño equipo.
00:24:05Ese es el cambio de simplemente usar la IA a construir realmente con ella.
00:24:09A partir de aquí, no solo haces videos, estás construyendo sistemas visuales.
00:24:14Puedes ajustar el estilo, cambiar datos, generar nuevas versiones y lanzarlas sin esperar a nadie más.
00:24:21Y esto no reemplaza la creatividad, en realidad la potencia.
00:24:26Una vez que dominas este flujo de trabajo, puedes aplicarlo a demos de productos,
00:24:30clips para redes sociales, trabajos para clientes o cualquier otra cosa que quieras lanzar.
00:24:34Si quieres profundizar más, eso es exactamente lo que hacemos en la comunidad premium de AnyNoCode.
00:24:40Analizamos flujos de trabajo reales como este, te mostramos cómo ganar dinero con la IA,
00:24:46y aprenderás junto a fundadores y constructores profesionales.
00:24:50Además, allí puedes acceder a nuestro curso de diseño web con IA para ayudarte a implementar todo más rápido.
00:24:54Si te ha gustado este video, por favor dale a "me gusta" y suscríbete
00:24:58para más tutoriales como este en el futuro.
00:25:01¡Nos vemos en el próximo!

Key Takeaway

Es posible generar videos de alta calidad técnica y narrativa mediante un sistema de desarrollo basado en código y agentes de IA, transformando el rol del creador de editor manual a director de sistemas visuales.

Highlights

El uso de Claude Code junto con el framework Remotion permite crear videos profesionales de motion graphics sin necesidad de edición manual o After Effects.

Las habilidades de Claude (Skills) actúan como manuales de instrucciones que especializan al asistente en dominios complejos como la producción de video automatizada.

El flujo de trabajo se divide en nueve fases críticas que separan la dirección artística, la lógica de activos y la animación de escenas.

Establecer una base técnica y una dirección de arte previa evita que la IA alucine y garantiza una estética cohesiva en todo el proyecto.

La integración con ElevenLabs permite automatizar también la generación de voces en off y música de fondo sincronizadas con el contenido visual.

El enfoque se centra en dirigir el resultado mediante prompts estratégicos en lugar de construir cada fotograma de forma individual.

Timeline

Introducción y potencial de Remotion Agent

El autor presenta un video explicativo sobre Marte creado íntegramente mediante prompts, destacando que no se utilizó After Effects ni edición manual de fotogramas clave. Explica que Claude utilizó una nueva habilidad llamada Remotion Agent para construir y renderizar el contenido basándose en instrucciones de texto. Se define a las habilidades de Claude como paquetes de conocimientos especializados que transforman al asistente general en un experto técnico. Este enfoque permite desbloquear una potencia significativa cuando se combina con Claude Code, la herramienta de codificación de Anthropic. El video demuestra que el movimiento y los tiempos pueden ser coreografiados de forma profesional mediante la automatización.

El framework Remotion y la instalación de habilidades

Se introduce Remotion como un framework que utiliza código de React para generar videos, una tecnología usualmente reservada para desarrolladores web. El presentador admite que, aunque es potente, Remotion es complejo debido a que requiere conocimientos de librerías de animación y funciones de tiempo. La habilidad Remotion Agent soluciona este problema otorgando a Claude un entendimiento profundo de la estructura de las composiciones y el manejo de activos. Se detalla el proceso de instalación mediante comandos específicos y la selección de modelos dentro de la terminal de Claude Code. Finalmente, se muestra la interfaz de Remotion Studio, donde cada escena se programa en lugar de editarse visualmente.

Fases 1 a 3: Cimientos, Dirección de Arte e Historia

El desarrollo se organiza en un plan de nueve fases, comenzando por establecer la base técnica y las reglas de diseño para evitar fallos comunes en proyectos de IA. En la fase 2, se define la dirección de arte para crear un lenguaje visual compartido, lo que permite el control sin caer en la microgestión. La fase 3 se centra en la narrativa o guion gráfico, definiendo la duración de las escenas y el flujo del mensaje de principio a fin. El autor enfatiza que no se debe aceptar el primer resultado, sino tratar a Claude como un colaborador en un borrador interactivo. Este proceso asegura que el video tenga una intención clara antes de proceder a generar cualquier línea de código de animación.

Fases 4 a 6: Gestión de Activos y Primitivas de Movimiento

La fase 4 consiste en crear un inventario de activos para separar el diseño de la lógica de las escenas, lo que garantiza resultados consistentes y limpios. El autor advierte que intentar diseñar y ubicar elementos simultáneamente suele degradar la calidad del resultado final. En la fase 5 se generan las piezas reales, sugiriendo el procesamiento por lotes para proyectos de gran envergadura para minimizar alucinaciones de la IA. La fase 6 introduce las "primitivas de movimiento", que son patrones de animación reutilizables que definen cómo se comportan los objetos visuales. Al establecer estas reglas de movimiento de forma abstracta, el video mantiene una cohesión dinámica profesional en todas sus partes.

Fases 7 a 9: Construcción de Escenas y Ensamblaje Final

Tras preparar los componentes, se inicia la fase de ejecución donde Claude construye las escenas animadas reales integrando todo el trabajo previo. El proceso recomienda generar las escenas una a una para facilitar la depuración y permitir ajustes específicos sin comprometer el proyecto global. Una vez generadas, se utiliza Remotion Studio para previsualizar el resultado y pulir las transiciones o movimientos que se sientan mecánicos. El autor destaca que en este punto el usuario actúa como un director que toma decisiones finales basándose en el resultado visual obtenido. Esta etapa de refinamiento es crucial para transformar un producto generado por código en una pieza de comunicación fluida y atractiva.

Integración de Audio, Resultado y Conclusiones

La capa final del video se añade mediante la integración del SDK de ElevenLabs para generar una voz en off profesional y música de fondo. Se muestra el resultado final del video de Marte, que exhibe una narrativa fluida, datos precisos y una estética visual de alto nivel. El autor concluye que el verdadero poder de estas herramientas radica en su capacidad para trabajar juntas como un sistema único y eficiente. Este flujo de trabajo no reemplaza la creatividad, sino que la potencia al permitir que creadores en solitario operen con la capacidad de un equipo de producción. Se invita a los espectadores a explorar más sistemas visuales y a unirse a comunidades de aprendizaje para dominar la construcción con IA.

Community Posts

No posts yet. Be the first to write about this video!

Write about this video