baoyu-xhs-images

Xiaohongshu インフォグラフィックシリーズジェネレーター

複雑なコンテンツを、複数のスタイルから選べる目を引くXiaohongshu向けインフォグラフィックシリーズに分解します。

使い方

# Auto-select style and layout based on content
/baoyu-xhs-images posts/ai-future/article.md

# Specify style
/baoyu-xhs-images posts/ai-future/article.md --style notion

# Specify layout
/baoyu-xhs-images posts/ai-future/article.md --layout dense

# Combine style and layout
/baoyu-xhs-images posts/ai-future/article.md --style notion --layout list

# Direct content input
/baoyu-xhs-images
[paste content]

# Direct input with options
/baoyu-xhs-images --style bold --layout comparison
[paste content]

オプション

オプション	説明
--style <name>	ビジュアルスタイル（スタイルギャラリーを参照）
--layout <name>	情報レイアウト（レイアウトギャラリーを参照）

2つの軸

軸	制御する要素	オプション
スタイル	ビジュアルの美しさ：色、線、装飾	cute、fresh、warm、bold、minimal、retro、pop、notion、chalkboard、study-notes
レイアウト	情報構成：密度、配置	sparse、balanced、dense、list、comparison、flow、mindmap、quadrant

スタイルとレイアウトは自由に組み合わせられます。例：--style notion --layout denseを指定すると、情報密度の高い知的な印象のナレッジカードが作成されます。

スタイルギャラリー

スタイル	説明
cute（デフォルト）	スイートでかわいらしく、ガーリーな定番のXiaohongshuスタイル
fresh	清潔感があり、爽やかでナチュラル
warm	居心地がよく、親しみやすく、気取らない
bold	インパクトが強く、目を引く
minimal	余計なものを極力省いた、洗練されたスタイル
retro	ヴィンテージ感があり、懐かしく、トレンディ
pop	鮮やかでエネルギッシュ、目を引く
notion	ミニマルな手描きの線画で、知的な印象
chalkboard	黒板にカラフルなチョークで描いた、教育的なスタイル
study-notes	青ペン、赤の書き込み、黄色の蛍光ペンを使った、リアルな手書き写真風

スタイルの詳細な定義：references/presets/<style>.md

レイアウトギャラリー

レイアウト	説明
sparse（デフォルト）	情報を最小限に抑え、インパクトを最大化（1～2項目）
balanced	標準的なコンテンツレイアウト（3～4項目）
dense	情報密度の高いナレッジカード形式（5～8項目）
list	列挙・ランキング形式（4～7項目）
comparison	左右に並べて比較するレイアウト
flow	プロセス・タイムラインレイアウト（3～6ステップ）
mindmap	中心から放射状に広がるマインドマップレイアウト（4～8分岐）
quadrant	4象限／円形セクションレイアウト

レイアウトの詳細な定義：references/elements/canvas.md

自動選択

コンテンツの手がかり	スタイル	レイアウト
美容、ファッション、かわいい、女の子、ピンク	cute	sparse/balanced
健康、自然、清潔、爽やか、オーガニック	fresh	balanced/flow
暮らし、物語、感情、気持ち、温かさ	warm	balanced
警告、重要、必須、重大	bold	list/comparison
プロフェッショナル、ビジネス、エレガント、シンプル	minimal	sparse/balanced
クラシック、ヴィンテージ、古い、伝統的	retro	balanced
楽しい、ワクワクする、すごい、素晴らしい	pop	sparse/list
知識、概念、生産性、SaaS	notion	dense/list
教育、チュートリアル、学習、指導、教室	chalkboard	balanced/dense
ノート、手書き、学習ガイド、知識、リアル、写真	study-notes	dense/list/mindmap

アウトライン戦略

コンテンツの目的に応じた、差別化された3つのアウトライン戦略：

戦略A：ストーリー重視型（故事驱动型）

項目	説明
コンセプト	個人の体験を軸にし、感情的な共感を優先
特徴	悩みから始め、変化の前後を示し、リアリティを重視
最適な用途	レビュー、個人の体験共有、変化のストーリー
構成	フック → 問題 → 発見 → 体験 → 結論

戦略B：情報密度重視型（信息密集型）

