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

| Input | Required | Description |
|-------|----------|-------------|
| **Website URL** | Yes | Client's homepage or landing page URL |
| **Client name** | Yes | For naming the output files |
| **Additional pages** | No | Product page, docs page, etc. for richer extraction |

## 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:
```css
--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

| Role | How to Identify |
|------|----------------|
| **bg-primary** | `background-color` on `body`, `html`, or outermost container. The most common background. |
| **bg-secondary** | Background on cards, sections, or secondary containers. Slightly different from primary. |
| **text-primary** | `color` on `body` or the most common text color. |
| **text-secondary** | Muted text variant — used on subtitles, descriptions, `.text-gray-*` elements. |
| **accent** | Most prominent non-bg, non-text color. Found on buttons, links, CTAs, highlights. Also check `<meta name="theme-color">`. |
| **accent-secondary** | Second accent color, or gradient partner. Found on secondary buttons, hover states. |
| **card-bg** | Background of cards, modals, or elevated surfaces (if different from bg-primary). |

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

| Role | How to Identify |
|------|----------------|
| **Display font** | Font on `h1`, `h2`, `.title`, `.heading`, `.hero-title`, or the largest/boldest text. |
| **Body font** | Font on `body`, `p`, or general content elements. |

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:

| Signal | What to Look For | Aesthetic Implication |
|--------|-----------------|---------------------|
| **Border radius** | `border-radius` values — large (12px+, 9999px) vs small (2-4px) vs none | Rounded = friendly/modern. Sharp = corporate/bold. |
| **Gradients** | `linear-gradient`, `radial-gradient` in backgrounds | Gradient-forward = modern SaaS aesthetic |
| **Shadows** | `box-shadow` frequency and intensity | Heavy shadows = depth/elevation. None = flat/minimal. |
| **Spacing** | Padding/margin sizes — generous (4rem+) vs tight (1rem) | Airy = premium/minimal. Dense = information-rich. |
| **Animations** | `@keyframes`, `transition`, `transform` presence | Motion-forward = energetic. Minimal = calm/professional. |
| **Grid patterns** | Background grid/dot patterns, decorative overlays | Technical/developer aesthetic |
| **Gradient orbs** | `radial-gradient` on positioned pseudo-elements | Modern, atmospheric aesthetic |
| **Borders as accents** | Colored `border-left` or `border-top` on sections | Editorial, organized aesthe