brand-dna

品牌 DNA — 品牌识别提取器

从网站中提取品牌识别信息，并生成结构化的 brand-profile.json，供其他技能生成符合品牌风格的内容。

安装

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

快速参考

命令	功能
"从 https://example.com 提取品牌 DNA"	完整提取 → brand-profile.json
"为 https://example.com 快速生成品牌档案"	仅提取首页（速度更快，置信度更低）

零依赖

此技能仅使用 WebFetch 工具，不需要 Python 脚本、Playwright 或外部 API。只要能运行 Claude Code，就能使用此技能。

提取流程

步骤 1：收集 URL

如果用户尚未提供 URL，请询问：

“要分析哪个网站 URL？（例如，https://yoursite.com）”

步骤 2：抓取页面

使用 WebFetch 工具获取页面内容。对于每个 URL，请求以下内容：

• 所有可见文本内容
• <style> 块的完整内容
• 内联 style= 属性
• <meta> 标签（尤其是 og:image 和 description）
• Google Fonts @import URL
• 引用外部样式表的所有 <link> 标签

抓取顺序：

1. 首页（<url>）
2. 关于页面 — 依次尝试 <url>/about、/about-us 和 /our-story
3. 产品/服务页面 — 依次尝试 <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 字体系列： 检查 h1、h2、body、.headline 的声明
• 回退： 如果未检测到 Google Fonts，则将 heading_font 设为 null，将 body_font 设为 "system-ui"

语气（每个维度采用 1–10 分制）

分析主视觉标题、副标题、关于页面的介绍和 CTA 按钮文字：

信号	维度	方向
经常使用“你/你的”	formal_casual	+2，趋向随意
使用技术术语和行业用语	expert_accessible	-2，趋向专业
使用简短有力的句子（≤8 个单词）	bold_subtle	+2，趋向大胆
主视觉中包含数据、统计数字或百分比	rational_emotional	-2，趋向理性
使用“转变”“革新”“颠覆”等词	traditional_innovative	+2，趋向创新
以客户评价开篇	rational_emotional	+2，趋向感性
使用“深受 X 家公司信赖”、奖项等表述	traditional_innovative	-1，趋向传统
使用幽默、双关或随意措辞	playful_serious	+2，趋向活泼
使用正式语言或第三人称	playful_serious	-2，趋向严肃

每个维度从 5 分（中性）开始，并根据发现的信号调整。

描述词： 选择 3–5 个形容词来概括整体语气。这些词应补充数值评分，而非重复评分所表达的内容。

图像

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

审美

• 情绪关键词： 描述视觉氛围的 3 个形容词（例如“值得信赖”“现代”“高端”）
• 质感： 极简、有纹理或混合
• 留白： 宽松、适中或密集

品牌价值观

从关于页面、使命宣言或页脚中提取。寻找反复出现的主题，并选择 3–5 个核心价值观。

目标受众

根据文案、定价信号和品牌定位进行推断：

• 年龄范围： 根据视觉设计、语言复杂度和产品类型进行估算
• 职业： 产品／服务面向哪些人
• 痛点： 品牌解决了哪些问题（从主视觉文案和功能描述中提取）
• 愿景： 受众希望实现什么目标（从以收益为导向的文案中提取）

第 4 步：构建 brand-profile.json

严格按照 REFERENCE.md 中的架构构建 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]

This profile can be consumed by:
  - seo-content-writer (voice matching)
  - email-composer (tone calibration)
  - frontend-design (visual identity)
  - pro-deck-builder (brand colors/fonts)
  - cross-platform-audit (brand consistency checks)

限制

• 内容稀少的网站： 正文少于 200 个单词时，生成的品牌档案置信度较低。请在输出中注明。
• SPA/React 网站： WebFetch 可能无法完整获取 JavaScript 渲染的内容。如果检测到此情况，请注明。
• 多品牌企业： 每个 URL 创建一份档案。请针对每个品牌分别运行。
• CSS-in-JS： 现代 React/Next.js 网站可能没有可提取的 CSS。可将 og:image 分析作为备用方案。

如何使用此技能

可以提问：

• “从 https://example.com 提取品牌 DNA”
• “为我客户的网站创建品牌档案”
• “分析 https://competitor.com 的品牌语气和颜色”
• “快速创建品牌档案——仅分析主页——https://example.com”
• “这个网站的品牌形象是什么？”