SKILL / 先行公開

zukai-gif

青・白・黒・赤の4色だけで組んだSVG図解を、ステップごとに要素が積み上がっていく「動くGIF」として生成するスキル。X投稿・ブログ・資料の差し込みに、説明の順番ごと伝わる図解を。

↑ このMCPが実際に生成したGIF（4フレーム・無限ループ・75KB）

何をするスキルか

説明したい仕組みや手順を渡すと、AIがステップに分解してSVGの図解フレームを設計します。フレームはサーバー側（Cloudflare Browser Rendering）でレンダリングされ、コマ送りのアニメGIFになって公開URLで返ってきます。前のコマの内容を保ったまま新しい要素が加わっていく累積方式なので、見る人は「何がどの順で起きるか」を迷わず追えます。

パレットは4色だけ

色数を絞ることで、どのGIFを並べてもトーンが揃います。パレット外の色はサーバー側の検証が弾くので、量産しても崩れません。

作りのルール

1コマ = 1メッセージ

フレームは3〜8枚。新しい要素は1コマに1〜3個まで

累積方式

前のコマの要素は消さない・動かさない。位置は全コマ固定

16:9固定

1200×675。文字は最小19px、タイトル44px

装飾なし

グラデーション・影は使わない。矢印は多角形で描く

MCPから実行できます

このスキルは専用MCPに接続すればそのまま実行できます。接続先は https://keito-skills.com/mcp/zukai-gif。AIが手引き（get_zukai_guide）を読んでフレームを設計し、検証（validate_frames）を通し、生成（make_zukai_gif）でGIFのURLを受け取ります。生成には共有キーが必要です。

claude mcp add --transport http zukai-gif \
  https://keito-skills.com/mcp/zukai-gif

# あとはClaudeに頼むだけ:
# 「◯◯の仕組みを動くGIF図解にして。共有キーは ks_...」