visual-brand-extractor

Extract colors, typography, and layout patterns into slide presets and brand config JSON.

1.1k|200|Updated Mar 2, 2026
One-click install
npx skills add https://github.com/gooseworks-ai/goose-skills --skill visual-brand-extractor-gooseworks-ai
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: visual-brand-extractor
Source: https://github.com/gooseworks-ai/goose-skills/tree/main/skills/capabilities/visual-brand-extractor
Command: npx skills add https://github.com/gooseworks-ai/goose-skills --skill visual-brand-extractor-gooseworks-ai

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps agencies and teams quickly derive a consistent visual identity from a client's website, enabling repeatable branding artifacts without manual color and typography extraction.

Core Features & Use Cases

  • Extract color palette from website pages (primary, secondary, accent)
  • Identify typography (display vs body) and source fonts from the site
  • Generate a slide preset and a brand config JSON compatible with the content asset creator
  • Provide signature elements and guidance for brand guidelines

Quick Start

Provide the target website URL and client name to extract visual branding.

Frequently Asked Questions about visual-brand-extractor

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I extract a visual brand identity from a website?

To extract a visual brand identity, provide a target website URL and client name to automatically detect color palettes, typography, and layout patterns. This process generates reusable brand presets and configuration files for consistent marketing outputs.

Can I generate brand config JSON from client website colors and typography?

Yes, you can generate brand config JSON from client website colors and typography. The extraction identifies primary, secondary, and accent colors alongside display and body fonts, outputting a structured JSON file compatible with downstream brand workflows.

What is the best way to create slide presets from an existing website design?

The best way to create slide presets from an existing website design is to parse the site's visual elements like color palettes and typography. This automatically derives signature elements to ensure generated slides match the client's established branding.

How to detect primary and secondary color palettes from a web page?

To detect primary and secondary color palettes from a web page, input the site URL for automated visual extraction. The process analyzes the page design to isolate primary, secondary, and accent colors for your brand configuration.

Does website typography extraction identify source fonts for body and display text?

Yes, website typography extraction identifies source fonts for body and display text. It analyzes the site to distinguish between display and body typography, ensuring your slide presets accurately reflect the client's original font choices.

What visual branding elements are included in the generated brand config?

The generated brand config includes extracted color palettes, detected typography for display and body text, and layout patterns. It also provides signature elements and guidance to maintain consistent visual branding across marketing pages and slides.