baoyu-article-illustrator

記事イラストレーター

記事を分析し、イラストの配置位置を特定して、Type × Style の一貫性を保ちながら画像を生成します。

使用方法

# Auto-select type and style based on content
/baoyu-article-illustrator path/to/article.md

# Specify type
/baoyu-article-illustrator path/to/article.md --type infographic

# Specify style
/baoyu-article-illustrator path/to/article.md --style blueprint

# Combine type and style
/baoyu-article-illustrator path/to/article.md --type flowchart --style notion

# Specify density
/baoyu-article-illustrator path/to/article.md --density rich

# Direct content input
/baoyu-article-illustrator
[paste content]

オプション

オプション	説明
--type <name>	イラストの種類（Type Gallery を参照）
--style <name>	ビジュアルスタイル（Style Gallery を参照）
--density <level>	画像の枚数：minimal / balanced / rich

2つの軸

軸	制御する内容	例
Type	情報構造、コンテンツのレイアウト	infographic、scene、flowchart、comparison、framework、timeline
Style	ビジュアルの美しさ、色、雰囲気	notion、warm、minimal、blueprint、watercolor、elegant

Type × Style は自由に組み合わせられます。例：--type infographic --style blueprint は、設計図風の美しさを備えた技術データの可視化を作成します。

Type ギャラリー

種類	説明	最適な用途
infographic	データの可視化、グラフ、指標	技術記事、データ分析、比較
scene	雰囲気のあるイラスト、ムードの表現	物語性のある記事、個人的な体験談、感情に訴えるコンテンツ
flowchart	プロセス図、手順の可視化	チュートリアル、ワークフロー、判断ツリー
comparison	並列表示、前後の対比	製品比較、選択肢の評価
framework	概念マップ、関係図	方法論、モデル、アーキテクチャ設計
timeline	時系列での進行	歴史、プロジェクトの進捗、進化

密度のオプション

密度	枚数	説明
minimal	1-2	中核となる概念のみ
balanced (デフォルト)	3-5	主要なセクションをカバー
rich	6+	視覚的な補助を豊富に追加

Style ギャラリー

スタイル	説明	最適な用途
notion (デフォルト)	ミニマルな手描きの線画	ナレッジ共有、SaaS、生産性向上
elegant	洗練された上品なスタイル	ビジネス、ソートリーダーシップ
warm	親しみやすく、近づきやすいスタイル	自己成長、ライフスタイル、教育
minimal	極めてすっきりとした、禅のようなスタイル	哲学、ミニマリズム、中核概念
blueprint	技術的な設計図	アーキテクチャ、システム設計、エンジニアリング
watercolor	自然な温かみのある柔らかなアートスタイル	ライフスタイル、旅行、クリエイティブ
editorial	雑誌風のインフォグラフィック	技術解説、ジャーナリズム
scientific	学術的で精密な図表	生物学、化学、技術研究

スタイルの詳細な仕様：references/styles/<style>.md

Type × Style の互換性

	notion	warm	minimal	blueprint	watercolor	elegant	editorial	scientific
infographic	✓✓	✓	✓✓	✓✓	✓	✓✓	✓✓	✓✓
scene	✓	✓✓	✓	✗	✓✓	✓	✓	✗
flowchart	✓✓	✓	✓	✓✓	✗	✓	✓✓	✓
comparison	✓✓	✓	✓✓	✓	✓	✓✓	✓✓	✓
framework	✓✓	✓	✓✓	✓✓	✗	✓✓	✓	✓✓
timeline	✓✓	✓	✓	✓	✓✓	✓✓	✓✓	✓

✓✓ = 特におすすめ | ✓ = 互換性あり | ✗ = おすすめしません

自動選択

コンテンツの特徴	おすすめの種類	おすすめのスタイル
API、指標、データ、比較、数値	infographic	blueprint、notion
物語、感情、旅、体験、個人的な内容	scene	warm、watercolor
方法、手順、ワークフロー、プロセス、チュートリアル	flowchart	notion、minimal
比較、長所と短所、変更前と変更後、代替案	comparison	notion、elegant
フレームワーク、モデル、アーキテクチャ、原則	framework	blueprint、notion
歴史、時系列、進捗、進化	timeline	elegant、warm

出力ディレクトリ

illustrations/{topic-slug}/
├── source-{slug}.{ext}
├── outline.md
├── prompts/
│   └── illustration-{slug}.md
└── NN-{type}-{slug}.png

スラッグ：トピックを表す2～4語を kebab-case で抽出します。 競合：すでに存在する場合は -YYYYMMDD-HHMMSS を付加します。

ワークフロー

進捗

