Stats
Actions
Tags
From brand-extractor
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.
How this skill is triggered — by the user, by Claude, or both
Slash command
/brand-extractor:brand-extractionThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
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.
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.
The extraction follows the same five phases a human expert would use, enhanced by automation:
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.
Install before first use:
pip install playwright beautifulsoup4 lxml Pillow pixelmatch tinycss2 colormath Jinja2 requests
playwright install chromium
python scripts/extract_tokens.py --stage recon --url <target_url>
Actions:
<head> metadata: title, OG tags, favicon links, theme-colour, stylesheet URLs, font preconnects"{brand}" design system, "{brand}" style guide, site:{domain} brand→ Validated by Gate 1 (see validation-rubric.md)
python scripts/extract_tokens.py --stage tokens --url <target_url>
Actions:
--* CSS custom properties from :root, html, bodyprefers-color-scheme or .dark class)→ Validated by Gate 2
python scripts/extract_tokens.py --stage assets --url <target_url>
Actions:
<header>, <nav>, [role="banner"] — extract SVG source or highest-res raster<link rel="icon"> variants, apple touch icons, manifest.json icons→ Validated by Gate 3
Actions:
Actions:
{category}.{role}), ramp generation, WCAG contrast.tokens.json (2025.10 spec) — see design-tokens skill→ Validated by Gate 4
python scripts/screenshot_components.py
python scripts/compare_visual.py
Actions:
→ Validated by Gate 5 (see visual-validation skill)
Actions:
assets/logo-candidates.json from Step 3assets/{brand}-logo.svg (standalone, clean SVG file)Actions:
design-system.html at the extraction rootdocs/allianz/extraction/design-system.html (if available in project)This step is mandatory. The HTML design system is a primary deliverable alongside the markdown brand document and token files.
Produce the comprehensive brand document (markdown) with inline validation evidence at every section. Reference the design-system.html and extracted SVG logo. See document structure specification in the brief.
| Level | Criteria | Action |
|---|---|---|
| HIGH | CSS custom property OR 5+ occurrences across element types | Include in design system |
| MEDIUM | 2–4 consistent occurrences | Include with note |
| LOW | One-off value | Exclude unless manually confirmed |
Exclude from the design system:
#0000EE) and visited purple.ad-, .tracking-, .cookie- prefixed classesnpx claudepluginhub imehr/imehr-marketplace --plugin brand-extractorExtracts design system from websites, HTML files, or screenshots into DESIGN.md via Playwright automation, HTML inspection, and visual analysis for UI consistency.
Extracts a website's design tokens, imagery, and visual structure into a structured DESIGN.md file using Firecrawl. Useful for cloning UI, gathering brand guidance, or generating agent-ready design specs.
Extracts the complete design language (colors, typography, spacing, shadows) from any website URL. Generates 8 output files: Tailwind config, React theme, shadcn/ui theme, Figma variables, W3C design tokens, CSS variables, AI-optimized markdown, and visual HTML preview. Also runs WCAG accessibility scoring.