mcpField
Q
q-infographics

q-infographics

github.com/tyrealqデザイン・UI10950 回インストール5 週間前に更新
リポジトリ

q-infographics について

Q-Infographicsは、元文書からビジネスストーリーとインフォグラフィック画像を作るスキルです。Geminiでストーリーを生成し、GPT Image 2またはGeminiで画像を作成する段階的なワークフローで、各工程に確認の機会を設けます。

主な機能

  1. 01文書をMarkdownに変換
  2. 02Geminiによるビジネスストーリー生成
  3. 03GPT Image 2またはGeminiで画像作成
  4. 04各工程後のレビュー待ち
  5. 05カスタマイズ可能なロゴの重ね合わせ

活用シーン

  1. 01レポートのインフォグラフィック化
  2. 02画像生成前のストーリー確認
  3. 03インフォグラフィックへのロゴ追加

インストール

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

$npx skills add https://github.com/tyrealq/q-skills --skill q-infographics

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

同梱ファイル

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

references/
image.txt
prompts_reference.md
story.txt
scripts/
gen_image.py
gen_story.py

詳細

Q-Infographics

ソースドキュメントをビジネスストーリーとインフォグラフィック画像に変換します。

プランモードの場合： 簡潔なプラン「q-infographics スキルを実行：ソース ドキュメントを Markdown に変換し、Gemini でビジネスストーリーを生成して、インフォグラフィック画像を生成する。」 を作成し、その後すぐにプランモードを終了します。プランモード中は、ドキュメントの変換、 ストーリーの生成、画像の生成を試みないでください。

スクリプトディレクトリ

エージェントの実行手順：

  1. この SKILL.md ファイルのディレクトリパスを SKILL_DIR として特定します。
  2. スクリプトのパス = ${SKILL_DIR}/scripts/<script-name>。
  3. プロンプトのパス = ${SKILL_DIR}/references/<prompt-name>。
リソース用途
scripts/gen_story.pyGemini API を使ってドキュメントからビジネスストーリーを生成
scripts/gen_image.pyGPT Image 2（デフォルト）または Gemini を使ってインフォグラフィック画像を生成
references/story.txtストーリー生成プロンプトのテンプレート
references/image.txtインフォグラフィック生成プロンプトのテンプレート

依存関係

openai
google-genai
Pillow
markitdown

インストール：pip install openai google-genai Pillow markitdown

デフォルトのインフォグラフィックモデルは gpt-image-2 です（OPENAI_API_KEY が必要です）。gemini-3-pro-image-preview を使用するには、IMAGE_MODEL=gemini を設定するか、gen_image.py に --model gemini を渡してください（GEMINI_API_KEY が必要です）。ストーリー生成（gen_story.py）では常に Gemini を使用します。

.env からキーを読み込みます：

PowerShell（Windows）：

$env:GEMINI_API_KEY = (Get-Content path\to\.env | Where-Object { $_ -match '^GEMINI_API_KEY=' } | Select-Object -First 1).Split('=',2)[1]

Bash（macOS/Linux）：

export $(cat /path/to/.env | xargs)

参考資料

  • references/prompts_reference.md — ストーリーと画像のプロンプトの説明および重要な要素

基本原則

  • 各ステップの後に確認ポイントを設けます。出力を表示し、次に進む前にユーザーの確認を得ます
  • 出力ファイルにはソースのファイル名に _INFO の接尾辞を付けます（例：MY_REPORT.pdf → MY_REPORT_INFO.jpg）
  • ロゴは画像の右下隅に自動的に重ねて表示されます（画像幅の約6％）。assets/Logo_Q.png でカスタマイズできます

ワークフロー

ステップ操作コマンド／参考資料
1ソースドキュメントを Markdown に変換し、確認用に先頭の約50行を表示markitdown <input_file> -o <OUTPUT.md>
2ビジネスストーリーを生成し、確認用にプロンプトと出力全体を表示python "${SKILL_DIR}/scripts/gen_story.py" <INPUT.md> "${SKILL_DIR}/references/story.txt" > STORY_OUTPUT.md
3インフォグラフィック画像を生成し、確認用に結果を表示python "${SKILL_DIR}/scripts/gen_image.py" STORY_OUTPUT.md "${SKILL_DIR}/references/image.txt" <SOURCE_NAME>_INFO

カスタマイズ

  • ストーリーのスタイル：${SKILL_DIR}/references/story.txt を編集します。references/prompts_reference.md を参照してください
  • インフォグラフィックのスタイル：${SKILL_DIR}/references/image.txt を編集します。references/prompts_reference.md を参照してください

対象範囲

含む： ドキュメントからストーリーへの変換、インフォグラフィックの生成、ロゴのブランディング。 含まない： スライドデッキ（q-presentations を使用）、データの可視化、グラフの生成。

コメント

Markdown 対応