mcpField
B
baoyu-article-illustrator

baoyu-article-illustrator

github.com/jimliuクリエイティブ・メディア27.0k32.0k 回インストール7 週間前に更新
リポジトリ

baoyu-article-illustrator について

baoyu-article-illustratorは、記事を分析して挿絵の位置を特定し、画像を生成するスキルです。タイプ、スタイル、配色に沿ってビジュアルを構成し、バッチ生成にも対応します。

主な機能

  1. 01記事内容を分析して挿絵位置を特定
  2. 02タイプ、スタイル、配色で画像を計画
  3. 03挿絵のアウトラインとプロンプトを作成
  4. 04参考画像で挿絵の方向性を指定
  5. 05画像のバッチ生成

活用シーン

  1. 01チュートリアル記事の挿絵位置を決定
  2. 02手順やタイムラインの内容を画像化
  3. 03記事内の複数の挿絵のスタイルを統一
  4. 04計画した記事画像をまとめて生成

インストール

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

$npx skills add https://github.com/jimliu/baoyu-skills --skill baoyu-article-illustrator

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

同梱ファイル

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

prompts/
system.md
references/
codex-imagegen.md
prompt-construction.md
style-presets.md
styles.md
references/config/
first-time-setup.md
preferences-schema.md
references/palettes/
macaron.md
mono-ink.md
neon.md
warm.md
references/styles/
blueprint.md
chalkboard.md
editorial.md
elegant.md
fantasy-animation.md
flat-doodle.md
flat.md
ink-notes.md
intuition-machine.md
minimal.md
nature.md
notion.md
pixel-art.md
playful.md
retro.md
scientific.md
screen-print.md
sketch-notes.md
sketch.md

詳細

記事イラストレーター

記事を分析し、イラストの配置箇所を特定して、タイプ × スタイル × パレットの一貫性を保った画像を生成します。

ユーザー入力ツール

このスキルがユーザーに質問する場合は、次のツール選択ルールに従ってください(優先順位順)。

  1. 組み込みのユーザー入力ツールを優先します。現在のエージェントのランタイムが公開しているものを使用します。例:AskUserQuestion、request_user_input、clarify、ask_user、または同等のツール。
  2. 代替手段:そのようなツールがない場合は、番号付きのプレーンテキストメッセージを出力し、各質問について選択した番号または回答をユーザーに返信してもらいます。
  3. 質問のまとめ方:ツールが1回の呼び出しで複数の質問に対応している場合は、該当する質問をすべて1回の呼び出しにまとめます。1つずつしか質問できない場合は、優先順位に従って順番に質問します。

以下の AskUserQuestion の具体例は参考例です。他のランタイムでは、ローカルの同等ツールに置き換えてください。

画像生成ツール

