Extract any website's design system as AI-ready tokens (Claude plugin and CLI) (github.com)

A new tool called designlang is revolutionizing the way developers extract design systems from websites by utilizing a headless browser to reverse-engineer complete design frameworks in just one command. This tool can crawl any website, pull every computed style from the live DOM, and generate eight output files, including an AI-optimized markdown file, Tailwind configs, Figma variables, and even a complete React theme. Unlike other tools that focus only on colors and fonts, designlang captures layout patterns, responsive behaviors across multiple breakpoints, and interaction states, while also providing WCAG accessibility scores. This capability is significant for the AI/ML community as it bridges the gap between design and development, offering a comprehensive solution for automatic design extraction and implementation. Developers can now treat deployed sites as the source of truth, automatically syncing updates to design tokens in local projects. Additionally, designlang provides tools to monitor site changes, compare multiple brands, and generate working Next.js apps with the extracted designs applied. Its ability to analyze design quality across various categories offers actionable insights, making it a powerful asset for teams focused on optimizing design systems effectively.