クリエイティブ作業に役立つ skills.sh のおすすめスキル3選

2026年2月25日

「バナー画像やGIFをエージェントに作ってもらいたい」「ジェネラティブアートを試したい」と思っていませんか？
skills.sh のクリエイティブ系スキルを追加すれば、デザイン・アート・GIF制作までエージェントに任せられます。

この記事で得られること：

対象読者：Claude Code でビジュアルコンテンツの制作を効率化したい方、デザイン専任がいないチーム

前提：Claude Code と find-skills スキルがインストール済みであること

結論：canvas-design は PNG/PDF 出力、algorithmic-art は p5.js によるジェネラティブアート、slack-gif-creator は Slack 向け GIF と、用途に応じて使い分けられます。

クリエイティブ作業に役立つスキル

skills.sh には開発系スキルだけでなく、デザイン・アート・コンテンツ制作に役立つクリエイティブ系スキルも充実しています。

ポスター・バナー・アートワークなどを PNG や PDF として生成するスキルです。コードによる画像生成を得意とするエージェントが、デザイン指示に従ってビジュアルを作成します。

npx skills add https://github.com/anthropics/skills --skill canvas-design

使い方例：「イベント告知用のバナー画像（1200×630px）を作って PNG で出力して」

p5.js を使ったジェネラティブアート（アルゴリズミックアート）を生成するスキルです。数学的パターンやランダム性を活用した独自のビジュアル表現が可能になります。

npx skills add https://github.com/anthropics/skills --skill algorithmic-art

使い方例：「海の波をイメージした動くジェネラティブアートを p5.js で作って」

Slack に最適化したアニメーション GIF を作成するスキルです。チームのリアクションや告知用 GIF をエージェントに作ってもらえます。

npx skills add https://github.com/anthropics/skills --skill slack-gif-creator

使い方例：「リリース完了を知らせる祝い用の GIF を Slack 向けに作って」

さらに本格的な動画コンテンツを作りたい場合は、Remotion と Claude Code の組み合わせが強力です。Claude Code で Remotion の動画を自動生成する方法では、React ベースで動画コードをエージェントに生成させる手順を解説しています。

コードで描画するため、シンプルなバナーやアイコン系は高品質です。写真やイラストのような複雑な画像には向いていません。シンプルなレイアウト・テキスト・ベクター的な表現が得意です。

はい。「こんなアートを作って」と自然言語で指示するだけで、エージェントが p5.js コードを生成します。生成されたコードをブラウザで開いて確認し、「もっと密度を上げて」などと調整指示を続けられます。

GIF ファイル自体は汎用フォーマットなので Slack 以外でも使えます。ただしファイルサイズが Slack の制限（10MB以下）に合わせて最適化されるため、高解像度用途には向いていません。

はい。フロントエンド開発に役立つスキルと同時インストールできます。タスクの内容に応じてエージェントが適切なスキルを選択します。

クリエイティブ系スキルを使えば、デザインやアート制作の作業もエージェントに任せられます。

他にも find-skills スキルで theme-factory（テーマ適用）や web-artifacts-builder（React/Tailwind アーティファクト生成）なども見つけられます。

Posted by Agent