品牌工具包

构建一个 brand-kit.json 文件，以其他技能可以消费的方式描述你的产品——包含颜色、字体、品牌语气、应做/不应做的语言以及可选的 Logo。其他 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 — 从 Logo 或截图提取调色板 /brand-kit ~/Desktop/homepage.png logo.png — 结合网站截图和 Logo /brand-kit — 通过对话访谈用户

输出

生成的 brand-kit.json 写入到（按优先级顺序，选择对用户设置最有意义的路径）：

.agents/brand-kit.json（如果 .agents/ 目录存在）
.claude/brand-kit.json（如果 .claude/ 目录存在）
./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。不要在没有这五个字段的情况下提交。

途径 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 或十六进制）和一个 Tailwind 命名空间，优先使用 Tailwind 命名空间——它通常代表明确的品牌意图，而非 shadcn 的默认值。

在相同文件中检测字体：

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

途径 2 — 在线网站 URL（无需源代码访问权限即可工作）

何时使用：用户只有一个公共 URL。

步骤：

获取主页：使用 WebFetch <url> 提取所有内联 <style> 块以及 head 中的样式表链接。
获取主样式表：通常是 head 中最大的 CSS 链接。curl -sL <css-url> | head -c 200000 就足够了——查找 CSS 自定义属性（--primary、--background 等）和 @font-face 规则。
查找 Manifest 文件：在 /site.webmanifest、/manifest.json 或 /manifest.webmanifest 路径下查找。Manifest 文件包含 theme_color、background_color 和图标列表——对于品牌工具包来说是金矿。

查找 Favicon 和高分辨率 Logo：

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 Touch 图标、Manifest 图标）就是品牌标志。

检测排版：在内联 CSS 中搜索 body、html 或 h1 上的 font-family 声明。如果在 <head> 中看到 Google Fonts 链接，字体族名称就在 URL 中。

如果网站提供的是静态前端（Next.js 等），打包后的 CSS 通常包含与开发源代码相同的自定义属性——所以即使没有代码仓库访问权限，你仍可能恢复完整的品牌调色板。

如果你只获得了部分信息（例如，从 Manifest 中得到了 theme_color 但没有完整的调色板），则继续执行途径 3，从 Logo/截图中填补空白。

途径 3 — Logo 或截图调色板提取（总是有效的后备方案）

何时使用：用户上传了一个 Logo 图片、主页截图或品牌资产 PNG/JPG。

用户通常有一些图片——桌面上的 Logo、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

# 将这些调色板颜色读取为十六进制。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 Logo 的输出（渐变 C 位于深色暖色背景上）：

#1D1B1B   ← 背景
#5F4953   ← 深梅色
#BB93B9   ← 薰衣草色（主品牌色）
#CA8B9D   ← 珊瑚粉
#D2858C   ← 珊瑚色（强调色）

映射规则——调色板按频率排序，但角色分配由你决定：

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

大致观察一下原始图片并确认——算法角色分配大约有 70% 的准确率。

关于从截图获取排版信息：基于图片的字体检测不可靠。要么：

询问用户（“这个图片上的标题字体是……？”），或者
使用免费工具如 WhatTheFont 或 Fontspring Matcherator——向用户展示 URL，不要尝试以编程方式完成。

可选：通过 node-vibrant 进行语义调色板分析（一次 npm install，提供 vibrant/muted/dark-vibrant/light-vibrant 类别——对于主色/强调色角色映射更有用）：

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 — 颜色选择器 / 手动输入（始终可用）

何时使用：其他方法都不奏效，或者用户想要明确覆盖工具包。

按以下顺序提问，并接受部分答案：

背景色十六进制值？（用户看到最多的页面背景色）
前景色十六进制值？（正文文本颜色）
主品牌色十六进制值？（按钮或链接使用的颜色）
强调色十六进制值？（可选——如果有第二种品牌颜色）
字体族？（“像 Inter 这样的无衬线体”、“JetBrains Mono”等——尽力而为，系统后备字体也可以）

三种颜色和一种字体就足以发布。

途径 5 — 品牌语气提取（始终执行，无论颜色路径如何）

品牌语气是复制粘贴工具常常忽略的部分。它会改变视频要编写的节拍或广告文案技能要生成的大标题。

