mcpField
I
image-generation

image-generation

github.com/guinacioクリエイティブ・メディア81120 回インストール3 週間前に更新
リポジトリ

image-generation について

image-generation は、付属 CLI から Google Gemini または OpenAI を使って画像を作成するスキルです。プロンプト作成、アスペクト比、参照画像、用途に応じたプロバイダー別オプションを扱います。

主な機能

  1. 01付属 CLI から画像を生成
  2. 02Gemini または OpenAI にリクエストを振り分け
  3. 03アスペクト比と出力形式を指定
  4. 04参照画像と OpenAI のマスクに対応
  5. 05出力パスまたはエラーを JSON で返却

活用シーン

  1. 01Web サイトのヒーロー画像や機能イラストの作成
  2. 02プレゼンテーションの表紙や図の追加
  3. 03オンボーディングや空状態の画像制作

MCP 対応

MCP サーバーを設定すると、画像作成用の `mcp__media-pipeline__create_asset` ツールを利用できます。プロンプト、出力パス、アスペクト比、モデル、対応する画像オプションを指定します。

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/guinacio/claude-image-gen --skill image-generation

インストール後、Claude Code で/image-generationを入力して読み込まれたか確認します。

同梱ファイルreferences/prompt-crafting.md

詳細

画像生成スキル

同梱の CLI スクリプトを使い、Google Gemini でプロフェッショナルな AI 画像を生成します。

このスキルを呼び出すタイミング

以下の場合は、すぐに呼び出してください。

Web 開発

  • 画像がないヒーローセクション
  • 機能紹介用のイラストが必要な場合
  • コード内のプレースホルダー画像（placeholder.jpg、stock-photo.png）
  • 画像がないビジュアルセクション（<section class="hero"> など）
  • ランディングページやマーケティングサイト

プレゼンテーションとドキュメント

  • カバー画像やヘッダー
  • 概念図
  • セクションの区切り

アプリケーション

  • オンボーディング用のイラスト
  • 空の状態を示すグラフィック
  • エラーページのビジュアル

CLI の使用方法

同梱の CLI スクリプトを bash で実行します。

node "${CLAUDE_PLUGIN_ROOT}/mcp-server/build/cli.bundle.js" \
  --prompt "Your detailed image description" \
  --output "./path/to/output.png" \
  --aspect-ratio "16:9"
パラメーター
フラグ必須デフォルト説明
--prompt, -pはい-画像の詳細な説明
--output, -oいいえ自動生成出力ファイルのパス
--aspect-ratio, -aいいえ1:11:1、16:9、9:16、4:3、3:4、2:3、3:2
--model, -mいいえプロバイダーのデフォルト使用するモデル。プロバイダーを振り分けます（gpt-image*/dall-e* → OpenAI、それ以外 → Gemini）
--reference-images, -rいいえ-参照画像のパス（PNG/JPEG/WebP、繰り返し指定またはカンマ区切り、最大 5 件）
--maskいいえ-再描画する領域を示す PNG マスク。OpenAI 専用で、--reference-images が必要です
--background, -bいいえプロバイダーのデフォルトauto、transparent、または opaque。OpenAI 専用です。gpt-image-2 は transparent を拒否するため、リクエスト送信前にエラーになります
--output-format, -fいいえプロバイダーのデフォルトpng、jpeg、または webp。OpenAI 専用です
--output-dir, -dいいえ現在のディレクトリ出力ディレクトリ
環境変数
変数必須説明
GEMINI_API_KEYGEMINI_API_KEY / OPENAI_API_KEY のいずれか 1 つ以上Gemini API キー
OPENAI_API_KEYGEMINI_API_KEY / OPENAI_API_KEY のいずれか 1 つ以上OpenAI API キー
GEMINI_DEFAULT_MODELいいえ優先する Gemini のデフォルトモデル
OPENAI_DEFAULT_MODELいいえ優先する OpenAI のデフォルトモデル（デフォルト：gpt-image-2）
IMAGE_PROVIDERいいえgemini または openai。--model が省略された場合に使用するプロバイダー
MEDIA_PIPELINE_LOG_LEVELいいえstderr の診断ログのログレベル
出力

CLI は JSON を出力します。

{"success": true, "filePath": "/path/to/generated-image.png"}

エラーの場合：

