xiaohongshu-images

Xiaohongshu Images Skill

このスキルは、Markdown、HTML、またはテキストのコンテンツを、AI 生成のカバー画像付きの美しくスタイリングされた HTML ページに変換し、Xiaohongshu への投稿用に 3:4 の比率で連続したスクリーンショットを撮影します。

概要

このスキルは、次のワークフローを実行します。

1. コンテンツを受け取る：ユーザーから Markdown、HTML、または txt 形式のコンテンツを受け取ります
2. プロンプトテンプレートを読み込む：このスキルのディレクトリにある prompts/default.md からプロンプトテンプレートを読み込みます
3. 出力アカウントを特定する：使用するアカウントフォルダーを特定します（下記の「アカウントフォルダーの解決」を参照）
4. カバー画像を生成する：/baoyu-cover-image スキルを使い、記事の内容に基づいてカバー画像を生成します
5. HTML を生成する：プロンプトテンプレートの仕様に従って、美しくスタイリングされた HTML ページを作成します
6. 出力を保存する：HTML を ~/Dev/obsidian/{account_folder}/articles/<date-title>/xhs-preview.html に保存します
7. スクリーンショットを撮影する：テキストが途中で切れないよう、ページ全体を 3:4 の比率で連続してスクリーンショットに撮影します

アカウントフォルダーの解決

このスキルは、次の優先順位に従って出力先のアカウントフォルダーを特定します。

優先順位 1：明示的な --account パラメーター

ユーザーが --account を指定した場合、対応するフォルダーを使用します。

/xiaohongshu-images <article> --account james-cn      # → 10_在悉尼和稀泥
/xiaohongshu-images <article> --account james-en      # → 11_BuildWithJames
/xiaohongshu-images <article> --account mom-reading-club  # → 12_妈妈在读

優先順位 2：入力ファイルのパスから推定

--account が指定されていない場合は、入力ファイルのパスから推定します。

Input: ~/Dev/obsidian/12_妈妈在读/articles/2026-01-20-xxx/index.md
       → Output to: ~/Dev/obsidian/12_妈妈在读/articles/2026-01-20-xxx/

Input: ~/Dev/obsidian/10_在悉尼和稀泥/articles/2026-01-20-xxx/index.md
       → Output to: ~/Dev/obsidian/10_在悉尼和稀泥/articles/2026-01-20-xxx/

優先順位 3：テンプレートのマッピングにフォールバック

パスからアカウントを特定できない場合（例：生のコンテンツが入力された場合）は、テンプレートに基づくマッピングを使用します。

テンプレート	アカウントフォルダー
default	10_在悉尼和稀泥
mom-reading-club	12_妈妈在读

アカウントフォルダーのマッピング一覧

アカウント	フォルダー
james-cn	10_在悉尼和稀泥
james-en	11_BuildWithJames
mom-reading-club	12_妈妈在读

使い方

ユーザーがこのスキルを呼び出したら、次の手順に従います。

ステップ 1：入力を確認する

ユーザーは次のいずれかを提供します。

• Markdown、HTML、または txt ファイルのファイルパス（例：/path/to/article.md）
• 会話内に直接貼り付けた生のコンテンツ
• コンテンツを取得する URL

入力が不明確な場合は、ファイルパス、URL、または直接貼り付けるコンテンツのいずれかをユーザーに尋ねます。

ステップ 2：プロンプトテンプレートを読む

このスキルのディレクトリからプロンプトテンプレートを読み込みます。

{{SKILL_DIR}}/prompts/default.md

Read ツールを使ってプロンプトテンプレートの内容を取得します。このテンプレートでは、HTML/CSS のスタイル仕様を定義します。

ステップ 3：記事のタイトルと日付を抽出し、アカウントを特定する

コンテンツから次の情報を抽出します。

• タイトル：コンテンツ内のメイン見出し（h1）、または最初の目立つタイトル
• 日付：現在の日付を YYYY-MM-DD 形式で指定
• アカウントフォルダー：上記の優先順位ルール（--account → パスから推定 → テンプレートのマッピング）に従って特定

出力フォルダーのパスを次のように作成します：~/Dev/obsidian/{account_folder}/articles/<date>-<sanitized-title>/