項目	説明
コンセプト	価値を最優先し、情報を効率的に伝える
特徴	明確な構成、要点の明示、専門性への信頼
最適な用途	チュートリアル、比較、製品レビュー、チェックリスト
構成	核となる結論 → 情報カード → メリット／デメリット → 推奨

Strategy C: ビジュアル優先型

項目	説明
コンセプト	ビジュアルのインパクトを軸とし、テキストは最小限に抑えます
特徴	大きな画像、雰囲気のある表現、ひと目で惹きつける魅力
最適な用途	美的感覚を重視する製品、ライフスタイル、雰囲気を重視するコンテンツ
構成	ヒーロー画像 → 詳細画像 → ライフスタイルシーン → CTA

ファイル構成

各セッションでは、コンテンツのスラッグを名前にした独立したディレクトリが作成されます。

xhs-images/{topic-slug}/
├── source-{slug}.{ext}             # Source files (text, images, etc.)
├── analysis.md                     # Deep analysis + questions asked
├── outline-strategy-a.md           # Strategy A: Story-driven
├── outline-strategy-b.md           # Strategy B: Information-dense
├── outline-strategy-c.md           # Strategy C: Visual-first
├── outline.md                      # Final selected/merged outline
├── prompts/
│   ├── 01-cover-[slug].md
│   ├── 02-content-[slug].md
│   └── ...
├── 01-cover-[slug].png
├── 02-content-[slug].png
└── NN-ending-[slug].png

スラッグの生成：

1. コンテンツの主要なトピックを抽出します（2〜4語、ケバブケース）。
2. 例：「AI工具推荐」→ ai-tools-recommend

競合の解決： xhs-images/{topic-slug}/ がすでに存在する場合：

• タイムスタンプを追加します：{topic-slug}-YYYYMMDD-HHMMSS
• 例：ai-tools が存在する場合 → ai-tools-20260118-143052

ソースファイル： すべてのソースを source-{slug}.{ext} という名前でコピーします。

• source-article.md、source-photo.jpg など
• 複数のソースに対応しています：テキスト、画像、会話からのファイル

ワークフロー

進捗チェックリスト

コピーして進捗を記録します。

XHS Infographic Progress:
- [ ] Step 0: Check preferences (EXTEND.md) ⛔ BLOCKING
  - [ ] Found → load preferences → continue
  - [ ] Not found → run first-time setup → MUST complete before Step 1
- [ ] Step 1: Analyze content → analysis.md
- [ ] Step 2: Confirmation 1 - Content understanding ⚠️ REQUIRED
- [ ] Step 3: Generate 3 outline + style variants
- [ ] Step 4: Confirmation 2 - Outline & style & elements selection ⚠️ REQUIRED
- [ ] Step 5: Generate images (sequential)
- [ ] Step 6: Completion report

フロー

Input → [Step 0: Preferences] ─┬─ Found → Continue
                               │
                               └─ Not found → First-Time Setup ⛔ BLOCKING
                                              │
                                              └─ Complete setup → Save EXTEND.md → Continue
                                                                                      │
        ┌───────────────────────────────────────────────────────────────────────────┘
        ↓
Analyze → [Confirm 1] → 3 Outlines → [Confirm 2: Outline + Style + Elements] → Generate → Complete

ステップ 0：設定の読み込み（EXTEND.md）⛔ BLOCKING

目的：ユーザーの設定を読み込むか、初回セットアップを実行します。

重要：EXTEND.md が見つからない場合は、ほかの質問やステップを始める前に、初回セットアップを必ず完了してください。コンテンツ分析に進んだり、スタイルやレイアウトについて質問したりしないでください。まず設定のセットアップのみを完了してください。

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

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

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

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

┌───────────┬─────────────────────────────────────────────────────────────────────────────────────────────────────┐ │ 結果 │ アクション │ ├───────────┼─────────────────────────────────────────────────────────────────────────────────────────────────────┤ │ 見つかった │ 読み込み、解析、概要を表示 → ステップ 1 に進みます │ ├───────────┼─────────────────────────────────────────────────────────────────────────────────────────────────────┤ │ 見つからない │ ⛔ BLOCKING：初回セットアップのみを実行します（下記参照）→ 完了して EXTEND.md を保存 → その後ステップ 1 に進みます │ └───────────┴─────────────────────────────────────────────────────────────────────────────────────────────────────┘