{"success": false, "error": "Error message"}
アスペクト比の選択
  • 16:9 - ヒーロー画像、Web サイトのヘッダー、プレゼンテーション
  • 1:1 - ソーシャルメディア、サムネイル、プロフィール画像
  • 9:16 - モバイルストーリー、縦長のバナー
  • 4:3 - ブログ記事、一般的な Web コンテンツ
  • 3:2 - 写真風の画像

プロンプトの作成

効果的なプロンプトには、次の形式を使用します。

[Style] [Subject] [Composition] [Context/Atmosphere]
例

テック系スタートアップのヒーロー画像

Minimalist 3D illustration of abstract geometric shapes floating in space,
soft gradient background from deep purple to electric blue, subtle glow effects,
modern professional aesthetic, wide composition for website header

E コマースの商品

Clean product photography of modern wireless headphones on white marble surface,
soft studio lighting from left, subtle shadows, high-end minimalist aesthetic,
centered composition

ブログ記事のヘッダー

Aerial photography of winding river through autumn forest, golden hour lighting,
warm color palette with oranges and reds, cinematic wide shot, serene atmosphere

アプリのイラスト

Flat vector illustration of person organizing digital files on floating screens,
soft pastel colors, isometric perspective, clean lines, friendly approachable style

パターンの検出

次のものを見つけた場合は、このスキルを自動的に呼び出してください。


<img src="placeholder.jpg" alt="Hero">



<section class="features">
  <h2>Our Features</h2>
  
</section>


/* Generic stock reference */
.banner { background: url('stock-image.jpg'); }
/* Action: Invoke skill to create a unique background */

ワークフロー

  1. 必要性の検出 - ヒーロー、イラスト、背景など、ビジュアルコンテンツの要件を特定します
  2. スキルの呼び出し - skill: "image-generation" を指定して、Skill ツールをすぐに使用します
  3. コンテキストの分析 - プロジェクトのスタイルとブランドを把握します
  4. プロンプトの作成 - 上記の形式を使って詳細なプロンプトを作成します
  5. 生成 - 最適化したパラメーターで CLI スクリプトを実行します
  6. 統合 - 適切な参照を設定して、画像をプロジェクトに配置します

モデルの選択

この CLI は 2 つのプロバイダーに対応しています。--model の値によってリクエストの送信先が決まり、gpt-image または dall-e で始まるモデル名は OpenAI に、それ以外は Gemini に送信されます。--model を省略すると、IMAGE_PROVIDER によって使用するプロバイダーのデフォルトモデルが選択されます。

  • Gemini（GEMINI_DEFAULT_MODEL、例：gemini-3-pro-image-preview）— モデルは Gemini API から動的に取得されます。デフォルトが設定されていない場合、CLI は最初に検出された画像生成に対応するモデルを使用します。反復的なクリエイティブ作業や、動的に検出されるモデルカタログを利用する場合は、Gemini を推奨します。
  • OpenAI（OPENAI_DEFAULT_MODEL、デフォルトは gpt-image-2）— OpenAI の gpt-image-2 モデルが特に必要な場合、または OpenAI API キーのみが設定されている場合に使用します。OpenAI の画像サイズは 1024x1024／1536x1024／1024x1536 に限られています。これらに一致しないアスペクト比は、警告とともに最も近い対応サイズに変換されます。

ベストプラクティス

推奨事項：

  • 具体的なスタイルのキーワードを含めます
  • 想定する用途に合わせてアスペクト比を設定します
  • 雰囲気やムードを説明します
  • ブランドの一貫性を保つため、カラーパレットを指定します

避けること：

  • 曖昧なプロンプトを使う（「いい感じにして」など）
  • 画像の使用場所を考慮しない
  • 特定のレイアウトでアスペクト比を指定しない

参考資料

高度なプロンプト作成テクニックについては、references/prompt-crafting.md を参照してください。

代替手段：MCP ツール

MCP サーバーが設定されている場合は、次の方法も利用できます。

mcp__media-pipeline__create_asset

パラメーター：prompt、outputPath、aspectRatio、model（名前に応じて Gemini または OpenAI に振り分け）、referenceImages（絶対パスで最大 5 件、PNG／JPEG／WebP）、mask、background、outputFormat（最後の 3 つは OpenAI のみ対応）

コメント

Markdown 対応