Communitygithub.com

Habilidad de Video a Partir de Capturas de Pantalla

Crea videos promocionales a partir de capturas de pantalla usando plantillas como spotlight, dark launch-film, orbital gallery, kinetic graphics, prismatic folds o page-turn storybook, con texto editable, audio opcional con licencia y paquetes portátiles para edición de escritorio.

¿Qué es Habilidad de Video a Partir de Capturas de Pantalla?

Esta habilidad permite a un agente de IA (como Claude Code, Cursor o Codex) generar videos editables a partir de capturas de pantalla, siguiendo una de seis plantillas predefinidas. Está diseñada para creadores de contenido, desarrolladores y equipos de marketing que necesitan producir rápidamente videos promocionales, de lanzamiento de aplicaciones, o presentaciones tipo flipbook sin salir del entorno de desarrollo. Soporta las plantillas: spotlight (5 capturas, 12s), kinetic (5 capturas, 16s), prism (5 capturas, 18s), orbit (5 capturas, 18s), launch (5 capturas, 20s) y storybook (1-12 capturas, duración configurable). El agente gestiona todo el flujo: inspecciona las capturas, escribe texto explicativo breve, genera la configuración del proyecto, prepara un trabajo aislado en Node.js, renderiza fotogramas de prueba y produce el video final sin intervención manual del usuario. También acepta revisiones en lenguaje natural y puede exportar paquetes portátiles para edición posterior en software como Premiere Pro o DaVinci Resolve. El paquete original tiene licencia MIT, pero Remotion y los medios tienen licencias separadas.

Compatible con~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/simwy/screenshot-motion-skill/tree/HEAD

Preguntar en tu IA favorita

Abre un nuevo chat con esta habilidad de agente ya precargada.

Documentación

¿Qué hace Habilidad de Video a Partir de Capturas de Pantalla?

Produce un video real y editable con una de las seis plantillas implementadas:

PlantillaEfectoCapturasDuración
spotlightCinco tarjetas se despliegan, la captura central se convierte en la heroína, luego la fila vuelveExactamente 512 segundos
kineticTipografía en negrita, pantallas divididas y transiciones gráficasExactamente 516 segundos
prismPantallas en acordeón, revelaciones de vidrio en capas y barridos de luzExactamente 518 segundos
orbitGalería orbital neón, rotación en profundidad y fila finalExactamente 518 segundos
launchPromo editorial oscura con collage, primeros planos de funciones, titulares grandes y CTAExactamente 520 segundos
storybookTapa dura se abre, páginas ilustradas pasan, tapa se cierra1–12Pausas configurables; 5 páginas por defecto 32 segundos

Lee selección y mapeo de plantillas antes de organizar las capturas. Sigue un efecto seleccionado explícitamente. De lo contrario, recomienda/selecciona la coincidencia más cercana según la intención del usuario, preservando elecciones anteriores; no predetermines todas las solicitudes a un libro. El registro autoritativo de plantillas es templates.json. Esta es una biblioteca extensible, no videos de demostración empaquetados.

Entradas y decisiones

Identifica el producto que se promociona, el orden de las capturas proporcionadas y el idioma de salida según la solicitud. Preserva elecciones anteriores. Si el producto es ambiguo, aclara antes de escribir afirmaciones promocionales; de lo contrario, usa valores predeterminados razonables y procede. Valores predeterminados: 1920×1080, 30 fps, pausas de cuatro segundos para storybook, texto explicativo en inglés, sin narración hablada.

Inspecciona las capturas antes de escribir el texto. Usa la interfaz de usuario real sin inventar controles, conteos de clientes, afirmaciones de rendimiento, precios o direcciones de descarga. El texto explicativo es una capa editable separada; el texto incrustado en las capturas no se puede cambiar cambiando los pies de foto. Usa medios proporcionados por el usuario o con licencia adecuada. Mantén las capturas privadas y los trabajos generados fuera del directorio de la habilidad instalada.

Interacción con el usuario

Trata la invocación como una solicitud para producir el video. Pide capturas y detalles del producto solo cuando falten; escribe la configuración y ejecuta la preparación, el renderizado y la mezcla tú mismo cuando las herramientas estén disponibles. No le entregues al usuario comandos de Python ni le exijas que escriba JSON como flujo de trabajo normal. Verifica las dependencias locales e informa los requisitos faltantes concretos. Respeta los permisos de ejecución; explica cualquier acción que el usuario deba realizar cuando tu entorno no pueda realizarla.

Acepta solicitudes de revisión en lenguaje natural, actualiza el proyecto generado y renderiza un resultado revisado. Para cambios de capturas o duración de storybook, prepara un nuevo trabajo para que los metadatos de composición se mantengan consistentes. Mantén los comandos técnicos en la ejecución del agente o en la resolución de problemas del desarrollador, a menos que el usuario los solicite explícitamente. Consulta comandos de renderizado para desarrolladores para uso manual.