このスキルで画像をレンダリングする必要がある場合は、次の順序でバックエンドを決定してください。

  1. 現在のリクエストによる指定 — ユーザーが現在のメッセージで特定のバックエンドを指定している場合は、それを使用します。
  2. 保存済みの設定 — EXTEND.md で preferred_image_backend に、現在利用可能なバックエンドが設定されている場合は、それを使用します。
  3. 自動選択(設定が auto、未設定、または指定されたバックエンドが利用できない場合):
    • Codex(imagegen) — まず、利用可能なスキル/ツールの一覧を確認します。imagegen という名前のスキルがある場合は、Codex 上で実行中です。必ず Skill ツールを使い、skill: "imagegen" を指定して呼び出してください。保存済みのプロンプトファイルの内容と、出力パスおよびアスペクト比を Codex imagegen 独自の引数に従って渡します。このランタイムでは、Codex imagegen は公式のラスター画像バックエンドであり、baoyu-image-gen などの非ネイティブスキルより優先されます。ただし、ユーザーが別の preferred_image_backend を明示的に指定している場合を除きます。
    • codex exec 経由の Codex(codex-imagegen) — ランタイムにネイティブの imagegen スキルがなく、codex CLI が PATH 上にあり、codex login が有効な場合は、baoyu-image-gen --provider codex-cli 経由(推奨)で実行します。baoyu-image-gen が利用できない場合は、同梱のラッパーを直接呼び出します。詳細、パラメーター、およびランタイムの検出手順は references/codex-imagegen.md にあります。この分岐を選択した場合に限り、このファイルを読み込んでください。
    • Cursor(GenerateImage) — ランタイムにネイティブの GenerateImage ツールがある場合は、Cursor 上で実行中です。ほかの非ネイティブスキルより優先されます。必ず次の2点に注意してください。(a)アスペクト比のパラメーターはありません。description として渡すプロンプト文に、目標とするアスペクト比または寸法を明記します。(b)出力ディレクトリを指定できません。ツールが管理する場所に保存されるため、生成後にスキルが想定する出力パス(例:outputs/.../NN-xxx.png)へファイルをコピーまたは移動します。参照画像は reference_image_paths に指定します。
    • その他のランタイムネイティブツール — ランタイムに別のネイティブ画像ツール(例:Hermes image_generate)がある場合も、同様に使用します。
    • それ以外の場合、インストール済みの非ネイティブバックエンドが1つだけ(例:baoyu-image-gen)なら、それを使用します。
    • それ以外(ランタイムネイティブツールがなく、複数の非ネイティブバックエンドがある場合)は、ユーザーに一度だけ質問します。他の初回質問がある場合はまとめてください。
  4. 利用できるものがない場合は、その旨をユーザーに伝え、次にどうするか尋ねます。

⛔ ラスター画像の生成を、SVG、HTML、canvas、その他のコードベースのレンダリングで代用してはいけません。 Codex imagegen の説明にも、「リポジトリのネイティブコードやベクターではなく、ビットマップアセットを出力する場合」に使用するよう記載されています。手順3でラスター画像バックエンドを決定できない場合は、手順4に進んでユーザーに確認してください。SVGを黙って出力したり、インラインの <svg> マークアップを書いたり、代わりに HTML/CSS アートを生成したりしてはいけません。記事やセクションが「図解のように見える」場合も同様です。このルールを呼び出したスキルは、ラスター画像が必要だとすでに判断しています。 ⛔ 生成済みのビットマップに上描きして、レンダリングされたテキストを修正してはいけません。 ImageMagick、Pillow、Canvas、SVG、HTML/CSS、OCR スクリプトなど、すでに生成されたイラスト内のラベル、キャプション、その他のテキストを覆う、書き換える、消す、なぞる、置き換えるプログラムによるオーバーレイは使用しないでください。テキストが間違っている、または不明瞭な場合は、修正したプロンプトで再生成する、画像内のテキストを減らすかなくして描き直す、または不完全な候補のどれを残すかユーザーに尋ねてください。

preferred_image_backend: ask を設定すると、利用可能なバックエンドにかかわらず、毎回ステップ3のプロンプトが表示されます。固定するバックエンドは、以下の ## Changing Preferences セクションで変更できます。

プロンプトファイルの要件(必須):バックエンドを呼び出す前に、各画像の完全な最終プロンプトを prompts/ 内の独立したファイル(命名規則:NN-{type}-[slug].md)に保存してください。バックエンドにはプロンプトファイル(またはその内容)を渡します。このファイルは再現性を確保する記録となり、プロンプトを再生成せずにバックエンドを切り替えられます。

上記の具体的なツール名(imagegen、GenerateImage、image_generate、baoyu-image-gen)は例です。同じルールに従って、ローカル環境にある同等のツールに置き換えてください。

バッチ生成ポリシー

実行分のすべてのプロンプトファイルを保存し、検証した後は、原則として画像をバッチで生成してください。

優先順位:

  1. 選択したバックエンドにネイティブのバッチ/複数タスク用インターフェースがある場合は、それを使用してください。各タスクには、それぞれのプロンプトファイル、出力パス、アスペクト比、直接参照画像を指定してください。
  2. ネイティブのバッチインターフェースはないものの、ランタイムでツール呼び出しを並列実行できる場合は、generation_batch_size 枚までを一度に処理してください。デフォルトは 4 です。現在のメッセージにある明示的なユーザー指示(--batch-size 4 や「并行4张一起生成」など)が EXTEND.md より優先されます。
  3. ネイティブのバッチ機能もツール呼び出しの並列実行もできない場合は、順次生成してください。

