guizang-social-card-skill：小紅書カードと WeChat カバーを再利用できる制作フローにする

長い原稿をソーシャルカードに変える作業で時間を取られるのは、見出しを考える部分だけではありません。画板サイズ、余白、文字、素材、書き出し形式、公開前チェックを同時に満たす必要があります。小紅書の 3:4 カルーセル、WeChat の 21:9 カバー、1:1 シェア画像をそろえるだけでも、毎回かなりの手作業が発生します。単発のプロンプトは便利ですが、次の案件では間隔、色、タイトル密度がまた揺れます。

guizang-social-card-skill は、その揺れを Claude Code / Codex から呼び出せる Skill にまとめるためのプロジェクトです。リポジトリには、ふわっとしたデザイン指示だけでなく、SKILL.md、HTML の種テンプレート、視覚参考、素材ルール、Playwright レンダリング、検証スクリプトが入っています。記事、製品メモ、スクリーンショット手順、字幕、写真を、編集可能な PNG カード資産へ変換する用途に向いています。

要点

• guizang-social-card-skill は Claude Code / Codex などの Agent 環境向けで、小紅書 / Rednote のカード組と WeChat 21:9 + 1:1 カバーを生成します。
• GitHub README では、Editorial と Swiss の 2 つの視覚システム、28 個のレイアウト骨格、10 個のテーマプリセット、3 種類の画板サイズが示されています。
• 単一 HTML ファイルを Playwright で PNG にレンダリングするため、Agent が HTML / CSS を直接読み書きできます。
• 得意なのは量産しやすい初稿カードです。ブランド審査、写真レタッチ、プラットフォーム公開判断は人が見る必要があります。
• ライセンスは AGPL-3.0 です。改変配布やサービス化を考えるチームは、先に義務を確認してください。

解決するのはレイアウトの再利用

AI でソーシャルカードを作る失敗は、文案そのものよりも、再利用できるレイアウト境界がないところで起きます。ある回ではタイトルが左上に収まり、別の回では全画面に広がる。ある回では落ち着いた青、別の回では高彩度のグラデーションになる。中国語タイトルが少し長くなると、footer、ページ番号、メイン画像がぶつかります。

この Skill は、その不安定さを固定フローに入れます。README の画板は明確です。.poster.xhs は 1080x1440 で小紅書 3:4 向け、.poster.wide は 2100x900 で WeChat 21:9 向け、.poster.square は 1080x1080 で正方形シェアカード向けです。サイズが決まると、Agent の仕事は自由なデザインではなく、決まった容器の中でレイアウトを選び、文案を圧縮し、素材を配置し、書き出す作業になります。

2 つの視覚システムも判断を減らします。Editorial は控えめなデジタル雑誌の雰囲気で、旅行、読書、ライフスタイル、物語性のある内容に合います。Swiss はグリッド、アクセント色、情報階層を重視するため、ツールレビュー、データ振り返り、AI 製品説明、手順分解に合います。毎回新しい見た目を発明するより、少数の安定したシステムに落とすほうが運用しやすくなります。

導入と最初の依頼

README の推奨インストールは次のコマンドです。

Alibaba Cloud - 開発者向けクラウドの第一候補、Lighthouse サーバー15%OFF、プロジェクトの迅速な立ち上げを支援

15%割引を入手 →広告

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

Claude Code の個人 Skill ディレクトリへ clone する方法もあります。

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

導入後、最初の依頼は「小紅書カードを作って」だけにしないほうが安定します。素材、プラットフォームサイズ、枚数、視覚システム、素材方針を伝えます。

この AI ツールレビューをもとに、小紅書 3:4 カードを 5 枚作成してください。
視覚システムは Swiss、テーマは IKB Blue。
記事内の製品スクリーンショットを優先し、不足する素材があれば先に教えてください。
各カードは 1 つの主張だけに絞り、PNG 書き出し前に HTML 構造とタイトル圧縮案を見せてください。

大事なのは装飾的な形容詞ではありません。サイズは画板を決め、枚数は情報密度を決め、視覚システムはレイアウト候補を決め、素材方針は外部画像の扱いを決めます。書き出し前の確認で、長すぎるタイトルや被写体の遮りも早めに見つけられます。

ワークフローの流れ

README では Intake、Style & Theme、Layout Selection、Asset Prep、Compose & Render、Deliver & Review、Iterate に分かれています。日常の制作では、次のように考えると扱いやすいです。

最初に要件を集めます。出力先は小紅書か WeChat か。ユーザー画像はあるか。元コンテンツは手順、レビュー、旅行メモのどれか。この答えでレイアウトと素材が変わります。

次に視覚システムを選びます。AI ツール、方法論、データ回顧なら Swiss が合いやすいです。人物ストーリー、旅行、読書ノートなら Editorial が扱いやすいです。テーマ色はプリセットから選び、案件ごとに自由な色を増やさないほうが安定します。

レイアウト骨格も重要です。プロジェクトには Editorial 16 個、Swiss 12 個が用意されています。骨格があることで、タイトル文字数、情報ブロック数、余白の比率が制御されます。

素材準備は慎重に扱います。README ではユーザー画像を優先し、ない場合は Unsplash、Pexels、Flickr CC、Wallhaven、検索の順で素材を探し、SOURCES.md に記録するとされています。本番公開では、商用利用、広告、ブランド案件ほどソースとライセンス確認が必要です。

