What is the visual-brand-extractor skill?
The visual-brand-extractor skill is a SKILL.md in the Goose Skills repository. Give your agent a website URL and a client name, and it fetches the pages, finds the color palette, font pairing and layout patterns, then writes one visual-identity file containing a slide style preset and a brand config JSON.
The visual-brand-extractor skill lives in the brand section of the Goose Skills repository. It is an agent executed skill: your AI agent reads the pages through a web fetch, then analyses the CSS and HTML itself to work out the brand.
Its Quick Start is one sentence: extract visual branding from a client's URL for a named client. The skill takes it from there and finishes with a file you can reuse for decks and content assets.
Inputs and output
- Website URL: required, the client's homepage or a landing page.
- Client name: required, used to name the output files.
- Additional pages: optional, such as a product or docs page for richer extraction.
- Output: one file at clients/client-name/brand/visual-identity.md holding a slide preset and a brand config JSON.
How it reads a site
- It fetches two or three pages: the homepage, a product or feature page, and optionally a blog or about page.
- Colors come from CSS custom properties first, then theme-color and TileColor meta tags, then explicit declarations and Tailwind classes.
- Fonts come from Google Fonts links, Fontshare links, @font-face rules or font-family properties.
- Visual signals such as border radius, gradients, shadows, spacing and grid patterns become a short vibe description.
Proprietary fonts get a close match
When a site uses a font that is not on Google Fonts or Fontshare, the skill maps it by category. A geometric sans like Circular points to Plus Jakarta Sans, Outfit or Manrope. Modern serifs point to Fraunces or Playfair Display.
Who the visual-brand-extractor skill is for
Best for
- Agencies and freelancers who need a client's palette and fonts captured before building slides or content.
- Founders matching a deck or social asset to an existing site. For taste guidance on the build, see design-taste-frontend.
- Anyone who wants hex values and font names written into a reusable preset instead of eyedropping by hand. See also brandkit.
Not for
- Sites that render almost everything with JavaScript. The skill's own notes mention sparse CSS from JS rendered sites as a limit.
- Logos and imagery. The brand config only includes a logo URL when one is discovered.
- Redesigning a brand. It documents what a site already uses and does not propose a new identity.
Use it with UiChemy
The extracted palette and font pairing give you design tokens to carry into a Figma file. For a dark theme, see dark-mode-design. UiChemy Figma to WordPress then converts that finished design into an editable page. Click Get Started on uichemy.com.
How to install Visual Brand Extractor Skill: Pull Colors and Fonts from a Site
npx gooseworks@latest install --claude --mcpPaste the install line
The README says to paste Install gooseworks: https://gooseworks.ai/install.md into your coding agent. The agent asks before installing, then installs the skills and the gooseworks MCP server.
Or run the command yourself
Use
npx gooseworks@latest install --claude --mcp, or swap the flag for --cursor or --codex. The README also listsnpx gooseworks@latest install --allfor every detected agent.Know what the install adds
The README says the install covers the full catalog of 200 plus skills, registers an MCP server and uses Google sign-in. It describes the GooseWorks API as a separate paid service.
Or copy only this folder
Run
git clone https://github.com/gooseworks-ai/goose-skills.gitand copy skills/brand/capabilities/visual-brand-extractor to the folder your agent loads skills from.Run an extraction
Ask: extract visual branding from a client URL for a named client. Add a product page for a richer result.
Check that it loaded
Run it on one public site. The agent should fetch two or three pages and save a visual-identity.md file with a slide preset, a brand config JSON and extraction notes.
Key features
- Multi-page fetchThe agent reads the homepage plus a product page and optionally a blog or about page, using a web fetch prompt that asks for color values, font names, CSS variables, meta tags and layout structure.
- Ordered color sourcesCSS custom properties are checked first, then theme-color and msapplication-TileColor meta tags, then background, text, border, shadow and SVG declarations, and finally Tailwind utility classes.
- Color role classificationColors are sorted into bg-primary, bg-secondary, text-primary, text-secondary, accent, accent-secondary and card-bg by how and where they appear on the page.
- Theme type detectionThe skill checks the luminance of the main background and labels the site dark, light or mixed, for example a dark hero above light content sections.
- Font detection and pairingDisplay fonts come from headings and body fonts from paragraphs. If both use one family, the skill records it as a single family pairing with different weights.
- Font fallback tableProprietary fonts are mapped by category, from geometric and humanist sans to neo-grotesque, serif, slab, monospace and display styles, with Google Fonts and Fontshare picks.
- Visual pattern analysisBorder radius, gradients, shadows, spacing, animations, grid patterns, gradient orbs and colored border accents are read as signals and turned into two to four vibe adjectives.
- Slide preset outputThe preset holds CSS custom properties, display and body fonts with weights, three or four signature elements and a ready Google Fonts link tag, in the format of the repository's slide style presets.
- Brand config JSONA second block records name, primary, secondary and accent colors, background, text color and heading and body fonts, in the format used by the content asset creator skill.
Frequently asked questions
What is the visual-brand-extractor skill?
It is a skill in the Goose Skills repository that has an AI agent read a client's website and extract its visual identity: color palette, font pairing and aesthetic patterns. It outputs a slide style preset and a brand config JSON in one markdown file.
How do I install the visual-brand-extractor skill?
Paste the README's install line into your coding agent, or run npx gooseworks@latest install --claude --mcp in a terminal. To take only this skill, clone the repository and copy the skills/brand/capabilities/visual-brand-extractor folder into your agent's skills location.
What does the skill output?
One file at clients/client-name/brand/visual-identity.md. It holds a slide preset with vibe, layout, typography, CSS color variables, signature elements and font loading, plus a brand config JSON and a short section of extraction notes.
How does it find the colors?
It looks at CSS custom properties first, then theme-color meta tags, then explicit color declarations and Tailwind classes. For sites with many colors it focuses on the hero section and button colors, and the top five to seven unique colors define the brand.
What if the site has light and dark modes?
The skill extracts the default theme, the one outside the media query, and notes in the extraction notes that a dark mode variant was detected. For dark mode design guidance, see dark-mode-design.
Which AI agents can use the visual-brand-extractor skill?
The Goose Skills README says the skills work with Claude Code, Cursor and Codex, and the install command takes a flag for each. Other agents that load SKILL.md folders may work if you copy the folder, but the README does not confirm that.
Does the skill need an account or paid service?
The skill text describes the agent reading pages through a web fetch. The README install route uses Google sign-in and an MCP server, and it calls the GooseWorks API a separate paid service. The skill files and command line tool are MIT licensed.
What does it do with fonts that are not on Google Fonts?
It uses a fallback table by category. Geometric sans fonts map to options like Outfit or Manrope, and monospace fonts such as SF Mono map to JetBrains Mono or Fira Code. The extraction notes record which fonts were mapped.