Extract any website's complete design system with one command.
design-extract is easy to set up with strong trust signals. Check agent compatibility and use-case fit before adding it to your workflow.
Repository setup guidance
gh repo view Manavarya09/design-extract --webOpen the official repository or website.
Check the README for package manager, auth, and platform requirements.
Try it in a small test task inside your agent workflow.
Design-extract is a tool that analyzes a live website and generates a full design system from it. It outputs design tokens, Tailwind config, Figma variables, and more. You can use it to clone a site's design or check its accessibility.
Design-extract (also known as designlang) is a powerful CLI tool that uses Playwright to browse any URL and extract its complete design language. It produces 17+ output files including W3C DTCG tokens (primitive, semantic, composite), Tailwind CSS configuration, shadcn/ui theme, Figma variables, motion tokens, typed component anatomy, brand voice guidelines, and page-intent labels. It goes beyond simple color extraction by analyzing layout patterns, responsive behavior across 4 breakpoints, hover/focus/active states, WCAG contrast scoring, multi-page consistency, drift checks against a live source-of-truth, visual diffs, and a shareable graded report card. It also includes an MCP server for integration with Claude Code, Cursor, and Windsurf, and can be used as an agent skill. The tool supports multiple output emitters including iOS SwiftUI, Android Compose, Flutter, and WordPress. It is licensed under MIT and requires Node 20+.
Strong trust signals; still review the README and permissions before production use.
Last commit was about 51 days ago.
3074 GitHub stars indicate community interest.
22 open issues signal maintenance load.
MIT license detected.
Extract design tokens from a competitor's website for inspiration
Clone a website's design system into a working Next.js starter
Generate a brand guidelines book from any live site
Check WCAG contrast scores and get remediation suggestions
Fuse two designs together (visuals from one, voice from another)
The tool sends a headless browser to the target URL, which may be detected as a bot by some sites.
Extracted design tokens may be subject to copyright or trademark of the original website owner.
Running on many pages from the same domain could trigger rate limiting or IP blocking.
3,074
Stars
279
Forks
22
Issues
MIT
License
Bidirectional MCP bridge that lets AI draw UI directly on Figma canvas and read designs back as structured data.
Argos is an open source visual testing platform that detects unintended UI changes to help teams maintain quality.
Generate design system documentation for UI components directly from your AI agent, rendering into Figma or portable .md files.
Extract any website's complete design system with one command.
Frontend developers who need to reverse-engineer design systems, Design system engineers building and maintaining token libraries, Accessibility auditors checking WCAG compliance
The setup section provides repository-level starting guidance, not a guarantee of an independently verified installation. Check the official README and release notes.
The tool sends a headless browser to the target URL, which may be detected as a bot by some sites. Extracted design tokens may be subject to copyright or trademark of the original website owner.
Similar or complementary options to evaluate include figma-ui-mcp, Argos, uSpec.
Jun 7, 2026
3 security/trust notes recorded.
Setup difficulty is 2/5.