ads-dna

Ads DNA：品牌 DNA 提取器

从网站提取品牌标识，并保存为 brand-profile.json，供 /ads create、/ads generate 和 /ads photoshoot 使用。

快速参考

命令	功能
/ads dna <url>	完整品牌提取 → brand-profile.json
/ads dna https://acme.com --quick	快速提取（仅主页）

流程

步骤 1：收集 URL

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

“要分析哪个网站的 URL 来提取品牌 DNA？（例如：https://yoursite.com）”

步骤 2：获取页面

使用 WebFetch 工具检索每个页面。对于每个 URL，使用以下获取提示词：

“返回此页面上所有可见文本内容、所有 <style> 块的完整内容、内联 style= 属性、<meta> 标签、Google Fonts @import URL，以及此页面上找到的任何 og:image 值。”

按以下顺序获取：

1. 主页（<url>）
2. 关于页面：依次尝试 <url>/about、<url>/about-us 和 <url>/our-story
3. 产品／服务页面：依次尝试 <url>/product、<url>/products 和 <url>/services

如果提供了 --quick 标志：仅获取主页；跳过步骤 2 和 3。

如果次要页面返回 404 或重定向错误，则继续处理较少的页面，并注明： “次要页面不可用；仅根据主页进行提取。置信度可能较低。”

步骤 2b：捕获品牌截图

获取页面后，捕获 3 张截图，以全面锚定品牌风格。 这些截图将在 /ads generate 期间用作视觉风格参考；Pomelli 也会采用相同方法， 让广告图片贴合品牌的实际美学风格。

捕获以下内容：

1. 主页首屏区域（首屏可见内容）：

python ~/.claude/skills/ads/scripts/capture_screenshot.py [url]

保存至：./brand-screenshots/{domain}_homepage.png

2. 产品或服务页面：

python ~/.claude/skills/ads/scripts/capture_screenshot.py [url]/products

保存至：./brand-screenshots/{domain}_product.png

3. 关于页面（品牌个性）：

python ~/.claude/skills/ads/scripts/capture_screenshot.py [url]/about

保存至：./brand-screenshots/{domain}_about.png

如果找不到页面或页面返回错误，请妥善跳过，并继续处理其余页面。

如果提供了 --quick 标志：完全跳过截图捕获。

如果捕获失败（未安装 Playwright、网络错误、超时的 JS 密集型 SPA）：

• 记录："Screenshot capture skipped; run: python3 -m playwright install chromium"
• 不带截图继续
• 不要在 brand-profile.json 中设置 screenshots 字段

步骤 3：提取品牌元素

从获取的 HTML 中提取：

颜色：

• og:image meta 标签 → 分析主导颜色（记录 2-3 个突出的十六进制值）
• body、header、.hero、.btn-primary 上的 CSS background-color
• h1、h2、.btn 上的 CSS color
• .cta、.button 上的 CSS border-color 或 background
• 确定：主色（最突出的品牌颜色）、辅助色、背景色、文本色

字体排版：