合成と書き出しは単一 HTML ファイルで行います。Skill は種テンプレートへ内容を入れ、HTML を作り、node render.mjs で PNG を出します。HTML / CSS はテキストなので、Claude Code や Codex が余白、画像位置、文字階層を細かく修正できます。

KiloClaw - 企業向けマネージド OpenClaw、AI エージェントのオーケストレーションとスマートルーティングを加速

今すぐ始める →広告

最後に確認と反復です。README は validator を毎回自動実行しない流れにしています。毎回検証すると待ち時間が増えるため、まず PNG を見て方向を確認し、その後 validate-social-deck.mjs で overflow、footer collision、frame overflow、Swiss の字重問題を確認する流れが現実的です。

向く場面と向かない場面

この境界を持つと期待値が安定します。guizang-social-card-skill は Agent をデザイン責任者にする道具ではありません。繰り返しやすく、構造化され、テンプレート化できるカード制作を Agent に任せる道具です。審美判断、ブランドリスク、公開判断は人の役割として残ります。

QA：PNG が出ても公開可能とは限らない

ソーシャルカードは小さな点で崩れます。タイトルが数文字長いだけでスマホ上の密度が上がりすぎる。出典表示が footer に隠れる。顔にマスクがかかり、画面の信頼感が落ちる。

公開前に少なくとも次を確認します。

• 1 枚のカードに 1 つの主張だけを入れる。
• 中国語タイトルは早めに短くする。1:1 の WeChat シェアカードでは特に安全余白を残す。
• 全面画像では、マスクが顔、製品本体、文字密集部分を覆わないようにする。
• footer、ページ番号、出典表示が本文ブロックと衝突しないようにする。
• 外部画像は出典を記録し、商用利用前にライセンスを確認する。
• Swiss テンプレートでは、大きい文字ほど太すぎるウェイトを避ける。
• validate-social-deck.mjs を走らせた後、pass / fail だけでなく warning の意味を見る。

安全な試し方は、公開済みの旧稿から 3〜5 枚だけ作ることです。レイアウト、タイトル長、書き出しの挙動が安定してから、フルのカルーセルへ広げます。初日に 1 週間分のネタをすべて投げると、最後の確認だけが重くなります。

プロンプト、デザインツール、この Skill

プロンプトは速いです。チャットで見出しを出し、要点を分解し、色の方向を決めるだけなら数分で進みます。弱点は再現性です。レイアウトが揺れ、ローカル素材との接続が弱く、書き出しはスクリーンショット頼みになりやすく、レビュー履歴も残りにくいです。

Figma や Canva は精修に強いです。ブランドシステム、共有コンポーネント、共同レビュー、素材管理は成熟しています。一方で、毎週大量の「十分に良く、かつ揃っている」中間素材を全部手作業で作ると、制作速度が落ちます。

Vultr - 高性能NVMeクラウドサーバー、世界32拠点、Dockerワンクリック展開対応

価格を見る →広告

guizang-social-card-skill はその中間に置く道具です。プロンプトは発散、デザインツールは仕上げ、この Skill は画板選択、骨格選択、タイトル圧縮、素材配置、レンダリング、検証を固定します。テンプレート、スクリプト、参照資料、コマンドが Skill ディレクトリにあるため、Claude Code / Codex が制御された流れで HTML と PNG を作れます。

自分の制作フローに入れる

安定した導入手順は次の形です。

1. 長文を 5〜7 個の要点に圧縮し、各要点に主タイトル 1 つと補足 2〜3 行を付ける。
2. Claude Code または Codex に Skill を入れ、SKILL.md、assets/、references/ があるか確認する。
3. 旧稿から 3 枚だけ作り、外部图库は使わず、スクリーンショットまたは文字中心で試す。
4. スマホ表示、タイトル長、余白、画像マスク、ページ番号を人が見る。
5. validator を走らせ、overflow、footer collision、frame overflow を直す。
6. 5〜9 枚の組図または WeChat カバー対へ広げる。

毎回の試作結果も残しておきます。使ったテーマ、選んだレイアウト、タイトル圧縮の前後、差し替えた画像、validator の warning を記録すると、数回後には自分のアカウント向けの小さな制作規範になります。

チームで使うなら、原稿、カード HTML、書き出した PNG、SOURCES.md、フィードバックを同じタスクディレクトリに置きます。デザイナーは素材選定の理由を見られ、運営担当は各カードと原文要点を追跡でき、責任者は公開前にライセンスと文言リスクを確認できます。

関連して読む

Claude Code Skill に慣れていない場合は、まず Claude Code Skill 入門ガイド で SKILL.md の役割を確認すると理解しやすいです。プロジェクト規約を長期的に効かせたい場合は CLAUDE.md ガイド も参考になります。企画、執筆、制図、QA を役割分担したい場合は Claude Subagent 実践ガイド が次の候補です。

guizang-social-card-skill は試す価値があります。扱い方は、小さな制作ラインに近づけるほうが安定します。サイズ、レイアウト、色、レンダリング、検証は Skill に任せる。内容判断と最後の審美は人の手元に残す。その分担が、この道具を一番使いやすくします。