skills.rest
ekatasingh1107
ekatasingh1107COMMUNITY
Explore all skills by this author →
GitHub

visual-brand

Extract brand visual systems into structured JSON style guides.

2|Updated Apr 11, 2026
Search Tags:#typography#branding#style-guide#color-palette#brand-extraction#visual-brand#logo-analysis
One-click install
npx skills add https://github.com/ekatasingh1107/b2b-gtm-skills --skill visual-brand
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: visual-brand
Source: https://github.com/ekatasingh1107/b2b-gtm-skills/tree/main/skills/capabilities/visual-brand
Command: npx skills add https://github.com/ekatasingh1107/b2b-gtm-skills --skill visual-brand

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Extract and codify a brand's visual identity from a website or asset set into a structured style guide that designers and marketers can reuse.

Core Features & Use Cases

  • Color palette extraction (primary, neutrals, semantic) and contrast checks against WCAG AA guidelines.
  • Typography extraction mapping headings, body, fonts, weights, and display styles.
  • Logo and imagery analysis covering logo usage, photography style, and iconography.
  • Spacing and layout patterns, component patterns, and recommendations for UI tokens.
  • Use Case: conduct a brand audit for a client site to generate a shareable, production-ready style guide for design systems.

Quick Start

Provide the URL or brand asset set to analyze and run the Visual Brand Extractor to generate a structured JSON style guide.

Frequently Asked Questions about visual-brand

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

FAQPage Schema
How do I extract a brand style guide from a website?▼

To extract a brand style guide from a website, provide the URL or asset set to analyze and the tool identifies color palettes, typography mappings, and logo usage to produce a structured JSON style guide.

Can I generate UI component guidance and design tokens from existing marketing decks?▼

Yes, you can generate UI component guidance and design tokens from existing marketing decks by analyzing the provided brand assets to codify spacing patterns, typography, and color extraction into a reusable format.

What is brand visual extraction and how does it codify a design system?▼

Brand visual extraction is the process of analyzing a live site or asset collection to codify color palettes, typography mappings, and imagery assessment into a structured, production-ready style guide for design systems.

Does brand color palette extraction include WCAG AA contrast checks?▼

Yes, brand color palette extraction includes contrast checks against WCAG AA guidelines, evaluating primary and neutral colors to ensure accessibility compliance within the generated style guide.

What is the best way to conduct a brand audit for a client site?▼

The best way to conduct a brand audit for a client site is to run a visual brand analysis on the URL, which outputs a structured, shareable JSON style guide covering typography, color, and UI component patterns.

Can I map typography and logo usage from live sites without manual inspection?▼

Yes, you can map typography and logo usage from live sites without manual inspection by processing the URL through the visual brand extractor, which automatically identifies fonts, weights, and photography direction.

Related Skills

Explore More Design & Creative Skills→
johan-Rmjohan-Rm

website-to-video

Automates website-to-video conversion with storyboard generation and brand extraction.

Community
Advanced
kaynetikkaynetik
1

frontend-design

Design frontend interfaces with design tokens, typography, motion, and accessibility checks.

Community
Advanced
AreteDriverAreteDriver
4

web-designer

Design website layouts and generate Tailwind CSS design tokens with WCAG AA contrast.

Community
Intermediate
CrazySwamiCrazySwami
5

brand-guide

Generate HTML or Markdown brand guides documenting colors, typography, and responsive specs.

Community
Intermediate