ルール:

  • バッチ分のプロンプトファイルがすべてディスク上に揃うまで、最初のバッチを開始しないでください。
  • 失敗した項目のみを一度再試行し、成功した項目は再生成しないでください。
  • 画像レンダリングを並列化する目的だけでサブエージェントを使用しないでください。サブエージェントは、個別のプロンプトの反復や創作上の検討にのみ使用してください。

確認ポリシー

デフォルトの動作:生成前に確認します。

  • スキルの明示的な呼び出し、ファイルパス、一致したシグナル/プリセット、EXTEND.md のデフォルト設定は、いずれも推奨情報としてのみ扱います。確認を省略する許可とはみなしません。
  • ユーザーがステップ3を完了するまで、ステップ4以降を開始しないでください。
  • 確認を省略できるのは、現在のリクエストで「直接生成」「確認不要」「確認をスキップ」「デフォルトで生成」など、それに相当する指示が明示されている場合のみです。
  • 確認が明示的に省略された場合は、生成を開始する前に、想定したタイプ/密度/スタイル/配色/言語/バックエンドを次のユーザー向けの更新で伝えてください。

参照画像

ユーザーは --ref <files...> を指定するか、ファイルパスを提示するか、会話内に画像を貼り付けて参照画像を提供できます。参照画像は、特定のイラストのスタイル、配色、構図、被写体の参考にします。

検出、保存、処理に関する詳細なルールは references/workflow.md を参照してください(ステップ1.0で references/NN-ref-{slug}.{ext} に保存し、ステップ5.3でイラストごとの用途 direct | style | palette を処理します)。選択したバックエンドがバッチ入力に対応している場合、各プロンプトファイルの references: フロントマターにある用途 direct の項目をバッチペイロードに引き継ぎ、バックエンドに渡せるようにしてください(例:baoyu-image-gen ではタスクごとに ref を指定できます)。

3つの要素

要素制御する内容例
タイプ情報の構造インフォグラフィック、シーン、フローチャート、比較、フレームワーク、タイムライン
スタイル描画方法notion、温かみのあるスタイル、ミニマル、設計図、水彩、エレガント
パレット配色(任意)マカロン、温かみのある配色、ネオン — スタイルのデフォルトカラーを上書きします

自由に組み合わせられます:--type infographic --style vector-illustration --palette macaron

またはプリセットを使用します:--preset edu-visual → タイプ、スタイル、パレットを1つのフラグで指定します。スタイルプリセットを参照してください。

タイプ

タイプ最適な用途
infographicデータ、指標、技術
scene物語、感情
flowchartプロセス、ワークフロー
comparison横並びの比較、選択肢
frameworkモデル、アーキテクチャ
timeline歴史、進化

スタイル

コアスタイル、全ギャラリー、およびタイプ × スタイルの互換性については、references/styles.mdを参照してください。

ワークフロー

- [ ] Step 1: Pre-check (EXTEND.md, references, config)
- [ ] Step 2: Analyze content
- [ ] Step 3: Confirm settings (AskUserQuestion)
- [ ] Step 4: Generate outline
- [ ] Step 5: Generate images
- [ ] Step 6: Finalize
ステップ 1:事前確認

1.5 設定を読み込む(EXTEND.md)⛔ 必須

優先順位に従ってEXTEND.mdを確認します。最初に見つかったものを使用します。

優先順位パス適用範囲
1.baoyu-skills/baoyu-article-illustrator/EXTEND.mdプロジェクト
2${XDG_CONFIG_HOME:-$HOME/.config}/baoyu-skills/baoyu-article-illustrator/EXTEND.mdXDG
3$HOME/.baoyu-skills/baoyu-article-illustrator/EXTEND.mdユーザーのホーム
結果アクション
見つかった読み込み、解析し、概要を表示する
見つからない⛔ 初回セットアップを実行する

