visual-brand-extractor

视觉品牌提取器

从客户的网站中提取其视觉形象，并为幻灯片和内容素材生成可复用的样式预设。这是一项由 Agent 执行的技能——AI 通过 WebFetch 读取网页并直接进行分析。

快速开始

Extract visual branding from https://vapi.ai for the Vapi client.

输入

输入	必填	描述
网站 URL	是	客户的主页或落地页 URL
客户名称	是	用于命名输出文件
其他页面	否	产品页面、文档页面等，可用于更丰富的提取

输出

两个文件，保存至 clients/<client-name>/brand/visual-identity.md：

1. 幻灯片预设 — CSS 自定义属性、字体排版和标志性元素，格式与 skills/create-html-slides/STYLE_PRESETS.md 相匹配
2. 品牌配置 JSON — 简单的颜色和字体配置，格式与 skills/content-asset-creator 相匹配

---

流程

阶段 1：抓取目标页面

抓取 2-3 个页面，以获取具有代表性的品牌样本：

1. 主页（必需）——品牌的主要呈现
2. 产品/功能页面（如有）——更深入地了解颜色和布局的使用方式
3. 博客或关于页面（可选）——补充设计背景

对每个 URL 使用 WebFetch，并输入类似以下的提示词：

“提取此页面的全部内容。我需要：所有颜色值（hex、rgb、hsl）、字体系列名称、CSS 类名（尤其是 Tailwind 工具类）、任何 CSS 自定义属性/变量、meta 标签，以及页面布局的整体结构。请保留准确的颜色代码和字体名称。”

阶段 2：提取调色板

分析抓取的内容，以识别调色板。按以下优先顺序查找这些来源：

2.1 CSS 自定义属性

查找包含颜色变量的 :root、html 或 body 代码块：

--color-primary, --primary, --brand, --accent
--bg-*, --background-*
--text-*, --foreground-*

2.2 Meta 标签

检查：

• <meta name="theme-color" content="#..."> ——通常是主要品牌色
• <meta name="msapplication-TileColor" content="#...">

2.3 显式 CSS 颜色声明

搜索以下属性中的颜色值：

• background-color、background（包括渐变）
• color（文本颜色）
• border-color、border
• box-shadow（强调色/发光色）
• fill、stroke（SVG 标志颜色）

2.4 Tailwind 工具类

如果网站使用 Tailwind CSS，请使用下方的参考表将工具类映射为 hex 值。

2.5 按角色对颜色进行分类

角色	识别方法
bg-primary	body、html 或最外层容器上的 background-color。出现频率最高的背景色。
bg-secondary	卡片、区块或次级容器的背景。与主要背景略有不同。
text-primary	body 上的 color，或出现频率最高的文本颜色。
text-secondary	柔和的文本颜色变体——用于副标题、描述、.text-gray-* 元素。
accent	最突出的非背景、非文本颜色。常见于按钮、链接、CTA 和高亮处。也要检查 <meta name="theme-color">。
accent-secondary	第二种强调色，或渐变的搭配色。常见于次级按钮、悬停状态。
card-bg	卡片、模态框或凸起表面的背景（如果与 bg-primary 不同）。

2.6 确定主题类型

检查 bg-primary 的亮度：

• **深色主题：**深色背景（黑色、海军蓝、炭灰色）搭配浅色文本
• **浅色主题：**白色或奶油色背景搭配深色文本
• **混合：**注明网站是否同时使用两者（例如，深色主视觉区 + 浅色内容区块）

---

阶段 3：提取字体排版

3.1 查找字体来源

按以下顺序查找字体加载方式：

1. Google Fonts <link> 标签——字体名称位于 URL 中：

   fonts.googleapis.com/css2?family=Inter:wght@400;700
   

   → 字体：Inter，字重：400、700

2. Fontshare <link> 标签——URL 模式类似：

   api.fontshare.com/v2/css?f[]=clash-display@400,700
   

   → 字体：Clash Display

3. @font-face 声明——提取 font-family 值

4. font-family CSS 属性——元素上的直接声明

3.2 区分展示字体与正文字体

角色	识别方法
展示字体	用于 h1、h2、.title、.heading、.hero-title 的字体，或最大、最粗的文字所用字体。
正文字体	用于 body、p 或常规内容元素的字体。

如果两者使用相同的字体系列，则为单字体系列搭配（例如“Manrope + Manrope”）。注意展示文字（700-900）与正文（400-500）使用的不同字重。

3.3 处理专有字体

如果网站使用的字体在 Google Fonts 或 Fontshare 上不可用，请使用下方的字体替代表将其映射为最接近的可用字体。

---

第 4 阶段：分析视觉模式

检查 CSS 和页面结构，寻找以下美学特征：

