Design Extract is a command-line tool that extracts complete design systems from websites and converts them into portable, platform-specific formats.
The tool solves the problem of manually documenting design systems by automatically scraping a website's visual design, parsing its CSS and component structure, and generating standardized design tokens in DTCG format. It works by using Playwright to navigate and analyze websites, extracting both primitive tokens like colors and typography and composite tokens that represent higher-level design patterns. The extracted tokens can then be emitted to multiple target platforms and formats, eliminating the need to manually recreate design systems across different technology stacks.
Teams should adopt this tool if they need to quickly document an existing website's design system or port it to new platforms. It suits projects where design consistency must be maintained across iOS, Android, Flutter, WordPress, and web applications, or where a Tailwind configuration needs to be generated from a live site. The tool integrates with Claude Code, Cursor, and Windsurf as an MCP server, making it accessible within AI-assisted development workflows. It also includes a Chrome extension for browser-based extraction and provides CSS health audits and WCAG remediation suggestions, which are valuable for teams concerned with accessibility compliance.
The project shows active development with regular updates to support emerging standards and tools. The codebase maintains broad platform coverage, continuously adding emitters for new frameworks and design tools. The tool is actively maintained to work with current versions of its dependencies and integrates with contemporary AI development environments. Documentation and examples are kept current to reflect the tool's expanding capabilities across design token standards and code generation targets.
