Claude CodeやCodexなどのコーディングエージェント環境向けのエージェントスキル。記事、コピー、スクリーンショット、製品ノート、字幕、写真からXiaohongshu（小红书）/ Rednote（レッドノート）のカルーセル画像とWeChat（微信）の21:9 + 1:1カバーペアを生成します。
2つのビジュアルシステムが1つのワークフローを共有：
- エディトリアル。Monocle / Kinfolk / Cerealの精神に則った抑制の効いたレイアウト。ストーリーテリング、ライフスタイル、旅行、読書、映画、個人的な観察に最適です。
- スイスインターナショナル。グリッド優先、単一アンカーカラー、シャープなヘアライン、極端なタイプコントラスト。製品レビュー、データ、フレームワーク、チュートリアル、AIツールに最適です。
guizang-ppt-skillの姉妹プロジェクト。共通のビジュアル言語、別メンテナンス。PPTは「横スワイプのトーク」を解決し、こちらは「静的フィード画像」を解決します。
30秒スタート
npx skills add https://github.com/op7418/guizang-social-card-skill --skill guizang-social-card-skill
または、シェルアクセス権を持つAIエージェントに以下を貼り付けてください：
Install guizang-social-card-skill for me. Clone https://github.com/op7418/guizang-social-card-skill into ~/.claude/skills/guizang-social-card-skill, then verify that SKILL.md, assets/, and references/ exist.
既にインストール済みの場合は、以下でアップデートしてください：
Update guizang-social-card-skill for me. Go to ~/.claude/skills/guizang-social-card-skill, run git pull, then tell me the latest commit.
次に、エージェントに依頼してください：
Make me a Swiss-style Xiaohongshu carousel from this article, 5 cards, IKB blue.
他の便利なプロンプト：
Make me a 3:4 Xiaohongshu set from this product review, with editorial-style titles.
Turn this article into a WeChat cover pair: 21:9 hero + 1:1 share card, visually consistent.
I have 3 camping photos — make me an image-led Xiaohongshu carousel.
Turn this game guide copy into a Xiaohongshu set; pull some game art from Wallhaven.
得られるもの
- 🖋 2つのビジュアルシステム：雰囲気とナラティブに強いエディトリアル、事実と構造に強いスイス、1つのワークフローを共有
- 📐 3つのキャンバスサイズ：
.poster.xhs1080×1440（Xiaohongshu 3:4）、.poster.wide2100×900（WeChat 21:9）、.poster.square1080×1080（WeChat 1:1） - 🧩 28のレイアウトスケルトン：エディトリアル16（
M01-M16、画像主導カバー、パイプライン、ビフォー/アフターを含む）+ スイス12（S01-S12、KPIタワー、Hバーチャート、マトリックス+ヒーローを含む） - 🎨 10のテーマプリセット：エディトリアル6（Ink Classic、Indigo Porcelain、Forest Ink、Kraft Paper、Dune、Midnight Inkダーク）+ スイスアンカーカラー4（IKB Klein Blue、Lemon、Lemon Green、Safety Orange）
- 🖼 画像調達ワークフロー：ユーザー画像を優先。なければUnsplash → Pexels → Flickr CC → Wallhaven → 直接検索と、ローカルにダウンロードして自動生成の
SOURCES.mdを作成 - 🌫 WebGLインクフロー背景：エディトリアルのヒーローページにライブインクアニメーションを追加可能。低電力デバイスやスクリーンショットモードでは無効化可
- 🪧 画像オーバーレイ + 顔安全性：全面画像にはマスク必須。テキストドロップゾーンは被写体を避ける。厳格なルールは
references/image-overlay.mdに記載 - 🧰 スクリーンショット美化アセット：実テクスチャのWebP背景9枚（エディトリアル5 / スイス4）、
.frame-shot/.device-browser/.device-phoneユーティリティとペア - 🗺 マップコンポーネント：MapLibre + OSM実タイル、マルチピン+コネクタ、旅行ガイド向け
- ✅ バリデーター：
validate-social-deck.mjsがオーバーフロー、タイプキャップ違反、4バンド密度ギャップ、フッター衝突を自動検出 - 📄 単一ファイルHTML + Playwrightレンダリング：フロントエンドビルドパイプライン不要。
node render.mjsが直接PNGを出力
適する / 適さない
✅ 適する：Xiaohongshuカルーセル / WeChatカバーペア / モーメンツカバー / チャンネルカバー / 記事ビジュアル / チュートリアルページ / データ要約 / 旅行ガイド / 製品レビュー / スクリーンショット解説
❌ 適さない：横スワイプデッキ（guizang-ppt-skillを使用）/ 長尺動画生成 / 純粋な写真レタッチ / レイアウトなしのプレーンテキスト編集
11のXiaohongshuカテゴリー
「コンピテンスの輪」による階層化 — references/category-cookbook.mdを参照：
エンドツーエンドで強力（コピー / 構造 / 画像すべてが範囲内）：
- 旅行、キャリア、おすすめ（サブジャンル指定後）
コピーと構造が強力、画像はユーザーまたは調達アートに依存：
- ゲーム、映画、食べ物（レシピ指向）、メイク（チュートリアル指向）、フィットネス、家、ファッション（キュレーションピック）
範囲外、最初に宣言（無理に当てはめない）：
- OOTDライブショット / ドリームコア / フィルムエミュレーショングレーディング / 実際の肌テストメイク — 写真撮影やポストプロダクションに大きく依存するもの
よくあるシナリオ
| タスク | 推奨フロー |
|---|---|
| 長文記事 → Xiaohongshuカルーセル | 核心ポイントを抽出。ナラティブのテンポにはエディトリアル、データ分解にはスイス |
| 製品レビュー / ツールまとめ | スイス + IKBブルー、S09 KPIタワー / S10 Hバーチャートがおすすめ |
| 旅行 / ライフスタイル | エディトリアル + Midnight InkまたはDune、全面ヒーローにM16 画像主導カバー |
| WeChatカバーペア | 同じコンテンツを2回レンダリング：.poster.wide 21:9 + .poster.square 1:1、視覚的一貫性 |
| スクリーンショットチュートリアル / ツールウォークスルー | .frame-shot + .device-browser、スイスグリッドベースがおすすめ |
| ゲームガイド / 映画要約 | エディトリアル + Midnight Ink、全面ヒーローにWallhavenからゲームアートを取得 |
| データ要約 / 年間レビュー | スイス + LemonまたはSafety Orange、マトリックス + 台帳コンボ |
なぜ単一ファイルHTMLからPNGか
- エージェントフレンドリー：HTML + CSSはテキスト — エージェントが直接書き込み、読み取り、編集、検証可能
- レイアウトの精密さ：CSS Grid + 厳密なタイプ / マージン / グリッドルールはMarkdownのレイアウト範囲をはるかに超える
- オープンな画像調達：Unsplash / Pexels / Wallhaven / Mapbox / OSM / 任意のWebリソースに接続
- 検証可能な品質：
validate-social-deck.mjsがPlaywright DOM測定を実行、推測ではない - シンプルな納品：
output/*.pngを直接納品 — デプロイや書き出しツール不要
プラットフォームサポート
| プラットフォーム | ステータス | 備考 |
|---|---|---|
| Claude Code | サポート | ネイティブスキルワークフロー、カード生成+反復に最適 |
| Codex | サポート | 長尺カード生成、画像調達、ビジュアルQAに適 |
| Cursor / その他ローカルエージェント | 動作 | ファイルシステム読み書き + シェル実行が必要 |
| プレーンチャットボット | 非推奨 | ファイルシステムとレンダリングパイプラインなしでは、画像を確実に納品できない |
インストール
オプション1: ワンラインインストール（推奨）
npx skills add https://github.com/op7418/guizang-social-card-skill --skill guizang-social-card-skill
オプション2: AIに以下を貼り付ける
私のために
guizang-social-card-skillClaude Codeスキルをインストールしてください。手順：
~/.claude/skills/が存在することを確認（なければ作成）git clone https://github.com/op7418/guizang-social-card-skill.git ~/.claude/skills/guizang-social-card-skillを実行- 検証：
ls ~/.claude/skills/guizang-social-card-skill/でSKILL.md、assets/、references/が表示されること- 完了したら教えてください。後で「Xiaohongshuカルーセルを作って」などと言うと、このスキルがトリガーされます。
上記のブロックをClaude Code / Cursor / シェルアクセス権を持つAIエージェントに貼り付けてください。
オプション3: 手動CLI
git clone https://github.com/op7418/guizang-social-card-skill.git ~/.claude/skills/guizang-social-card-skill
トリガー方法
インストール後、Claude Codeが自動検出。トリガーフレーズ：
- "Xiaohongshu / Rednoteのカルーセルを作って"
- "Rednoteカードを作って"
- "WeChatの21:9ヒーロー + 1:1共有カードを作って"
- "ソーシャルカード / マガジンスタイルのソーシャルカードを生成して"
- "この記事をチュートリアルカルーセルに変えて"
- "スイススタイルのXiaohongshuレビュー / IKBスタイルのカードを作って"
ワークフロー
このスキルは構造化ワークフローです。エージェントは7つのステップを進みます：
- インプット — 4つの情報を取得：ターゲットプラットフォーム / スタイル / ソースコンテンツ / ユーザー画像。画像がない場合、一度だけA/B/Cを提示（自分で撮影 / AI生成 / オンラインで調達）。再度提案しない
- スタイル & テーマ — エディトリアルかスイスを選び、10のテーマプリセットから1つ選択。カスタムhex値は不可
- レイアウト選択 — 28のレイアウトスケルトンからコピーを選択 / 貼り付け / 適応。エディトリアル16 / スイス12
- アセット準備 — 画像を調達（Unsplash / Pexels / Flickr CC / Wallhaven / 直接検索）、ローカルにダウンロード +
SOURCES.mdを作成。ソースのクレジット表記の有無を確認 - 構成 & レンダリング — シードテンプレートをコピー →
<!-- POSTERS_HERE -->を置換 →node render.mjs - 納品 & レビュー — 最初にPNGを表示し、「ご自身でご覧になりますか、それともバリデーターを実行しますか？」と尋ねる — 自動検証はしない
- 反復 — ユーザーフィードバックを適用、インラインスタイルを調整またはレイアウト/画像を交換し、再レンダリング
詳細仕様はSKILL.mdに。深い詳細は対応するreferences/*.mdに。
バリデーター
node validate-social-deck.mjs path/to/task-dir
静的スキャンではなくPlaywrightの実レンダリング測定に基づく6つのルール：
- R1 オーバーフロー —
.posterからはみ出すセクションは即座に失敗 - R2 タイプキャップ —
.h-xl/.h-displayのサイズ+ウェイトの組み合わせがシード定義を超える - R3 フッター衝突 — コンテンツが下部フッター/ページ番号に食い込む
- R4 4バンド密度 — 高さ1440のキャンバスを4つの水平バンドに分割。各バンドにコンテンツがあるか、空白の理由が明記されている必要がある
- R5 フレームオーバーフロー —
.frame-img/.frame-shotの子要素がフレームからはみ出す - R6 スイスアイデンティティ — スイステンプレートでインラインの
font-weight >= 700は警告（「大きいほど細く」に違反）
SKILL.mdのステップ7でバリデーターは自動実行されないと明記 — ユーザーが画像を確認するのを待ち、1ラウンドあたり数十秒を節約。
テーマプリセット
references/theme-presets.mdから選択。カスタムhex値は不可 — 選択の自由より美観の保護を優先。
エディトリアル（6）
| テーマ | トーン | 最適 |
|---|---|---|
| 🖋 Ink Classic | #0a0a0b / #f1efea | 汎用デフォルト、コマーシャルなトピック、迷ったらこれ |
| 🌊 Indigo Porcelain | #0a1f3d / #f1f3f5 | テック、研究、AI、テクニカルライティング |
| 🌿 Forest Ink | #1a2e1f / #f5f1e8 | 自然、サステナビリティ、アウトドア、ノンフィクション |
| 🍂 Kraft Paper | #2a1e13 / #eedfc7 | ノスタルジア、人文科学、読書、文学 |
| 🌙 Dune | #1f1a14 / #f0e6d2 | アート、デザイン、クリエイティブ、ファッション |
| ⚫ Midnight Ink | #0e0d0c / #ece2cf / #d4a04a | ゲームキービジュアル / 夜景 / シネマティックカバー / Black Myth · Elden Ring風ダークテーマ |
スイス（4）
| テーマ | アンカー | 最適 |
|---|---|---|
| 🔵 IKB Klein Blue | #002FA7 | 汎用デフォルト、コマーシャルローンチ、AI製品、フレームワーク |
| 🟡 Lemon | #FFD500 | 若者、スポーツ、小売、コンシューマー、Y2K |
| 🟢 Lemon Green | #C5E803 | エコ、健康、Z世代、グリーンブランド |
| 🟠 Safety Orange | #FF6B35 | アラート、ニュース、工業、エネルギッシュなテーマ |
テーマを切り替えるには、シードテンプレートの<section class="poster" data-theme="...">属性を置き換えるだけ。全CSSはvar(--...)で解決されます。
ディレクトリ構成
guizang-social-card-skill/
├── SKILL.md ← メインスキルファイル：7ステップワークフロー
├── README.md ← 中国語README
├── README.en.md ← このファイル
├── HANDOFF.md ← 引継ぎドキュメント：事実 + バージョン履歴
├── PRODUCT.md ← プロダクトドキュメント：考え方 + 決定事項 + ロードマップ
├── validate-social-deck.mjs ← Playwrightレイアウトバリデーター
├── assets/
│ ├── template-editorial-card.html ← エディトリアルシード（6テーマ / 3キャンバス）
│ ├── template-swiss-card.html ← スイスシード（4アクセント / 3キャンバス）
│ ├── magazine-bg-webgl.js ← WebGLインクフロー背景
│ └── screenshot-backgrounds/ ← 9枚のスクリーンショットステージ背景（WebP）
│ ├── style-a/ ← エディトリアル5
│ └── style-b/ ← スイス4
└── references/
├── platform-specs.md ← プラットフォーム × 解像度 × 命名
├── style-system.md ← 両スタイルの厳格なルールとアンチパターン
├── theme-presets.md ← 全10パレットの詳細
├── layout-recipes.md ← 28レイアウトスケルトン（M01-M16 + S01-S12）
├── components.md ← タイプ / カード / スペーシング / アイコン
├── background-systems.md ← インクフロー / グリッド / 紙レイヤー
├── portrait-fill.md ← 3:4ボードの空白戦略
├── content-planning.md ← フック / ページ分割 / コピー圧縮
├── category-cookbook.md ← 11のXiaohongshuカテゴリーテーブル
├── image-overlay.md ← 全面画像マスク + 顔安全性ルール
├── screenshot-treatment.md ← `.frame-shot`ユーティリティ + スクリーンショット美化
├── map-component.md ← `.map-block` MapLibreマップ
├── title-shortener.md ← 1:1カバー向けショートタイトル戦略
├── production-workflow.md ← Playwrightレンダリングパイプライン
└── qa-checklist.md ← 品質チェックリスト
コアデザイン原則
- 派手さより抑制 — 抑制されたパレットが飽和したフィードで際立つ
- 装飾より構造 — タイプ / コントラスト / グリッドが階層を担い、シャドウやカードではない
- 自由度よりレイアウト — 最初に選び、後で適応させる。28のスケルトン外でページを考案しない
- ユーザー画像優先 — インプット時に一度だけA/B/Cを提示。自分で撮影するよう再度提案しない
- マスク + 回避 — 全面画像には常にマスクを適用。テキストドロップゾーンは被写体（顔 / 製品 / テキスト密度の高い領域）を避ける
- 「大きいほど細く」 — スイスの
.h-xlサイズが上がる → ウェイトは下がる必要がある。エディトリアルも同様のルールに従う - 自動検証なし — ユーザーに最初に見てもらい、検証前に尋ねる。1ラウンドあたり数十秒節約
- スキルはプロダクトであり、プロンプトではない — PRODUCT.md、バージョン番号、CHANGELOG、機能境界を持つ
- ローカルテストはgit管理外 — すべてのデモ / スモークテストは
local-tests/下に置き、gitignore
ビジュアルリファレンス
- Monocle / Kinfolk / Cerealのマガジンレイアウトと文字間隔
- Massimo Vignelli / Helvetica Forever / スイス国際タイポグラフィスタイルのグリッドシステム
- Apartamento / The Gentlewomanの画像対テキスト比率と人物ポートレート
- Xiaohongshu / Rednoteの「抑制が勝つ」フィードの事例
- Guizangのソーシャルカード実践
ロードマップ
- 長いエディトリアルコンテンツ下でのタイプキャップのエッジケースに対するさらなるスモークテスト
- スイスデータレイアウトの追加（追加チャートスケルトン）
- 画像生成後：ローカル修正を行うか、画像全体を再生成するかを積極的に尋ねる
- より多くのカテゴリー固有の推奨レイアウトパック（現在11のうち7がエンドツーエンドで強力）
- マーケットプレイス対応のWorkBuddyバージョン
貢献
バグ、レイアウトの問題、新レイアウトリクエスト — IssueとPR歓迎。変更の優先事項：
- シードテンプレート編集時は、
references/components.mdの対応表（サイズ / 間隔 / ウェイト）も更新 - レイアウト追加時は、完全なレシピを
references/layout-recipes.mdに追加（コピーキャップ + 最小密度） - テーマカラー追加時は、シードテンプレートの
[data-theme="..."]ブロック +references/theme-presets.mdも更新 - スイスルール追加時は、
validate-social-deck.mjsの対応ルールも更新 - 遭遇したミスは
references/qa-checklist.mdに追加 - テストとデモは
local-tests/下に — スキルルートを汚染しない
ライセンス
AGPL-3.0 © 2026 op7418
このプロジェクトはGNU AGPL-3.0の下でライセンスされています。主なポイント：
- 帰属表示必須 — 著作権表示を保持
- 派生成果物はオープンソース化必須 — 改変版、フォーク、再配布はいかなるものでもAGPL-3.0（または互換ライセンス）でリリースし、完全なソースコードを利用可能にすること
- ネットワーク利用は配布とみなされる — コードを配布せずにSaaS / Webサービスとして改変版を実行するだけでも、ソースの公開が必要（これがAGPLがGPLより厳しい理由）
- クローズドソース、プロプライエタリ、有料のみの配布は不可
全条件はLICENSEに。