brand-kit

品牌套件

构建一个描述用户产品的 brand-kit.json，让其他技能可以使用其中的颜色、字体、语气、推荐和禁用的措辞，以及可选的徽标。其他 Cogny 技能（/tiktok-launch-video、/reddit-launch-video、/linkedin-launch-video、/landing-page-review、/ad-copy-writer）在此文件存在时会读取它。

此技能基于一个现实情况构建：用户并非总能访问其网站的源代码。获取品牌套件有六种途径，按优先级排序。找到足够的信息后，即停止。

用法

/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（否则写入当前工作目录）

务必打印写入路径，以便用户移动文件。

Schema

{
  "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。五项缺一不可。

---

路径 0 — Cogny MCP 上下文树（成本最低，已连接时优先运行）

适用情况：.mcp.json 中配置了 cogny MCP 服务。用户可能已经在其上下文树中记录了品牌信息——语气、配色、风格等，此时再抓取网站信息就多余了。

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

将这些值映射到套件 Schema。如果同时找到 --primary（HSL 或十六进制值）和 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 — 从 Logo 或截图中提取调色板（始终可用的备用方案）

适用场景：用户上传了 Logo 图片、主页截图或品牌素材 PNG/JPG。

用户通常都有一些图片素材——桌面上的 Logo、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 Logo 的输出（深暖色背景上的渐变 C）：

#1D1B1B   ← background
#5F4953   ← deep plum
#BB93B9   ← lavender (primary brand)
#CA8B9D   ← coral-pink
#D2858C   ← coral (accent)

映射规则 — 调色板按出现频率排序，但由你来指定其用途：

• 最暗的颜色 → colors.background（如果它覆盖了 >40% 的像素）
• 最亮的非白色 → colors.foreground（如果没有米白色，则默认使用 #fafafa）
• 饱和度最高的颜色 → colors.primary
• 饱和度第二高的颜色 → colors.accent

目测检查一次原图并确认——算法对用途的判断正确率约为 70%。

从截图判断字体：基于图像的字体检测并不可靠。可以：

• 询问用户（“这张图片里的标题字体是……？”），或者
• 使用 WhatTheFont 或 Fontspring Matcherator 等免费工具——将 URL 展示给用户，不要尝试通过编程实现。

可选：通过 node-vibrant 提取语义调色板（安装一次 npm 软件包，即可获得 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. 背景十六进制颜色？（用户最常看到的页面背景）
2. 前景十六进制颜色？（正文文字颜色）
3. 品牌主色十六进制颜色？（按钮或链接使用的颜色）
4. 点缀色十六进制颜色？（可选——如果还有第二种品牌颜色）
5. 字体系列？（例如“类似 Inter 的无衬线字体”、“JetBrains Mono”等——尽力匹配即可，系统回退字体也可以）

三种颜色加一种字体就足以交付。

---

路径 5 — 提取品牌语调（无论颜色路径如何，都要执行）

品牌套件中最容易被复制粘贴工具忽略的部分就是语调。它会影响视频文案的节奏，也会影响广告文案技能生成的标题。

语调来源：主页首屏内容，以及 1–2 个更深层的页面（关于、定价、博客）。

步骤：

1. 获取主页首屏文字（h1、h2，以及首屏 CTA 后的第一段文字）。
2. 获取一个深层页面（通常是 /about 或 /pricing）。
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 + 询问网站 URL 或仓库路径以提取语调（路径 5）
   • 未提供 → 路径 4 + 询问用户是否有可用于提取的 Logo

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. 输出一行安装提示，供使用者技能参考：

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

常见错误

1. 把单一十六进制颜色当作品牌——大多数品牌都有一个主色、一个强调色，以及一组背景色与前景色。至少需要三种颜色。
2. 发布时没有品牌语气——颜色承载品牌特色的 30%，品牌语气承载 70%。不要跳过路径 5。
3. 把 shadcn 默认样式当作品牌——如果用户的 CSS 文件中有字面值 --primary: 240 5.9% 10%，那只是占位符，并非品牌色。请与首页截图交叉核对。
4. 因 Logo 渐变效果导致套件颜色过度饱和——从渐变 Logo 中提取调色板会得到 4–5 种过渡色。选择两端颜色（主色和强调色），舍弃中间色。
5. 让 LinkedIn 蓝、Twitter 蓝或 TikTok 粉混入套件——这些是平台 UI 颜色，会出现在截图中，但并非品牌色。
6. 盲目信任 theme-color——网站有时会将 theme-color 设为与移动版 Safari 地址栏匹配的颜色，这只是装饰，可能与实际品牌主色不同。

相关内容

• /tiktok-launch-video、/reddit-launch-video、/linkedin-launch-video——使用此套件
• /ad-copy-writer——使用品牌语气规则撰写符合平台风格的文案
• /landing-page-review——检查落地页与品牌套件之间的一致性
• /non-commodity-content——品牌语气提取与此技能的访谈步骤有所重叠