What is design-extract?

designlang is a command-line tool that reverse-engineers the design system of any website. Point it at a URL and it automatically reads that site's visual language, colors, typography, spacing, animations, component patterns, layout grids, responsive breakpoints, and more, then produces over 17 ready-to-use files from that analysis. A design system is the underlying set of visual rules a website follows: which fonts it uses at what sizes, what its brand colors are, how much space sits between elements, how buttons look when hovered. designlang extracts all of this automatically without manual inspection. The output files are formatted for immediate use in your own projects. They include design tokens in the W3C standard format (a portable JSON specification for design values), a Tailwind configuration file, Figma variable imports (for a widely-used design tool), typed component stubs for React, brand voice notes, and paste-ready prompts for AI design tools like Lovable and Cursor. Beyond token extraction, it can grade a site's design quality with a letter score, compare two sites head-to-head, restyle a site's visual vocabulary into different aesthetic categories (like brutalist or Swiss international), generate a working starter app cloning the design, and check for accessibility problems by scoring color contrast against the WCAG standard (international guidelines for web accessibility). It also runs as an MCP server, letting AI coding assistants like Claude Code and Cursor query extracted design data directly during development. The full README is longer than what was provided.