初回セットアップ（EXTEND.md が見つからない場合）：

言語：ユーザーの入力言語、または保存済みの言語設定を使用します。

AskUserQuestion を使用し、すべての質問を1回の呼び出しで行います。質問の詳細は references/config/first-time-setup.md を参照してください。

EXTEND.md の対応項目：透かし | 希望するスタイル／レイアウト | カスタムスタイルの定義 | 言語設定

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

ステップ 1：コンテンツを分析 → analysis.md

ソースコンテンツを読み込み、必要に応じて保存し、詳細に分析します。

アクション：

1. ソースコンテンツを保存（まだファイルになっていない場合）：
   • ユーザーがファイルパスを指定した場合：そのまま使用します
   • ユーザーがコンテンツを貼り付けた場合：対象ディレクトリに source.md として保存します
   • バックアップルール：source.md が存在する場合は、source-backup-YYYYMMDD-HHMMSS.md に名前を変更します
2. ソースコンテンツを読み込みます
3. references/workflows/analysis-framework.md に従って詳細に分析します：
   • コンテンツの種類を分類します（おすすめ紹介／ノウハウ／レビュー／チュートリアル／注意点など）
   • フックを分析します（バズるタイトルの可能性）
   • 対象読者を特定します
   • エンゲージメントの可能性を分析します（保存／共有／コメント）
   • ビジュアルの活用機会を洗い出します
   • スワイプの流れを設計します
4. ソースの言語を検出します
5. 推奨画像枚数を決定します（2～10枚）
6. 確認質問を作成します（ステップ 2 を参照）
7. analysis.md に保存します

ステップ 2：確認 1 - コンテンツの理解 ⚠️

目的：理解を確認し、不足情報を収集します。省略しないでください。

概要を表示：

• 特定したコンテンツの種類とトピック
• 抽出した主要ポイント
• 検出したトーン
• ソース画像の枚数

AskUserQuestion を使用して、以下を確認します：

1. 中心となるセールスポイント（multiSelect: true）
2. 対象読者
3. スタイルの希望：リアルな共有／プロフェッショナルなレビュー／美的な雰囲気／自動
4. 追加のコンテキスト（任意）

回答後：analysis.md を更新 → ステップ 3

ステップ 3：アウトラインとスタイルのバリエーションを 3 種類生成

分析結果とユーザーのコンテキストに基づいて、異なる戦略案を 3 種類作成します。各案には、アウトライン構成とビジュアルスタイルの推奨の両方を含めます。

各戦略案：

戦略	ファイル名	アウトライン	推奨スタイル
A	outline-strategy-a.md	ストーリー重視：感情的、ビフォーアフター	温かみのある、かわいい、爽やか
B	outline-strategy-b.md	情報重視：構造的、事実に基づく	notion、ミニマル、黒板
C	outline-strategy-c.md	ビジュアル優先：雰囲気重視、テキストは最小限	大胆、ポップ、レトロ

アウトライン形式（YAML フロントマター＋コンテンツ）：

---
strategy: a  # a, b, or c
name: Story-Driven
style: warm  # recommended style for this strategy
style_reason: "Warm tones enhance emotional storytelling and personal connection"
elements:  # from style preset, can be customized in Step 4
  background: solid-pastel
  decorations: [clouds, stars-sparkles]
  emphasis: star-burst
  typography: highlight
layout: balanced  # primary layout
image_count: 5
---

## P1 Cover
**Type**: cover
**Hook**: "入冬后脸不干了🥹终于找到对的面霜"
**Visual**: Product hero shot with cozy winter atmosphere
**Layout**: sparse

## P2 Problem
**Type**: pain-point
**Message**: Previous struggles with dry skin
**Visual**: Before state, relatable scenario
**Layout**: balanced

...

差別化の要件：

• 各戦略案は、アウトライン構成と推奨スタイルの両方を必ず変えてください
• ページ数を調整します：A は通常 4～6 ページ、B は通常 3～5 ページ、C は通常 3～4 ページ
• このスタイルが戦略に適している理由を説明する style_reason を含めます
• ステップ 2 で確認したユーザーのスタイルの希望を考慮します

