guizang-social-card-skill：Claude Code で SNS カードを一括生成する実践ガイド

5000 字の記事を Xiaohongshu の 9 枚組に分けるとき、一番時間を取られるのは内容の要約ではありません。各カードのレイアウトです。タイトルを何行目に置くか、配色はどのパターンにするか、カバーのデザインをそろえるか。こうした反復作業が、制作時間のかなりの部分を占めます。guizang-social-card-skill はこの流れを Claude Code に入れ込みます。Agent に作りたい内容を伝えると、単一 HTML を出力し、Playwright でローカルレンダリングして PNG にできます。この記事では、対応する画板サイズ、2 つのビジュアルシステムの違い、インストールと実行方法、レンダリングスクリプト、検証ルール、AGPL-3.0 ライセンスの境界を整理します。

プロジェクトの位置づけ：自分に合うツールか

guizang-social-card-skill は AI 画像生成のプロンプト集ではなく、ローカルレンダリングのワークフローです。中心になる機能は、Claude Code や Codex のような Agent 環境で、Xiaohongshu の図文カードと WeChat 公式アカウントのカバーを一括生成すること。出力は単一 HTML で、Playwright を使って PNG にレンダリングします。レイアウトの骨格とテーマプリセットはあらかじめ固定されており、Agent は内容の流し込みとパラメータ調整を担当します。

次の表で、使うべきかどうかをすばやく判断できます。

観点	説明
何か	Claude Code / Codex の Skill。SNS カードを一括生成するためのもの
出力形式	単一 HTML → ローカル Playwright で PNG レンダリング
対応プラットフォーム	Xiaohongshu（1080×1440）、WeChat 公式アカウントのカバー（2100×900 + 1080×1080）
向いている人	コンテンツ運営者、個人開発者、技術ブロガー、長文を図文カードに分解したい人
向いていない人	写真の精密レタッチ、実写の肌補正、複雑なブランドガイドライン審査、クローズドソース商用再配布が必要な人
ライセンス	AGPL-3.0。商用前にオープンソース義務の確認が必要
約束しないこと	一括投稿、自動投稿、プラットフォーム審査ルールへの自動適合

統一感のあるカバー画像をすばやく作りたいだけで、AGPL-3.0 のオープンソース義務を受け入れられるなら、手作業のレイアウト時間をかなり減らせます。一方で、より細かいブランドコントロール、クローズドソース商用利用、複雑な承認フローが必要なら、このツールの制約は合わないかもしれません。

2 つのビジュアルシステムと 3 種類の画板

Editorial vs Swiss：スタイルの違い

プロジェクトには 2 つのビジュアルシステムがあり、異なるコンテンツタイプを想定しています。

ビジュアルシステム	向いている場面	レイアウト骨格	テーマプリセット
Editorial	落ち着いたストーリー、旅行メモ、読書シェア	16 個	6 セット
Swiss	グリッドの対比、製品レビュー、データ表示	12 個	4 セット

Editorial は雑誌風のレイアウトに近く、文字中心のカードに向いています。Swiss はデータ図表に近く、比較系の内容や構造を強調したい情報に合います。2 つを合わせると 28 個のレイアウト骨格と 10 セットのテーマプリセットがあり、Xiaohongshu 図文カードや WeChat 公式アカウントのカバーでよくあるスタイルの多くをカバーできます。

3 種類の画板サイズ

画板サイズは、出力画像の比率を決めます。

画板クラス	サイズ	用途
.poster.xhs	1080×1440（3:4）	Xiaohongshu 図文の標準比率
.poster.wide	2100×900（21:9）	WeChat 公式アカウントの横長カバー
.poster.square	1080×1080（1:1）	WeChat 公式アカウントの正方形カバー

