桂蔵社会カードスキル - オープンソースの小紅書（小紅書）の画像とテキストの最適化スキル集。 - AiBoss

桂蔵社交カードスキルとは何ですか？

Guizang Social Card Skillは、Claude CodeやCodexなどのエージェント環境に対応したオープンソースの画像・テキストカード作成ツールです。小紅書（縦3:4の画像）やWeChat公式アカウント（21:9 + 1:1のカバー画像）の画像選択に関する課題を解決します。このツールには、EditorialとSwissという2つのビジュアルシステム、28種類のレイアウトスケルトン、10種類のテーマプリセットが組み込まれています。単一ファイルHTML + PlaywrightレンダリングによりPNGを直接出力し、AIエージェントがワンクリックで雑誌品質のレイアウトを持つソーシャルメディアカードを生成できます。

桂蔵社交カードスキルの主な機能

デュアルビジョンシステム出力編集スタイルは物語、旅行、ライフスタイル記事に適しており、スイスグリッドスタイルは製品評価、データ、方法論に適しています。
3枚の製図板のサイズ調整: 小紅書 3:4、WeChat 公式アカウント 21:9 ヘッダー画像、WeChat 公式アカウント 1:1 シェアカード。
28個のレイアウトスケルトン: 16 の編集タイトル (M01-M16、イメージ主導のカバー、パイプライン、ビフォー/アフターなどを含む) + 12 のスイスタイトル (S01-S12、KPI タワー、H バーチャート、マトリックス + ヒーローなどを含む)。
10種類のテーマプリセット編集用インク6セット（クラシックインク、インディゴポーセリン、フォレストインク、クラフトペーパー、デューン、ミッドナイトインク）＋スイスアンカーカラー4セット（クラインブルー、レモンイエロー、レモングリーン、セーフオレンジ）。
スマートテキスト圧縮画像この3段階の手法では、被写体を自動的に識別し、顔や製品の中心を避け、着地点の明るさを計算してテキストの色とマスクを決定し、フォントサイズと改行を領域のサイズに合わせて調整します。
自動化された画像ソースワークフローユーザー画像を優先します。画像がない場合は、Unsplash → Pexels → Flickr CC → Wallhaven を選択して画像を取得し、自動的に SOURCES.md に書き込みます。
マップコンポーネントMapLibreとOSMの実際のタイルデータに対応し、複数のピンと接続をサポートしており、旅行ガイドに適しています。
アセットを美しくするためのスクリーンショット9つのWebPリアルなテクスチャ背景+ .frame-shot / .device-browser / .device-phone ユーティリティクラス。
WebGLインクフロー背景雑誌風のヒーローページでは、ダイナミックなインクの流れ効果を表示できます。
11の製品カテゴリが互換性があります旅行、職場、映画やテレビ、製品レビュー、読書、食べ物、ゲーム、メイク、フィットネス、家具、ファッションなどに関する適応ルールが組み込まれています。
レイアウト検証スクリプト：validate-social-deck.mjs Playwrightの実際のDOM測定に基づいて、オーバーフロー、フォントサイズ制限、フッターの衝突など、6つのルールを検出します。

桂蔵社会カードスキルの技術的原理

単一ファイルHTML + CSSレンダリングシードテンプレートは純粋なHTML/CSSで構成されており、エージェントはそれを直接読み書き、変更できます。 node render.mjs Playwrightを使用すれば、フロントエンドのビルドチェーンを必要とせずにスクリーンショットを撮影し、PNG形式で出力できます。
CSSグリッド + 厳密なレイアウトシステムこのレイアウトは、影やカードの装飾に頼ることなく、フォントサイズ、フォントの太さ、グリッド間隔によって情報の階層構造を確立するように設計されており、正確で制御可能なレイアウトを保証します。
対象認識および回避アルゴリズム回避領域（顔、製品、テキストが密集した領域）は、画像重ね合わせルールによって指定されます。安全領域内のサンプリングポイントの平均色と輝度を計算し、テキストの色、影の深さ、マスクの必要性を推測します。コントラストが4.5未満の場合、マスクは強制的に深められます。
適応型組版エンジンフォントサイズは、安全領域の幅と高さに基づいて動的に計算され、固定のピクセル値をハードコーディングするのではなく、長い文章ははみ出すことなく自動的に折り返されます。
エージェント構造化ワークフロー7つのステップからなるクローズドループ（インテーク → スタイルとテーマ → レイアウト選択 → アセット準備 → 構成とレンダリング → 納品とレビュー → イテレーション）は、SKILL.mdによって均一にスケジュールされます。

桂蔵ソーシャルカードスキルの使い方

