← ClaudeAtlas

visual-brand-extractorlisted

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.
gooseworks-ai/goose-skills · ★ 727 · Data & Documents · score 82
Install: claude install-skill gooseworks-ai/goose-skills
# 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/v