WeChat 公式アカウントでは、横長版と正方形版の 2 種類を同時に用意することがよくあります。Xiaohongshu の図文カードは 1080×1440 にそろえます。これらのサイズは README の画板定義に基づくもので、Xiaohongshu や WeChat の公式審査ルールを意味するものではありません。公開前には、各プラットフォームの最新要件を確認してください。

インストール：CLI と clone の 2 通り

方法 1：CLI インストール（おすすめ）

前提として、Claude Code または Codex をインストール済みで、Agent を正常に呼び出せる必要があります。ターミナルで次を実行します。

npx skills add https://github.com/op7418/guizang-social-card-skill --skill guizang-social-card-skill

このコマンドは Skill を Claude Code の個人ディレクトリにインストールします。完了後は、Claude Code で /guizang-social-card-skill を直接呼び出すか、関連タスクの中で Agent に自動検出させて使えます。

Skill の基本概念にまだ慣れていない場合は、先にこちらの記事を読むと入りやすいです：手書きプロンプトで消耗しているなら、Claude Code のこの機能で効率を 3 倍にする。

方法 2：ローカルに clone する

テンプレートやレイアウトを変更したい場合は、プロジェクトを直接 clone できます。

git clone https://github.com/op7418/guizang-social-card-skill ~/.claude/skills/guizang-social-card-skill

clone 後のディレクトリ構成は、おおよそ次のようになります。

guizang-social-card-skill/
├── SKILL.md
├── templates/
├── scripts/
│   ├── render.mjs
│   └── validate-social-deck.mjs
└── references/

ローカルで管理すると、テンプレート、文字サイズ、配色を直接変更できます。ただし変更後のバージョンも AGPL-3.0 の制約を受けます。再配布したり、ネットワークサービスとして提供したりする場合は、ソース公開が必要になります。

レンダリングと検証：HTML から PNG へ

レンダリングスクリプトの使い方

Agent が単一 HTML を出力したら、Playwright で PNG にレンダリングします。プロジェクトにはレンダリングスクリプトが用意されています。

node render.mjs

このスクリプトは現在のタスクディレクトリにある HTML ファイルを読み込み、Playwright のヘッドレスブラウザでレンダリングし、同じディレクトリへ PNG を出力します。レンダリング中によく起きる問題は次のとおりです。

• Playwright が未インストール：先に npx playwright install chromium を実行する
• HTML ファイルのパスが違う：Agent が出力したファイル名がスクリプトの想定に合っているか確認する
• フォントが足りない：中国語や日本語フォントがローカルにないと、空白としてレンダリングされることがある

レンダリング後は、画像の見た目を一度目視で確認することをおすすめします。特に長すぎるタイトル、マスクの重なり、人物の顔の回避、footer の衝突は、スクリプトだけでは完全に拾えません。

検証スクリプトの使い方

プロジェクトには品質検証スクリプトもあります。

node validate-social-deck.mjs path/to/task-dir

検証ルールは次の 6 つです。

1. オーバーフロー検出：文字が画板の境界を超えるとマークする
2. 文字サイズ上限：タイトルの文字サイズがしきい値を超えるとエラーにする
3. footer 衝突：下部 footer と本文が重なるとマークする
4. 横帯の密度：Swiss システムの横帯が詰まりすぎると警告する
5. frame オーバーフロー：レイアウト骨格の frame が画板外にはみ出すとマークする
6. Swiss の字重：Swiss システムの font-weight 設定が規定に合わないとエラーにする

検証スクリプトはレイアウト問題の場所をすばやく見つける助けになりますが、自動修正はしません。HTML テンプレートや Agent の出力に戻り、パラメータを調整してから再度レンダリングします。

Agent により正確な HTML を出力させたい場合は、こちらの設定ガイドも参考になります：Claude にコードを雑に書かせないための設定ファイルで、AI の精度を 10% 上げる。

素材ソースとライセンスリスク

画像ソースのワークフロー

プロジェクトは複数の画像ソースから素材を取得できます。

