Visual Brand Extractor

Visual Brand Extractor

Extract a client's visual identity from their website and generate reusable style presets for slides and content assets. This is an agent-executed skill — the AI reads pages via WebFetch and performs the analysis directly.

Quick Start

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

Inputs

Output

Two files saved to clients/<client-name>/brand/visual-identity.md:

1. Slide preset — CSS custom properties, typography, and signature elements matching the format in skills/create-html-slides/STYLE_PRESETS.md
2. Brand config JSON — Simple color/font config matching skills/content-asset-creator format

Process

Phase 1: Fetch Target Pages

Fetch 2-3 pages to get a representative sample of the brand:

1. Homepage (mandatory) — the primary brand expression
2. Product/feature page (if available) — deeper color and layout usage
3. Blog or about page (optional) — secondary design context

Use WebFetch on each URL with a prompt like:

"Extract the full content of this page. I need: all color values (hex, rgb, hsl), font family names, CSS class names (especially Tailwind utility classes), any CSS custom properties/variables, meta tags, and the general structure of the page layout. Preserve exact color codes and font names."

Phase 2: Extract Color Palette

Analyze the fetched content to identify the color palette. Look for these sources in priority order:

2.1 CSS Custom Properties

Look for :root, html, or body blocks containing color variables:

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

2.2 Meta Tags

Check for:

• <meta name="theme-color" content="#..."> — often the primary brand color
• <meta name="msapplication-TileColor" content="#...">

2.3 Explicit CSS Color Declarations

Search for color values in these properties:

• background-color, background (including gradients)
• color (text colors)
• border-color, border
• box-shadow (accent/glow colors)
• fill, stroke (SVG logo colors)

2.4 Tailwind Utility Classes

If the site uses Tailwind CSS, map utility classes to hex values using the reference table below.

2.5 Classify Colors into Roles

2.6 Determine Theme Type

Check the luminance of bg-primary:

• Dark theme: Dark background (black, navy, charcoal) with light text
• Light theme: White or cream background with dark text
• Mixed: Note if the site uses both (e.g., dark hero + light content sections)

Phase 3: Extract Typography

3.1 Find Font Sources

Look for font loading in this order:

1. Google Fonts <link> tags — Font name is in the URL:

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

   → Font: Inter, weights: 400, 700

2. Fontshare <link> tags — Similar URL pattern:

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

   → Font: Clash Display

3. @font-face declarations — Extract the font-family value

4. font-family CSS properties — Direct declarations on elements

3.2 Classify into Display vs Body

If both use the same font family, it's a single-family pairing (like "Manrope + Manrope"). Note the different weights used for display (700-900) vs body (400-500).

3.3 Handle Proprietary Fonts

If the site uses a font NOT available on Google Fonts or Fontshare, map it to the closest available equivalent using the Font Fallback Table below.

Phase 4: Analyze Visual Patterns

Examine the CSS and page structure for these aesthetic signals:

Synthesize the Vibe

Based on the signals above, compose:

1. Vibe: 2-4 adjectives (e.g., "Clean, technical, developer-focused, modern")
2. Layout description: 1 sentence (e.g., "Full-width dark sections with centered content and generous whitespace")
3. Signature elements: 3-4 reproducible CSS patterns from the site

Phase 5: Generate Output

Create the file clients/<client-name>/brand/visual-identity.md with both output formats.

Output Template

# 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.]

Font Fallback Table

When a site uses a proprietary font not available on Google Fonts or Fontshare, use this mapping to find the closest available alternative:

Decision heuristic: If unsure which category a font falls into, look at its characteristics:

• Round dots and geometric 'o' → Geometric sans
• Varies stroke widths, warm feel → Humanist sans
• Uniform strokes, neutral → Neo-grotesque
• Serifs with high contrast → Modern serif