视频来源：主页英雄区文案 + 1-2 个更深层次的页面（关于我们、定价、博客）。

步骤：

获取主页英雄区文本（h1、h2、英雄区 CTA 后的第一段）。
获取一个深层页面（通常是 /about 或 /pricing）。
阅读文案并生成三个字段：

"voice": {
  "register": "<一行描述>",
  "do":   ["模式 1", "模式 2", "模式 3"],
  "dont": ["禁用词 1", "禁用词 2"]
}

示例（这些是真实的，来自每个公司的主页）：

品牌	语域	应做	不应做
cogny	"technical, direct, anti-jargon, CLI-aesthetic"	concrete numbers, name the tradeoff, name the tool	leverage, unlock, revolutionary, next-gen
Linear	"operator, opinionated, fast"	second-person, terse, build-mode language	enterprise, synergy, robust
Mailchimp	"warm, conversational, plain-English"	first-person, friendly contractions, clear CTAs	utilize, paradigm, leverage

如果你无法从页面推断出品牌语气（例如，主页内容非常少），则请用户用一句话描述他们想要听起来的样子。不要凭空编造。

操作步骤（实际流程）

检测用户给你的输入：
- URL → 途径 2 → 根据需要降级到 3 / 5
- 代码仓库路径 → 途径 1 → 降级到 5
- 图片路径 → 途径 3 + 询问网站 URL 或代码仓库以获取品牌语气（途径 5）
- 无输入 → 途径 4 + 询问他们是否有 Logo 可供提取

增量地构建工具包。每一步后打印部分状态，以便用户干预：

◆ 品牌工具包 (cogny)
✓ 颜色    bg=#1f1d1d  fg=#ede8e3  primary=#b09acd  accent=#c9badf
✓ 字体      JetBrains Mono / mono
◇ 品牌语气     待定 — 正在获取 /about 进行分析…

在写入文件之前，向用户展示结果。他们应该批准颜色角色分配（背景 vs 主色等）——这些是高杠杆的关键决策。
将 brand-kit.json 写入到最合适的位置（参见“输出”部分）。如果工具包已存在，则进行差异比较并在覆盖前询问。

为消费技能打印一行安装提示：

已保存 → .agents/brand-kit.json
使用者：/tiktok-launch-video, /reddit-launch-video, /linkedin-launch-video,
         /ad-copy-writer, /landing-page-review

常见错误

将单个十六进制颜色视为品牌——大多数品牌都有主色 + 强调色 + 背景-前景对。至少三种颜色。
在没有品牌语气的情况下发布——颜色承载 30% 的品牌；品牌语气承载 70%。不要跳过途径 5。
将 shadcn 默认值用作品牌——如果用户的 CSS 文件中有字面意义的 shadcn --primary: 240 5.9% 10%，那是一个占位符，不是品牌。用主页截图交叉验证。
用 Logo 渐变伪影过度饱和工具包——从渐变 Logo 提取调色板会返回 4-5 种过渡颜色。选择端点（主色 + 强调色），舍弃中间色。
让 LinkedIn 蓝 / Twitter 蓝 / TikTok 粉渗入工具包——这些是渗入截图的平台 UI 颜色，不是品牌颜色。
盲目信任 theme-color——网站有时会将 theme-color 设置为与移动 Safari 的地址栏颜色匹配，这纯粹是装饰性的，可能与实际品牌主色不符。

cognyai/claude-code-marketing-skills

claude-code-marketing-skills 是什么？

在你喜欢的 AI 中提问

文档

品牌工具包

用法

输出

模式

途径 0 — Cogny MCP 上下文树（成本最低，如果连接则优先运行）

途径 1 — 包含 Tailwind / CSS 变量的代码仓库（最佳信号）

途径 2 — 在线网站 URL（无需源代码访问权限即可工作）

途径 3 — Logo 或截图调色板提取（总是有效的后备方案）

途径 4 — 颜色选择器 / 手动输入（始终可用）

途径 5 — 品牌语气提取（始终执行，无论颜色路径如何）

操作步骤（实际流程）

常见错误

相关

相关技能

steipete/video-frames

steipete/summarize

openclaw/openclaw

obra/superpowers

affaan-m/ECC

affaan-m/everything-claude-code