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:

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

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

`` api.fontshare.com/v2/css?f[]=clash-display@400,700 ` → Font: Clash Display`

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

1. 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 aesthetic |

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:**

: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:**

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

{ "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