使い方ガイドへスキップ
Motion Canvas Agent作者 VideoZero

Motion Canvas Agent スキル。

動作中の Motion Canvas エディターで、シーク、確認、画像取得、描画を行います。

  • Motion Canvas
  • シーンレビュー
ソースレビュー · motion-canvas-agentSKILL.md
タスク 動作中の Motion Canvas エディターで、シーク、確認、画像取得、描画を行います。 成果物 Motion Canvas プロジェクトに接続したローカル制御ブリッジ。 始める前に 既存 Motion Canvas プロジェクトと、両方の連携プラグインを追加する許可が必要です。エディターを開いたままにし、確認するフレームと出力設定を指定してください。
記事用の要約 · ソース確認日 2026-11-02 · 生成された例ではありません

01 機能概要

動作中の Motion Canvas エディターで、シーク、確認、画像取得、描画を行います

ローカル Motion Canvas エディターを HTTP で制御し、正確なフレームの画像取得、シーングラフ確認、設定、描画操作を行います。

ソースに基づくワークフロー実行ベンチマークではありません

作業の進め方

motion-canvas-agent はローカル HTTP API でエージェントを動作中の Motion Canvas エディターへ接続します。フレーム移動、スクリーンショット、シーングラフの確認、プレビュー・描画設定の変更、書き出しの開始ができます。プレーヤーとレンダラーは引き続きブラウザーで動作します。

連携には Vite サーバープラグインと、Motion Canvas プロジェクト内のクライアントプラグインの2ファイルを使います。リクエストは開発サーバーを通り、開いているブラウザーへ届きます。正確なフレーム確認をスクリプト化できますが、独立したヘッドレスレンダラーではなく、接続中のエディターが必要です。

想定される成果物

  • Motion Canvas プロジェクトに接続したローカル制御ブリッジ。
  • フレーム指定のスクリーンショットとシーングラフ確認データ。
  • 指定された描画操作と、記録されたプレビュー・描画設定。
サンプルブリーフを見る

ブリーフからレビューまで

  1. 01
    両側のプラグインを接続する

    サーバープラグインを Vite に、クライアントプラグインを Motion Canvas プロジェクトに追加します。開発サーバーを起動し、ブラウザーでエディターを開きます。

  2. 02
    既知のフレームを確認する

    接続状態を確認し、予定サイズを設定して正確なフレームへ移動します。画像を取得し、シーングラフ値と表示結果を比較します。

  3. 03
    明示した設定で描画する

    エラーを確認し、プレビュー設定と描画設定を区別します。依頼された書き出しを開始し、完了後に実物の成果物を検証します。

02 利用場面

使いどころ

既存 Motion Canvas プロジェクトと、両方の連携プラグインを追加する許可が必要です。エディターを開いたままにし、確認するフレームと出力設定を指定してください。

向いているケース

  • 正確なフレーム証拠が必要API のシークと画像取得で、手動再生のタイミングに頼らず確認できます。
  • 見えている状態が不明確再帰的なグラフがノード種類、位置、サイズ、文字を示し、視覚診断を支えます。

確認すべき制限

  • ブラウザーを開く必要があるサーバーは動作中のプレーヤーとレンダラーへ中継します。切断されたエディターでは意図した制御ができません。
  • エンドポイントはローカルに限定ソースは開発制御 API をネットワークに公開しないよう警告しています。
  • 描画依頼は完了ではないAPI が操作を受理しても、出力ファイルと再生の検証が必要です。

用意する入力

  • 既存プロジェクトMotion Canvas プロジェクトと2つの連携ファイルの追加許可を提供します。
  • 確認対象シーン、フレーム番号、確認する見た目の条件を示します。
  • 出力設定フレームサイズ、範囲、描画フレームレート、出力先を指定します。

03 重要な判断

重要な判断

  1. 再現可能な取得

    コード修正後も同じフレームを再確認できます。

  2. 状態の可視化

    具体的なノード値で画像を補完します。

  3. 設定を分離

    プレビューと描画を同じと仮定せず、それぞれ確認できます。

04 依頼例

目的を絞った依頼文を試す

以下のサンプルブリーフはテストされていません。使用前にスキルのセットアップを確認してください。

ソースとセットアップを確認する

Motion Canvas プロジェクトと2つの連携ファイルの追加許可を提供します。

アップストリームのソースファイル
https://github.com/VideoZero/skills/blob/670ff96af6149f0ac8850380a466f073471e600c/motion-canvas-agent/SKILL.md

以下の参照先から、提供元の手順を確認できます。利用前にリポジトリのセットアップ要件を確認してください。これはインストールコマンドではありません。

一つの成果物から始める

スキルを実行する前に、このブリーフの範囲、素材、制約を調整してください。

サンプルブリーフ
プラグイン接続後、motion-canvas-agent で動作中の Motion Canvas シーケンスを確認してください。エディター接続を確かめ、1920 × 1080 で最初のフレーム、パケット引き渡し、最後のフレームを取得してください。パケットが切れて表示される箇所のシーングラフとエラーエンドポイントを確認してください。API はローカルに限定してください。プレビューと描画のフレームレートを別々に記録し、承認済み範囲の描画を開始してください。実ファイルが存在して再生できてから出力を報告し、エンドポイントの応答を完了と扱わないでください。

結果を確認する

実際の出力を、次の観察可能な基準に照らして確認してください。

  • シークや取得の前にブラウザー接続を確認する。
  • 画像のフレーム情報を指定フレームと照合する。
  • 出力設定、エラー、完成した描画物を検証する。

OpenDesignは、コーディングエージェント向けのローカルデザインワークスペースを提供します。この掲載は、スキルが同梱されていること、または外部ツール、認証情報、ソフトウェア依存関係が含まれていることを意味しません。

05 ソースとライセンス

ソースとライセンス

このページは、下記にリンクされた固定のソースリビジョンについて説明しています。アップストリームの挙動や要件は変更される可能性があります。

ソースの所有者
VideoZero
リポジトリ
VideoZero/skills
スキルファイル
SKILL.md
ライセンス
Apache-2.0
確認したスナップショット
2026-11-02 · 670ff96af614
編集部によるソース要約
動作中の Motion Canvas エディターで、シーク、確認、画像取得、描画を行います。

リンク先のソースに基づく、OpenDesignによるオリジナルの要約です。リポジトリのスター数は日付時点の人気の指標であり、スキルの利用状況や品質スコアではありません。

06 開始前の質問

始める前の質問

ブラウザーなしで使えますか?

文書化された構成には開いた Motion Canvas エディターが必要です。クライアントプラグインがサーバー経由で実行中のプレーヤーとレンダラーを公開します。

アニメーションシーンも書きますか?

主な役割は制御と確認です。関連 motion-canvas Skill がフレームワーク概念とシーン作成を扱います。

共有サーバーに API を公開できますか?

ソースは localhost 限定の運用を明示的に推奨します。制御エンドポイントを本番ネットワークサービスとして公開すべきではありません。

OpenDesign

依頼内容とデザイン作業を一つの場所に。

ブリーフ、ソース資料、デザイン作業をローカルワークスペースにまとめて管理できます。ワークフローに追加する前に、スキル自体のセットアップを確認してください。

アップストリームのソースファイル
https://github.com/VideoZero/skills/blob/670ff96af6149f0ac8850380a466f073471e600c/motion-canvas-agent/SKILL.md