参照：references/workflows/outline-template.md

ステップ 4：確認 2 — アウトライン、スタイル、要素の選択 ⚠️

目的：ユーザーがアウトラインの方針を選択し、ビジュアルスタイルを確認して、要素をカスタマイズします。スキップしないでください。

各方針を表示：

• 方針名 ＋ ページ数 ＋ 推奨スタイル
• ページごとの概要（P1 → P2 → P3...）

AskUserQuestion を使って、次の 3 つの質問をします。

質問 1：アウトラインの方針

• 方針 A（「本音の共有」の場合に推奨）
• 方針 B（「プロフェッショナルなレビュー」の場合に推奨）
• 方針 C（「美的な雰囲気」の場合に推奨）
• 組み合わせ：各方針から使用するページを指定

質問 2：ビジュアルスタイル

• 方針の推奨スタイルを使用（スタイル名を表示）
• または次から選択：cute / fresh / warm / bold / minimal / retro / pop / notion / chalkboard
• またはカスタムスタイルの説明を入力

質問 3：ビジュアル要素（スタイル選択後に表示） プリセットに設定されている選択済みスタイルのデフォルト要素を表示し、次の項目を尋ねます。

• スタイルのデフォルトを使用（推奨）— プレビューを表示：背景、装飾、強調
• 背景を調整 — 選択肢：solid-pastel / solid-saturated / gradient-linear / gradient-radial / paper-texture / grid
• 装飾を調整 — 選択肢：hearts / stars-sparkles / flowers / clouds / leaves / confetti
• カスタム要素の希望を入力

回答後：

• 単一の方針 → 確認済みのスタイルとともに outline.md にコピー
• 組み合わせ → 指定されたページを確認済みのスタイルで統合
• カスタムリクエスト → フィードバックに基づいて再生成
• スタイルのデフォルト → プリセットの Element Combination をそのまま使用
• 背景の調整 → ユーザーが選んだ内容で elements.background を更新
• 装飾の調整 → ユーザーが選んだ内容で elements.decorations を更新
• カスタム要素 → ユーザーの希望を elements の各フィールドに反映
• 最終的なスタイルと要素で outline.md の frontmatter を更新

ステップ 5：画像の生成

確認済みのアウトライン、スタイル、レイアウトを使います。

ビジュアルの一貫性 — 参照画像チェーン： シリーズ内のすべての画像でキャラクターとスタイルの一貫性を保つため、次の手順に従います。

1. 画像 1（表紙）を最初に生成します — --ref を使わずに生成します
2. 以降のすべての画像（2、3、...、N）で画像 1 を --ref として使用します
   • これにより、キャラクターデザイン、色の描画、イラストのスタイルを統一できます
   • コマンドの形式：以降の生成ごとに --ref <path-to-image-01.png> を追加します

これは、キャラクター、マスコット、またはイラスト要素を繰り返し使用するスタイルで特に重要です。画像 1 がシリーズ全体のビジュアルの基準になります。

各画像（表紙 ＋ コンテンツ ＋ エンディング）について：

1. プロンプトを prompts/NN-{type}-[slug].md に保存します（ユーザーの希望する言語を使用）
   • バックアップルール：プロンプトファイルが存在する場合は、prompts/NN-{type}-[slug]-backup-YYYYMMDD-HHMMSS.md に名前を変更します
2. 画像を生成します。
   • 画像 1：--ref を使わずに生成します（ビジュアルの基準を確立します）
   • 画像 2 以降：一貫性を保つため、--ref <image-01-path> を指定して生成します
   • バックアップルール：画像ファイルが存在する場合は、NN-{type}-[slug]-backup-YYYYMMDD-HHMMSS.png に名前を変更します
3. 生成のたびに進捗を報告します

ウォーターマークの適用（設定で有効になっている場合）： 各画像の生成プロンプトに次を追加します。

Include a subtle watermark "[content]" positioned at [position].
The watermark should be legible but not distracting from the main content.

参照先：references/config/watermark-guide.md

画像生成スキルの選択：

• 利用可能な画像生成スキルを確認します
• 複数のスキルが利用可能な場合は、ユーザーに希望を尋ねます

セッション管理： 画像生成スキルが --sessionId に対応している場合：