特征	观察内容	美学影响
圆角	border-radius 的值——较大（12px+、9999px）、较小（2-4px）或无圆角	圆润 = 友好、现代。锐利 = 商务、醒目。
渐变	背景中的 linear-gradient、radial-gradient	强调渐变 = 现代 SaaS 风格
阴影	box-shadow 的使用频率和强度	明显的阴影 = 深度、层次感。无阴影 = 扁平、简约。
间距	内边距、外边距的大小——宽裕（4rem+）或紧凑（1rem）	疏朗 = 高端、简约。密集 = 信息丰富。
动画	是否存在 @keyframes、transition、transform	动感突出 = 充满活力。动画简约 = 沉稳、专业。
网格图案	背景网格、点状图案、装饰性叠加层	科技、开发者风格
渐变光球	定位伪元素上的 radial-gradient	现代、富有氛围感
边框点缀	区块上带颜色的 border-left 或 border-top	编辑风格、条理清晰

总结整体风格

根据上述特征，撰写：

1. 风格： 2-4 个形容词（例如，“简洁、技术感强、面向开发者、现代”）
2. 布局描述： 1 句话（例如，“全宽深色区块搭配居中内容和宽裕留白”）
3. 标志性元素： 网站中 3-4 种可复现的 CSS 模式

---

第 5 阶段：生成输出

创建文件 clients/<client-name>/brand/visual-identity.md，其中包含两种输出格式。

输出模板

# Visual Brand Identity: [Company Name]

**Extracted from:** [URL(s)]
**Date:** [YYYY-MM-DD]

---

## Slide Preset

**Vibe:** [2-4 adjectives]

**Layout:** [1 sentence describing dominant layout pattern]

**Typography:**
- Display: `[Font Name]` ([weight, e.g., 700/800])
- Body: `[Font Name]` ([weight, e.g., 400/500])

**Colors:**
```css
:root {
    --bg-primary: [hex];
    --bg-secondary: [hex];
    --text-primary: [hex];
    --text-secondary: [hex];
    --accent: [hex];
    --accent-secondary: [hex];
}
```

**Signature Elements:**
- [Element 1, e.g., "Subtle gradient orbs as background decoration"]
- [Element 2, e.g., "Rounded cards with 12px border-radius and light shadow"]
- [Element 3, e.g., "Accent-colored left border on feature blocks"]
- [Element 4, e.g., "Grid dot pattern overlay on hero sections"]

**Font Loading:**
```html
<link href="https://fonts.googleapis.com/css2?family=[Font1]:wght@[weights]&family=[Font2]:wght@[weights]&display=swap" rel="stylesheet">
```

---

## Brand Config (JSON)

For use with `content-asset-creator` and other skills:

```json
{
  "name": "[Company]",
  "primary_color": "[accent hex]",
  "secondary_color": "[accent-secondary hex]",
  "accent_color": "[accent hex]",
  "background": "[bg-primary hex]",
  "text_color": "[text-primary hex]",
  "font_heading": "[Display Font]",
  "font_body": "[Body Font]",
  "logo_url": "[if discovered, otherwise omit]"
}
```

---

## Extraction Notes

[Any notes about the extraction — proprietary fonts that were mapped, multiple themes detected, sparse CSS from JS-rendered sites, etc.]

---

字体替代表

当网站使用 Google Fonts 或 Fontshare 上没有的专有字体时，可使用此映射寻找最接近的可用替代字体：

字体类别	专有字体示例	Google Fonts 替代字体	Fontshare 替代字体
几何无衬线	Circular、Roobert、Graphik、Product Sans	Plus Jakarta Sans、Outfit、Manrope	General Sans、Satoshi
人文无衬线	Proxima Nova、Calibri、Gill Sans	Source Sans 3、DM Sans、Work Sans	—
新哥特无衬线	Akkurat、Aktiv Grotesk、Suisse Int'l	Space Grotesk、Archivo、Albert Sans	Switzer
现代衬线	Tiempos、Canela、GT Sectra	Fraunces、Cormorant、Playfair Display	Zodiak、Sentient
板衬线	Sentinel、Clarendon、Rockwell	Zilla Slab、Roboto Slab	—
古典衬线	Mercury、Chronicle、Minion	Source Serif 4、Lora、Libre Baskerville	Bespoke Serif
等宽字体	SF Mono、Berkeley Mono、Dank Mono	JetBrains Mono、Fira Code、Space Mono	Jet Brains Mono
展示 / 装饰字体	GT Walsheim、Recoleta、Campton	Syne、Archivo Black、Bricolage Grotesque	Clash Display、Cabinet Grotesk

判断启发： 如果不确定字体属于哪个类别，请观察其特征：

• 圆点，且字母“o”呈几何形状 → 几何无衬线
• 笔画粗细有变化，感觉温暖 → 人文无衬线
• 笔画粗细一致、中性 → 新哥特无衬线
• 衬线对比度高 → 现代衬线

---

Tailwind CSS 颜色参考

如果网站使用 Tailwind 工具类，请将它们映射为十六进制值：

灰色

类	十六进制	类	十六进制
gray-50	#F9FAFB	gray-500	#6B7280
gray-100	#F3F4F6	gray-600	#4B5563
gray-200	#E5E7EB	gray-700	#374151
gray-300	#D1D5DB	gray-800	#1F2937
gray-400	#9CA3AF	gray-900	#111827
		gray-950	#030712

