106.9K+Télécharger
Aller au guide d’utilisation
Motion Canvas Agentpar VideoZero

Motion Canvas Agent Skill.

Naviguez, inspectez, capturez et lancez des rendus dans un éditeur Motion Canvas actif.

  • Motion Canvas
  • Examen de scène
Télécharger OpenDesignVoir le guide d'utilisation
Revue de la source · motion-canvas-agentSKILL.md
Tâche Naviguez, inspectez, capturez et lancez des rendus dans un éditeur Motion Canvas actif. Résultats Une passerelle locale de contrôle reliée à un projet Motion Canvas. Avant de commencer Partez d’un projet Motion Canvas existant avec l’autorisation d’ajouter les deux plugins d’intégration. Gardez son éditeur ouvert, puis identifiez les images et paramètres de sortie à inspecter.
Résumé éditorial · source examinée le 2026-11-02 · ce n’est pas un exemple généré

01 Fonctionnement

Naviguez, inspectez, capturez et lancez des rendus dans un éditeur Motion Canvas actif

Pilotez un éditeur Motion Canvas local par HTTP pour capturer des images exactes, inspecter le graphe de scène, régler les paramètres et lancer des rendus.

Flux de travail fondé sur la sourcePas un benchmark d'exécution

La méthode de travail

motion-canvas-agent relie un agent à un éditeur Motion Canvas actif via une API HTTP locale. Il peut atteindre une image, prendre une capture, inspecter le graphe de scène, modifier les paramètres d’aperçu ou de rendu et déclencher un export. Le lecteur et le moteur de rendu s’exécutent toujours dans le navigateur.

L’intégration utilise deux fichiers : un plugin serveur Vite et un plugin client dans le projet Motion Canvas. Les requêtes traversent le serveur de développement jusqu’au navigateur ouvert. Cela permet de scripter l’inspection d’images exactes, mais nécessite une connexion active à l’éditeur : ce n’est pas un moteur de rendu autonome sans interface.

Livrables attendus

  • Une passerelle locale de contrôle reliée à un projet Motion Canvas.
  • Des captures d’images précises et des données d’inspection du graphe de scène.
  • Les actions de rendu demandées et les paramètres d’aperçu/rendu consignés.
Voir l'exemple de brief

Du brief à la revue

  1. 01
    Connecter les deux côtés du plugin

    Ajoutez le plugin serveur à Vite et le plugin client au projet Motion Canvas. Démarrez le serveur de développement et ouvrez l’éditeur dans un navigateur.

  2. 02
    Inspecter une image connue

    Vérifiez la connexion, définissez les dimensions prévues et atteignez une image exacte. Capturez-la et comparez les valeurs du graphe de scène au résultat visible.

  3. 03
    Rendre avec des paramètres explicites

    Examinez les erreurs et distinguez paramètres d’aperçu et de rendu. Déclenchez l’export demandé et vérifiez le livrable réel après son achèvement.

02 Cas d’usage

Quand l’utiliser

Partez d’un projet Motion Canvas existant avec l’autorisation d’ajouter les deux plugins d’intégration. Gardez son éditeur ouvert, puis identifiez les images et paramètres de sortie à inspecter.

Un bon choix

  • Un agent a besoin de preuves à une image exacteL’API expose la navigation temporelle et la capture sans dépendre d’une lecture navigateur chronométrée manuellement.
  • L’état visible d’une scène est incertainLe graphe récursif indique types, positions, dimensions et textes des nœuds pour aider au diagnostic visuel.

Limites à vérifier

  • Un navigateur ouvert est nécessaireLe serveur relaie les requêtes au lecteur et au moteur actifs ; un éditeur déconnecté ne permet pas le contrôle prévu.
  • Le point d’accès doit rester localLa source avertit de ne pas exposer l’API de contrôle du développement au réseau.
  • Une demande de rendu n’est pas un rendu terminéUne action API acceptée exige encore la vérification du fichier de sortie et de sa lecture.

Éléments à fournir

  • Projet existantFournissez le projet Motion Canvas et l’autorisation d’ajouter les deux fichiers d’intégration.
  • Cibles d’inspectionIndiquez scènes, numéros d’image et conditions visuelles à vérifier.
  • Paramètres de sortiePrécisez dimensions, plage, fréquence d’images du rendu et destination.

