brand-dna-extractor

Extract brand identity signals from websites into guidelines, prompt libraries, and design tokens.

5|Updated Oct 22, 2025

Search Tags:#prompt engineering #brand guidelines #design tokens #web scraping #brand analysis #css extraction

Ready to run

npx skills add https://github.com/marchatton/agent-skills --skill brand-dna-extractor

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: brand-dna-extractor
Source: https://github.com/marchatton/agent-skills/tree/main/.agents/skills/00-utilities/brand-dna-extractor
Command: npx skills add https://github.com/marchatton/agent-skills --skill brand-dna-extractor

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill automates the complex process of analyzing multiple websites to extract core brand identity signals, transforming raw web data into structured brand guidelines, prompt packs, and design tokens.

Core Features & Use Cases

Multi-Source Analysis: Scrapes and probes multiple websites using tools like Firecrawl and agent-browser to gather comprehensive data.
Signal Extraction: Identifies and extracts key brand elements including colors, typography, spacing, motion, and voice/tone.
Output Generation: Produces three essential artifacts: brand_guidelines.md, prompt_library.json, and design_tokens.json.
Use Case: A product team needs to understand the visual and tonal identity of competitor websites to inform their own brand strategy. This Skill can analyze several competitor sites and provide a consolidated report with actionable insights and design tokens.

Quick Start

Use the brand-dna-extractor skill to analyze example.com and example.org to generate brand guidelines and design tokens.

Frequently Asked Questions about brand-dna-extractor

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

FAQPage Schema

How do I extract brand guidelines and design tokens from a website's CSS?▼

You extract brand guidelines and design tokens by scraping CSS variables and computed styles from target websites. This Skill probes multiple sites to capture colors, typography, and spacing, outputting structured brand guidelines and design token files.

What is brand DNA extraction and how does web scraping capture visual identity?▼

Brand DNA extraction is the process of capturing a website's visual and tonal identity. Web scraping tools gather CSS variables and computed styles, identifying core brand elements like colors, typography, motion, and voice to form a comprehensive identity profile.

Can I analyze multiple competitor websites at once to compare their brand identity signals?▼

Yes, you can analyze multiple competitor websites simultaneously. The Skill performs multi-source analysis by scraping several sites and probing browsers to consolidate data on colors, typography, and tone into a single actionable report.

How do I turn extracted website styles into a prompt library for design generation?▼

You turn extracted website styles into a prompt library by consolidating the scraped CSS variables and tonal content into a structured JSON format. This Skill generates a prompt_library.json file to guide design generation based on the captured brand identity.

Does this approach require manual CSS inspection to extract brand colors and typography?▼

No, manual CSS inspection is not required. The Skill automates the process by using web scraping and browser probing tools to extract computed styles, CSS variables, and textual content directly from the target websites.