mcpField
C
cover-image

cover-image

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

cover-image について

cover-imageは、ブログやソーシャルメディアなどの制作者向けに、記事のカバー画像を生成するスキルです。複数のビジュアル要素を調整でき、中国語の文字描画に対応し、画像生成サービスを選べます。

主な機能

  1. 01記事の内容からカバー画像を生成
  2. 02種類、配色、描画スタイルを設定
  3. 03テキスト、フォント、ムード、比率を指定
  4. 04中国語の文字描画に対応
  5. 05Qwen、OpenAI、Googleを選択

活用シーン

  1. 01ブログ記事用のワイドカバーを作成
  2. 02公式アカウントやSNS用の画像を作成
  3. 03参照画像でカバーのスタイルや構図を指定

インストール

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

$npx skills add https://github.com/notedit/happy-skills --skill cover-image

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

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

references/
auto-selection.md
style-presets.md
types.md
visual-elements.md
references/dimensions/
font.md
mood.md
text.md
references/palettes/
cool.md
dark.md
earth.md
elegant.md
mono.md
pastel.md
retro.md
vivid.md
warm.md
references/renderings/
chalk.md
digital.md
flat-vector.md
hand-drawn.md
painterly.md
pixel.md
references/workflow/
confirm-options.md
prompt-template.md
qwen-api.md
reference-images.md

詳細

カバー画像ジェネレーター

5つの次元でカスタマイズできる、洗練された記事用カバー画像を生成します。中国語のテキスト描画に対応しています。

使用方法

# Auto-select dimensions based on content
/cover-image path/to/article.md

# Quick mode: skip confirmation
/cover-image article.md --quick

# Specify dimensions
/cover-image article.md --type conceptual --palette warm --rendering flat-vector

# WeChat Official Account cover
/cover-image article.md --aspect 2.35:1

# Specify provider
/cover-image article.md --provider qwen

# Use style preset
/cover-image article.md --style tech-dark

# Large font for better visibility
/cover-image article.md --font-size large

# Generate multiple options
/cover-image article.md --n 3

# With reference images (Google/OpenAI only)
/cover-image article.md --ref style-ref.png

# Direct content input
/cover-image --palette mono --aspect 1:1 --quick
[paste content]

オプション

オプション説明
--type <name>hero、conceptual、typography、metaphor、scene、minimal
--palette <name>warm、elegant、cool、dark、earth、vivid、pastel、mono、retro
--rendering <name>flat-vector、hand-drawn、painterly、digital、pixel、chalk
--text <level>none、title-only、title-subtitle、text-rich
--mood <level>subtle、balanced、bold
--font <name>clean、handwritten、serif、display
--font-size <size>small、medium（デフォルト）、large、xlarge
--aspect <ratio>16:9（デフォルト）、2.35:1（公众号カバー）、4:3、3:2、1:1、3:4
--provider <name>qwen（デフォルト）、openai、google
--style <preset>tech-dark、tech-clean、lifestyle-warm、business-elegant、announcement-bold、minimal-zen、creative-playful、retro-vintage
--lang <code>タイトルの言語（en、zh、ja など）
--no-title--text none の別名
--n <count>生成する画像の数（1～4）
--quick確認を省略し、自動選択を使用
--ref <files...>スタイルや構図の参考にする画像

プロバイダー

プロバイダーモデルテキスト描画中国語対応価格
qwenqwen-image-plus非常に優れている中国語ネイティブ対応0.2 CNY/画像
openaigpt-image-1良好制限あり約$0.04/画像
googlegemini-2.0-flash-exp良好制限あり無料枠あり
プロバイダーの選択ロジック
  1. --provider が指定されている -> 指定されたプロバイダーを使用
  2. 中国語のタイトルを検出 -> qwen を自動選択
  3. 参考画像が提供されている -> google または openai を使用
  4. デフォルト -> qwen
Qwen-Image（デフォルト）

中国語テキストの描画に最適です。中国語の文字をネイティブにサポートしています。

API エンドポイント：https://dashscope.aliyuncs.com/api/v1/services/aigc/text2image/image-synthesis

環境変数：DASHSCOPE_API_KEY

対応サイズ：1664*928、1024*1024、928*1664、1472*1104、1104*1472

OpenAI

英語のテキストやクリエイティブなデザインに適しています。

環境変数：OPENAI_API_KEY

対応サイズ：1024x1024、1536x1024、1024x1536

Google

参考画像を使ったマルチモーダル生成に適しています。

環境変数：GOOGLE_API_KEY

対応サイズ：さまざまなアスペクト比に対応

5つの次元

次元値デフォルト
タイプhero、conceptual、typography、metaphor、scene、minimalauto
パレットwarm、elegant、cool、dark、earth、vivid、pastel、mono、retroauto
描画スタイルflat-vector、hand-drawn、painterly、digital、pixel、chalkauto
テキストnone、title-only、title-subtitle、text-richtitle-only
ムードsubtle、balanced、boldbalanced
フォントclean、handwritten、serif、displayclean

自動選択ルール：references/auto-selection.md

ギャラリー

タイプ：hero、conceptual、typography、metaphor、scene、minimal -> 詳細：references/types.md

パレット：warm、elegant、cool、dark、earth、vivid、pastel、mono、retro -> 詳細：references/palettes/

描画スタイル：flat-vector、hand-drawn、painterly、digital、pixel、chalk -> 詳細：references/renderings/

テキストレベル：none（ビジュアルのみ） | title-only（デフォルト） | title-subtitle | text-rich（タグ付き） -> 詳細：references/dimensions/text.md

