baoyu-infographic

インフォグラフィックジェネレーター

2つの軸：レイアウト（情報構造）× スタイル（視覚的な美しさ）。どのレイアウトとスタイルも自由に組み合わせられます。

使い方

/baoyu-infographic path/to/content.md
/baoyu-infographic path/to/content.md --layout hierarchical-layers --style technical-schematic
/baoyu-infographic path/to/content.md --aspect portrait --lang zh
/baoyu-infographic  # then paste content

オプション

オプション	値
--layout	20種類（レイアウトギャラリーを参照）、デフォルト：bento-grid
--style	17種類（スタイルギャラリーを参照）、デフォルト：craft-handmade
--aspect	landscape（16:9）、portrait（9:16）、square（1:1）
--lang	en、zh、ja など

レイアウトギャラリー

レイアウト	最適な用途
linear-progression	タイムライン、プロセス、チュートリアル
binary-comparison	A と B、ビフォーアフター、メリットとデメリット
comparison-matrix	複数要素の比較
hierarchical-layers	ピラミッド、優先度レベル
tree-branching	カテゴリー、分類体系
hub-spoke	関連項目を伴う中心的な概念
structural-breakdown	分解図、断面図
bento-grid	複数のトピック、概要（デフォルト）
iceberg	表面に見える側面と隠れた側面
bridge	問題と解決策
funnel	コンバージョン、フィルタリング
isometric-map	空間的な関係
dashboard	指標、KPI
periodic-table	カテゴリー別のコレクション
comic-strip	物語、連続する流れ
story-mountain	プロット構造、緊張感の高まり
jigsaw	相互につながる要素
venn-diagram	重なり合う概念
winding-roadmap	道のり、マイルストーン
circular-flow	サイクル、繰り返し発生するプロセス

詳細な定義：references/layouts/<layout>.md

スタイルギャラリー

スタイル	説明
craft-handmade	手描き、ペーパークラフト（デフォルト）
claymation	3D の粘土フィギュア、ストップモーション
kawaii	日本風のかわいらしさ、パステルカラー
storybook-watercolor	柔らかな水彩画、幻想的
chalkboard	黒板に描いたチョーク画
cyberpunk-neon	ネオンの輝き、未来的
bold-graphic	コミック調、網点
aged-academia	ヴィンテージ科学、セピア調
corporate-memphis	フラットベクター、鮮やかな色彩
technical-schematic	設計図、エンジニアリング
origami	折り紙、幾何学的
pixel-art	レトロな8ビット
ui-wireframe	グレースケールのインターフェースモックアップ
subway-map	交通路線図
ikea-manual	ミニマルな線画
knolling	整然と配置した俯瞰写真
lego-brick	おもちゃのブロックを使った構成

詳細な定義：references/styles/<style>.md

おすすめの組み合わせ

コンテンツの種類	レイアウト + スタイル
タイムライン／歴史	linear-progression + craft-handmade
ステップごとの説明	linear-progression + ikea-manual
A と B	binary-comparison + corporate-memphis
階層	hierarchical-layers + craft-handmade
重なり	venn-diagram + craft-handmade
コンバージョン	funnel + corporate-memphis
サイクル	circular-flow + craft-handmade
技術	structural-breakdown + technical-schematic
指標	dashboard + corporate-memphis
教育	bento-grid + chalkboard
道のり	winding-roadmap + storybook-watercolor
カテゴリー	periodic-table + bold-graphic

デフォルト：bento-grid + craft-handmade

出力構成

infographic/{topic-slug}/
├── source-{slug}.{ext}
├── analysis.md
├── structured-content.md
├── prompts/infographic.md
└── infographic.png

スラッグ：トピックに基づく2〜4語のケバブケース。競合する場合：-YYYYMMDD-HHMMSS を末尾に追加します。

基本原則

• すべてのソースデータを一字一句そのまま保持します。要約や言い換えはしません。
• コンテンツを構成する前に、学習目標を定義します。
• 視覚的なコミュニケーションを意識して構成します（見出し、ラベル、視覚要素）。

ワークフロー

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

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

Bash を使用して、EXTEND.md の存在を優先順位に沿って確認します。

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

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

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

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

EXTEND.md で設定できる項目：優先するレイアウト／スタイル | デフォルトのアスペクト比 | カスタムスタイル定義 | 言語設定

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

1.2 コンテンツを分析 → analysis.md

1. ソースコンテンツを保存します（ファイルパスまたは貼り付け → source.md）
2. トピック、データ型、複雑さ、トーン、対象読者を分析します
3. ソースの言語とユーザーの言語を検出します
4. ユーザー入力からデザインの指示を抽出します
5. 分析結果を保存します

詳細な形式については、references/analysis-framework.md を参照してください。

ステップ 2：構造化コンテンツを生成 → structured-content.md

コンテンツをインフォグラフィックの構成に変換します。

1. タイトルと学習目標
2. 次の要素を含むセクション：主要な概念、コンテンツ（原文どおり）、ビジュアル要素、テキストラベル
3. データポイント（統計や引用はすべて正確にコピー）
4. ユーザーからのデザインの指示

ルール：Markdown のみ。新しい情報は追加しません。すべてのデータは原文どおりに記載します。

詳細な形式については、references/structured-content-template.md を参照してください。

ステップ 3：組み合わせを提案

次の要素に基づいて、レイアウト×スタイルの組み合わせを 3～5 個提案します。

• データ構造 → 適切なレイアウト
• コンテンツのトーン → 適切なスタイル
• 対象読者の期待
• ユーザーからのデザインの指示

ステップ 4：選択肢を確認

すべての選択肢をまとめて提示し、確認します。

1. 組み合わせ（常に）：理由とともに 3 つ以上の選択肢
2. アスペクト比（常に）：横長／縦長／正方形
3. 言語（ソースとユーザーの言語が異なる場合のみ）：テキストに使用する言語

ステップ 5：プロンプトを生成 → prompts/infographic.md

次の内容を組み合わせます。

1. references/layouts/<layout>.md のレイアウト定義
2. references/styles/<style>.md のスタイル定義
3. references/base-prompt.md のベーステンプレート
4. ステップ 2 で作成した構造化コンテンツ
5. 確認済みの言語で書かれたすべてのテキスト

ステップ 6：画像を生成

1. 利用可能な画像生成スキルを選択します（複数ある場合はユーザーに尋ねます）
2. プロンプトファイルと出力パスを指定して呼び出します
3. 失敗した場合は、自動で 1 回再試行します

ステップ 7：概要を出力

トピック、レイアウト、スタイル、アスペクト比、言語、出力パス、作成したファイルを報告します。

参考資料

• references/analysis-framework.md - 分析方法
• references/structured-content-template.md - コンテンツ形式
• references/base-prompt.md - プロンプトテンプレート
• references/layouts/<layout>.md - 20 種類のレイアウト定義
• references/styles/<style>.md - 17 種類のスタイル定義

拡張機能のサポート

EXTEND.md を使用してカスタム設定ができます。パスと設定可能な項目については、ステップ 1.1 を参照してください。