~/codigoagente
Agentes de IA

video-shotcraft: vídeos promocionales de tu producto con Claude Code y Remotion

Si tienes una web o una app y necesitas un vídeo promocional, las opciones habituales son caras (un motion designer o una suscripción a After Effects) o genéricas (plantillas que no se parecen a tu producto). video-shotcraft propone otra vía: una skill para Claude Code y Codex que captura las páginas reales de tu producto, elige planos de una biblioteca de recetas de animación ya afinadas, monta un storyboard, lo anima en Remotion, lo sincroniza con la música, le añade efectos de sonido y te entrega un MP4 de 1920×1080 que puedes seguir editando.

No es un generador de vídeo con IA. Cada fotograma lo dibuja código React a partir de tus capturas y tus textos, así que el texto sale nítido, los colores son los de tu marca y todo es editable. Hemos leído el repositorio completo (commit 1266a3e, del 29 de octubre de 2026) para contarte qué trae, cómo trabaja, qué necesitas y cuánto cuesta de verdad.

Seis planos de la galería de video-shotcraft: barra lateral de una app con cámara inclinada, logotipo que aparece desde la oscuridad, objetivo de cámara giratorio, tarjeta de producto con precio, panel 3D con anotaciones y tarjeta destacada con foco de luz
Seis de los 150 planos de la biblioteca, renderizados con Remotion · [Vincent Wei](https://github.com/Vincentwei1021/video-shotcraft) (Apache-2.0)

Qué es video-shotcraft

  • Repositorio: github.com/Vincentwei1021/video-shotcraft
  • Autor: Wei Yihao (Vincent Wei).
  • Licencia: Apache-2.0, no MIT. En la práctica es igual de permisiva: puedes usarla gratis, modificarla y usarla en trabajos comerciales. Si redistribuyes la skill modificada, conserva el aviso de licencia e indica qué cambiaste. Además incluye una concesión explícita de patentes que MIT no tiene.
  • Popularidad: unas 13.900 estrellas y 1.300 forks a 8 de noviembre de 2026.
  • Formato: carpeta de Agent Skills (SKILL.md en la raíz) y plugin de Claude Code (.claude-plugin/plugin.json). También funciona con Codex.
  • Idioma: el README está en inglés (y en chino, japonés y ruso), pero SKILL.md, el flujo de producción y las 124 fichas de planos están en chino. Al agente le da igual; a ti te importa si quieres editar una regla.

Lo que hay dentro, contado con el código en la mano:

PiezaQué es
`references/shots/`124 fichas de planos ("recetas") en 10 categorías, con 150 variantes en total
`demos/`La implementación en Remotion de cada ficha: 226 archivos `.tsx`
`template/`**Ink Press**, un vídeo promocional completo de 36,2 s listo para cambiarle capturas y textos
`assets/lib/`Componentes reutilizables: cámara 2.5D sobre páginas (`PageCam`), subtítulos, flash de transición, contador de dígitos
`workbench/`**Motion Workbench**, un editor tipo CapCut en el navegador para retocar el vídeo entregado
`assets/scripts/`Captura de páginas con Puppeteer y un buscador de efectos de sonido en Freesound
`jianying-export/`Exportación a un proyecto de JianYing (CapCut China)
`publish/`Publicación opcional en redes sociales vía la API de Upload-Post

La biblioteca de planos: 150 movimientos con nombre

La parte más valiosa del repositorio no es el código, sino el vocabulario. Cada ficha describe un movimiento concreto (cuándo usarlo, duración, nivel de energía, parámetros y "puntos críticos" que no se deben tocar) y apunta a su demo en Remotion. Las categorías son:

CategoríaPlanosEjemplo
Apertura y marca11`text-as-mask`: el producto se ve a través de las letras del título
Cámara13`exploded-view`: la página se inclina en 3D y sus piezas se separan
Transiciones19`card-flock-tumble`: un enjambre de tarjetas forma el titular
Tipografía25`flying-words`: un túnel de palabras que acaba en el lema
Entrada de interfaz22`card-stack`: un abanico de tarjetas que se reparte
Interacción13`palette-theme-ripple`: un cambio de tema que se propaga por la app
Datos9`axis-rescale-shock`: un pico rompe la escala del gráfico
Luz y énfasis23`spotlight-sweep`: un foco encuentra el título
Ritmo8`paparazzi-flash`: tres flashes, tres encuadres, un número
Cierre7`input-morph-assemble`: la caja de chat se convierte en el logo

Todos se pueden ver en movimiento en la galería oficial, donde puedes buscar, filtrar y copiar el nombre del plano. Ese nombre es lo que le pasas al agente: "usa deck-deal-flyin y row-embed para presentar esta función".

Un detalle que nos parece correcto: el archivo references/shots/ATTRIBUTION.md documenta de dónde se estudió cada técnica (promos de ClickUp, Perplexity, Notion, Figma, Raycast y otras, más trabajos publicados en X y Douyin) y aclara que todo se reimplementó desde cero, sin metraje, arte ni marcas de terceros.

Cómo trabaja el agente

Flujo de video-shotcraft en siete pasos: producto, captura de páginas reales, storyboard con fichas de planos, animación en código Remotion, sincronía con el ritmo y diseño de sonido, control de calidad por fotogramas y entrega en MP4, Motion Workbench o borrador de JianYing
El flujo completo, de la web de tu producto al MP4 editable · [Vincent Wei](https://github.com/Vincentwei1021/video-shotcraft) (Apache-2.0)

Cuando le pides "haz un vídeo promocional de mi producto", SKILL.md obliga al agente a hacer primero una revisión de solo lectura del proyecto (qué hace, qué pantallas tiene, qué datos sensibles podrían salir) y a ofrecerte tres modos:

  1. Plantilla Ink Press. La ruta rápida: tus capturas, textos y logo sustituyen a los del vídeo de ejemplo, plano a plano.
  2. Creación libre autónoma. El agente decide dirección visual, planos, storyboard y audio y llega hasta el final sin pararse a preguntar.
  3. Co-creación. El agente te pide confirmación en cada punto clave: resumen del producto, dirección visual, mapa de funciones a planos y storyboard final.

Si nombras la plantilla o planos concretos, se salta la pregunta. Después sigue un flujo de ocho etapas (references/pipeline.md) con reglas que muestran que el autor ha rehecho muchos vídeos:

  • Capturas reales, no interfaces inventadas. Levanta tu servidor local y saca capturas de página completa al doble de resolución, recortes de elementos y un layout.json con las coordenadas de cada elemento. Las animaciones leen ese archivo para saber a dónde volar.
  • La estética sale de tu producto. Antes de animar extrae tipografías, tamaños, espaciados y colores de tu código o de los estilos calculados. Las plantillas solo aportan el movimiento, no la piel.
  • Un movimiento por plano y pausas. Los logos se quedan quietos al menos 1 segundo; los aterrizajes en grupo terminan con 0,5 s de calma.
  • Ritmo con la música. Si eliges música, analiza el BPM y los golpes de bombo y caja con librosa, y comprueba después del render que los cortes caen a 3 fotogramas o menos del golpe.
  • Render determinista. Prohíbe Date.now() y Math.random(); toda aleatoriedad usa semillas fijas, así que el mismo código da el mismo vídeo.
  • Revisión independiente. Antes de entregarte nada, un subagente con contexto limpio revisa el vídeo fotograma a fotograma contra el storyboard y las reglas estéticas de references/aesthetic-rules.md, y cita el número de fotograma de cada fallo.

Motion Workbench: seguir editando sin el agente

Motion Workbench de video-shotcraft: vista previa del vídeo en el centro, panel de propiedades con textos, tamaños y colores a la derecha y línea de tiempo con pistas de transiciones, subtítulos, planos y efectos de sonido
Motion Workbench con el vídeo de ejemplo Ink Press cargado; la interfaz está en chino · [Vincent Wei](https://github.com/Vincentwei1021/video-shotcraft) (Apache-2.0)

Al terminar, la skill abre un editor en el navegador (node workbench/scripts/open.mjs <proyecto>, en http://localhost:5198). El vídeo aparece separado en pistas de planos, transiciones, subtítulos y efectos de sonido, tal como se programó. Puedes cambiar textos, tamaños y colores, mover o recortar clips, acelerarlos y arrastrar cualquiera de los 150 planos de la biblioteca. La exportación usa el mismo Remotion, así que la vista previa y el render coinciden fotograma a fotograma.

Es útil si el cliente pide "cambia esta frase" y no quieres gastar otra sesión del agente. Ten en cuenta que la interfaz está en chino (botones como 导出成片, "exportar vídeo"); el código y la guía del workbench (workbench/GUIDE.md) también.

Cómo instalarlo

Lo más simple es pedírselo al propio agente:

snippettext
Instala esta skill: https://github.com/Vincentwei1021/video-shotcraft

O a mano, clonando y enlazando la carpeta en las skills de Claude Code o Codex:

terminalsh
git clone https://github.com/Vincentwei1021/video-shotcraft.git
cd video-shotcraft
ln -s "$(pwd)" ~/.claude/skills/video-shotcraft
ln -s "$(pwd)" ~/.codex/skills/video-shotcraft

En Windows, en lugar del enlace simbólico copia la carpeta a %USERPROFILE%\.claude\skills\video-shotcraft. El README también menciona npx skills add Vincentwei1021/video-shotcraft; antes de instalar cualquier skill de terceros, escanéala con SkillSpector.

Requisitos:

NecesitasPara qué
Node.js y npmRemotion, la plantilla y el workbench
ffmpeg y ffprobeControles de fotogramas y la revisión final
uvSolo para analizar el ritmo de la música (un script de Python puntual)
PuppeteerSolo para capturar páginas; el script de captura lo instala si falta

Remotion descarga su propio Chrome headless en el primer render. Para probar que todo funciona antes de usar tu producto, renderiza la plantilla:

terminalsh
cd template
npm install
npx remotion still src/index.ts AiflPromo out/qa/f150.png --frame=150
npx remotion render src/index.ts AiflPromo out/promo.mp4

Después le hablas al agente en lenguaje normal, sin comandos:

snippettext
Usa video-shotcraft para hacer un vídeo promocional de mi producto.
Haz un vídeo de lanzamiento de este repo con la plantilla Ink Press.
Diseña un primer plano del producto inspirado en spotlight-hero-card.

Cuánto cuesta usar video-shotcraft

La skill es gratis. Lo que se paga es lo que la rodea:

PiezaPrecio¿Obligatoria?
video-shotcraft0 USD (Apache-2.0)Sí
Agente: Claude Codedesde la suscripción Pro de Claude (20 USD/mes) o pago por tokens en la APIUna de las dos
Agente: Codexincluido en los planes de pago de ChatGPT o por APIUna de las dos
Remotion0 USD para particulares y empresas de hasta 3 empleadosSí
Remotion, licencia de empresa (más de 3 empleados)25 USD por puesto y mes, o 0,01 USD por render con mínimo de 100 USD/mes (precios a octubre de 2026, compruébalos en [remotion.dev/license](https://remotion.dev/license))Solo empresas
Efectos de sonido de Freesound0 USD, sin clave de API; licencias CC0 por defecto o CC BY con atribuciónNo
Música de fondo incluida (5 pistas de Mixkit)0 USD, uso comercial sin atribución (el propio repo pide revisar `bgm-tech-house.mp3`, sin fuente exacta)No
Node, ffmpeg, uv, Puppeteer0 USDSí (uv y Puppeteer según el caso)
Upload-Post para publicar en redesplan gratis de 10 subidas al mes, sin TikTokNo

Las cuentas, según quién seas:

  • Freelance o negocio de hasta 3 personas con Claude Pro: coste extra cero. Es la opción más barata y la que encaja con la mayoría de lectores del blog.
  • Agencia o empresa de más de 3 empleados: súmale la licencia de Remotion, unos 25 USD al mes por cada persona que haga vídeos. Sigue saliendo mucho más barato que encargar un vídeo promo de 30 segundos a un estudio.
  • Si te preocupa el consumo de tokens: empieza por la plantilla Ink Press o pide un solo plano. La creación libre con revisión independiente es el modo que más rondas (y tokens) gasta.

No pudimos medir cuántos tokens consume un vídeo completo en esta revisión.

Lo que no te cuenta el README

Casi toda la documentación está en chino

SKILL.md (unas 22 KB), el pipeline, las reglas estéticas, las 124 fichas y la interfaz del workbench están en chino. El agente lo entiende sin problema y te responde en tu idioma. Los textos que pone en pantalla salen en el idioma que le pidas, pero si quieres ajustar una regla tendrás que traducir esa parte.

Está pensado para macOS

El README dice "probado en macOS; Linux funciona con estas notas". En Linux sin escritorio hay que pasar --concurrency=1 en máquinas de pocos núcleos, usar un binario chrome-headless-shell y, si el CDN de Remotion no responde, --browser-executable=<ruta>. La exportación a JianYing para Windows está marcada como "no probada"; para el resto del flujo, en Windows usa WSL si encuentras problemas.

Formato horizontal por defecto

El entregable es 1920×1080 a 30 fps. Para Reels, TikTok o Shorts necesitas pedir expresamente una versión vertical 9:16; la propia guía de publicación avisa de que en esas redes un vídeo horizontal sale con bandas negras o recortado.

La plantilla trae capturas de demostración

Las capturas de Ink Press vienen de una herramienta interna de gestión de investigación con datos ficticios. Sustitúyelas siempre por las de tu producto, y revisa que ninguna captura muestre datos de clientes, correos o claves. La skill tiene reglas para esto (datos sensibles inventados o anonimizados antes de capturar), pero la responsabilidad final es tuya.

Al final te pide que menciones al autor

Al entregar, la skill te sugiere etiquetar al autor en X, Douyin o Xiaohongshu y enviar tu vídeo a su escaparate. Es voluntario: el vídeo es tuyo y puedes usarlo comercialmente sin atribución.

Lo que no probamos

En esta revisión no ejecutamos la skill ni renderizamos la plantilla: el análisis es de código y documentación. Las tres imágenes del artículo son del propio repositorio.

Preguntas frecuentes

¿Es un generador de vídeo con IA como Sora o Veo? No. No genera píxeles con un modelo: el agente escribe componentes React que Remotion renderiza a partir de tus capturas. Por eso el texto se lee perfecto y puedes editarlo después.

¿Puedo usarlo para vídeos de clientes? Sí. La skill es Apache-2.0, la música incluida es de uso comercial libre y Freesound se filtra por CC0 o CC BY. El único punto a revisar es la licencia de Remotion si tu empresa tiene más de 3 empleados.

¿Funciona con un producto que no es web? El enfoque actual son productos web y de escritorio, porque captura páginas con un navegador. Puedes darle capturas o grabaciones de pantalla de una app móvil, y el componente ClipCard permite usar vídeos como protagonistas de un plano.

¿Qué diferencia hay con Bang Motion o HyperFrames? Bang Motion y HyperFrames producen el vídeo en HTML con GSAP y no necesitan licencia de Remotion. video-shotcraft usa Remotion (React) y aporta una biblioteca de planos con nombre, sincronía con la música y un editor posterior.

¿Necesito saber Remotion? No para usarlo. Sí ayuda si quieres retocar el código de un plano en lugar de usar el workbench.

Conclusión

video-shotcraft es la skill de vídeo más completa que hemos revisado para hacer el vídeo promocional de un producto digital: 150 planos con nombre, reglas de dirección que salen de decenas de rondas de correcciones, revisión independiente antes de la entrega y un editor para los cambios de última hora. Para un freelance o un negocio pequeño con Claude Pro, el coste extra es cero. Si prefieres no depender de Remotion, compara con Bang Motion; si buscas una producción completa con voz e imágenes generadas, mira OpenMontage. Para empezar, abre la galería, elige tres planos que te gusten y pídele al agente que los use con las capturas de tu web.

// código fuente

Repositorio del artículo
El código del que habla este artículo es público: revísalo, dale una estrella o clónalo desde aquí.

// kit para agencias

¿Haces webs para clientes con Claude Code?
5 skills que preparan la propuesta, crean la web, la revisan antes de entregarla y auditan la de tus prospectos, con una guía de 24 páginas probada en un caso real. Lo vende Safe Build Labs, la agencia que patrocina codigoagente.

// implementación

¿Necesitas implementar esta automatización en tu negocio?
No pierdas semanas configurando servidores, APIs y agentes. Safe Build Labs, la agencia que patrocina codigoagente, lo construye por ti, listo para producción.
Probamos webapp-testing, la skill oficial de Anthropic que prueba tu web local con Playwright: instalación, with_server.py, dos trampas reales y cuánto cuesta.
  • Skills para tus agentes
  • Claude Code
leer artículo
Bang Motion es una skill MIT que hace openers, promos y explainers en un solo index.html con GSAP: cómo funciona, cómo instalarla y cuánto cuesta usarla.
  • Skills para tus agentes
  • Claude Code
leer artículo
Agentes de IA

guía · Guía de las skills de Matt Pocock para Claude Code · #14

teach y wait-what de Matt Pocock: lecciones HTML con registro de progreso para aprender con IA, y un comando para que el agente te reexplique.
  • Skills para tus agentes
  • Claude Code
leer artículo