Communitygithub.com

cognyai/claude-code-marketing-skills

ユーザーのプロダクト向けに、色、タイポグラフィ、ボイスを定義したポータブルな brand-kit.json を構築します。このファイルは他のスキル（動画、広告クリエイティブ、ランディングページ）から利用できます。ソースコードがある場合、公開URLのみの場合、ロゴ画像のみの場合など、複数の発見方法に対応しています。

claude-code-marketing-skills とは？

このスキルは、ユーザーのプロダクトのブランド情報（色、タイポグラフィ、ボイス、使用/禁止表現、任意でロゴ）を `brand-kit.json` として生成します。生成されたファイルは、Cogny の他のスキル（`/tiktok-launch-video` など）から消費されることを前提として設計されています。最大の特徴は、ユーザーがサイトのソースコードにアクセスできない状況を考慮した6つの発見パス（Path）を用意している点です。優先順位に従って、ローカルリポジトリ、公開URL、ロゴ/スクリーンショット、手動入力、ボイス抽出の各パスを組み合わせ、段階的にキットを構築します。これにより、開発環境からマーケティング担当者まで、多様なユーザーが一貫したブランドアセットを共有できるようになります。スキルは Claude Code, Cursor, Codex などのAIエージェント上で動作し、ユーザーが指定した入力に基づいて自動的にブランド情報を収集・出力します。

対応✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/cognyai/claude-code-marketing-skills/tree/HEAD/skills/brand-kit
オリジナルを見る→すべてのスキルを見る

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

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

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

ドキュメント

ブランドキット

ユーザーのプロダクトを記述する brand-kit.json を、他のスキルが消費できる形式で構築します。色、タイポグラフィ、ボイス、使用/禁止表現、オプションでロゴを含みます。他の Cogny スキル（/tiktok-launch-video、/reddit-launch-video、/linkedin-launch-video、/landing-page-review、/ad-copy-writer）は、このファイルが存在する場合に読み取ります。

このスキルは、ユーザーがサイトのソースコードに常にアクセスできるとは限らないという現実に基づいて構築されています。キットへのパスは6つあり、優先順位順に並んでいます。十分な情報が得られた段階で停止します。

使用方法

/brand-kit https://example.com — 公開サイトから抽出 /brand-kit ~/git/our-site — ローカルリポジトリ（Tailwind / CSS 変数）から抽出 /brand-kit ~/Desktop/logo.png — ロゴまたはスクリーンショットからパレット抽出 /brand-kit ~/Desktop/homepage.png logo.png — サイトスクリーンショットとロゴを組み合わせ /brand-kit — ユーザーにインタビュー

出力

brand-kit.json は、ユーザーのセットアップに適したパス（優先順位順）に書き込まれます。

  1. .agents/brand-kit.json（.agents/ が存在する場合）
  2. .claude/brand-kit.json（.claude/ が存在する場合）
  3. ./brand-kit.json（上記以外 — カレントワーキングディレクトリ）

書き込んだパスは常に表示し、ユーザーが移動できるようにします。

スキーマ

{
  "name": "cogny",
  "site": "https://cogny.com",
  "logo": {
    "path": "./brand/logo-square.png",
    "use_in_video": false
  },
  "colors": {
    "background": "#1f1d1d",
    "foreground": "#ede8e3",
    "primary":    "#b09acd",
    "accent":     "#c9badf",
    "muted":      "#9a9494",
    "card":       "#282525",
    "fuchsia":    "#d4848a",
    "success":    "#7ec8a4",
    "amber":      "#d4a857"
  },
  "type": {
    "family":   "'JetBrains Mono', 'Fira Code', ui-monospace, monospace",
    "weight_display": 700,
    "weight_body":    500,
    "letter_spacing_display": "-0.02em"
  },
  "voice": {
    "register":   "技術的、直接的、アンチ・ジャーゴン、CLI美学",
    "person":     "一人称複数（私たち / あなたの）",
    "do":         ["具体的な数字", "トレードオフを明示する", "ツール名を挙げる"],
    "dont":       ["レバレッジ", "アンロック", "革命的", "次世代"]
  },
  "source": "repo: ~/git/cogny/tailwind.config.ts + src/index.css",
  "captured_at": "2026-04-25"
}

最小限のキット: colors.background、colors.foreground、colors.primary、type.family、voice.register。この5つすべてが揃っていない状態では出力しないでください。

パス 0 — Cogny MCP コンテキストツリー（最もコストが低い、接続されていれば最初に実行）

使用タイミング: cogny MCP サーバーが .mcp.json にある場合。ユーザーがブランド（ボイス、パレット、トーン）をコンテキストツリーにすでに文書化している可能性があり、その場合のスクレイピングは冗長です。