- [ ] Step 1: Setup & Analyze
- [ ] Step 2: Confirm Settings ⚠️ REQUIRED
- [ ] Step 3: Generate Outline
- [ ] Step 4: Generate Images
- [ ] Step 5: Finalize

ステップ 1：セットアップと分析

1.1 設定を読み込む（EXTEND.md）

Bash を使用して、EXTEND.md が存在するか優先順位に従って確認します：

# Check project-level first
test -f .baoyu-skills/baoyu-article-illustrator/EXTEND.md && echo "project"

# Then user-level (cross-platform: $HOME works on macOS/Linux/WSL)
test -f "$HOME/.baoyu-skills/baoyu-article-illustrator/EXTEND.md" && echo "user"

┌──────────────────────────────────────────────────────────┬───────────────────┐ │ パス │ 場所 │ ├──────────────────────────────────────────────────────────┼───────────────────┤ │ .baoyu-skills/baoyu-article-illustrator/EXTEND.md │ プロジェクトディレクトリ │ ├──────────────────────────────────────────────────────────┼───────────────────┤ │ $HOME/.baoyu-skills/baoyu-article-illustrator/EXTEND.md │ ユーザーホーム │ └──────────────────────────────────────────────────────────┴───────────────────┘

┌───────────┬───────────────────────────────────────────────────────────────────────────┐ │ 結果 │ アクション │ ├───────────┼───────────────────────────────────────────────────────────────────────────┤ │ 見つかった │ 読み込み、解析し、要約を表示する │ ├───────────┼───────────────────────────────────────────────────────────────────────────┤ │ 見つからない │ AskUserQuestion を使ってユーザーに尋ねる（references/config/first-time-setup.md を参照） │ └───────────┴───────────────────────────────────────────────────────────────────────────┘

EXTEND.md がサポートする項目：透かし | 推奨するタイプ／スタイル | カスタムスタイルの定義 | 言語設定

スキーマ：references/config/preferences-schema.md

1.2 コンテンツを分析する

記事を読み、言語を検出し、コンテンツを分類します。

分析項目	説明
コンテンツタイプ	技術／チュートリアル／方法論／物語
中核となる主張	視覚化が必須の主なポイントを2～5個
視覚化の機会	イラストが価値を加える箇所
推奨タイプ	コンテンツの特徴に基づく
推奨密度	記事の長さと複雑さに基づく

1.3 中核となる主張を抽出する

視覚化が必須の中核となる主張を2～5個抽出します：

• 主な論旨
• 読者が知っておくべき重要な概念
• 比較・対比されている内容
• 提案されているフレームワーク／モデル

重要：記事で比喩（例：「電動ノコギリでスイカを切る」）が使われている場合、それを文字どおりに描写してはいけません。代わりに、根底にある概念を視覚化してください。

1.4 位置を特定する

イラストにするもの：

• 中核となる主張（必須）
• 視覚化が必要な抽象概念
• データの比較、指標
• プロセス、ワークフロー

イラストにしないもの：

• 比喩を文字どおりに描写したもの
• 情報のない装飾的な場面
• 汎用的なイラスト

ステップ 2：設定を確認する ⚠️

省略しないでください。 AskUserQuestion を使い、1 回の呼び出しで 3～4 個の質問をします。

質問 1：イラストのタイプ

コンテンツ分析に基づき、タイプを推奨します：

• [特徴に基づいて推奨するタイプ]（推奨）
• infographic - データの視覚化、チャート
• scene - 雰囲気、ムードの表現
• flowchart - プロセス、手順
• comparison - 左右に並べた対比
• framework - 概念間の関係
• timeline - 時系列の推移
• mixed - 複数のタイプを組み合わせる

質問 2：密度

• minimal（画像 1～2 枚）- 中核となる概念のみ
• balanced（画像 3～5 枚）（推奨）- 主要なセクション
• rich（画像 6 枚以上）- 包括的な視覚的サポート

質問 3：スタイル

推奨タイプに基づき、相性のよいスタイルを提案します（タイプ × スタイルの互換性マトリックスを参照）：

• [推奨タイプに最適な互換スタイル]（推奨）
• [その他の相性のよいスタイル：マトリックスで ✓✓]
• [互換性のあるスタイル：マトリックスで ✓]

質問 4（ソース言語がユーザーの言語と異なる場合のみ）：

• 言語：ソース言語／ユーザーの言語

ステップ 3：アウトラインを作成する

確定したタイプ + 密度 + スタイルに基づき、イラストのアウトラインを作成します。

アウトラインの形式（outline.md）：

---
type: infographic
density: balanced
style: blueprint
image_count: 4
---

## Illustration 1

**Position**: [section] / [paragraph]
**Purpose**: [why this illustration helps]
**Visual Content**: [what to show]
**Type Application**: [how type applies here]
**Filename**: 01-infographic-concept-name.png

