brand-kit

Name: brand-kit
Availability: InStock
Author: titta

Extract visual identity tokens from screenshots and web URLs into structured YAML.

29|12|Updated Mar 30, 2026

Search Tags:#branding #tokens #ui-ux #design-system #design-tokens #visual-identity

Ready to run

npx skills add https://github.com/matteotitta/genesys-skills --skill brand-kit-matteotitta

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: brand-kit
Source: https://github.com/matteotitta/genesys-skills/tree/main/skills/research/brand-kit
Command: npx skills add https://github.com/matteotitta/genesys-skills --skill brand-kit-matteotitta

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill solves the inconsistency and manual effort involved in documenting visual identities, ensuring that brand guidelines are machine-readable and ready for use across all design and development workflows.

Core Features & Use Cases

Automated Extraction: Uses vision-based analysis to pull colors, typography, and component patterns from screenshots or URLs.
Standardized Output: Compiles findings into a structured DESIGN.md file with YAML tokens and prose sections.
Use Case: When onboarding a new client, use this skill to instantly generate a comprehensive brand system file from their website, which then serves as the source of truth for all downstream marketing and development tasks.

Quick Start

Invoke the brand kit skill by providing the client name and a set of screenshots to generate a complete visual identity system.

Frequently Asked Questions about brand-kit

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

FAQPage Schema

How do I extract design tokens from a website URL?▼

You can extract design tokens from a website URL by using vision-based analysis to pull colors, typography, and component patterns. This process compiles visual identity specifications into a structured, machine-readable format for cross-platform synchronization.

What is the best way to document a visual identity system for developers?▼

The best way to document a visual identity system for developers is to codify extracted brand guidelines into a structured DESIGN.md file with YAML tokens. This ensures the visual identity system is machine-readable and ready for downstream development workflows.

How do I generate a brand kit from screenshots?▼

You generate a brand kit from screenshots by providing client names and visual assets to an automated extraction tool. It uses vision-based analysis to identify component patterns and outputs a comprehensive visual identity system file.

Can I use structured YAML formatting for design system creation?▼

Yes, you can use structured YAML formatting for design system creation to ensure machine-authoritative design outputs. Standardizing visual identity tokens into YAML provides a reliable source of truth for cross-platform asset synchronization.

Do I need browser-based capture tools for brand auditing?▼

Yes, brand auditing requires integration with browser-based capture tools to extract visual identity tokens from web URLs accurately. This ensures comprehensive extraction of design system specifications from live digital assets.