106.9K+Descargar
Ir a la guía de uso
Motion Canvas Agentpor VideoZero

Motion Canvas Agent Skill.

Navega, inspecciona, captura y renderiza en un editor Motion Canvas en ejecución.

  • Motion Canvas
  • Revisión de escenas
Descargar OpenDesignVer la guía de uso
Revisión de la fuente · motion-canvas-agentSKILL.md
Tarea Navega, inspecciona, captura y renderiza en un editor Motion Canvas en ejecución. Resultados Un puente de control local conectado a un proyecto Motion Canvas. Antes de empezar Empieza con un proyecto Motion Canvas existente y permiso para añadir ambos plugins. Mantén abierto el editor e identifica los fotogramas y ajustes de salida que debe inspeccionar el agente.
Resumen editorial · fuente revisada el 2026-11-02 · no es un ejemplo generado

01 Qué hace

Navega, inspecciona, captura y renderiza en un editor Motion Canvas en ejecución

Controla un editor Motion Canvas local por HTTP para capturas exactas, inspección del grafo de escena, ajustes y acciones de renderizado.

Flujo de trabajo basado en la fuenteNo es un benchmark de ejecución

El enfoque de trabajo

motion-canvas-agent conecta un agente con un editor Motion Canvas en ejecución mediante una API HTTP local. Puede saltar a un fotograma, capturar una imagen, inspeccionar el grafo de escena, cambiar ajustes de vista previa o renderizado y activar una exportación. El navegador sigue ejecutando el reproductor y el renderizador.

La integración usa dos archivos: un plugin de servidor Vite y un plugin cliente dentro del proyecto Motion Canvas. Las solicitudes pasan por el servidor de desarrollo hasta el navegador abierto. Esto permite automatizar la inspección de fotogramas exactos, pero requiere una conexión activa con el editor; no es un renderizador independiente sin interfaz.

Entregables esperados

  • Un puente de control local conectado a un proyecto Motion Canvas.
  • Capturas de fotogramas específicos y datos de inspección del grafo de escena.
  • Las acciones de renderizado solicitadas y un registro de los ajustes de vista previa/renderizado.
Ver el brief de ejemplo

Del brief a la revisión

  1. 01
    Conectar ambos lados del plugin

    Añade el plugin de servidor a Vite y el cliente al proyecto Motion Canvas. Inicia el servidor de desarrollo y abre el editor en un navegador.

  2. 02
    Inspeccionar un fotograma conocido

    Comprueba la conexión, fija las dimensiones previstas y salta a un fotograma exacto. Captúralo y compara valores del grafo con el resultado visible.

  3. 03
    Renderizar con ajustes explícitos

    Inspecciona errores y distingue ajustes de vista previa y renderizado. Activa la exportación solicitada y verifica el archivo real cuando termine.

02 Cuándo usarlo

Cuándo usarlo

Empieza con un proyecto Motion Canvas existente y permiso para añadir ambos plugins. Mantén abierto el editor e identifica los fotogramas y ajustes de salida que debe inspeccionar el agente.

Buen encaje

  • Un agente necesita evidencias de un fotograma exactoLa API permite navegación temporal y capturas sin depender de cronometrar manualmente la reproducción del navegador.
  • El estado visible de una escena no está claroEl grafo recursivo informa de tipos de nodo, posiciones, tamaños y textos para apoyar el diagnóstico visual.

Límites que conviene comprobar

  • Requiere un navegador abiertoEl servidor retransmite al reproductor y renderizador en ejecución; un editor desconectado no proporciona el control previsto.
  • El endpoint debe permanecer localLa fuente advierte de no exponer la API de control de desarrollo a la red.
  • Solicitar un renderizado no significa completarloUna acción API aceptada aún requiere verificar el archivo de salida y su reproducción.

Aporta estos datos

  • Proyecto existenteProporciona el proyecto Motion Canvas y permiso para añadir los dos archivos de integración.
  • Objetivos de inspecciónIndica escenas, números de fotograma y condiciones visuales que comprobar.
  • Ajustes de salidaEspecifica dimensiones, rango, frecuencia de fotogramas de renderizado y destino.