Crear el video

  1. Lee la referencia de configuración. Escribe un proyecto JSON junto a los recursos del usuario, usando el ejemplo coincidente en examples/ como punto de partida. Escribe explicaciones cortas y concretas, una característica por captura. Selecciona --template spotlight, --template launch, --template orbit, --template kinetic, --template prism o --template storybook; el comando siguiente ilustra storybook. Respeta los límites de línea validados.
  2. Prepara un trabajo aislado:
    python3 /ruta/a/screenshot-motion-skill/scripts/motion.py prepare --template storybook --config /ruta/a/project.json --out /ruta/a/nuevo-trabajo
    
    Los trabajos existentes nunca se sobrescriben con prepare. El trabajo contiene su propio renderizador, capturas copiadas y configuración normalizada; no depende de la habilidad después de la preparación excepto para la CLI auxiliar.
  3. Instala las dependencias dentro del nuevo trabajo usando npm install. Se requieren Node.js 22+ y Chrome/Chromium. Usa npm run studio en ese trabajo para una vista previa interactiva.
  4. Renderiza primero fotogramas fijos representativos para la plantilla seleccionada:
    python3 /ruta/a/screenshot-motion-skill/scripts/motion.py render --job /ruta/a/nuevo-trabajo --frame 150 --browser /ruta/a/chrome
    
    Inspecciona el PNG resultante. Corrige texto, recorte o diseño antes de un renderizado completo. Fotogramas de vista previa útiles: spotlight 105/190/330; launch 60/150/250/355/450/550; orbit 45/170/270/380/490; kinetic 35/100/170/245/320/430; prism 70/150/240/330/470; storybook 150 y 90 + holdFrames + 21 para el punto medio del primer giro. Elige fotogramas dentro de la duración del trabajo.
  5. Renderiza sin --frame. Esto crea out/video-silent.mp4. Proporciona un navegador existente explícitamente si la detección automática falla; el script no descarga un navegador.
  6. Ejecuta motion.py mix --job /ruta/a/nuevo-trabajo para crear out/video.mp4. Sin entradas de audio, crea una copia silenciosa. Para música, sonidos de transición o sonidos de papel, lee audio y licencias. No agregues narración a menos que se solicite y haya un servicio de voz autorizado adecuado disponible.
  7. Sigue las verificaciones de calidad, inspecciona el archivo renderizado en lugar de solo el código fuente, luego devuelve el video real y la ruta del trabajo. Sé preciso sobre si se realizó narración, escucha o reproducción en tiempo real. Si el renderizado está bloqueado, informa la dependencia faltante específica; no sustituyas una imagen fija y la llames video.

Entrega para edición de escritorio

Cuando se solicite, sigue exportación de edición y compatibilidad. Renderiza el modo limpio y exporta el paquete portátil con subtítulos SRT editables, pistas de audio independientes, capturas originales y clips de tomas. Explica que la geometría de movimiento permanece horneada y los subtítulos importados necesitan estilo del editor. Mantén el MP4 final estilizado como referencia. Verifica la aplicación/versión del usuario antes de afirmar compatibilidad nativa con borradores; el adaptador heredado opcional Jianying es experimental y no está verificado en macOS/Windows o CapCut actuales. Nunca instales silenciosamente borradores en la biblioteca de una aplicación.

Detalles de implementación estables

Las siguientes notas sobre el efecto de pasar página aplican a storybook. Para spotlight, preserva la barrera de pintura y las etiquetas en espacio de pantalla. Para launch, usa recortes de region normalizados solo donde sean compatibles con la interfaz de usuario visible; nunca reutilices las coordenadas de píxeles de un producto anterior.

  • Una página derecha que gira tiene la captura anterior en su anverso y la siguiente explicación en su reverso. No hagas crossfade de páginas completas ni reflejes el texto del reverso.
  • Toda la geometría sigue números de fotograma; nunca introduzcas animación en tiempo real o aleatoriedad sin semilla.
  • La malla de tira Canvas2D evita problemas de composición 3D anidados del navegador. Mantén la ruta rápida de página plana, la superposición pequeña de tira y la iluminación continua superpuesta: el sombreado suavizado por tira crea líneas visibles a través del texto.
  • La distancia de cámara 3000 mantiene las puntas de página levantadas dentro del fotograma 1080p. Vuelve a verificar el sobre completo del giro después de cambios de cámara o tamaño de página.
  • El renderizador predeterminado ajusta las imágenes sin recortar. Las capturas apaisadas son compatibles; no las estires a una relación de aspecto vertical.
  • Renderiza secuencialmente por defecto. Aumentar la concurrencia requiere otra verificación visual de los fotogramas capturados.

El código original del paquete tiene licencia MIT. Remotion y los medios tienen licencias separadas; consulta THIRD_PARTY_NOTICES.md. Esta habilidad no autoriza la publicación, carga de recursos del usuario, cambio de configuración de cuenta ni instalación global de sí misma.

Extender la biblioteca

Cuando se te pida agregar otro efecto, sigue el contrato de extensión. Agrega un renderizador, entrada en el registro y ejemplo, en lugar de reemplazar plantillas existentes. Verifica tanto el nuevo efecto como las plantillas existentes relevantes.

Skills relacionados