菜单
ブログ記事のアイキャッチ画像を生成する。「アイキャッチ作成」「eyecatch」「サムネイル生成」「アイキャッチ画像」などで起動。記事の内容を分析し、統一デザインルールに基づいた高品質な画像を生成。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
| name | eyecatch-create |
| description | ブログ記事のアイキャッチ画像を生成する。「アイキャッチ作成」「eyecatch」「サムネイル生成」「アイキャッチ画像」などで起動。記事の内容を分析し、統一デザインルールに基づいた高品質な画像を生成。 |
ブログ記事の内容に基づいたアイキャッチ画像を生成します。
ユーザーに対象となる記事のパスを確認:
drafts/2026-01-27_my-article/article.mdposts/2026-01-27_my-article/article.md記事ファイルを読み込み、以下を抽出:
以下のデザインルールに厳密に従ってプロンプトを作成:
【デザインルール】
【プロンプトテンプレート】
A clean, professional blog eyecatch image with 16:9 aspect ratio.
Background: Pure white (#FFFFFF).
Main text: "[記事タイトル]" in bold sans-serif Japanese font, centered, dark gray color with subtle drop shadow.
Accent elements: Minimal geometric shapes or tech-related icons in corporate blue (#007BFF).
Style: Technical, minimalist, clean. No photographs, illustration-based.
GenerateImage ツールを使用:
GenerateImage(
description: [生成したプロンプト],
filename: "eyecatch.png"
)
生成された画像を記事ディレクトリ内の assets/ フォルダに移動:
mkdir -p [記事ディレクトリ]/assets
mv assets/eyecatch.png [記事ディレクトリ]/assets/eyecatch.png
ユーザーに以下を報告:
eyecatch: ./assets/eyecatch.png で記事に紐付くこと（画像は git push で記事ごとデプロイされるため、別途アップロード操作は不要）assets/eyecatch.png を生成して記事ディレクトリに配置することのみです。画像は記事を main に git push すれば GitHub Actions のビルドでそのままデプロイされますeyecatch: ./assets/eyecatch.png（相対パス）を設定すればアイキャッチとして表示されます技術ブログ記事を執筆する。「記事を書いて」「ブログ記事作成」「記事執筆」「新しい記事」「ブログを書く」「技術記事」「記事を作って」などで起動。SEOを意識した構成で記事を生成し、drafts/ディレクトリに保存。
ブログ記事の内容からアイキャッチ画像を生成する。『アイキャッチを作成』『画像を再生成』『/eyecatch-create』などで起動。google-genmedia-mcp の generate_image を使って assets/eyecatch.png を作成。
技術ブログ記事を執筆する。「記事を書いて」「ブログ記事作成」「記事執筆」「新しい記事」「ブログを書く」「技術記事」「記事を作って」などで起動。SEOを意識した構成で記事を生成し、drafts/ディレクトリに保存。