Nota del autor: Hoy existen dos formas principales de crear videos con un agente de programación: renderizar un MP4 fotograma a fotograma mediante código, o generar una presentación web y grabar la pantalla. En este artículo comparamos cómo funcionan, qué entregan y cuándo conviene usar cada una, además de ofrecer un método de selección en 5 pasos.
Muchos desarrolladores ya están acostumbrados a pedirles a Claude Code, Cursor y Codex que escriban páginas y scripts, pero todavía dudan cuando se trata de pedirle a un agente de programación que haga un video directamente. La pregunta es habitual: si el agente solo escribe código, ¿cómo puede producir un video con ritmo y sonido, listo para publicar? En este artículo presentamos dos caminos: el renderizado fotograma a fotograma mediante código y la grabación de una presentación web, para ayudarte a decidir cuál se adapta mejor a tus necesidades.
Este no es otro artículo introductorio sobre «generar videos con IA en un clic». Ambos caminos se basan en habilidades reales de garden-skills, un conjunto de habilidades de código abierto: motion-showreel se encarga del renderizado fotograma a fotograma mediante código, mientras que web-video-presentation graba presentaciones web. Cada uno tiene flujos de trabajo, puntos de control y entregables bien definidos.
Lo que aprenderás: al terminar, conocerás los principios y límites de ambos caminos, podrás elegir uno para tu proyecto de video en 5 pasos y sabrás cómo configurar un Modelo de Lenguaje Grande adecuado para tu agente de programación.
Las 2 rutas para crear videos con un agente de programación
Esta tabla resume la diferencia entre ambas rutas. En pocas palabras, el renderizado fotograma a fotograma convierte al agente en «director de animación y granja de renderizado»; con la grabación de una presentación web, el agente actúa como «ingeniero de presentaciones» y una persona pulsa el botón de grabar.
| Punto clave | Renderizado fotograma a fotograma con código (motion-showreel) | Grabación de una presentación web (web-video-presentation) |
|---|---|---|
| Principio básico | Página con render(t) determinista que se captura fotograma a fotograma |
Página con Vite + React + TypeScript que se graba mientras se avanza con clics o el teclado |
| Entregable | Video final en MP4 + código fuente editable | Proyecto de presentación web en 16:9 listo para grabar |
| Duración habitual | Videos cortos de 5–60 segundos; videos largos por capítulos de hasta unos 20 minutos | Depende del guion de narración; se avanza por capítulos y pasos |
| Tratamiento del sonido | Imagen, música, efectos y narración comparten una línea de tiempo | Síntesis opcional de audio para la narración; cada paso visual corresponde a un fragmento de narración |
| Ideal para | Videos promocionales de productos, intros de logotipos, tipografía animada y animaciones en bucle | Explicaciones para cursos, conversión de artículos en video, demostraciones de productos y charlas técnicas |
Cómo funciona el renderizado fotograma a fotograma
La clave de motion-showreel es que es «determinista». La página que escribe el agente expone una función render(t) que, para un tiempo t dado, produce siempre el mismo fotograma. El renderizador la invoca y captura la imagen fotograma a fotograma según la velocidad configurada. Como la misma página puede generar imágenes estáticas, hojas de contacto, tableros de estilo en tres direcciones, versiones proxy y versiones maestras, todo parte de una única fuente, desde la propuesta hasta el video final. Así se evita que «la vista previa se vea bien, pero el resultado final no». El desenfoque de movimiento, el sobremuestreo y el grano de película se activan mediante parámetros de renderizado.
En cuanto al sonido, esta ruta sitúa los puntos de corte, los tiempos fuertes y los efectos en una misma línea de tiempo, con valores compartidos. La música se puede sintetizar con el sintetizador integrado sin dependencias o con muestras de piano de Tone.js. También se puede sincronizar con una pista propia y detectar los tiempos y los drops. La narración solo lee el guion proporcionado por el usuario, y las imágenes siguen las marcas de tiempo reales de la voz, no al revés.
Cómo funciona la grabación de una presentación web
web-video-presentation sigue otra idea: tratar el video como una «presentación animada». Usa un escenario fijo de 1920×1080 que se escala según la ventana del navegador para mantener estable la imagen durante la grabación. La presentación se controla con un cursor (chapter, step); cada clic o pulsación avanza un paso visual que corresponde a una frase de la narración.
Esta ruta se parece más al proceso tradicional de «escribir el guion → crear las diapositivas → grabar». La habilidad primero adapta el artículo original como guion de narración y después asigna sus fragmentos a escenas a pantalla completa. Además, se detiene para pedir tu confirmación en varias etapas: el guion, el tema, el esquema, el modo de implementación y el audio opcional. Durante la grabación, los controles de progreso solo aparecen al pasar el cursor sobre ellos, para mantener el escenario despejado.
Comparación de los dos flujos de trabajo: diferencias clave para crear videos con un agente de programación
Si solo miramos el resultado final, ambas rutas parecen similares: las dos generan un archivo de video. Pero, al examinar sus flujos de trabajo, las exigencias para las personas y los modelos son muy diferentes. La siguiente tabla las compara en 8 aspectos.
| Aspecto | Renderizado fotograma a fotograma mediante código | Grabación de pantalla de una presentación web |
|---|---|---|
| Puntos de revisión humana | 2: confirmar los requisitos y el fotograma de estilo | 5: guion, tema, esquema, modo de implementación y audio opcional |
| Recursos de estilo | Biblioteca de 43 estilos (editorial suizo, tinta, synthwave, 3D suave, secuencia de títulos cinematográfica, estilo chino contemporáneo, entre otros) | 23 temas integrados (editorial, terminal, plano de ingeniería, estilo internacional suizo, entre otros) |
| Alcance de la definición de estilo | Apariencia, movimiento, lenguaje de cámara y paleta sonora | Tokens de diseño que controlan colores, fuentes y composición |
| Solución de voz | Gemini / MiniMax TTS, que solo leen el guion del usuario; también se pueden usar grabaciones reales | TTS intercambiable, con MiniMax mmx-cli y OpenAI TTS integrados, además de fragmentos de integración para ElevenLabs, edge-tts, Azure, Google Cloud y say de macOS |
| Música y efectos de sonido | Fuentes independientes, que bajan automáticamente de volumen para dar paso a la voz | Se centra principalmente en la narración, sin especial énfasis en la música de fondo |
| Control de calidad | Dimensiones, tasa de fotogramas, duración, número de fotogramas, fotogramas negros, sonoridad, pico verdadero, continuidad del bucle y determinismo: todo debe obtener PASS | Depende de la vista previa y la revisión humana antes de grabar la pantalla |
| ¿Es necesario grabar la pantalla manualmente? | No, el MP4 se renderiza directamente | Sí, hay que grabar la página web con una herramienta de captura de pantalla |
| Versión actual | v0.1.0 | v1.2.2 |
Hay una decisión de diseño fácil de pasar por alto: motion-showreel separa estrictamente la «validación técnica» del «criterio estético». La primera se basa en requisitos objetivos que una máquina puede comprobar y que deben cumplirse todos; las valoraciones estéticas se dejan en manos del usuario, que toma la decisión final. Esta división evita que el agente pase por alto fotogramas negros o niveles de sonoridad excesivos solo porque «le parece que se ve bien».
La grabación de una presentación web deja más control en manos de las personas. Los 5 puntos de revisión pueden parecer engorrosos, pero son muy útiles para los videos explicativos: la redacción del guion y la división en capítulos son fundamentales para la calidad del contenido, así que conviene que los confirme el propio autor.
Guía rápida para crear videos con agentes de programación
Primer paso: instala las habilidades
Ambas habilidades siguen la especificación SKILL.md y pueden instalarse en entornos como Claude Code, Claude.ai, Cursor, Codex CLI, Gemini CLI y OpenCode. La siguiente tabla muestra los métodos más habituales; basta con introducir los comandos en la terminal o en el chat del agente.
| Método de instalación | Pasos principales | Para quién |
|---|---|---|
| skills CLI | Ejecuta npx skills add ConardLi/garden-skills -s motion-showreel, o sustituye lo que va después de -s por web-video-presentation; añade -a claude-code para especificar el agente |
Usuarios de cualquier agente que quieran instalarlo con una sola línea |
| Mercado de complementos de Claude Code | Ejecuta primero /plugin marketplace add ConardLi/garden-skills y luego instala motion-showreel-skills@garden-skills o presentation-skills@garden-skills |
Usuarios de Claude Code |
| ZIP de una versión concreta en Releases | Descarga el ZIP de la versión correspondiente, verifica su SHA-256 y descomprímelo en .claude/skills/, .agents/skills/ o .codex/skills/ |
Equipos que usan CI, entornos sin conexión o necesitan resultados reproducibles |
| Copia manual | Clona el repositorio y copia el directorio de la habilidad en el directorio de habilidades del proyecto | Desarrolladores que quieran modificar la habilidad |
Segundo paso: prepara el modelo que usará el agente
La mayor parte del trabajo de un agente de programación al crear videos consiste en «escribir código, entender los requisitos y revisar las imágenes». Por eso, lo más importante es la capacidad del modelo para programar y manejar contextos largos. Si tu agente admite interfaces personalizadas, solo tienes que configurar dos parámetros: la clave API y base_url. Para el formato compatible con OpenAI, puedes usar https://api.apiyi.com/v1 como base_url. Para la dirección de conexión y los parámetros concretos del formato Anthropic, consulta el centro de documentación de APIYI en docs.apiyi.com.
Tercer paso: empieza con una solicitud clara
Dar toda la información clave desde el principio reduce las rondas de aclaraciones. En el renderizado fotograma a fotograma mediante código, la habilidad te pedirá confirmar el tema, la duración, el formato horizontal o vertical, las fuentes de música y efectos de sonido, y el tipo de narración. Para grabar una presentación web, tendrás que proporcionar el artículo o guion original y una división aproximada en capítulos.
- Ejemplo de solicitud para renderizar fotograma a fotograma mediante código: Crear un video de producto de 30 segundos en formato horizontal para una herramienta de desarrollo, con estilo synthwave, música del sintetizador integrado y sin narración.
- Ejemplo de solicitud para grabar una presentación web: Convertir un artículo técnico en un video explicativo de 8 minutos, con estética de plano de ingeniería y narración en chino.
🚀 Inicio rápido: Si aún no has configurado una interfaz de modelo para tu agente, puedes registrarte en APIYI apiyi.com y obtener crédito de prueba. La plataforma es compatible con los formatos de interfaz de OpenAI y Anthropic, por lo que puedes conectar tanto agentes como Claude Code como scripts propios. Así puedes probar primero con un video corto antes de decidir cómo continuar.
Cuarto paso: toma las decisiones clave en los puntos de revisión
En el renderizado fotograma a fotograma mediante código, si no has especificado un estilo, durante la fase de fotogramas de estilo se propondrán tres opciones claramente distintas. Es el momento más económico para decidir la estética del video final. En la grabación de una presentación web, la implementación no comienza hasta que se confirma el esquema; ese es el momento en que menos cuesta modificar los capítulos. En ambos casos, conviene concentrar las observaciones principales en los puntos de revisión, en lugar de rehacer el trabajo una vez terminado el video.
Quinto paso: revisión y entrega
El renderizado fotograma a fotograma mediante código entrega un MP4 y el código fuente editable. Conviene conservar el código fuente: si luego quieres cambiar textos o colores, solo tendrás que volver a renderizar. En el caso de la grabación de una presentación web, se entrega el proyecto y tendrás que grabarlo por capítulos con una herramienta de captura de pantalla. Si es necesario, puedes sincronizar en un editor de video el audio generado opcionalmente con TTS y la grabación de pantalla.
Elegir el modelo que impulsa un agente de programación para crear videos
Las dos habilidades no están vinculadas a ningún modelo en particular, pero los resultados dependen en gran medida del Modelo de Lenguaje Grande que impulsa al agente. La siguiente tabla reúne los modelos relevantes disponibles en APIYI. Todos los precios se basan en los datos de la página docs.apiyi.com/models; consulta allí las unidades y condiciones de facturación.
| Modelo | Función en este caso de uso | Precio en APIYI (entrada / salida / caché) | Plataforma disponible |
|---|---|---|---|
| claude-opus-5-5 | Coordinación de animaciones complejas, planificación de capítulos para videos largos y programación principal | $4 / $20 / $0.2 | APIYI apiyi.com |
| claude-sonnet-5-5 | Modelo principal para programación cotidiana, con una buena relación calidad-precio | $2 / $10 / $0.1 | APIYI apiyi.com |
| kimi-k3.1-pro | Reescritura de textos largos como guiones de narración y organización de contenido en chino | $2 / $10 / $0.2 | APIYI apiyi.com |
| deepseek-v4.1-flash | Tareas ligeras, como pequeños cambios por lotes y organización de subtítulos | $0.3 / $1.2 / $0.006 | APIYI apiyi.com |
| gpt-image-2.6-flare / gpt-image-2.6-sunburst | Generación de portadas, imágenes de referencia de estilo y recursos para el video | Entrada de texto $5 / entrada de imagen $8, salida $30 | APIYI apiyi.com |
Hay un detalle importante sobre la síntesis de voz: motion-showreel incluye Gemini y MiniMax TTS, mientras que web-video-presentation incluye MiniMax mmx-cli y OpenAI TTS. Si no encuentras estos modelos TTS en la página de precios de APIYI, significa que todavía no están disponibles en APIYI, aunque esperamos incorporarlos pronto. Mientras tanto, usa directamente el servicio del proveedor correspondiente según la documentación de la habilidad, o elige otra solución TTS compatible. Del mismo modo, la serie 文心 ERNIE aún no está disponible en APIYI; si tu flujo de trabajo depende de ella, tendrás que integrarla por separado.
💰 Consejo para reducir costos: al crear videos, el agente lee repetidamente el mismo brief, las definiciones de estilo y el código del proyecto, por lo que la tasa de aciertos de caché suele ser alta. Elegir un modelo con precio de caché puede reducir considerablemente el costo de las iteraciones. Puedes comparar los modelos uno por uno en la página de precios de APIYI: docs.apiyi.com/models.
Decisión en 5 pasos: qué ruta elegir para crear videos con un Agent de programación
Ya vimos los principios y las herramientas. Ahora resumamos la elección en 5 preguntas: respóndelas en orden para llegar a una conclusión.
- ¿Buscas explicar algo con claridad o causar impacto visual? Si lo principal es transmitir información, elige grabar una presentación web. Si buscas impacto visual, elige renderizar fotograma a fotograma con código.
- ¿Cuánto durará el video? Los clips de hasta 60 segundos se prestan al renderizado fotograma a fotograma; para cursos de más de diez minutos, las grabaciones de presentaciones web son más fáciles de mantener.
- ¿Necesitas sincronización precisa entre audio e imagen? Para editar al ritmo de la música, sincronizar efectos de sonido o crear bucles sin cortes, el renderizado fotograma a fotograma con una línea de tiempo compartida es la opción más fiable.
- ¿Aceptas grabar la pantalla manualmente? Si quieres una producción totalmente automática y que puedas renderizar de nuevo en CI, elige el renderizado fotograma a fotograma. Si prefieres explicar o grabar a tu propio ritmo, la presentación web ofrece más flexibilidad.
- ¿Harás cambios frecuentes después? Ambas rutas conservan el código fuente, pero los cambios de texto en una página web se ven de inmediato; con el renderizado fotograma a fotograma hay que volver a producir el video.
| Escenario típico | Ruta recomendada | Motivo |
|---|---|---|
| Video promocional de 30 segundos para lanzar un producto | Renderizado fotograma a fotograma con código | Amplia biblioteca de estilos, audio e imagen en la misma línea de tiempo y salida directa a MP4 |
| Intro de logo / secuencia de títulos | Renderizado fotograma a fotograma con código | El renderizado determinista garantiza resultados idénticos en cada ejecución |
| Convertir un artículo técnico en un video explicativo | Grabación de una presentación web | Reescritura automática del guion de narración, con un paso por cada momento |
| Capítulos de un curso en línea | Grabación de una presentación web | Tema uniforme, estructura clara de capítulos y mantenimiento sencillo por lección |
| Video corto de balance anual con narración | Renderizado fotograma a fotograma con código | Las imágenes siguen las marcas de tiempo reales de la voz y admite videos largos por capítulos |
| Demostración de funciones de un producto | Grabación de una presentación web | Avance mediante clics y ritmo de demostración controlable |
💡 Consejo para elegir: si tienes dudas, puedes pedirle primero al Agent que cree, a partir de los mismos requisitos, una muestra de video de 15 segundos y una página de presentación. Después, compara la calidad de los resultados y el costo de iteración. Con APIYI apiyi.com puedes usar la misma clave para cambiar entre modelos como Claude, Kimi y DeepSeek, lo que también facilita comparar cómo rinden en tu proyecto.
Preguntas frecuentes (FAQ)
P1: ¿Qué significa «crear videos con agentes de programación»?
Consiste en usar agentes de programación como Claude Code, Cursor o Codex para crear videos mediante código. En lugar de invocar directamente un modelo de generación de video, se organizan las imágenes y el sonido con páginas web, animaciones y scripts de renderizado. Así, el resultado se puede editar y reproducir.
P2: ¿En qué se diferencian el renderizado fotograma a fotograma mediante código y la grabación de una presentación web?
El renderizado fotograma a fotograma mediante código ofrece mejores resultados visuales y de sincronización audiovisual, y produce directamente un MP4, pero es más adecuado para videos cortos. La grabación de una presentación web facilita la estructura de la explicación y el mantenimiento posterior, aunque requiere grabarla manualmente. El primero se parece a un estudio de animación; el segundo, a un proyecto de diapositivas para una presentación.
P3: ¿Qué versiones tienen actualmente estas dos habilidades y qué agentes admiten?
Según el repositorio garden-skills, motion-showreel está en la versión v0.1.0 y web-video-presentation en la v1.2.2. Ambas siguen la especificación SKILL.md y, según la información oficial, se han probado en Claude Code, Claude.ai, Cursor, Codex CLI, Gemini CLI y OpenCode.
P4: ¿Para qué casos resulta más adecuado este enfoque?
– **Marketing de producto**: videos cortos para anticipar un lanzamiento y animaciones que destaquen funciones.
– **Identidad visual de marca**: animaciones de logotipos, secuencias de apertura y cierre, y carteles con tipografía animada.
– **Divulgación**: convertir artículos técnicos en videos explicativos, crear capítulos de cursos o materiales de formación interna.
– **Contenido para desarrolladores**: explicaciones de arquitectura, demostraciones de herramientas y presentaciones de proyectos de código abierto.
P5: ¿Cómo configuro la interfaz del modelo para un agente de programación?
Regístrate en APIYI, en apiyi.com, y crea una clave API. Después, introduce la clave y base_url en el agente o el script. APIYI es compatible con los formatos de interfaz de OpenAI y Anthropic. Consulta las direcciones y los parámetros en el centro de documentación, docs.apiyi.com, y los precios de los modelos en docs.apiyi.com/models.
P6: ¿Puede el agente escribir la narración por su cuenta?
Las dos habilidades tienen enfoques distintos. El TTS de motion-showreel solo lee el guion proporcionado por el usuario, para evitar que el agente escriba el texto por su cuenta. En cambio, web-video-presentation adapta el artículo original a un guion de narración, pero debes aprobarlo en el punto de revisión del guion. Puedes usar kimi-k3.1-pro o claude-sonnet-5-5 en APIYI para preparar un borrador y revisarlo después.
P7: ¿Qué limitaciones conocidas tienen estas dos opciones?
El renderizado fotograma a fotograma mediante código depende de la captura de cada fotograma en el navegador. Los videos largos tardan más en renderizarse, y los efectos 3D complejos o de partículas aumentan considerablemente el tiempo de renderizado. En la grabación de una presentación web, la calidad final depende de la herramienta de grabación y de la persona que la maneje, por lo que es difícil automatizarla por completo. Además, algunos servicios TTS integrados requieren una activación por separado. Si no encuentras el modelo correspondiente en la página de precios de APIYI, significa que todavía no está disponible.
P8: ¿Se pueden combinar las dos opciones?
Sí, y es bastante habitual. Por ejemplo, puedes usar el renderizado fotograma a fotograma mediante código para crear una apertura de 10 segundos y las transiciones entre capítulos, y grabar una presentación web para la explicación principal. Después, puedes unir todo en un programa de edición. Como ambas opciones se basan en tecnologías web, pueden compartir las mismas pautas de diseño para colores y tipografías.
Puntos clave para crear videos con agentes de programación
- Son dos rutas distintas: el renderizado fotograma a fotograma genera un MP4 directamente; una presentación web requiere grabar la pantalla de forma manual.
- El renderizado fotograma a fotograma depende de la reproducibilidad: una misma página
render(t)genera tanto la vista previa como la versión final. - La presentación web depende de la estructura: cada paso visual corresponde a una frase de la narración, por lo que funciona bien para explicaciones largas.
- Los puntos de revisión determinan la calidad: usar 2 o 5 puntos de revisión corresponde, respectivamente, a priorizar lo visual o el contenido.
- La validación técnica va aparte de la estética: todos los criterios objetivos, como fotogramas negros, sonoridad y número de fotogramas, deben obtener PASS.
- La elección del modelo afecta al costo: los modelos pueden usarse desde una interfaz unificada en APIYI; consulta los precios vigentes en docs.apiyi.com/models.
Resumen
A la hora de crear videos con un agente de programación, la clave no es si se puede hacer, sino elegir la ruta adecuada:
- Renderizado fotograma a fotograma con código: ideal para videos cortos, introducciones y piezas visuales de ritmo marcado. Sincroniza audio e imagen y genera el video final directamente.
- Grabación de una presentación web: ideal para explicaciones, cursos y videos basados en artículos. Ofrece una estructura clara y facilita el mantenimiento.
- Decisión en 5 pasos: evalúa, en este orden, el objetivo del contenido, la duración, la sincronización de audio e imagen, si aceptas grabar la pantalla y la frecuencia de los cambios.
Conviene probar primero todo el flujo con una muestra de 15 segundos y después ampliarlo al proyecto completo. Para los modelos, puedes usar APIYI apiyi.com como punto de acceso unificado a Claude, Kimi, DeepSeek y la familia de modelos GPT Image. La interfaz es compatible con los formatos de OpenAI y Anthropic; consulta los precios vigentes en la página de precios.
📚 Referencias
- GitHub – garden-skills: repositorio de las habilidades motion-showreel y web-video-presentation
- Enlace:
github.com/ConardLi/garden-skills -
Descripción: incluye el README, el archivo SKILL.md y las instrucciones de instalación de ambas habilidades
-
Especificación de Agent Skills: descripción del formato SKILL.md
- Enlace:
agentskills.io -
Descripción: explica la estructura de directorios de las habilidades y cómo los agentes las cargan según sea necesario
-
Centro de documentación de APIYI: instrucciones para conectar con la API
- Enlace:
docs.apiyi.com -
Descripción: parámetros de conexión compatibles con los formatos de OpenAI y Anthropic
-
Página de precios de modelos de APIYI: tarifas reales de cada modelo
- Enlace:
docs.apiyi.com/models - Descripción: todos los datos de precios de este artículo se basan en esta página
Autor: equipo técnico de APIYI
Contacto técnico: puedes contactarnos desde la página principal de APIYI. Para más información sobre la integración, visita el centro de documentación en docs.apiyi.com