## Illustration 2
...

アウトラインの要件：

• イラストを配置する各箇所は、コンテンツ上の必要性に基づいていること
• すべてのイラストでタイプが一貫して適用されていること
• 視覚的な説明にスタイルの特徴が反映されていること
• 数が選択した密度と一致していること

ステップ 4：画像を生成する

4.1 プロンプトを作成する

以下の「プロンプト作成の原則」に従います。それぞれを prompts/illustration-{slug}.md に保存します。

4.2 生成スキルを選択する

利用可能な画像生成スキルを確認します。複数ある場合は、ユーザーに選択を依頼します。

4.3 透かしを適用する（設定で有効になっている場合）

プロンプトに次の文を追加します：Include a subtle watermark "[content]" positioned at [position] with approximately [opacity*100]% visibility.

4.4 生成する

1. 順番に生成します
2. 生成するたびに：「X/N を生成しました」
3. 失敗した場合：自動で 1 回再試行し、その後ログに記録して続行します

ステップ 5：仕上げる

5.1 記事を更新する

対応する段落の後に挿入します：

![description](illustrations/{slug}/NN-{type}-{slug}.png)

代替テキスト：記事と同じ言語で簡潔に説明します。

5.2 概要を出力する

Article Illustration Complete!

Article: [path]
Type: [type name]
Density: [minimal/balanced/rich]
Style: [style name]
Location: [directory path]
Images: X/N generated

Positions:
- 01-infographic-xxx.png → After "[Section]"
- 02-infographic-yyy.png → After "[Section]"

[If failures]
Failed:
- NN-type-zzz.png: [reason]

プロンプトの作成

原則

良いプロンプトには、次の内容を含める必要があります。

1. まずレイアウト構成を示す：構図、領域、流れの方向を説明します
2. 具体的なデータ／ラベルを示す：実際の数値や記事内の用語を使います
3. 視覚的な関係を示す：各要素がどのようにつながるかを説明します
4. 意味に基づく色を使う：意味に応じて色を選びます（赤＝警告、緑＝効率的）
5. スタイルの特徴を示す：線の表現、テクスチャ、雰囲気を説明します
6. アスペクト比を示す：比率と複雑さのレベルで締めくくります

種類別プロンプト

インフォグラフィック：

[Title] - Data Visualization

Layout: [grid/radial/hierarchical]

ZONES:
- Zone 1: [data point with specific values]
- Zone 2: [comparison with metrics]
- Zone 3: [summary/conclusion]

LABELS: [specific numbers, percentages, terms from article]
COLORS: [semantic color mapping]
STYLE: [style characteristics]
ASPECT: 16:9

シーン：

[Title] - Atmospheric Scene

FOCAL POINT: [main subject]
ATMOSPHERE: [lighting, mood, environment]
MOOD: [emotion to convey]
COLOR TEMPERATURE: [warm/cool/neutral]
STYLE: [style characteristics]
ASPECT: 16:9

フローチャート：

[Title] - Process Flow

Layout: [left-right/top-down/circular]

STEPS:
1. [Step name] - [brief description]
2. [Step name] - [brief description]
...

CONNECTIONS: [arrow types, decision points]
STYLE: [style characteristics]
ASPECT: 16:9

比較：

[Title] - Comparison View

LEFT SIDE - [Option A]:
- [Point 1]
- [Point 2]

RIGHT SIDE - [Option B]:
- [Point 1]
- [Point 2]

DIVIDER: [visual separator]
STYLE: [style characteristics]
ASPECT: 16:9

フレームワーク：

[Title] - Conceptual Framework

STRUCTURE: [hierarchical/network/matrix]

NODES:
- [Concept 1] - [role]
- [Concept 2] - [role]

RELATIONSHIPS: [how nodes connect]
STYLE: [style characteristics]
ASPECT: 16:9

タイムライン：

[Title] - Chronological View

DIRECTION: [horizontal/vertical]

EVENTS:
- [Date/Period 1]: [milestone]
- [Date/Period 2]: [milestone]

MARKERS: [visual indicators]
STYLE: [style characteristics]
ASPECT: 16:9

避けるべきこと

• 曖昧な説明（「素敵な画像」など）
• 比喩をそのまま描いたイラスト
• 具体的なラベルや注釈の不足
• 汎用的な装飾要素

変更

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

参照

ファイル	内容
references/styles.md	スタイルギャラリーと互換性マトリックス
references/styles/<style>.md	スタイルの詳細仕様
references/config/preferences-schema.md	EXTEND.md スキーマ
references/config/first-time-setup.md	初回セットアップの流れ

拡張機能のサポート

EXTEND.md を使ってカスタム設定を行えます。パスと対応オプションについては、ステップ 1.1 を参照してください。