# Brand Extraction > Extract complete design systems and brand identities from URLs using Playwright, CSS analysis, and AI interpretation. Covers colour, typography, spacing, components, brand voice, and accessibility. Use when extracting design tokens from websites, reverse-engineering design systems, creating brand documentation from live sites, or building component replications from extracted tokens. Use when this capability is needed. - Skill: `tomevault-io/brand-extraction` (Agent Skill, multi-file: 2 files) - Install (CLI): `npx skillmds@latest add tomevault-io/brand-extraction` - Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/brand-extraction/raw - Safety review: pending (external: skill-scanner PASS, skillspector PASS) - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Design & Media - Author: tomevault-io (https://skillmd.com/u/tomevault-io) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/tomevault-io/brand-extraction --- # Brand Extraction Methodology This skill teaches Claude how to extract, analyse, and document a complete design system from any given URL. It combines automated CSS/DOM extraction with expert-level AI interpretation to produce the same quality of output a senior design system engineer would deliver. ## Expert Process Overview The extraction follows the same five phases a human expert would use, enhanced by automation: 1. **Reconnaissance & Inventory** — Browse, screenshot, identify page types, locate brand resources 2. **Token Extraction** — CSS custom properties, computed styles, frequency analysis, confidence scoring 3. **Component Cataloguing** — Identify atoms, molecules, organisms per atomic design methodology 4. **Brand Voice Analysis** — Tone dimensions, vocabulary, CTA patterns, language variant 5. **Validation & Replication** — Build components from tokens, compare visually, iterate until correct **Critical insight:** Experts spend 40–60% of total time on validation and iterative refinement, not initial extraction. The extraction is the easy part. Getting it right is the hard part. ## Technology Stack Install before first use: ```bash pip install playwright beautifulsoup4 lxml Pillow pixelmatch tinycss2 colormath Jinja2 requests playwright install chromium ``` ## Extraction Pipeline ### Step 1: Discovery & Reconnaissance ```bash python scripts/extract_tokens.py --stage recon --url ``` Actions: - Navigate with Playwright (Chromium, stealth mode for bot detection bypass) - Wait for SPA hydration: 8s initial + 4s stabilisation - Extract `` metadata: title, OG tags, favicon links, theme-colour, stylesheet URLs, font preconnects - Search for brand guidelines: `"{brand}" design system`, `"{brand}" style guide`, `site:{domain} brand` - Crawl internal links to identify page types (home, content, product, form, error) - Screenshot at 3 breakpoints: Desktop 1440×900, Tablet 768×1024, Mobile 390×844 **→ Validated by Gate 1** (see [validation-rubric.md](validation-rubric.md)) ### Step 2: CSS & Token Extraction ```bash python scripts/extract_tokens.py --stage tokens --url ``` Actions: - Extract all `--*` CSS custom properties from `:root`, `html`, `body` - Computed styles analysis on every visible element: colour, typography, spacing, radius, shadow, border, transition - Frequency analysis: count occurrences to find the real system scales - Confidence scoring: - **HIGH**: CSS custom property OR 5+ occurrences across different element types - **MEDIUM**: 2–4 consistent occurrences - **LOW**: One-off values (likely not part of the system) - Colour deep dive: hex + oklch normalisation, hue grouping, semantic role detection (brand/neutral/feedback/surface), dark mode (`prefers-color-scheme` or `.dark` class) - Typography deep dive: font families (primary/secondary/mono), full type scale, heading hierarchy (h1–h6), line heights, letter spacing, font weights, font-feature-settings - Spacing deep dive: GCD analysis for base unit (4px or 8px typical), scale generation, container max-widths, grid system detection - Borders, shadows, breakpoints, transitions/animations **→ Validated by Gate 2** ### Step 3: Asset Extraction ```bash python scripts/extract_tokens.py --stage assets --url ``` Actions: - Logo detection in `
`, `