skills.rest
matteotitta
matteotittaCOMMUNITY
Explore all skills by this author →
Website𝕏@matteo_tittaGitHub

brand-kit

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
One-click install
npx skills add https://github.com/matteotitta/genesys-skills --skill brand-kit-matteotitta
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
tyronerosstyroneross
1

design-reference

Capture and store web design screenshots with configurable viewports.

Community
Intermediate
icyzhicyzh
1

design-md

Lint DESIGN.md files and export design tokens to Tailwind CSS or W3C DTCG.

Community
Intermediate
Starchild-ai-agentStarchild-ai-agent
1

@349/starchild-design-pack

Design interfaces and generate Starchild design tokens for frontend code changes.

Official
Advanced
frankxaifrankxai
7

design-department

Create logos, brand guidelines, and UI/UX assets for digital products.

Community
Intermediate