pengchujin/livecanvas

これは何？

主な機能

• 01文章からデザインされたレイアウトのアニメーションカバーを作成します。
• 02画像、絵文字、シーン、タイムライン、チャートに対応しています。
• 03Linux、Windows、macOSでApple Live Photo用のペアリソースを生成します。
• 04MP4プレビューと編集可能なRemotionプロジェクトを書き出します。
• 05Skills CLIを使って、Codexやその他のアシスタントにインストールできます。

ユースケース

• 年間気温などのデータの推移を、共有しやすいアニメーションカバーにする。
• 製品比較や市場データを紹介する短い解説アニメーションを作る。
• iPhoneで共有するための、チャートのLive Photo版を作成する。

クイックスタート

1. 1

   Skills CLI を使って、すべての AI アシスタントにスキルをインストールします

   npx skills add pengchujin/livecanvas --skill livecanvas -g
2. 2

   Codex のみにスキルをインストールします

   npx skills add pengchujin/livecanvas --skill livecanvas -g -a codex
3. 3

   新しいチャットを開き、README にある北京と上海の気温の例のようなリクエストを入力します

使う前に知っておきたいこと

• !Node.js/npm、Python 3、FFmpeg、およびレンダリングに適したフォントが必要です。
• !アシスタントには、ウェブ検索とコード実行ができる必要があります。
• !ネイティブの Live Photo 出力が完全にサポートされているのは macOS のみです。それ以外のプラットフォームでは、制限のあるポータブルな方法を使用します。

トピック

よくある質問

livecanvas とは？

Remotionを使い、文章からチャートや絵文字、タイムラインを盛り込んだLive Photo風のアニメーションカバーを作るAIコーディングアシスタント向けスキル。 LiveCanvasは、CodexやClaude CodeなどのAIコーディングアシスタント向けスキルです。トピックを説明する文章を受け取ると、事実を検索・検証し、ストーリーボードを作成してRemotionでアニメーションをレンダリングし、プレビューとApple Live Photo用アセットを生成します。

livecanvas は無料で使えますか？ライセンスは？

livecanvas は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。

livecanvas は今もメンテナンスされていますか？

活発にメンテナンス中。livecanvas の最終コミットは 2026年10月10日 です。

livecanvas は何に使えますか？

年間気温などのデータの推移を、共有しやすいアニメーションカバーにする。 製品比較や市場データを紹介する短い解説アニメーションを作る。 iPhoneで共有するための、チャートのLive Photo版を作成する。

livecanvas のインストール方法は？

Skills CLI を使って、すべての AI アシスタントにスキルをインストールします: npx skills add pengchujin/livecanvas --skill livecanvas -g Codex のみにスキルをインストールします: npx skills add pengchujin/livecanvas --skill livecanvas -g -a codex 新しいチャットを開き、README にある北京と上海の気温の例のようなリクエストを入力します

livecanvas はどこで入手できますか？

ソースコードとインストール手順は GitHub にあります：https://github.com/pengchujin/livecanvas