design-extract

Why we included this project

Design-extract is for anyone who has had to rebuild or match an existing site's look and feel: point it at a live URL and it drives a headless browser over the rendered DOM, reading the design system off the page instead of eyeballing colors and spacing by hand. The output comes as W3C DTCG tokens with primitive, semantic, and composite layers, alongside Tailwind config, shadcn/ui theme variables, Figma variables, and CSS custom properties. A single crawl can also emit platform-specific exports for SwiftUI, Jetpack Compose, Flutter, and WordPress, so web and native styling stay in sync. It goes beyond raw token dumps with a CSS health audit, WCAG contrast scores that suggest passing colors, responsive checks across breakpoints, and component anatomy typed as React stubs. Because the tool ships as an MCP server, Claude Code, Cursor, or similar agents can pull the extracted system directly and generate consistent components instead of hand-transcribing specs.