mcp__cogny__get_context_tree_overview              # 文書化されているものを確認
mcp__cogny__search_context query="brand"           # パレット、ボイス、トーン、デザイントークン
mcp__cogny__search_context query="positioning"     # ボイス + レジスターはよくここにあります
mcp__cogny__read_context_node node_id="…"

ツリーがブランド/パレット/ボイスのノードを返した場合、それらの値からキットを作成します。何かが古いか矛盾しているように見える場合にのみ、パス1または3とクロスチェックします。

cogny MCP が接続されていない場合、またはツリーにブランド関連のものが何もない場合は、パス1にフォールスルーします。

パス 1 — Tailwind / CSS 変数があるリポジトリ（最良のシグナル）

使用タイミング: ユーザーがサイトのソースコードにアクセスできる場合。

以下のファイルを順に探します。

# Tailwind 設定 — カスタムカラーネームスペース
fd -t f 'tailwind\.config\.(ts|js|mjs|cjs)$' <repo>
# CSS カスタムプロパティ（最新のスタックのほとんど）
fd -t f '(globals|index|app|theme|variables)\.css$' <repo>
# デザイントークン
fd -t f '(design-tokens|tokens|theme)\.json$' <repo>

Tailwind 設定を見つけたら、カスタムカラーネームスペース（通常はブランド名、例: cogny: {...}）を探します。

// tailwind.config.ts (cogny の例)
colors: {
  cogny: { dark: "#1f1d1d", purple: "#b09acd", secondary: "#7E69AB", light: "#c9badf" }
}

CSS ファイルを見つけたら、標準的なカスタムプロパティ名を grep します。

grep -E '^\s*--(background|foreground|primary|accent|muted|card)' <css-file>

値をキットスキーマにマッピングします。--primary（HSL または16進数）と Tailwind ネームスペースの両方を見つけた場合、Tailwind ネームスペースを優先します。通常、それは shadcn のデフォルトではなく、明示的なブランドの意図だからです。

同じファイルでのタイプ検出:

grep -E "(font-family|fontFamily|--font-)" <repo>/src/**/*.{css,ts,tsx,js} 2>/dev/null | head

パス 2 — 公開サイトの URL（ソースコードがなくても動作）

使用タイミング: ユーザーが公開 URL のみを持っている場合。

手順:

  1. ホームページを取得 WebFetch <url> でインラインの <style> ブロックと head のスタイルシートリンクを抽出します。
  2. メインのスタイルシートを取得（head 内で最も大きな CSS リンク、通常）。curl -sL <css-url> | head -c 200000 で十分です。CSS カスタムプロパティ（--primary、--background など）と @font-face ルールを探します。
  3. マニフェストを探す /site.webmanifest、/manifest.json、または /manifest.webmanifest で。マニフェストには theme_color、background_color、アイコンリストが含まれています。ブランドキットには貴重な情報です。
  4. ファビコンと高解像度ロゴを探す: 
    curl -sL "<site>/favicon.ico" -o /tmp/favicon.ico
curl -sL "<site>/apple-touch-icon.png" -o /tmp/touch.png
# または、ホームページ HTML の <link rel="icon"> から抽出
    サイト上で最も大きな PNG アイコン（Apple タッチアイコン、マニフェストアイコン）がブランドマークです。
  5. タイポグラフィを検出: インライン CSS から body、html、h1 の font-family 宣言を検索します。<head> に Google Fonts のリンクがあれば、フォントファミリー名は URL に含まれています。

サイトが静的フロントエンド（Next.js など）を配信している場合、バンドルされた CSS には開発時のソースと同じカスタムプロパティが含まれていることが多いため、リポジトリがなくても完全なブランドパレットを復元できる可能性があります。

部分的な情報しか得られなかった場合（例: マニフェストから theme_color は得られたが完全なパレットは得られなかった）、パス3に進み、ロゴ/スクリーンショットからのギャップを埋めます。

パス 3 — ロゴまたはスクリーンショットからのパレット抽出（常に機能するフォールバック）

使用タイミング: ユーザーがロゴ画像、ホームページのスクリーンショット、またはブランドアセットの PNG/JPG をアップロードする場合。

ユーザーは通常、デスクトップ上のロゴ、Slack のアバター、ウェブサイトのスクリーンショットなど、何らかの画像を持っています。FFmpeg を使用してパレットを直接抽出します。

# 任意の画像から小さなパレット画像（最大6色）を生成します。
ffmpeg -y -i <input.png> \
  -vf "palettegen=max_colors=6:reserve_transparent=0:stats_mode=single" \
  -frames:v 1 -update 1 /tmp/_palette.png

