canghe-infographic

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

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

使い方

/canghe-infographic path/to/content.md
/canghe-infographic path/to/content.md --layout hierarchical-layers --style technical-schematic
/canghe-infographic path/to/content.md --aspect portrait --lang zh
/canghe-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 .canghe-skills/canghe-infographic/EXTEND.md && echo "project"

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

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

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

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

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

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

1. ソースコンテンツを保存します（ファイルパスまたは貼り付け → source.md）
   • バックアップルール：source.md が存在する場合は、source-backup-YYYYMMDD-HHMMSS.md に名前を変更します
2. トピック、データの種類、複雑さ、トーン、対象読者を分析します
3. ソース言語とユーザーの言語を検出します
4. ユーザー入力からデザイン指示を抽出します
5. 分析結果を保存します
   • バックアップルール：analysis.md が存在する場合は、analysis-backup-YYYYMMDD-HHMMSS.md に名前を変更します

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

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

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

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

ルール：Markdown のみ。新しい情報を追加しないでください。すべてのデータは原文どおりにしてください。

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

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

次の点に基づき、レイアウト×スタイルの組み合わせを 3～5 件提案します。

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

ステップ 4：オプションを確認

すべてのオプションをまとめて確認するため、複数の質問を含む単一の AskUserQuestion 呼び出しを使用します。

質問	条件	オプション
組み合わせ	常に	理由を添えたレイアウト×スタイルの組み合わせを 3 件以上
アスペクト比	常に	landscape（16:9）、portrait（9:16）、square（1:1）
言語	ソース言語 ≠ ユーザーの言語の場合のみ	テキストコンテンツの言語

重要：AskUserQuestion を複数回に分けて呼び出さないでください。該当する質問をすべて 1 回の呼び出しにまとめてください。

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

バックアップルール：prompts/infographic.md が存在する場合は、prompts/infographic-backup-YYYYMMDD-HHMMSS.md に名前を変更します。

次の項目を組み合わせます。

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

ステップ 6：画像を生成

1. 利用可能な画像生成スキルを選択します（複数ある場合はユーザーに尋ねます）
2. 既存ファイルを確認：生成前に infographic.png が存在するか確認します
   • 存在する場合：infographic-backup-YYYYMMDD-HHMMSS.png に名前を変更します
3. プロンプトファイルと出力パスを指定して呼び出します
4. 失敗した場合は、自動で 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 によるカスタム設定に対応しています。パスとサポートされるオプションについては、Step 1.1 を参照してください。