石板色（常用于深色主题）

类	十六进制	类	十六进制
slate-50	#F8FAFC	slate-500	#64748B
slate-100	#F1F5F9	slate-600	#475569
slate-200	#E2E8F0	slate-700	#334155
slate-300	#CBD5E1	slate-800	#1E293B
slate-400	#94A3B8	slate-900	#0F172A
		slate-950	#020617

蓝色

类	十六进制	类	十六进制
blue-400	#60A5FA	blue-700	#1D4ED8
blue-500	#3B82F6	blue-800	#1E40AF
blue-600	#2563EB	blue-900	#1E3A8A

绿色

类	十六进制	类	十六进制
green-400	#4ADE80	green-600	#16A34A
green-500	#22C55E	green-700	#15803D

常见强调色

类	十六进制	类	十六进制
indigo-500	#6366F1	purple-500	#A855F7
indigo-600	#4F46E5	violet-500	#8B5CF6
emerald-500	#10B981	amber-500	#F59E0B
teal-500	#14B8A6	rose-500	#F43F5E
cyan-500	#06B6D4	orange-500	#F97316

注意： Tailwind 类的形式如 bg-blue-600、text-gray-900、border-indigo-500 等。去掉属性前缀（bg-、text-、border-）即可得到颜色标记，然后在上方查找对应的十六进制值。

对于自定义 Tailwind 主题（例如 bg-brand、text-brand-light），请检查页面的 <script> 标签，查找定义自定义颜色的 tailwind.config 对象。

---

边缘情况

JS 渲染的网站（CSS 稀少）

许多现代网站（Next.js、React）通过 JavaScript 注入样式。WebFetch 可能只返回极少的内联 CSS。在这种情况下：

• 重点查看 class 属性中的 Tailwind 工具类
• 检查 <script> 标签中的嵌入式配置对象
• 查找包含 CSS-in-JS 输出的 <style> 标签
• 如果仍然很少，请询问用户：“该网站似乎使用动态样式。您能否分享截图或直接提供其品牌指南？”

多种配色方案（浅色/深色模式）

有些网站通过 prefers-color-scheme 定义浅色和深色主题。提取默认（非媒体查询）主题。如果检测到深色模式变体，请在“提取备注”部分注明。

颜色过多

企业网站可能使用数十种颜色。请重点关注：

• 首屏区域的主色板
• 用于识别强调色的按钮/CTA 颜色
• 频率分析——排名前 5-7 的独特颜色可定义品牌

没有可用的字体信息

如果字体检测完全失败：

1. 检查网站的 CSS 注释或配置中是否提及字体名称
2. 查看整体风格，并从现有幻灯片预设中选择匹配的字体组合
3. 根据风格倾向选择稳妥且有辨识度的组合：高端风格使用衬线展示字体 + 无衬线正文字体；现代科技风格使用几何无衬线字体

---

示例

在 https://vapi.ai 上运行此技能可能会得到：

# Visual Brand Identity: Vapi

**Extracted from:** https://vapi.ai, https://docs.vapi.ai
**Date:** 2026-02-26

---

## Slide Preset

**Vibe:** Technical, developer-focused, clean, modern

**Layout:** Dark full-width sections with centered content, card-based feature grids, generous spacing

**Typography:**
- Display: `Inter` (700/800)
- Body: `Inter` (400/500)

**Colors:**
\```css
:root {
    --bg-primary: #0F172A;
    --bg-secondary: #1E293B;
    --text-primary: #F8FAFC;
    --text-secondary: #94A3B8;
    --accent: #22C55E;
    --accent-secondary: #3B82F6;
}
\```

**Signature Elements:**
- Subtle gradient orbs in background (green-to-blue radial gradients)
- Rounded cards with slate-800 background and subtle border
- Code-style monospace accents for technical terms
- Green accent on CTAs and interactive elements

**Font Loading:**
\```html
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;800&display=swap" rel="stylesheet">
\```

（这是一个说明性示例——实际提取结果会因实时网站而异。）

---

提示

• 通常只需查看首页。 如果首页的品牌标识清晰，就不需要查看其他页面。只有在首页内容稀少或整体风格与网站其他部分不同时，才抓取第二个页面。
• 按钮能体现强调色。 要识别主强调色，最可靠的方法是查找按钮或 CTA 的背景色。
• 检查网站图标和徽标。 SVG 徽标通常会在 fill 值中包含准确的品牌颜色。
• 不要过度提取。 目标是提取 5-7 种颜色、1-2 种字体和 3-4 个标志性元素。超过这个数量只会增加干扰，而非提供有效信息。
• 拿不准时，就简化。 使用 3 色调色板（背景色 + 文字色 + 强调色），以及同一字体系列的两种字重，即可打造简洁实用的预设。

依赖项

• 网页抓取能力（用于读取网页）
• 无需 API 密钥或付费工具