手順の全体はreferences/workflow.mdを参照してください。

ステップ 2:分析
分析項目出力
コンテンツの種類技術/チュートリアル/方法論/物語
目的情報/可視化/想像
主な論点2~5個の要点
配置箇所イラストが価値を加える場所

重要:比喩は、文字どおりのイメージではなく、根底にある概念を可視化してください。

手順の全体はreferences/workflow.mdを参照してください。

ステップ 3:設定を確認 ⚠️

必須の関門:確認ポリシーにより、このステップは必須です。ユーザーがここで確認するか、現在のリクエストで「直接生成」など同等の表現を使って明示的に省略しない限り、ステップ4以降を開始できません。

AskUserQuestionは1回のみ、質問は最大4つ。Q1~Q2は必須です。Q3はプリセットを選択していない場合に必須です。

Q選択肢
Q1:プリセットまたはタイプ[推奨プリセット]、[別のプリセット]、または手動選択:インフォグラフィック、シーン、フローチャート、比較、フレームワーク、タイムライン、混合
Q2:密度最小(1~2)、バランス(3~5)、セクションごと(推奨)、豊富(6以上)
Q3:スタイル[推奨]、ミニマルフラット、SF風、手描き、エディトリアル、シーン、ポスター、その他 — プリセットを選択した場合は省略
Q4:パレットデフォルト(スタイルのカラー)、マカロン、温かみのある配色、ネオン — プリセットにパレットが含まれる場合、またはpreferred_paletteが設定されている場合は省略
Q5:言語記事の言語がEXTEND.mdの設定と異なる場合

手順の全体はreferences/workflow.mdを参照してください。

ステップ 4:アウトラインを生成

フロントマター(type、density、style、palette、image_count)とエントリーを含むoutline.mdを保存します。

## Illustration 1
**Position**: [section/paragraph]
**Purpose**: [why]
**Visual Content**: [what]
**Filename**: 01-infographic-concept-name.png

テンプレートの全体はreferences/workflow.mdを参照してください。

ステップ 5:画像を生成する

⛔ ブロッキング:画像を生成する前に、プロンプトファイルを必ず保存してください。 これは、どのバックエンドを選ぶ場合でも必須です。プロンプトファイルは再現性を記録するものです。

  1. 各イラストについて、references/prompt-construction.md に従ってプロンプトファイルを作成します。
  2. YAML フロントマターを付けて、prompts/NN-{type}-{slug}.md に保存します。
  3. プロンプトでは、構造化されたセクション(ZONES / LABELS / COLORS / STYLE / ASPECT)を含む、タイプ別のテンプレートを必ず使用してください。
  4. LABELS には、実際の数値、用語、指標、引用など、記事固有のデータを必ず含めてください。
  5. プロンプトファイルを保存する前に、アドホックなインラインプロンプトを --prompt に渡すことは絶対にしないでください。
  6. 冒頭の ## Image Generation Tools ルールに従ってバックエンドを選択します。利用可能なものを使用してください。複数ある場合は、ユーザーに一度だけ確認します。生成を始める前に、セッションごとに一度だけ実行してください。
    • codex-imagegen の呼び出し:ルールによって codex-imagegen が選ばれた場合は、呼び出しの仕様(推奨される baoyu-image-gen --provider codex-cli の経路、実行時のラッパーの検出方法、パラメーターに関する注意事項、標準出力のスキーマ、バッチ処理の動作)について、references/codex-imagegen.md を参照してください。
  7. 実行方法:## Batch Generation Policy に従ってバッチ単位で生成します。まずバックエンドのネイティブなバッチ処理を使い、次に実行時の並列ツール呼び出しを試し、最後の手段として順次実行します。EXTEND.md または現在のリクエストで上書きされない限り、デフォルトのバッチサイズは 4 です。
  8. プロンプトのフロントマターに従って、参照(direct / style / palette)を処理します。
  9. EXTEND.md で有効になっている場合は、ウォーターマークを適用します。
  10. 保存済みのプロンプトファイルを使って生成し、失敗した場合は一度だけ再試行します。

