SuperAPI AI 工具集
合作ENAI 行业资讯收藏
Skill 广场brand-dna

brand-dna

营销与增长

查看项目

更新于 10-16 02:07

技能介绍

Brand DNA — 品牌身份提取器

从网站提取品牌身份，生成结构化的 brand-profile.json，供其他技能复用以产出品牌一致的内容。

安装

git clone https://github.com/thatrebeccarae/claude-marketing.git && cp -r claude-marketing/skills/brand-dna ~/.claude/skills/

快速参考

命令与作用：

  • "Extract brand DNA from https://example.com"：完整提取，生成 brand-profile.json
  • "Quick brand profile for https://example.com"：仅提取首页（更快，置信度较低）

零依赖

该技能仅使用 WebFetch 工具——无 Python 脚本、无 Playwright、无外部 API。可在任何运行 Claude Code 的环境中使用。

提取流程

第 1 步：收集 URL

如果用户未提供 URL，则询问："What website URL should I analyze? (e.g., https://yoursite.com)"

第 2 步：抓取页面

使用 WebFetch 工具获取页面内容。对每个 URL 请求：所有可见文本内容、<style> 块的完整内容、内联 style= 属性、<meta> 标签（尤其是 og:image、description）、Google Fonts 的 @import URL、任何引用外部样式表的 <link> 标签。

抓取顺序：

  • 首页（<url>）
  • About 页面——依次尝试 <url>/about、/about-us、/our-story
  • 产品/服务页面——依次尝试 <url>/products、/product、/services

快速模式：如果用户要求快速提取，仅抓取首页——跳过第 2、3 个页面。

如果次级页面返回 404 或重定向到首页，则使用更少的页面继续，并注明置信度降低。

第 3 步：提取品牌元素

颜色

  • 主色：来自 .hero、.btn-primary、header 的 CSS background-color，或 og:image 的主导色，取最突出的品牌色
  • 辅助色：来自 CTA、强调色、边框的辅助配色
  • 背景/文本：body 的 background-color 与 color
  • 禁用色：根据品牌定位推断（例如可识别的竞品颜色）
  • 深色模式检测：如果 body 背景为 #333 或更深，则交换背景/文本值
  • CSS 目标：body、header、.hero、.btn、.cta、h1、h2 上的 background-color、color、border-color

字体排版

  • Google Fonts：从 @import url(https://fonts.googleapis.com/css2?family=...) 提取——从 URL 解析字体名称
  • CSS font-family：检查 h1、h2、body、.headline 声明
  • 回退：如果未检测到 Google Fonts，则将 heading_font 设为 null，body_font 设为 "system-ui"

声音语调（每个轴 1-10 分）

分析主视觉标题、副标题、About 页面介绍和 CTA 按钮文字。信号与轴对应的方向：

  • 频繁使用 "you/your"：formal_casual 向 casual +2
  • 技术术语、行业术语：expert_accessible 向 expert -2
  • 短促有力的句子（≤8 词）：bold_subtle 向 bold +2
  • 主视觉中使用数据、统计、百分比：rational_emotional 向 rational -2
  • "Transform"、"revolutionize"、"disrupt"：traditional_innovative 向 innovative +2
  • 客户评价为主：rational_emotional 向 emotional +2
  • "Trusted by X companies"、奖项：traditional_innovative 向 traditional -1
  • 幽默、文字游戏、随意措辞：playful_serious 向 playful +2
  • 正式语言、第三人称：playful_serious 向 serious -2

每个轴从 5（中性）起步，根据发现的信号调整。

描述词：选择 3-5 个形容词概括整体语调。它们应补充数值分数，而非重复分数。

图像

  • 风格：专业摄影、插画、扁平设计、3D 渲染或混合
  • 主体：主视觉与产品图中出现的内容（人物、产品、抽象、数据）
  • 构图：干净/极简、繁复/编辑风、暗色/戏剧化、明亮/轻盈
  • 禁用元素：根据行业推断（医疗 → 无未经说明的医疗声明图像；B2B → 无俗套库存照片）

美学

  • 氛围关键词：描述视觉氛围的 3 个形容词（如 "trustworthy"、"modern"、"premium"）
  • 质感：极简、有质感或混合
  • 留白：充裕、适中或密集

品牌价值观

从 About 页面、使命宣言或页脚提取。寻找重复出现的主题。选择 3-5 个核心价值观。

目标受众

从文案、定价信号和定位推断：

  • 年龄范围：根据视觉设计、语言复杂度和产品类型估计
  • 职业：产品或服务面向的人群
  • 痛点：品牌解决的问题（来自主视觉文案与功能描述）
  • 期望：受众希望达成的目标（来自利益导向的文案）

第 4 步：构建 brand-profile.json

严格按 REFERENCE.md 中的 schema 构建 JSON。任何无法有把握提取的字段使用 null——切勿猜测。

第 5 步：写入与确认

将 brand-profile.json 写入当前工作目录。

显示摘要：

Brand DNA extracted → brand-profile.json

Brand: [brand_name] Voice: [descriptor 1], [descriptor 2], [descriptor 3] Primary Color: [hex] Typography: [heading_font] / [body_font] Audience: [age_range], [profession]

该 profile 可被以下技能消费：

  • seo-content-writer（语调匹配）
  • email-composer（语气校准）
  • frontend-design（视觉识别）
  • pro-deck-builder（品牌颜色/字体）
  • cross-platform-audit（品牌一致性检查）

限制

  • 内容稀少的站点：正文少于 200 词会产生较低置信度的 profile。需在输出中注明。
  • SPA/React 站点：JavaScript 渲染的内容可能无法被 WebFetch 完整捕获。检测到时需注明。
  • 多品牌企业：每个 URL 生成一个 profile。需为每个品牌分别运行。
  • CSS-in-JS：现代 React/Next.js 站点可能没有可提取的 CSS。使用 og:image 分析作为回退。

如何使用此技能

可以这样提问：

  • "Extract the brand DNA from https://example.com"
  • "Build a brand profile for my client's website"
  • "Analyze the brand voice and colors of https://competitor.com"
  • "Quick brand profile — homepage only — for https://example.com"
  • "What's the brand identity of this website?"