03 Decisiones importantes

Decisiones importantes

  1. Capturas repetibles

    Se puede volver al mismo fotograma tras corregir el código.

  2. Visibilidad del estado

    La inspección del grafo complementa las capturas con valores concretos de nodos.

  3. Ajustes separados

    Los controles de vista previa y renderizado se pueden inspeccionar sin asumir que sean iguales.

04 Ejemplo de brief

Prueba con un encargo concreto

El brief de ejemplo siguiente no se ha probado. Revisa la configuración del skill antes de usarlo.

Revisa la fuente y la configuración

Proporciona el proyecto Motion Canvas y permiso para añadir los dos archivos de integración.

Archivo fuente original
https://github.com/VideoZero/skills/blob/670ff96af6149f0ac8850380a466f073471e600c/motion-canvas-agent/SKILL.md

La referencia siguiente abre las instrucciones originales. Revisa la configuración del repositorio antes de utilizarlas; no es un comando de instalación.

Empieza con un solo entregable

Adapta el alcance, el material de origen y las restricciones de este brief antes de ejecutar el skill.

Brief de ejemplo
Usa motion-canvas-agent para inspeccionar mi secuencia Motion Canvas en ejecución después de conectar el plugin. Confirma la conexión del editor y captura el primer fotograma, el traspaso del paquete y el último fotograma al tamaño solicitado de 1920 por 1080. Inspecciona el grafo donde el paquete parece recortado y comprueba el endpoint de errores. Mantén la API enlazada localmente. Registra por separado las frecuencias de fotogramas de vista previa y renderizado y activa el rango de renderizado aprobado. Informa del archivo exportado real solo cuando exista y se reproduzca; no consideres la confirmación del endpoint una exportación completada.

Inspecciona el resultado

Comprueba el resultado real con estos criterios observables.

  • Confirma la conexión del navegador antes de navegar o capturar.
  • Compara los metadatos del fotograma capturado con el solicitado.
  • Verifica ajustes de salida, errores y archivo de renderizado completado.

OpenDesign ofrece un espacio de trabajo de diseño local para agentes de programación. Este listado no significa que el skill esté incluido ni que se incluyan sus herramientas externas, credenciales y dependencias de software.

Descargar OpenDesignLeer la guía de inicio rápido

05 Fuente y licencia

Fuente y licencia

Esta página describe la revisión fijada de la fuente enlazada abajo. El comportamiento y los requisitos originales pueden cambiar.

Propietario de la fuente
VideoZero
Repositorio
VideoZero/skills
Archivo del skill
SKILL.md
Licencia
Apache-2.0
Versión revisada
2026-11-02 · 670ff96af614
Resumen editorial de la fuente
Navega, inspecciona, captura y renderiza en un editor Motion Canvas en ejecución.

Resumen original de OpenDesign, basado en la fuente enlazada. Las estrellas del repositorio son una señal de popularidad con fecha, no el uso del skill ni una puntuación de calidad.

06 Preguntas antes de empezar

Preguntas antes de empezar

¿Puede ejecutarse sin navegador?

La arquitectura documentada requiere mantener abierto el editor Motion Canvas. El plugin cliente expone el reproductor y renderizador activos a través del puente de servidor.

¿Escribe escenas animadas?

Su función principal es controlar e inspeccionar. El skill complementario motion-canvas cubre conceptos del framework y creación de escenas.

¿Puedo exponer la API en un servidor compartido?

La fuente recomienda explícitamente funcionar solo en localhost. Los endpoints de control no deben exponerse como servicio de red de producción.

OpenDesign

Mantén juntos tu encargo y tu trabajo de diseño.

Mantén juntos tu brief, el material de origen y el trabajo de diseño en un espacio de trabajo local. Revisa la configuración propia del skill antes de añadirlo a tu flujo de trabajo.

Descargar OpenDesignExplorar skills de diseño
Archivo fuente original
https://github.com/VideoZero/skills/blob/670ff96af6149f0ac8850380a466f073471e600c/motion-canvas-agent/SKILL.md