Varnan-Tech/opendirectory

ユーザーがブログのカバー画像、サムネイル、記事ヘッダーを生成するよう依頼した場合に使用します。モダンなタイポグラフィ、ブランドロゴ、Google Searchグラウンディングを自動的に活用し、Gemini 3.1 Flash Image Previewで美しい16:9の画像を生成します。

opendirectory とは？

このスキルは、AIエージェントが「blog-cover-image-cli」ツールを使って、ミニマルで技術的なブログカバー画像を生成できるようにします。内部ではGemini 3.1 Flash Image Previewモデルを利用し、ドメインからブランドロゴを自動取得（Brandfetch経由）、ローカルの美的参照画像を活用、さらにGoogle Searchグラウンディング機能により、タイトルに関連する最新のコンテキストをリアルタイムに注入します。対応プラットフォームはClaude Code、Cursor、Codexなど、npxコマンドを実行できる任意のAIエージェント環境です。ユーザーがカバー画像をリクエストした際、エージェントはまずツールのインストールを確認し、Gemini APIキーとBrandfetchクライアントIDを設定した上で、`generate`コマンドを実行します。このスキルにより、エージェントは手動のデザイン作業なしに、一貫した高品質なブログカバー画像を提供できます。

対応~Claude Code~Codex CLI✓Cursor✓Gemini CLI

npx skills add https://github.com/Varnan-Tech/opendirectory/tree/main/skills/blog-cover-image-cli

ドキュメント

ブログカバー画像生成スキル

このスキルは、AIエージェントにblog-cover-image-cliを使用して、見事でミニマルかつ技術的なブログカバー画像を生成する能力を提供します。CLIはGemini 3.1 Flash Image Previewを活用し、ドメインからブランドロゴを自動取得し、ローカルの美的参照画像を使用し、Google Searchグラウンディングを利用してリアルタイムのコンテキストを注入します。

セットアップと設定

エージェントの前提条件: このツールを使用する前に、インストールされていることを確認してください。blog-cover-cli --helpが失敗する場合は、グローバルにインストールします。

npm install -g blog-cover-image-cli

ユーザーが画像を生成してほしいと依頼し、まだAPIキーが設定されていない場合は、まずGemini APIキーを使用してCLIを設定する必要があります。CLIはconfパッケージを介してこれを安全に保存します。

# 1. Gemini APIキーを設定（画像生成に必須）
npx -p blog-cover-image-cli blog-cover-cli config set-key <YOUR_GEMINI_API_KEY>

# 2. BrandfetchクライアントIDを設定（高解像度ロゴの取得に必須）
npx -p blog-cover-image-cli blog-cover-cli config set-brandfetch-id <YOUR_BRANDFETCH_CLIENT_ID>

# キーを確認（マスク表示）
npx -p blog-cover-image-cli blog-cover-cli config get-key
npx -p blog-cover-image-cli blog-cover-cli config get-brandfetch-id

使用方法：画像の生成

ユーザーがカバー画像を依頼した場合（例：「Vercel v0に関するブログのカバー画像を作成して」）、generateコマンドを使用する必要があります。

npx -p blog-cover-image-cli blog-cover-cli generate -t "ブログ記事のタイトル" -l "example.com"

引数

-t, --title <text>: （必須） カバー画像に表示するタイトルテキスト。過度に長いタイトルは使用しないでください（視覚的に3行未満に抑えてください）。
-l, --logo <domain>: （オプションですが推奨） ブランドロゴを取得するドメイン（例：vercel.com、google.com、cursor.com）。CLIは互換性のためにWebP/SVG/AVIFをPNGに自動変換します。
-o, --output <path>: （オプション） 生成された画像の保存先ファイルパス。省略した場合、CLIは現在の作業フォルダ内のoutput/ディレクトリに自動保存します（例：./output/vercel-cover.png）。

例

例1：Cursor

npx -p blog-cover-image-cli blog-cover-cli generate -t "Cursorが究極のAIコードエディタである理由" -l "cursor.com"

例2：Lovable

npx -p blog-cover-image-cli blog-cover-cli generate -t "Lovableで数分でアプリを構築" -l "lovable.dev"

例3：カスタム出力パス

npx -p blog-cover-image-cli blog-cover-cli generate -t "2026年のReactマスター" -l "reactjs.org" -o "./assets/react-cover.png"

内部動作の仕組み

エージェントとして、CLIが何をしているかを把握し、ユーザーに説明できるようにしてください。

ロゴ取得：Brandfetchからロゴを取得し、sharpで処理します。
参照画像：examples/ディレクトリから厳選された参照画像を読み込み、出力が常にクリーンでミニマルな白背景と太字のタイポグラフィになるようにします。
グラウンディング：googleSearchツールが有効になっており、タイトルが最近のイベントに関連する場合、Geminiは画像生成前にそれを検索できます。
テキスト強制：タイポグラフィ配置ルールを使用して、Geminiに正確なタイトル文字列を出力させます。

エッジケース / トラブルシューティング

APIキーなしエラー：APIキーエラーが発生した場合は、config set-keyコマンドを実行してください。
ログ取得警告：CLIに「警告：ロゴを取得できませんでした」と表示された場合、画像はロゴなしで生成されます。処理を中断する必要はありません。
厳格なモダリティ制限：Geminiの実験的な画像モデルを使用しているため、厳格な安全フィルターによって生成が稀に失敗することがあります。その場合はユーザーに通知してください。