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.
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.
Repository setup guidance
Strong trust signals; still review the README and permissions before production use.
Last commit was about 96 days ago.
3074 GitHub stars indicate community interest.
22 open issues signal maintenance load.
MIT license detected.
3 security/trust notes recorded.
Setup difficulty is 2/5.
Generate design system documentation for UI components directly from your AI agent, rendering into Figma or portable .md files.
Argos is an open source visual testing platform that detects unintended UI changes to help teams maintain quality.
Bidirectional MCP bridge that lets AI draw UI directly on Figma canvas and read designs back as structured data.
A Claude skill to inspect and build Figma design systems with WCAG checks, component scoring, and optional code sync.
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+.
3,074
Stars
279
Forks
22
Issues
MIT
License
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 uSpec, Argos, figma-ui-mcp.
Aug 20, 2026