brand-kit

ブランドキット

ユーザーの製品を説明する 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":   "technical, direct, anti-jargon, CLI-aesthetic",
    "person":     "first-person plural (we / your)",
    "do":         ["concrete numbers", "name the tradeoff", "name the tool"],
    "dont":       ["leverage", "unlock", "revolutionary", "next-gen"]
  },
  "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              # see what's documented
mcp__cogny__search_context query="brand"           # palette, voice, tone, design tokens
mcp__cogny__search_context query="positioning"     # voice + register often live here
mcp__cogny__read_context_node node_id="…"

ツリーにブランド／パレット／ボイスのノードがあれば、その値をキットに取り込んでください。古い情報や矛盾があるように見える場合に限り、パス 1 または 3 と照合してください。

cogny MCP に接続されていない場合、またはツリーにブランド関連の情報がない場合は、パス 1 に進んでください。

パス 1 — Tailwind／CSS 変数を含むリポジトリ（最も信頼できる情報源）

使用条件：ユーザーがサイトのソースにアクセスできる場合。

次の順に確認します。

# Tailwind config — custom color namespaces
fd -t f 'tailwind\.config\.(ts|js|mjs|cjs)$' <repo>
# CSS custom properties (most modern stacks)
fd -t f '(globals|index|app|theme|variables)\.css$' <repo>
# Design tokens
fd -t f '(design-tokens|tokens|theme)\.json$' <repo>

Tailwind の設定ファイルが見つかったら、カスタムカラーの名前空間（通常はブランド名。例：cogny: {...}）を確認します。

// tailwind.config.ts (cogny example)
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 または hex）と 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
   # Or extract from <link rel="icon"> in the homepage HTML
   

   サイト上で最も大きい PNG アイコン（Apple タッチアイコン、マニフェスト内のアイコン）がブランドマークです。
5. タイポグラフィを検出します。インライン CSS で body、html、h1 の font-family 宣言を検索します。<head> に Google Fonts のリンクがあれば、URL にフォントファミリー名が含まれています。

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

情報が一部しか得られない場合（例：マニフェストから theme_color は取得できたものの、配色全体はわからない場合）は、パス 3 に進み、ロゴ／スクリーンショットから不足分を補ってください。

---

パス 3 — ロゴまたはスクリーンショットからのパレット抽出（必ず使えるフォールバック）

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

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

# Generate a small palette image (max 6 distinct colors) from any image.
ffmpeg -y -i <input.png> \
  -vf "palettegen=max_colors=6:reserve_transparent=0:stats_mode=single" \
  -frames:v 1 -update 1 /tmp/_palette.png

# Read those palette colors back as hex. The PPM header is
#   P6\n<W> <H>\n255\n  → 13 bytes for the standard 16x16 palette.
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   ← background
#5F4953   ← deep plum
#BB93B9   ← lavender (primary brand)
#CA8B9D   ← coral-pink
#D2858C   ← coral (accent)

マッピングルール — パレットは頻度順に並んでいますが、どの色をどの役割に割り当てるかはあなたが決めます。

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

元の画像を一度目視して確認してください。アルゴリズムによる役割の割り当てが正しいのは、約 70% です。

スクリーンショットからタイポグラフィを判定する場合：画像ベースのフォント検出は信頼性が高くありません。次のいずれかを行います。

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

任意：node-vibrant を使ったセマンティックパレット（npm install を 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. 背景の hex 値は？（ユーザーが最もよく目にするページの背景）
2. 前景の hex 値は？（本文テキストの色）
3. ブランドのプライマリカラーの hex 値は？（ボタンやリンクに使われる色）
4. アクセントカラーの hex 値は？（任意。2 つ目のブランドカラーがある場合）
5. フォントファミリーは？（「Inter のようなサンセリフ」「JetBrains Mono」など。可能な範囲で対応し、システムフォントへのフォールバックでも問題ありません）

色 3 つとフォント 1 つがあれば、公開できます。