• @import url(https://fonts.googleapis.com/...) → 从 URL 路径提取字体名称
• h1、h2、body、.headline 上的 CSS font-family
• 如果 Google Fonts URL 包含 family=Inter:wght@...，则 heading_font = "Inter"

语气： 分析首屏标题、副标题、“关于”页面简介和 CTA 按钮文本。 根据以下启发式规则，为每个维度打 1-10 分：

信号	分数方向
经常使用“你／你的”	正式_随意 → 随意（+2）
使用技术术语	专业_通俗 → 专业（-2）
句子简短有力（≤8 个词）	大胆_含蓄 → 大胆（+2）
首屏内容包含数据／统计信息	理性_感性 → 理性（-2）
使用“Transform”“revolutionize”“disrupt”	传统_创新 → 创新（+2）
以客户评价开篇	理性_感性 → 感性（+2）
行业奖项、“trusted by X”	传统_创新 → 传统（-1）

置信度评分

根据信号数量为每个品牌调性维度评分：

• 高（3 个或更多信号）：有力证据支持该维度的定位
• 中（2 个信号）：中等证据，可能需要验证
• 低（1 个信号）：证据较弱，应视为估计值

此外，在可用时提取结构化数据：schema.org 标记、Open Graph 标签（og:title、og:description、og:image）、Twitter Card 元数据。

图像风格（根据 og:image 和任何可见的主视觉图描述）：

• 摄影、插画或扁平化设计
• 主题（人物、产品、抽象、数据）
• 构图风格（简洁／极简或繁杂／编辑风格）

禁止元素（根据品牌定位推断）：

• 企业级／B2B 品牌 → 添加“俗气的图库照片”“消费级生活方式图像”
• 医疗保健 → 添加“未经认证的医疗声明”“前后对比图像”
• 金融 → 添加“快速致富图像”“不切实际的财富展示”
• 消费品牌 → 通常没有禁止元素

步骤 4：构建 brand-profile.json

阅读 ~/.claude/skills/ads/references/brand-dna-template.md，了解确切的架构。

严格按照架构构建 JSON 对象。对于无法有把握地提取的字段，使用 null；不要猜测。

低置信度字段示例：

"typography": {
  "heading_font": null,
  "body_font": "system-ui",
  "pairing_descriptor": "system default (Google Fonts not detected)"
}

步骤 5：编写 brand-profile.json

将 JSON 写入当前工作目录中的 ./brand-profile.json （用户运行 Claude Code 的目录）。

如果在步骤 2b 中成功截取了屏幕截图，请包含 screenshots 字段：

"screenshots": {
  "homepage": "./brand-screenshots/{domain}_homepage.png",
  "product": "./brand-screenshots/{domain}_product.png",
  "about": "./brand-screenshots/{domain}_about.png"
}

仅包含成功截取的屏幕截图。如果未找到页面或发生错误，则省略该键。如果跳过了步骤 2b 或所有截图均失败，则完全省略 screenshots 字段。

步骤 6：确认并总结

向用户展示：

✓ brand-profile.json saved to ./brand-profile.json

Brand DNA Summary:
  Brand: [brand_name]
  Voice: [descriptor 1], [descriptor 2], [descriptor 3]
  Primary Color: [hex]
  Typography: [heading_font] / [body_font]
  Target: [age_range] [profession]
  Screenshots: [N captured (homepage, product, about) in ./brand-screenshots/] OR [skipped]

Run `/ads create` to generate campaign concepts from this profile.

视觉设计师集成

视觉设计师 Agent 在通过 banana 生成图像时，会将与每个概念最相关的屏幕截图用作风格参考。例如，以产品为重点的概念会参考产品页面的屏幕截图，而品牌认知度概念会参考首页或关于页面的屏幕截图。

局限性

• 内容稀少：正文少于 200 个词的网站会生成置信度较低的品牌资料。 注意：“提取置信度低；可供分析的内容有限。”
• 动态网站：可能无法捕获由 JavaScript 渲染的内容。默认不使用 Playwright。如果网站看起来是没有静态 HTML 的 SPA／React 网站，请注明这一点。
• 多品牌企业：此工具为每个 URL 创建一份资料。请针对每个品牌／产品线分别运行。
• 深色模式网站：如果正文背景为 #333 或更暗，请交换背景／文本值。
• CSS-in-JS：现代 React 网站可能无法提取 CSS。请使用 og:image 的颜色作为备用方案。

brand-profile.json 架构

{
  "schema_version": "1.0",
  "brand_name": "string",
  "website_url": "string",
  "extracted_at": "ISO-8601",
  "voice": {
    "formal_casual": 1-10,
    "rational_emotional": 1-10,
    "playful_serious": 1-10,
    "bold_subtle": 1-10,
    "traditional_innovative": 1-10,
    "expert_accessible": 1-10,
    "descriptors": ["adjective1", "adjective2", "adjective3"]
  },
  "colors": {
    "primary": "#hexcode or null",
    "secondary": ["#hex1", "#hex2"],
    "forbidden": ["#hex or color name"],
    "background": "#hexcode",
    "text": "#hexcode"
  },
  "typography": {
    "heading_font": "Font Name or null",
    "body_font": "Font Name or system-ui",
    "pairing_descriptor": "brief description"
  },
  "imagery": {
    "style": "professional photography | illustration | flat design | mixed",
    "subjects": ["subject1", "subject2"],
    "composition": "brief description",
    "forbidden": ["element1", "element2"]
  },
  "aesthetic": {
    "mood_keywords": ["keyword1", "keyword2", "keyword3"],
    "texture": "minimal | textured | mixed",
    "negative_space": "generous | moderate | dense"
  },
  "brand_values": ["value1", "value2", "value3"],
  "target_audience": {
    "age_range": "e.g. 25-45",
    "profession": "brief description",
    "pain_points": ["pain1", "pain2"],
    "aspirations": ["aspiration1", "aspiration2"]
  }
}