visual-brand-extractorlisted
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