• Unsplash：無料の高品質画像。多くは商用利用可能
• Pexels：無料画像。具体的なライセンス条件の確認が必要
• Flickr CC：Creative Commons 画像。出典とライセンス種別の表記が必要
• Wallhaven：壁紙系画像。商用前にライセンス確認が必要
• 検索結果：一般検索エンジンからの取得。ライセンス状態は不確定

Agent は要件に応じて画像ソースを選べますが、素材のライセンス状態を自動で検証するわけではありません。公開前には、各画像の出所とライセンス条件を人が確認する必要があります。商用利用では特に重要です。「商用不可」や「クレジット表記が必要」とされている場合は、カード内に必要な情報を残してください。

AGPL-3.0 ライセンスの読み方

プロジェクトは AGPL-3.0 ライセンスで公開されており、MIT や Apache より厳しめです。中心になる要求は次のとおりです。

場面	要求
個人利用	制限は少なく、自由に利用・変更できる
再配布	AGPL-3.0 を維持し、ソースコードを提供する必要がある
ネットワークサービス	SaaS やネットワークサービスとして提供する場合、サーバー側コードの公開が必要
商用利用	商用利用は可能。ただしオープンソース義務を守る必要がある

チームにクローズドソース要件がある場合や、このツールをクローズドソース製品に組み込みたい場合は、商用利用前に法務面を確認してください。AGPL-3.0 は、ネットワークサービスとして提供するときにサーバー側コードの公開を求めます。これは一部の商用チームにとって大きな制約になります。

リスク上の注意点

明確にしておきたい境界があります。

• プロジェクトは PNG アセットを生成するだけで、一括投稿や自動投稿の機能はありません
• 画板サイズは README の定義に基づくもので、Xiaohongshu や WeChat の公式審査ルールではありません
• Stars や Forks の数は変動するため、コア価値の根拠には向きません
• 素材ライセンスは人の確認が必要で、Agent だけでは完了しません

Agent のライセンスやコンプライアンスについてさらに気になる場合は、こちらのサブエージェントガイドも参考になります：Claude の返答が長すぎるなら、Subagent で自分専用の AI チームを作る。

関連記事

Claude Code Skill と Agent ツールをもう少し体系的に知りたい場合は、次の記事も役に立ちます。

• 手書きプロンプトで消耗しているなら、Claude Code のこの機能で効率を 3 倍にする：Skill の基本概念とプロンプト再利用の価値
• Claude にコードを雑に書かせないための設定ファイルで、AI の精度を 10% 上げる：CLAUDE.md で Agent の出力を整える方法
• Claude の返答が長すぎるなら、Subagent で自分専用の AI チームを作る：サブエージェント構成と複数 Agent の協調

いずれも Claude Code の使い方を実践ベースでまとめた記事です。Skill が Agent ワークフローのどこに位置づくのかを理解しやすくなります。

まとめ

guizang-social-card-skill は、Xiaohongshu 図文カードと WeChat 公式アカウントのカバー制作を Claude Code に取り込み、Agent で統一感のあるカードを一括生成できるようにします。2 つのビジュアルシステム、3 種類の画板サイズ、28 個のレイアウト骨格、10 セットのテーマプリセットを内蔵し、多くのコンテンツ運営シーンをカバーできます。

ただし境界もはっきりしています。生成するのは PNG アセットだけで、投稿機能はありません。素材ライセンスは人が確認する必要があります。AGPL-3.0 のため、商用利用前にはオープンソース義務を確認するべきです。写真の精密レタッチ、複雑なブランド審査、クローズドソース商用利用が必要なら、このツールの制約は合わない可能性があります。

次の一歩としては、GitHub リンクを開き、CLI コマンドで Skill をインストールして、最初のカードセットを作ってみるのがよいでしょう。レンダリングで詰まったら、まず Playwright のインストール状態とフォント設定を確認します。検証スクリプトは、ほとんどのレイアウトエラーの場所を見つける助けになります。