---

パス 5 — トーンの抽出（色のパスにかかわらず、必ず実行）

ブランドキットの中でも、コピー＆ペースト用のツールでは見落とされがちなのがトーンです。動画でどのようなビートを書くか、広告コピー用スキルがどのような見出しを作るかが変わります。

トーンの情報源：ホームページのヒーローセクションと、より詳細なページ 1～2 ページ（概要、料金、ブログなど）。

手順：

1. ホームページのヒーローセクションのテキストを取得します（h1、h2、ヒーローの CTA の後に続く最初の段落）。
2. 詳細ページを 1 つ取得します（通常は /about または /pricing）。
3. コピーを読み、次の 3 つのフィールドを作成します。

"voice": {
  "register": "<one-line description>",
  "do":   ["pattern 1", "pattern 2", "pattern 3"],
  "dont": ["banned word 1", "banned word 2"]
}

例（各社のホームページから実際に導き出したものです）。

ブランド	register	do	dont
cogny	"技術的、率直、専門用語を避ける、CLI 的な美学"	具体的な数値、トレードオフを明示する、ツール名を挙げる	leverage、unlock、revolutionary、next-gen
Linear	"実務者目線、明確な見解、スピーディー"	二人称、簡潔、構築モードの表現	enterprise、synergy、robust
Mailchimp	"温かく、会話調、平易な英語"	一人称、親しみやすい短縮形、明確な CTA	utilize、paradigm、leverage

ページからトーンを推測できない場合（ホームページの情報が非常に少ない場合など）は、どのような印象にしたいかを一文でユーザーに尋ねてください。作り上げないでください。

---

手順（実際のフロー）

1. ユーザーがどのような入力をしたか検出します。

   • URL → パス 2 → 必要に応じてパス 3／5 に進む
   • リポジトリパス → パス 1 → パス 5 に進む
   • 画像パス → パス 3 ＋ トーンの抽出（パス 5）のため、サイト URL またはリポジトリを尋ねる
   • 何もない → パス 4 ＋ 抽出元にできるロゴがあるか尋ねる

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

   ◆ Brand kit (cogny)
   ✓ colors    bg=#1f1d1d  fg=#ede8e3  primary=#b09acd  accent=#c9badf
   ✓ type      JetBrains Mono / mono
   ◇ voice     pending — fetching /about for analysis…
   

3. ファイルを書き込む前に、結果をユーザーに見せます。色の役割（背景かプライマリかなど）の割り当てについて、ユーザーの承認を得てください。これらは特に影響の大きい判断です。

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

5. コンシューマースキル向けの1 行のインストールヒントを出力します。

   Saved → .agents/brand-kit.json
   Used by: /tiktok-launch-video, /reddit-launch-video, /linkedin-launch-video,
            /ad-copy-writer, /landing-page-review
   

よくある間違い

1. 単一の16進数カラーをブランドそのものとして扱う — ほとんどのブランドには、プライマリーカラーとアクセントカラーに加え、背景色と前景色の組み合わせがあります。最低でも3色は必要です。
2. ブランドの語調を反映せずに公開する — カラーがブランドを伝える割合は30％、語調が伝える割合は70％です。Path 5を省略しないでください。
3. shadcnのデフォルト設定をブランドとして使う — ユーザーのCSSファイルに文字どおりのshadcn --primary: 240 5.9% 10% がある場合、それはブランドではなくプレースホルダーです。ホームページのスクリーンショットと照合してください。
4. ロゴのグラデーション由来の色でキットを飽和させすぎる — グラデーションロゴからパレットを抽出すると、4～5色の中間色が出てきます。両端の色（プライマリーカラーとアクセントカラー）を選び、中間色は除外してください。
5. LinkedInブルー／Twitterブルー／TikTokピンクをキットに紛れ込ませる — これらはスクリーンショットに映り込むプラットフォーム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 — 語調の抽出が、このスキルのインタビューステップと重なります