Design System Extractor

About

Design System Extractor turns any webpage into a complete, production-ready design system. Three modes in one extension:

🎨 Tokens Mode
Scan any page and extract every design token — colors (grouped by role: brand, semantic, text, surface, border), typography (h1–h6, body, caption…), spacing scale, border radius, shadows, and breakpoints. Export as:
• Design Tokens JSON (W3C DTCG format)
• CSS Custom Properties
• Tailwind Config

♿ Accessibility Mode
Instant WCAG 2.1 contrast audit on every text/background pair the scanner finds. Flags touch targets smaller than 44×44px. See a single accessibility score, every failing pair with its exact ratio, and the threshold it needs to hit.

✨ Skill Creator Mode
Connect your Claude API key and generate a `.md` design skill file you can drop into any Claude project. Ask Claude to build a new page, component, or whole site that matches the source's visual quality, brand feel, and patterns — automatically.

What makes it different:
→ Multi-page scanning — accumulate tokens across an entire site into one unified system
→ Smart deduplication with semantic role assignment
→ Optional AI enrichment via Claude: auto-generates names like "brand-primary" or "danger-red"
→ All data stays local unless you opt into Claude features
→ Scans the full DOM including Shadow DOM and same-origin iframes

Perfect for:
→ Designers auditing visual consistency or reverse-engineering a site's system
→ Developers migrating a codebase to design tokens
→ Teams reviewing a site's accessibility before shipping
→ Anyone using Claude to build high-quality websites from a reference

Privacy:
Everything stays in your browser (chrome.storage.local). Your Claude API key is stored locally and is only sent to api.anthropic.com when you trigger an AI feature. No tracking, no analytics, no telemetry.