• スペースをハイフンに置き換える
• 特殊文字を削除する
• タイトルは適度な長さにする（最大 50 文字）
• すべての画像を _attachments/ サブフォルダーに保存する

ステップ 4：baoyu-cover-image スキルでカバー画像を生成する

⚠️ コンプライアンスチェック：生成する前に、画像のコンセプトが小紅書コミュニティガイドライン（プロンプトテンプレートのセクション 11）に準拠していることを確認してください。画像は次の条件を満たす必要があります：

• 年齢にふさわしい内容で、露出の多い服装や思わせぶりなポーズがない
• 政治的なシンボル、暴力、ギャンブル、喫煙、アルコールの乱用を避ける
• 前向きで建設的なメッセージを伝える
• 文化的な配慮があり、オリジナルである

/baoyu-cover-image スキルを使ってカバー画像を生成します。

1. 記事の内容を指定してスキルを呼び出します：

/baoyu-cover-image ~/Dev/obsidian/{account_folder}/articles/<date>-<title>/index.md --style <auto-or-specified> --no-title

または、内容がまだ保存されていない場合は、内容をスキルに直接渡します。

2. スタイルの選択：

   • 内容の手がかりに基づいて baoyu-cover-image に自動選択させる、または
   • 記事のトーンに合ったスタイルを指定する：
     • tech - AI、コーディング、デジタル関連のトピック
     • warm - 個人的な体験談、感情に訴える内容
     • bold - 賛否の分かれる話題、注目を集めるトピック
     • minimal - シンプルで禅のような内容
     • playful - 楽しく、カジュアルで、初心者向けの内容
     • nature - ウェルネス、健康、オーガニック関連のトピック
     • retro - 歴史、レトロ、伝統的なトピック
     • elegant - ビジネス、プロフェッショナルな内容（デフォルト）

   特別項目：Mom Reading Club テンプレート

   mom-reading-club テンプレートを使用する場合は、デフォルトのカバースタイルを**書道と水墨画風のイラスト（书法水墨风）**に変更します。

   /baoyu-cover-image <article> --style minimal --no-title --custom-prompt "Chinese calligraphy and ink-wash illustration style (书法水墨风). Zen-like simplicity with generous white space (留白). Include subtle ink-wash brush strokes as background texture. Minimalist botanical elements (bamboo, plum blossoms, orchids, lotus) when appropriate. Color palette: ink black (#1a1a1a), warm gray (#666666), subtle gold accents (#C9A962), warm off-white background (#F5F3EE). If human figures are included, depict an elegant woman aged 30-45 with a contemplative, refined demeanor. NO TEXT on the cover."
   

3. 小紅書のカバー画像は通常、テキストを含まないビジュアルのみの画像を使うため、--no-title フラグを使用します。

4. 生成した画像を正しい場所に移動します：

   • baoyu-cover-image は、記事からの相対パス imgs/cover.png に保存します
   • ~/Dev/obsidian/{account_folder}/articles/<date>-<title>/_attachments/cover-xhs.png に移動またはコピーします

mv ~/Dev/obsidian/{account_folder}/articles/<date>-<title>/imgs/cover.png ~/Dev/obsidian/{account_folder}/articles/<date>-<title>/_attachments/cover-xhs.png

ステップ 5：HTML を生成する

⚠️ コンプライアンスチェック：HTML を生成する前に、テキストの内容がガイドラインに準拠しているか確認してください。

• 絶対的・最上級の表現（最好、第一、国家级、最高级、全网最低价）を含めない
• 効果を誇張する表現（一分钟见效、吃完就变白）を含めない
• 虚偽または未確認の医療・金融アドバイスを含めない
• 誹謗中傷や攻撃的な表現を含めない
• 健康や投資に関するトピックの場合は、免責事項を追加する

プロンプトテンプレートとユーザーの内容を使用して、次の手順を実行します。

1. 内容を解析して、次の項目を特定します。

   • タイトル（h1）
   • サブタイトル（h2-h6）
   • 段落
   • リスト
   • コードブロック
   • リンク
   • 強調・太字のテキスト
   • 引用

