Overview
Extract a complete design system from any website — colors, typography, spacing, shadows, and more
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.
Details
- Version1.0.0
- UpdatedApril 17, 2026
- Offered byakhilllkrishnan
- Size2.01MiB
- LanguagesEnglish
- Developer
Email
me.akhilu@gmail.com - Non-traderThis developer has not identified itself as a trader. For consumers in the European Union, please note that consumer rights do not apply to contracts between you and this developer.
Privacy
This developer declares that your data is
- Not being sold to third parties, outside of the approved use cases
- Not being used or transferred for purposes that are unrelated to the item's core functionality
- Not being used or transferred to determine creditworthiness or for lending purposes
