Design Extract is a Claude Code plugin + npm tool that turns any website into a complete, structured design system.
Run a single command on any URL and it extracts the entire design language — including colors, typography, spacing, shadows, and reusable components.
Try it instantly:
npx designlang https://stripe.com
Instead of dumping raw styles, it generates an AI-optimized markdown format that tools like Claude or ChatGPT can actually understand and use.
So you can go from:
“extract design from stripe.com”
→ to
“build me a landing page using this design system”
…and get surprisingly accurate results.
What you get from one command:
• AI-ready design system (markdown structured for LLMs)
• Tailwind config
• CSS variables
• React theme
• shadcn/ui theme
• Figma variables (JSON)
• Visual HTML preview
• W3C design tokens
Extra features:
• Compare design systems across websites
• Crawl multiple pages for full system extraction
• Capture real component screenshots
• Extract dark mode styles
• Track design changes over time
Works as:
• Claude Code plugin (/extract-design)
• CLI tool (npx designlang https://stripe.com)
GitHub:
https://github.com/Manavarya09/design-extract
Built this because copying “vibes” from a website is easy, but extracting its actual system is painful.
Would love feedback, ideas, and brutal criticism 🙌