# それらのパレットカラーを16進数として読み戻します。PPM ヘッダーは
#   P6\n<W> <H>\n255\n  → 標準の16x16パレットでは13バイトです。
ffmpeg -y -i /tmp/_palette.png -c:v ppm -f image2 -update 1 - 2>/dev/null \
  | tail -c +14 \
  | xxd -c 3 -p \
  | awk '!seen[$0]++' \
  | head -8 \
  | awk '{print "#" toupper($1)}'

cogny ロゴ（暗い暖色背景上のグラデーション C）の出力:

#1D1B1B   ← 背景
#5F4953   ← 深いプラム
#BB93B9   ← ラベンダー（プライマリブランド）
#CA8B9D   ← コーラルピンク
#D2858C   ← コーラル（アクセント）

マッピングルール — パレットは頻度順にソートされていますが、ロールの割り当てはあなたが行う必要があります。

  • 最も暗い色 → colors.background（ピクセルの40%以上を占める場合）
  • 白以外で最も明るい色 → colors.foreground（オフホワイトがない場合、デフォルト #fafafa）
  • 最も彩度が高い色 → colors.primary
  • 2番目に彩度が高い色 → colors.accent

元の画像を一度確認してください。アルゴリズムによるロール割り当ては、約70%の確率で正しく機能します。

スクリーンショットからのタイポグラフィ: 画像ベースのフォント検出は信頼性が低いです。代わりに以下のいずれかを行います:

  • ユーザーに尋ねる（「この画像の見出しフォントは…？」）、または
  • WhatTheFont や Fontspring Matcherator のような無料ツールを使用する — URL をユーザーに表示し、プログラムで実行しようとしないでください。

オプション: node-vibrant によるセマンティックパレット（npm インストール1回で、vibrant/muted/dark-vibrant/light-vibrant カテゴリを提供 — primary/accent ロールマッピングにより便利）:

npm install -g node-vibrant
node -e "
  const Vibrant = require('node-vibrant');
  Vibrant.from(process.argv[1]).getPalette().then(p => {
    const out = {};
    for (const k of ['Vibrant','Muted','DarkVibrant','LightVibrant','DarkMuted','LightMuted']) {
      if (p[k]) out[k] = p[k].hex;
    }
    console.log(JSON.stringify(out, null, 2));
  });
" <input.png>

利用可能な方を使用してください。FFmpeg はすでにビデオスキルに同梱されているため、デフォルトとなります。

パス 4 — カラーピッカー / 手動入力（常に利用可能）

使用タイミング: 他の方法がすべて機能しなかった場合、またはユーザーが明示的にキットを上書きしたい場合。

以下の順序で質問し、部分的な回答も受け付けます。

  1. 背景色の16進数？（ユーザーが最も目にするページの背景）
  2. 前景色の16進数？（本文テキストの色）
  3. プライマリブランドの16進数？（ボタンやリンクが使用する色）
  4. アクセントの16進数？（オプション — 2番目のブランドカラーがある場合）
  5. フォントファミリー？（「Inter のようなサンセリフ」、「JetBrains Mono」など — ベストエフォート、システムフォールバックで問題ありません）

3色とフォントが揃えば出力可能です。

パス 5 — ボイス抽出（カラーパスに関係なく常に実行）

ボイスは、コピー＆ペーストツールが見落としがちなブランドキットの部分です。ボイスによって、ビデオが書くビートや、広告コピースキルが生成する見出しが変わります。

ボイスのソース: ホームページのヒーロー + 1～2の深いページ（アバウト、プライシング、ブログ）。

手順:

  1. ホームページのヒーローテキスト（h1、h2、ヒーローCTAの後の最初の段落）を取得します。
  2. 深いページ1つ（通常は /about または /pricing）を取得します。
  3. コピーを読み、3つのフィールドを生成します。
"voice": {
  "register": "<1行の説明>",
  "do":   ["パターン 1", "パターン 2", "パターン 3"],
  "dont": ["禁止ワード 1", "禁止ワード 2"]
}

例（実際の各企業のホームページから導出されたものです）:

ブランドレジスターdodont
cogny"技術的、直接的、アンチ・ジャーゴン、CLI美学"具体的な数字、トレードオフを明示する、ツール名を挙げるレバレッジ、アンロック、革命的、次世代
Linear"オペレーター的、意見を持つ、速い"二人称、簡潔、ビルドモード言語エンタープライズ、シナジー、ロバスト
Mailchimp"温かい、会話的、平易な英語"一人称、友好的な短縮形、明確なCTA活用する、パラダイム、レバレッジ