ムードレベル：subtle（低コントラスト） | balanced（デフォルト） | bold（高コントラスト） -> 詳細：references/dimensions/mood.md

フォント：clean（サンセリフ） | handwritten | serif | display（太字の装飾体） -> 詳細：references/dimensions/font.md

ファイル構成

default_output_dir 設定に応じた出力ディレクトリ：

  • same-dir：{article-dir}/
  • imgs-subdir：{article-dir}/imgs/
  • independent（デフォルト）：cover-image/{topic-slug}/
<output-dir>/
├── source-{slug}.{ext}    # Source files
├── refs/                  # Reference images (if provided)
│   ├── ref-01-{slug}.{ext}
│   └── ref-01-{slug}.md   # Description file
├── prompts/cover.md       # Generation prompt
└── cover.png              # Output image

スラッグ：2～4語のケバブケース。競合する場合は -YYYYMMDD-HHMMSS を追加します。

ワークフロー

進捗チェックリスト
Cover Image Progress:
- [ ] Step 1: Analyze content + save refs + determine output dir
- [ ] Step 2: Confirm options (6 dimensions + provider) unless --quick
- [ ] Step 3: Create prompt
- [ ] Step 4: Generate image
- [ ] Step 5: Resize for platform (if needed)
- [ ] Step 6: Completion report
ステップ 1：コンテンツを分析する
  1. 参考画像を保存する（提供されている場合） -> references/workflow/reference-images.md
  2. ソースコンテンツを保存する（貼り付けられている場合は、source.md に保存）
  3. コンテンツを分析する：トピック、トーン、キーワード、視覚的な比喩
  4. 参考資料を詳細に分析する：具体的で明確な要素を抽出
  5. 言語を検出する：ソースとユーザー入力を比較
  6. 出力ディレクトリを決定する：ファイル構成のルールに従う
  7. プロバイダーを自動選択する：言語と参考資料に基づく
ステップ 2：オプションを確認する

確認の全手順：references/workflow/confirm-options.md

条件省略される項目引き続き確認する項目
--quick6 つの要素 + プロバイダーアスペクト比（--aspect が指定されていない場合）
6 つすべて + --aspect + --provider が指定済みすべてなし
ステップ 3：プロンプトを作成する

prompts/cover.md に保存します。テンプレート：references/workflow/prompt-template.md

重要 - フロントマター内の参考資料：

  • refs/ に保存したファイル -> フロントマターの references リストに追加します
  • スタイルを口頭で説明した場合（ファイルなし） -> references は省略し、本文で説明します
  • 書き込む前に確認 -> test -f refs/ref-NN-{slug}.{ext}

本文中の参考要素は、統合方法とともに詳細に記述し、「MUST」または「REQUIRED」を前置する必要があります。

ステップ 4：画像を生成する
  1. 再生成する場合は、既存の cover.png をバックアップする
  2. 言語とオプションに基づいてプロバイダーを選択する
  3. プロンプトのフロントマターから参考資料を処理する：
    • direct の使用 -> 参考画像を直接渡す（google/openai のみ）
    • style/palette -> 特徴を抽出し、プロンプトに追加する
  4. プロバイダー API を使用して生成する：
    • Qwen：dashscope API に POST し、結果をポーリングする
    • OpenAI：ImageGen ツールまたは API を使用する
    • Google：参考画像を使って ImageGen ツールを使用する
  5. 失敗した場合：自動で 1 回再試行する
ステップ 5：プラットフォームに合わせてサイズ変更する

生成した画像を対象プラットフォームのサイズに変更します：

プラットフォーム目標サイズアスペクト比
公式アカウントのカバー画像900x3832.35:1
ブログ／動画1920x108016:9
小紅書1080x10801:1
スマートフォン用ポスター1080x14403:4
ステップ 6：完了レポート
Cover Generated!

Provider: [provider]
Topic: [topic]
Type: [type] | Palette: [palette] | Rendering: [rendering]
Text: [text] | Mood: [mood] | Font: [font] | Aspect: [ratio]
Title: [title or "visual only"]
Language: [lang]
References: [N images or "extracted style" or "none"]
Location: [directory path]

Files:
- source-{slug}.{ext}
- prompts/cover.md
- cover.png
- cover-{platform}.png (if resized)

構図の原則

  • 余白：40～60% のゆとりを確保する
  • 視覚的な焦点：メイン要素を中央または左寄りに配置する
  • 人物：シンプルなシルエットにする。リアルな人物は使用しない
  • タイトル：ユーザーまたはソースに記載されたタイトルをそのまま使用し、決して創作しない

アスペクト比

比率プラットフォーム用途
2.35:1WeChat 公式アカウントのカバー画像公式アカウントのメイン画像、900x383px
16:9汎用ワイドスクリーンブログ、動画のカバー画像
1:1ソーシャルメディアWeibo、小紅書、Instagram
4:3クラシック比率プレゼンテーション、従来型メディア
3:2写真の標準比率写真風のカバー画像
3:4縦向きスマートフォン、ポスター

環境変数

変数必要な用途入手先
DASHSCOPE_API_KEYQwen（デフォルト）https://bailian.console.aliyun.com
OPENAI_API_KEYOpenAIhttps://platform.openai.com
GOOGLE_API_KEYGooglehttps://aistudio.google.com

References

Dimensions: text.md | mood.md | font.md Palettes: references/palettes/ Renderings: references/renderings/ Types: references/types.md Style Presets: references/style-presets.md Auto-Selection: references/auto-selection.md Visual Elements: references/visual-elements.md Workflow: confirm-options.md | prompt-template.md | reference-images.md | qwen-api.md

コメント

Markdown 対応