skills.rest
marchatton
marchattonCOMMUNITY
Explore all skills by this author →
Website𝕏@marchattonhereGitHub

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

Related Skills

Explore More Design & Creative Skills→
framerslabframerslab

web-scraper

Automate web scraping by navigating URLs and extracting structured data.

Official
Advanced
erichowenserichowens
181

web-design-expert

Generate distinctive web designs and brand identities with WCAG accessibility.

Community
Advanced
lucasmccomblucasmccomb

design-review

Capture multi-viewport screenshots and analyze DOM, CSS, and computed styles for design issues.

Community
Advanced
MichaelSolatiMichaelSolati

brand

Centralizes brand identity management, asset compliance validation, and design token synchronization.

Community
Intermediate