Communityコーディング&開発github.com

クリエイターブランドキット

ブランドブリーフ、カラーパレット、フォントペアリング、ロゴコンセプト(ベクターSVGの直接作成+生成による探索)を提供し、ソーシャル投稿、プロフィール画像、バナー、マーチ、パッケージなどのモックアップまで含む再利用可能なブランドキットを作成・拡張します。

クリエイターブランドキット とは?

このスキルは、クリエイターが一貫したビジュアルアイデンティティを迅速に構築・拡張するための包括的なツールです。ユーザーがブランド名、ポジショニング、ターゲット層、競合情報などを入力すると、2つの方向性から選択肢を提示し、承認後にロゴ(幾何学マーク、ワードマーク、組み合わせロゴ)をSVGで直接作成します。さらに、必要に応じて画像生成機能を利用した探索的ラスター画像も提供しますが、最終成果物は編集可能なSVGです。モックアップ作成では、ロゴPNGを参照画像として、プロフィール画像、ソーシャル投稿テンプレート、YouTubeバナー、名刺、トートバッグ、パッケージなどを生成し、テキストは別途追加します。最終的にbrand.jsonやguide.mdを含むブランドキットを出力し、他のクリエイタースキル(サムネイル、広告、商品写真)が自動的に配色やフォントを利用できるよう設定にも反映します。Claude Code、Cursor、CodexなどのAIエージェントプラットフォームで動作し、ルールとしてWCAG AA準拠のコントラスト比4.5:1以上を保証し、既存の有名ロゴとの類似チェックも行います。

対応~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/mehbylabs/creator-skills/tree/main/skills/creator-brandkit

Installed? Explore more コーディング&開発 skills: steipete/bluebubbles, steipete/eightctl, steipete/blucli · View all 6 →

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

Creator Brandkit

出力フォルダ brand/<slug>/:

brand.json          # 名前、ポジショニング、色、フォント、ロゴパス、トーン — 他のスキルが読み込む
palette.svg         # 16進数値のスウォッチ
logo/               # mark.svg、wordmark.svg、lockup.svg (+ PNGエクスポート)
mockups/            # 適用例
guide.md            # 1ページの使用ガイド

ステップ 1 — ブリーフ

名前、何をするものか、ターゲット層、3つのパーソナリティワード、似てはいけない競合、保持したい既存アセット。不足している項目は一度だけ質問します。

ステップ 2 — 方向性(構築前に承認を得る)

2つの方向性を提示:各方向に1行のコンセプト、5色のパレット(16進数、役割:プライマリ、セカンダリ、アクセント、ニュートラルダーク、ニュートラルライト)、フォントペアリング(Google Fonts名)、ロゴアイデア。パレットのコントラストとフォントルールについては references/brand-foundations.md を参照。

ステップ 3 — ロゴ

  1. 直接SVGを作成(常に可能で、編集可能、スケーラブル):幾何学的マーク、ワードマーク(ユーザーがフォントを提供した場合のみテキスト変換;それ以外はウェブセーフフォントスタックを使用しその旨を記載)、組み合わせロゴ。マークはシンプルに保つ:16ピクセルでも一色でも機能するように。
  2. インスピレーションとしての任意探索(画像プロバイダーを使用、参考のみ):creator.py image --prompt "flat vector logo exploration for <name>: <idea>, <palette>, white background, no mockup" --ratio 1:1。生成されたラスター画像は参考であり納品物ではない;選んだアイデアはSVGとして再作成する。
  3. PNGをエクスポート:ffmpeg -i logo/mark.svg -vf scale=1024:-1 logo/mark-1024.png(ffmpegがSVGに対応していない場合は rsvg-convert またはブラウザのスクリーンショットを使用)。

ステップ 4 — モックアップ

creator-image / creator.py image を使用し、ロゴPNGを --ref としてパレットを言葉で指定:プロフィール画像、ソーシャル投稿テンプレート、YouTubeバナー(2560×1440、セーフエリア1546×423)、名刺、トートバッグ/ティーシャツ、パッケージ — ユーザーが必要なもののみ。正確なテキストは media.py text で追加し、画像内生成は行わない。

ステップ 5 — キットを保存する

brand.json を書き込み、色/フォント/ロゴをcreator-skills設定の brand ブロックにコピーするオプションを提供し、サムネイル、広告、商品写真が自動的にそれらを使用するようにする。guide.md を書く:役割とコントラストノート付きパレット、タイプスケール、ロゴのクリアスペースと最小サイズ、Do/Don'tの例。

ルール

  • 簡単な独自性チェックを実行:よく知られたロゴに似たマークを避ける;商用利用前に商標検索を行うようユーザーに伝える。
  • テキストのコントラスト:本文テキストは背景に対して4.5:1以上(WCAG AA準拠)。

参考文献

  • references/brand-foundations.md — パレットの役割、コントラスト、フォントペアリング、ロゴルール
  • references/image-prompting.md、references/media-ops.md、references/providers.md

Individual skills in this repo

This repo contains 2 individual skills — each has its own dedicated page.

関連スキル