1. 一意のセッション ID を生成します：xhs-{topic-slug}-{timestamp}
2. すべての画像で同じセッション ID を使用します
3. 参照画像チェーンと組み合わせることで、ビジュアルの一貫性を最大限に高めます

ステップ 6：完了レポート

Xiaohongshu Infographic Series Complete!

Topic: [topic]
Strategy: [A/B/C/Combined]
Style: [style name]
Layout: [layout name or "varies"]
Location: [directory path]
Images: N total

✓ analysis.md
✓ outline-strategy-a.md
✓ outline-strategy-b.md
✓ outline-strategy-c.md
✓ outline.md (selected: [strategy])

Files:
- 01-cover-[slug].png ✓ Cover (sparse)
- 02-content-[slug].png ✓ Content (balanced)
- 03-content-[slug].png ✓ Content (dense)
- 04-ending-[slug].png ✓ Ending (sparse)

画像の変更

操作	手順
編集	プロンプトファイルを最初に更新 → 同じセッション ID で再生成
追加	配置位置を指定 → プロンプトを作成 → 生成 → 後続ファイルの番号を振り直す（NN+1）→ アウトラインを更新
削除	ファイルを削除 → 後続ファイルの番号を振り直す（NN-1）→ アウトラインを更新

重要：画像を更新する際は、再生成する前に必ずプロンプトファイル（prompts/NN-{type}-[slug].md）を最初に更新してください。これにより、変更が記録され、再現可能になります。

コンテンツ分割の原則

1. 表紙（画像 1）：引きつける要素 + 視覚的なインパクト → sparse レイアウト
2. コンテンツ（中盤）：画像ごとの中核的な価値 → balanced/dense/list/comparison/flow
3. 締めくくり（最後）：CTA / 要約 → sparse または balanced

スタイル × レイアウトの対応表（✓✓ = 特におすすめ、✓ = 適しています）：

	sparse	balanced	dense	list	comparison	flow	mindmap	quadrant
cute	✓✓	✓✓	✓	✓✓	✓	✓	✓	✓
fresh	✓✓	✓✓	✓	✓	✓	✓✓	✓	✓
warm	✓✓	✓✓	✓	✓	✓✓	✓	✓	✓
bold	✓✓	✓	✓	✓✓	✓✓	✓	✓	✓✓
minimal	✓✓	✓✓	✓✓	✓	✓	✓	✓	✓
retro	✓✓	✓✓	✓	✓✓	✓	✓	✓	✓
pop	✓✓	✓✓	✓	✓✓	✓✓	✓	✓	✓
notion	✓✓	✓✓	✓✓	✓✓	✓✓	✓✓	✓✓	✓✓
chalkboard	✓✓	✓✓	✓✓	✓✓	✓	✓✓	✓✓	✓
study-notes	✗	✓	✓✓	✓✓	✓	✓	✓✓	✓

参考資料

詳細なテンプレートはreferences/ディレクトリにあります。

要素（視覚的な構成要素）：

• elements/canvas.md - アスペクト比、安全領域、グリッドレイアウト
• elements/image-effects.md - 切り抜き、縁取り、フィルター
• elements/typography.md - 装飾文字（花字）、タグ、文字の方向
• elements/decorations.md - 強調マーク、背景、落書き、フレーム

プリセット（スタイルのプリセット）：

• presets/<name>.md - 要素の組み合わせ定義（cute、notion、warm...）

ワークフロー（プロセスガイド）：

• workflows/analysis-framework.md - コンテンツ分析フレームワーク
• workflows/outline-template.md - レイアウトガイド付きアウトラインテンプレート
• workflows/prompt-assembly.md - プロンプト組み立てガイド

設定：

• config/preferences-schema.md - EXTEND.md スキーマ
• config/first-time-setup.md - 初回セットアップの流れ
• config/watermark-guide.md - 透かしの設定

注意事項

• 失敗時は一度自動で再試行 | センシティブな人物には漫画風の代替案
• 確認済みの言語設定を使用 | スタイルの一貫性を維持
• 確認ポイントが2か所必要です（ステップ2と4）— 省略しないでください

拡張機能のサポート

EXTEND.md によるカスタム設定に対応しています。パスと対応オプションについてはステップ0を参照してください。