visual-brand-extractor
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.
npx skills add gooseworks-ai/goose-skills --skill visual-brand-extractor --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# 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
- Quick Start
- Inputs
- Output
- Process
- Phase 1: Fetch Target Pages
- Phase 2: Extract Color Palette
- Phase 3: Extract Typography
- Phase 4: Analyze Visual Patterns
- Phase 5: Generate Output
- Font Fallback Table
- Tailwind CSS Color Reference
- Grays
- Slate (common for dark themes)
- Blues
What does the visual-brand-extractor skill do?
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.
How do I install it?
Run `npx skills add gooseworks-ai/goose-skills --skill visual-brand-extractor --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From gooseworks-ai/goose-skills, a repository with 1,091 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.