/visual-brand-extractor

name: visual-brand-extractor
description: >
  Extract visual branding (colors, typography, layout patterns) from a client's
  website and generate a style preset compatible with the HTML slides skill and
  a brand config JSON for the content asset creator. Uses WebFetch to read pages
  and analyzes CSS/HTML to identify the color palette, font pairings, and
  aesthetic patterns.
tags: [brand]

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

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`, `transiti