1行コマンド：npx skills add https://github.com/op7418/guizang-social-card-skill --skill guizang-social-card-skill
AIエージェントに実行させるインストールコマンドをシェル権限を持つエージェントに送信し、自動的にクローンを作成します... ~/.claude/skills/guizang-social-card-skill
手動コマンドライン：git clone https://github.com/op7418/guizang-social-card-skill.git ~/.claude/skills/guizang-social-card-skill

桂蔵社交カードスキルの核心的な利点

雑誌品質のタイポグラフィMonocle、Kinfolk、Cerealといった雑誌のレイアウトや文字間隔を参考に、色使いを抑えることで、情報フローの中で最も目を引く要素を作り出し、「AIのような」大きなカラーブロックや絵文字の山積みとはおさらばしている。
カテゴリ認識型インテリジェント適応「店舗訪問」の説明では、雑誌風の暖色系の大きな画像とともに同じテキストが表示され、「レビュー」の説明では、グリッド状の機器比較画像とともに表示されます。すべてに同じテンプレートが使用されているわけではありません。
画像にテキストを重ねてもクラッシュしない被写体回避、輝度サンプリング、適応型改行という3段階の手法により、「顔を覆うテキスト」、「同じ色では読みにくい」、「構図を損なうバナー」という3つの大きな問題点が解決されます。
画像ソースは閉じたループであり、不安はありません。デフォルトでは、Pexels、Unsplash、Wallhavenという3つの無料の商用利用可能な画像ライブラリと連携し、画像を自動的にローカルに保存してソースリストを追加します。
エージェントはネイティブフレンドリープレーンテキスト形式のHTML/CSSスキル。Claude Code/Codexは直接読み書き、反復処理が可能。完全なSKILL.mdワークフローと検証スクリプトが利用可能。

貴州社会カード技能プロジェクトの住所

GitHubリポジトリ：https://github.com/op7418/guizang-social-card-skill

類似製品と貴蔵社会カードスキルの比較

比較対象寸法	guizang-social-card-skill	brand-social-design
開発者	グイザン (op7418)	Om Rajguru (omrajguru05)
対象プラットフォーム	小紅書 3:4 縦型画像 + WeChat 公式アカウント 21:9 ヘッダー画像 + 1:1 シェアカード	Instagramの正方形投稿/カルーセル、オリジナル画像、注目画像、メール画像、ストーリーズ
視覚系	デュアルシステムエディトリアル（雑誌スタイル）＋スイス（スイスグリッドスタイル）、レイアウトスケルトン28種類	単一システムドット柄の背景 + 埋め込みカード + 太い枠線と濃い影 + 回転するラベル + ステッカー要素
ブランド適応	美的一貫性を保つため、10種類の固定テーマプリセットが用意されています（カスタム16進数は使用できません）。	ブランド導入面接色見本、フォント、デザインの特徴などを収集して、簡単に記憶し再利用できるようにしましょう。
カテゴリー認識	11種類のカテゴリ（旅行、職場、映画・テレビ、食品など）に対応した適応ルールを内蔵し、ルートレイアウトを自動で行います。	カテゴリーの区別はなく、すべてのコンテンツが同じ視覚言語を使用している。
テキストオーバーレイ画像	3段階のインテリジェント障害物回避: 対象を特定 → 輝度をサンプリングして文字カラーマスクを決定 → 適応型改行	インテリジェントな障害物回避機構はなく、テキストのレイアウトも比較的固定されている。
画像ソースソリューション	Unsplash → Pexels → Flickr CC → Wallhaven に基づいて画像検索の優先順位を自動的に決定します	画像ソースのワークフローは組み込まれていません。ユーザーは自分で素材を用意する必要があります。

貴州社会カードスキルの応用シナリオ

Xiaohongshu で共有された長文投稿記事の核心となる視点を抽出し、それらを自動的に3～9個の縦型グラフに3：4の比率で分割します。グラフのスタイルは、社説風のナラティブスタイルまたはスイスデータスタイルのいずれかを選択できます。
製品レビューリリースレビューテキストを入力すると、スイスグリッドスタイル＋IKBブルーが自動的に生成され、デバイスフレーム付きのパラメータ比較表が作成されます。これは、デジタルおよびツール関連のコンテンツに適しています。
旅行ガイドの作成編集雑誌のような全面画像に、ルートやチェックインポイントを示すMapLibreの地図コンポーネントを重ね合わせることで、ワンクリックでレストランのレビュー写真とテキストを生成できます。
WeChat公式アカウントのカバー画像同じコンテンツが2つのキャンバスにレンダリングされ、視覚的な一貫性を保つために21:9のヘッダー画像と1:1のシェアカードが使用され、WeChatのバックエンドに直接アップロードできます。