2. テンプレートの仕様に従って、完全な HTML を生成します。

   • 暗いグラデーション背景
   • 600px × 800px のクリーム色のカード
   • Google Fonts（Noto Serif SC、Inter、JetBrains Mono）を使用した適切なタイポグラフィ
   • 上部にカバー画像を配置
   • テキスト、リンク、リスト、コードブロックなど、指定されたすべてのスタイル
   • モバイル向けのレスポンシブデザイン

3. 重要な HTML 構造：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Article Title</title>
    
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@700&family=Inter:wght@300;400;700;800&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
    <style>
        /* All CSS styles inline */
    </style>
</head>
<body>
    <div class="container">
        <img src="_attachments/cover-xhs.png" class="cover-image" alt="Cover">
        <div class="content">
            
        </div>
    </div>
</body>
</html>

4. HTML を ~/Dev/obsidian/{account_folder}/articles/<date>-<title>/xhs-preview.html に保存します

ステップ 6：スクリーンショットを撮影する

HTML を生成した後、.container 要素のスクリーンショットを、正確な 3:4 のアスペクト比で連続して撮影します。

スクリーンショットの仕様：

• コンテナのビューポート：600px × 800px（3:4 の比率）
• 出力解像度：1200px × 1600px（デバイススケールファクター 2x）
• 各スクリーンショットには、ページ全体ではなく .container 要素のみを含めます

撮影手順：

1. HTML ページを開く：コンテナより大きなビューポートを設定した Playwright ブラウザーを使用します
2. ブラウザーコンテキストを設定する：
   • ビューポート：800px × 1000px（コンテナ全体を確実に表示できる大きさ）
   • デバイススケールファクター：高解像度出力のため 2x
3. コンテナ内をスクロールする：
   • .container 要素には overflow-y: auto が設定されており、内部スクロールが可能です
   • scrollTop = 0 から開始し、コンテンツに沿って値を増やします
   • 各スクロール位置で、3:4 の比率のスクリーンショットを 1 枚撮影します
4. テキスト境界をスマートに検出する：
   • 各スクリーンショットの撮影前に、表示されているブロック要素（p、h1-h6、li、blockquote、pre、img）を分析します
   • 要素が下端で切れてしまう場合は、その要素の前で現在のスクリーンショットを終了します
   • 部分的なコンテンツを覆う余白マスクを追加し、3:4 のフレームをきれいに保ちます
   • 次のスクリーンショットは、切れた要素が上端に来る位置から開始します
5. .container のコンテンツ全体を撮影する：
   • container.screenshot() を使用して、コンテナ要素のみを撮影します（ページの背景は含めません）
   • すべてのコンテンツを撮影し終えるまで続けます（scrollTop が scrollHeight - clientHeight に達するまで）
6. スクリーンショットを次の場所に保存する：~/Dev/obsidian/{account_folder}/articles/<date>-<title>/_attachments/
   • 連番で命名します：xhs-01.png、xhs-02.png、xhs-03.png など

スクリーンショットスクリプトを使用します：

cd {{SKILL_DIR}} && python scripts/screenshot.py ~/Dev/obsidian/{account_folder}/articles/<date>-<title>/xhs-preview.html

スクリプトの出力：

• 各スクリーンショットは正確に 1200×1600 ピクセル（2x スケールで 3:4 の比率）
• クリーム色のカードコンテンツのみが撮影されます
• スクリーンショット間でテキストが途切れることはありません

ステップ 7：結果を報告する

完了後、ユーザーに次の内容を報告します：

• HTML ファイルの場所
• 生成したスクリーンショットの枚数
• スクリーンショットフォルダーの場所
• 可能であれば、最初のスクリーンショットのプレビュー

ディレクトリ構成

{{SKILL_DIR}}/
├── SKILL.md              # This file
├── prompts/
│   └── default.md        # Default HTML/CSS styling prompt
│   └── mom-reading-club.md  # Mom Reading Club styling prompt
├── scripts/
│   └── screenshot.py     # Screenshot capture script
└── .gitignore