手順の全容:references/workflow.md

ステップ 6:仕上げる

段落の後に ![description]({relative-path}/NN-{type}-{slug}.png) を挿入します。パスは、出力ディレクトリの設定に基づいて記事ファイルからの相対パスとして算出します。

Article Illustration Complete!
Article: [path] | Type: [type] | Density: [level] | Style: [style] | Palette: [palette or default]
Images: X/N generated

出力ディレクトリ

出力ディレクトリは、初回セットアップ時に設定する EXTEND.md の default_output_dir によって決まります。

default_output_dir出力パスMarkdown 挿入パス
imgs-subdir (デフォルト){article-dir}/imgs/imgs/NN-{type}-{slug}.png
same-dir{article-dir}/NN-{type}-{slug}.png
illustrations-subdir{article-dir}/illustrations/illustrations/NN-{type}-{slug}.png
independentillustrations/{topic-slug}/illustrations/{topic-slug}/NN-{type}-{slug}.png (cwd からの相対パス)

補助ファイル(アウトライン、プロンプト)はすべて出力ディレクトリ内に保存します。

{output-dir}/
├── outline.md
├── prompts/
│   └── NN-{type}-{slug}.md
└── NN-{type}-{slug}.png

入力が貼り付けられたコンテンツ(ファイルパスなし)の場合は、常に illustrations/{topic-slug}/ を使用し、source-{slug}.{ext} を同じ場所に保存します。

スラッグ:2~4 語のケバブケース。競合:-YYYYMMDD-HHMMSS を追加します。

変更

操作手順
編集プロンプトを更新 → 再生成 → 参照を更新
追加配置 → プロンプト → 生成 → アウトラインを更新 → 挿入
削除ファイルを削除 → 参照を削除 → アウトラインを更新

テキストの修正に関する方針:

  • ラベル、キャプションなど、描画されたテキストに誤字、文字化け、読みにくさ、または視覚的な弱さがある場合、コードでビットマップを修正しないでください。
  • テキストを修正して再生成する場合は、新しいプロンプトファイルと新しい出力パスを用意し、問題のある候補を比較用に残してください。
  • 後処理は、テキストや主要な構図を変更しないトリミング、リサイズ、圧縮、形式変換に限定します。

リファレンス

ファイル内容
references/workflow.md詳細な手順
references/usage.mdコマンドの構文
references/styles.mdスタイルギャラリー+パレットギャラリー
references/style-presets.mdプリセットのショートカット(タイプ+スタイル+パレット)
references/prompt-construction.mdプロンプトのテンプレート
references/config/first-time-setup.md初回セットアップ

設定の変更

EXTEND.md は、ステップ 1.5 で最初に見つかったパスにあります。変更方法は 3 つあります。

  • 直接編集 — EXTEND.md を開いて項目を変更します。完全なスキーマについては references/config/preferences-schema.md を参照してください。
  • 対話形式で再設定 — EXTEND.md を削除する(または「reconfigure baoyu-article-illustrator preferences」/「重新配置」と指示する)と、次回の実行時に初回セットアップが再び実行されます。
  • よくある1行編集:
    • preferred_image_backend: auto — デフォルトです。実行環境に組み込まれたツールを優先し、利用できるバックエンドが1つだけの場合はそれを使用します。組み込みでないバックエンドが複数ある場合にのみ確認します。
    • preferred_image_backend: codex-imagegen — Codex に組み込まれた機能を指定します。
    • preferred_image_backend: baoyu-image-gen — baoyu-image-gen スキルを指定します。
    • preferred_image_backend: ask — 実行のたびにバックエンドを確認します。
    • generation_batch_size: 4 — デフォルトでは、実行環境が並列生成呼び出しに対応している場合、画像を同時にレンダリングする数を指定します。
    • preferred_type: infographic、preferred_style: notion、preferred_palette: macaron、language: zh。
    • default_output_dir: imgs-subdir — 記事を基準とした、生成画像の保存先を指定します。

コメント