03 Décisions importantes

Les décisions importantes

  1. Captures reproductibles

    La même image peut être revisitée après une correction du code.

  2. Visibilité de l’état

    L’inspection du graphe complète les captures par des valeurs concrètes des nœuds.

  3. Paramètres séparés

    Les contrôles d’aperçu et de rendu peuvent être inspectés au lieu de les supposer identiques.

04 Exemple de brief

Essayez un brief ciblé

L'exemple de brief ci-dessous n'a pas été testé. Vérifiez la configuration du skill avant de l'utiliser.

Examinez la source et la configuration

Fournissez le projet Motion Canvas et l’autorisation d’ajouter les deux fichiers d’intégration.

Fichier source amont
https://github.com/VideoZero/skills/blob/670ff96af6149f0ac8850380a466f073471e600c/motion-canvas-agent/SKILL.md

Le lien ci-dessous ouvre les instructions d’origine. Vérifiez la configuration du dépôt avant utilisation ; ce n’est pas une commande d’installation.

Commencez par un livrable

Adaptez le périmètre, les sources et les contraintes de ce brief avant d’exécuter le skill.

Exemple de brief
Utilise motion-canvas-agent pour inspecter ma séquence Motion Canvas active après connexion du plugin. Confirme la connexion à l’éditeur, puis capture la première image, le passage du paquet et la dernière image aux dimensions demandées de 1920 par 1080. Inspecte le graphe de scène là où le paquet semble tronqué et vérifie le point d’accès aux erreurs. Garde l’API liée localement. Consigne séparément les fréquences d’images de l’aperçu et du rendu, puis lance la plage de rendu approuvée. Ne rapporte le fichier exporté réel qu’après avoir confirmé son existence et sa lecture ; ne traite pas l’accusé de réception du point d’accès au rendu comme un export terminé.

Examinez le résultat

Comparez le résultat réel à ces critères observables.

  • Confirmez la connexion au navigateur avant la navigation temporelle ou la capture.
  • Comparez les métadonnées d’image de la capture à l’image demandée.
  • Vérifiez paramètres de sortie, erreurs et livrable rendu terminé.

OpenDesign fournit un espace de travail de design local pour les agents de code. Cette fiche ne signifie pas que le skill est fourni avec ses outils externes, ses identifiants et ses dépendances logicielles.

Télécharger OpenDesignLire le guide de démarrage rapide

05 Source et licence

Source et licence

Cette page décrit la révision source figée liée ci-dessous. Le comportement et les exigences en amont peuvent changer.

Propriétaire de la source
VideoZero
Dépôt
VideoZero/skills
Fichier du skill
SKILL.md
Licence
Apache-2.0
Version examinée
2026-11-02 · 670ff96af614
Résumé éditorial de la source
Naviguez, inspectez, capturez et lancez des rendus dans un éditeur Motion Canvas actif.

Résumé original de OpenDesign, fondé sur la source liée. Les étoiles du dépôt sont un indicateur de popularité daté, pas une mesure d'utilisation du skill ni une note de qualité.

06 Questions avant de commencer

Questions avant de commencer

Peut-il fonctionner sans navigateur ?

L’architecture documentée exige que l’éditeur Motion Canvas soit ouvert. Le plugin client expose le lecteur et le moteur actifs via la passerelle serveur.

Écrit-il les scènes animées ?

Son rôle principal est le contrôle et l’inspection. Le skill compagnon motion-canvas couvre les concepts du framework et l’écriture de scènes.

Puis-je exposer l’API sur un serveur partagé ?

La source recommande explicitement un fonctionnement limité à localhost. Les points d’accès de contrôle ne doivent pas devenir un service réseau de production.

OpenDesign

Gardez votre brief et votre travail de design au même endroit.

Gardez votre brief, vos sources et votre travail de design ensemble dans un espace de travail local. Vérifiez la configuration propre au skill avant de l'ajouter à votre flux de travail.

Télécharger OpenDesignParcourir les skills de design
Fichier source amont
https://github.com/VideoZero/skills/blob/670ff96af6149f0ac8850380a466f073471e600c/motion-canvas-agent/SKILL.md