Output directory (outside skill folder):
~/Dev/obsidian/{account_folder}/articles/<date>-<title>/
├── xhs-preview.html          # Styled HTML preview page
├── imgs/                     # Created by baoyu-cover-image
│   ├── prompts/
│   │   └── cover.md          # Cover image prompt
│   └── cover.png             # Generated cover (moved to _attachments/)
└── _attachments/             # Obsidian-style attachments folder
    ├── cover-xhs.png         # Cover image (moved from imgs/cover.png)
    ├── xhs-01.png            # Screenshot page 1 (1200×1600)
    ├── xhs-02.png            # Screenshot page 2
    └── ...

Account folder mapping:
- james-cn → 10_在悉尼和稀泥
- james-en → 11_BuildWithJames
- mom-reading-club → 12_妈妈在读

依存関係

このスキルは次のものに依存します：

• カバー画像の生成に /baoyu-cover-image スキルを使用します（~/.claude/skills/ にインストールされている必要があります）

ワークフローの例

ユーザー： 次の Markdown から、スタイル付きの記事ページを作成してください：

# My Article Title

This is the introduction paragraph...

## Section 1

Content for section 1...

アシスタントの操作：

1. prompts/default.md からプロンプトテンプレートを読み込みます
2. タイトルを抽出します：「My Article Title」
3. アカウントフォルダーを決定します（--account の指定なし、推測できるパスなし、デフォルトテンプレートを使用 → 10_在悉尼和稀泥）
4. 出力フォルダーを作成します：~/Dev/obsidian/10_在悉尼和稀泥/articles/2024-01-14-my-article-title/
5. /baoyu-cover-image スキルを --no-title フラグ付きで呼び出し、カバー画像を生成します
6. 生成されたカバー画像を imgs/cover.png から _attachments/cover-xhs.png に移動します
7. テンプレートの仕様に従って、スタイル付き HTML を生成します
8. ~/Dev/obsidian/10_在悉尼和稀泥/articles/2024-01-14-my-article-title/xhs-preview.html に保存します
9. ブラウザーで開き、3:4 の比率でスクリーンショットを撮影します
10. スクリーンショットを ~/Dev/obsidian/10_在悉尼和稀泥/articles/2024-01-14-my-article-title/_attachments/xhs-01.png などに保存します
11. ファイルの場所を添えて、完了を報告します

--account パラメーターを指定した例：

/xiaohongshu-images ~/path/to/article.md --account mom-reading-club --template mom-reading-club

アシスタントの操作：

1. --account mom-reading-club が指定されているため、12_妈妈在读 を使用します
2. 出力先：~/Dev/obsidian/12_妈妈在读/articles/2024-01-14-article-title/

パスから推測する例：

/xiaohongshu-images ~/Dev/obsidian/12_妈妈在读/articles/2024-01-14-xxx/index.md

アシスタントの操作：

1. --account は指定されていません
2. 入力パスに 12_妈妈在读 が含まれているため、アカウントフォルダーを推測します
3. 同じフォルダーに出力します：~/Dev/obsidian/12_妈妈在读/articles/2024-01-14-xxx/

カスタムプロンプトテンプレート

ユーザーは次の方法でカスタムプロンプトテンプレートを指定できます：

1. prompts/ ディレクトリに .md ファイルを配置します
2. スキルの呼び出し時にテンプレート名を指定します

例：「この記事には xiaohongshu-style テンプレートを使用してください」

利用可能なテンプレート

テンプレート	説明	最適な用途
default	ニューヨーカー風のイラストを使った標準スタイル	一般的な記事
mom-reading-club	TsangerJinKai02 フォントを使った書道と水墨画風のスタイル	Mom Reading Club（妈妈读书会）ブランドのコンテンツ

Mom Reading Club テンプレート

「Mom Reading Club」ブランドのコンテンツには、すべてこのテンプレートを使用してください。

/xiaohongshu-images <article> --template mom-reading-club

特徴：

• フォント：タイトルには TsangerJinKai02（仓耳今楷02）を使用します。ローカルへのインストールが必要です
• カバースタイル：中国書道と水墨画のイラスト（书法水墨风）
• 美的スタイル：禅の簡素さ、優雅な節度、ゆとりのある余白
• アクセントカラー：控えめなゴールド（#C9A962）
• 対象読者：30～45歳の教養ある母親

エラー処理

