Extract any website’s design system into AI-ready code, tokens & themes

#claude #ai #webdev #productivity

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 🙌