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.

What this skill does

1. 1Fetches 2-3 pages from a client's website and extracts color values, font names, and CSS patterns from source.
2. 2Classifies colors into roles (background, text, accent, card) and determines dark or light theme.
3. 3Identifies display and body fonts from Google Fonts links, @font-face declarations, or Tailwind utility classes, with fallback mapping for proprietary fonts.
4. 4Analyzes visual patterns — border radius, gradients, shadows, spacing — to synthesize a brand vibe and signature elements.
5. 5Outputs a reusable slide preset (CSS custom properties) and a brand config JSON for downstream content creation skills.

When to use

• You're building slides or content assets for a client and need to match their visual identity.
• You want to extract brand colors and fonts from a website without asking for a style guide.
• You're onboarding a new client and need a brand config file to feed into other content tools.

Tools used

Frequently asked questions