ページからボイスを推測できない場合（例: 非常に薄いホームページ）、ユーザーにどのように聞こえたいか一文で尋ねてください。でっち上げないでください。

手順（実際のフロー）

  1. ユーザーから与えられた入力を検出:

    • URL → パス 2 → 必要に応じて 3 / 5 にフォールスルー
    • リポジトリパス → パス 1 → 5 にフォールスルー
    • 画像パス → パス 3 + ボイス用にサイトURLまたはリポジトリを尋ねる（パス 5）
    • 何もなし → パス 4 + 抽出するロゴを持っているか尋ねる

  2. キットを段階的に構築。各ステップの後に部分的な状態を表示し、ユーザーが介入できるようにします。

    ◆ ブランドキット (cogny)
✓ 色    bg=#1f1d1d  fg=#ede8e3  primary=#b09acd  accent=#c9badf
✓ タイプ      JetBrains Mono / mono
◇ ボイス     保留中 — /about を取得して分析中…

  3. ファイルに書き込む前に、結果をユーザーに表示。色のロール割り当て（背景 vs プライマリなど）を承認してもらいます。これらは影響の大きい判断です。

  4. brand-kit.json を最も適切な場所に書き込み（出力セクションを参照）。すでにキットが存在する場合は差分を表示し、上書き前に確認します。

  5. コンシューマースキル向けの1行インストールヒントを表示:

    保存先 → .agents/brand-kit.json
使用スキル: /tiktok-launch-video, /reddit-launch-video, /linkedin-launch-video,
         /ad-copy-writer, /landing-page-review

よくある間違い

  1. 単一の16進カラーをブランドとして扱う — ほとんどのブランドには、プライマリ + アクセント + 背景-前景のペアがあります。最低3色必要です。
  2. ボイスなしで出力する — 色がブランドを伝えるのは30％、ボイスが70％です。パス5をスキップしないでください。
  3. shadcn のデフォルトをブランドとして使用する — ユーザーのCSSファイルにリテラルの shadcn --primary: 240 5.9% 10% がある場合、それはプレースホルダーでありブランドではありません。ホームページのスクリーンショットとクロスチェックしてください。
  4. ロゴのグラデーションアーティファクトでキットを飽和させすぎる — グラデーションロゴからのパレット抽出では、4～5色の中間色が返されます。端点（プライマリ + アクセント）を選択し、中間の色は削除します。
  5. LinkedIn-blue / Twitter-blue / TikTok-pink をキットに紛れ込ませる — これらはプラットフォームUIの色で、スクリーンショットに混入するものであり、ブランドカラーではありません。
  6. theme-color を盲目的に信頼する — サイトがモバイルSafariのアドレスバーに合わせて theme-color を装飾的に設定することがあり、実際のブランドプライマリと一致しない場合があります。

関連

  • /tiktok-launch-video、/reddit-launch-video、/linkedin-launch-video — キットを消費
  • /ad-copy-writer — ボイスルールを使用してプラットフォームに適したコピーを作成
  • /landing-page-review — ランディングページとブランドキットの一貫性をチェック
  • /non-commodity-content — ボイス抽出はこのスキルのインタビューステップと重複

関連スキル

steipete/video-frames

Extract frames or short clips from videos using ffmpeg.

community

steipete/summarize

Summarize or transcribe URLs, YouTube/videos, podcasts, articles, transcripts, PDFs, and local files.

community

openclaw/openclaw

Use when testing, fixing, or extending the OpenClaw Control UI GUI with Vitest + Playwright end-to-end checks, mocked Gateway WebSocket flows, mocked dashboard runs, screenshots/videos, or agent-verifiable browser proof.

community

obra/superpowers

Obra superpowers agent skills.

community

affaan-m/ECC

See, Understand, Act on video and audio. See- ingest from local files, URLs, RTSP/live feeds, or live record desktop; return realtime context and playable stream links. Understand- extract frames, build visual/semantic/temporal indexes, and search moments with timestamps and auto-clips. Act- transcode and normalize (codec, fps, resolution, aspect ratio), perform timeline edits (subtitles, text/image overlays, branding, audio overlays, dubbing, translation), generate media assets (image, audio...

community

affaan-m/everything-claude-code

End-to-end marketing campaign planning and execution. Covers audience research, positioning, campaign angle definition, landing page copy, email sequences, social posts, ad copy, short-form video scripts, and content calendars. Use as the orchestration layer for multi-channel product launches. Use when planning or executing a multi-channel product launch, or producing landing page, email, social, or ad copy.

community