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 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 ````markdown # 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: | Font Category | Proprietary Examples | Google Fonts Alternative | Fontshare Alternative | |--------------|---------------------|-------------------------|----------------------| | Geometric sans | Circular, Roobert, Graphik, Product Sans | `Plus Jakarta Sans`, `Outfit`, `Manrope` | `General Sans`, `Satoshi` | | Humanist sans | Proxima Nova, Calibri, Gill Sans | `Source Sans 3`, `DM Sans`, `Work Sans` | — | | Neo-grotesque | Akkurat, Aktiv Grotesk, Suisse Int'l | `Space Grotesk`, `Archivo`, `Albert Sans` | `Switzer` | | Modern serif | Tiempos, Canela, GT Sectra | `Fraunces`, `Cormorant`, `Playfair Display` | `Zodiak`, `Sentient` | | Slab serif | Sentinel, Clarendon, Rockwell | `Zilla Slab`, `Roboto Slab` | — | | Classic serif | Mercury, Chronicle, Minion | `Source Serif 4`, `Lora`, `Libre Baskerville` | `Bespoke Serif` | | Monospace | SF Mono, Berkeley Mono, Dank Mono | `JetBrains Mono`, `Fira Code`, `Space Mono` | `Jet Brains Mono` | | Display / decorative | GT Walsheim, Recoleta, Campton | `Syne`, `Archivo Black`, `Bricolage Grotesque` | `Clash Display`, `Cabinet Grotesk` | **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 --- ## Tailwind CSS Color Reference If the site uses Tailwind utility classes, map them to hex values: ### Grays | Class | Hex | Class | Hex | |-------|-----|-------|-----| | `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 (common for dark themes) | Class | Hex | Class | Hex |