/baoyu-cover-image スキルが失敗した場合：

1. エラーメッセージをユーザーに表示します
2. 再試行するか、カバー画像なしで進めるかを提案します
3. 画像なしで進める場合は、プレースホルダーを使用するか、カバーを省略します

スクリーンショットのキャプチャに失敗した場合：

1. HTML ファイルが存在し、有効であることを確認します
2. ブラウザーの依存関係を確認します
3. 具体的なエラーをユーザーに報告します

システム要件

このスキルには、以下が必要です。

• Python 3.8+
• スクリーンショットのキャプチャ用 Playwright（pip でインストールします：pip install playwright && playwright install chromium）
• ~/.claude/skills/ にインストールされた /baoyu-cover-image スキル

依存関係をインストールします。

pip install playwright
playwright install chromium

注意事項

• このスキルは、提供された元のコンテンツをすべてそのまま保持します
• コンテンツの変更、簡略化、削除は行いません
• カバー画像は記事の主なテーマに基づいて生成されます
• スクリーンショットは、小紅書の 3:4 のアスペクト比に合わせて最適化されます
• スクリーンショット内のテキストが切れないよう、境界が適切に調整されます

コミュニティガイドラインへの準拠（社区规范合规）

重要：生成するコンテンツはすべて、小紅書のコミュニティガイドラインに準拠している必要があります。

クイックリファレンス - 禁止コンテンツ：

カテゴリー	例	対応
絶対的な表現	最も良い、最高、第一、国家級	削除するか、言い換えます
誇張された効果	1分で効果が出る、すぐに10斤痩せる	削除するか、免責事項を追加します
医療・金融に関する助言	健康のヒント、投資の提案	免責事項「本コンテンツは医療・投資に関する助言を構成するものではありません」を追加します
不適切な画像	露出、暴力、政治的シンボル	適切なコンテンツで再生成します
虚偽の情報	疑似科学、未検証の主張	検証するか、削除します
名誉毀損にあたるコンテンツ	ブランドや個人への攻撃	完全に削除します

公式ガイドライン：

• コミュニティガイドライン: https://www.xiaohongshu.com/crown/community/rules
• コミュニティ規約: https://www.xiaohongshu.com/crown/community/agreement

準拠ワークフロー：

1. 画像生成の前：テーマが適切か確認します
2. HTML 生成の前：禁止表現がないかテキストを確認します
3. 最終出力の前：プロンプトテンプレートの準拠チェックリスト（セクション 11.5）で確認します

初めての方へ（何を入力すればよいかわからないユーザー向け）

起動条件：/小红书配图 新手、「これはどう使うの？」「初めて使う」「何ができるの？」「一通り案内して」、 また、ユーザーがスキル名を入力したものの、タスクを指定していない場合。

このモードの鉄則は、決めつけない、要求しないことです。ユーザーは何も準備していないかもしれません。 いきなりファイル、API key、具体的な要望を求めてはいけません。以下の4つの手順に沿って進めます。

一、まず、これは何かを簡潔に説明する（3文以内）

一言で言うと、文章を、小紅書にそのまま投稿できる 3:4 の画像セットに分割します。 ページ分割、レイアウト、カバー生成を自動で行い、できあがった画像はすぐに使えます。 テンプレートを変更したり、文字サイズを調整したりする必要はありません。

二、番号付きの選択肢を提示し、Enter キーだけで続けられるようにする

自由回答式の質問（「何をしたいですか？」は初心者の負担になります）は避けます。3つの選択肢とデフォルトを提示します。

想先看哪个？（直接回车 = 1）
  1. 先看看做出来长什么样（示例）
  2. 把我的这段内容做成图
  3. 有哪些风格可以选

三、実演しながら説明する

選択後すぐに、サンプルデータを使って実演します。ユーザーに何かを提供してもらう必要はありません。 各手順が終わるたびに、「💡 今起きたこと」を1行加え、その手順の意味を一言で説明します。

四、完了

実演後は、はい・いいえで答えられる質問を1つだけします。「自分のコンテンツで実際に試してみますか？」 「はい」なら通常の手順に進みます。「いいえ」なら、いつでも /小红书配图 新手 と入力して戻ってこられることを伝えます。