Open Source Self-Hosted Design

Design Extract

Reverse engineer any website design system with one command

MCP Server Agent Skills Design Shadcn UI Design Token Design System Skills SH

docker javascript nextjs nodejs react Tailwind CSS typescript

Visit Website Repository Main Repository Official Website

Screenshots

A closer look at the product interface and key surfaces.

5 images

At a glance

Primary use case: Reverse engineer any website design system with one command
Best for: Design — MCP Server, Agent Skills
Stack: docker, javascript, nextjs, nodejs
License: MIT
Maintenance: 4 weeks ago
Access: Open source · Self-hosted

Resource map

Website

https://github.com/Manavarya09/design-extract

Repository

https://github.com/Manavarya09/design-extract

Source

https://github.com/Manavarya09/design-extract

About this tool

Design Extract is a CLI tool that captures full design systems from any live URL. It generates DTCG tokens, Tailwind v4 configs, and Figma variables while providing WCAG accessibility audits and multi platform component exports.

Repository

Stars

3,348

Forks

319

Issues

License

MIT

Last Push

4 weeks ago

Features

Instantly captures DTCG tokens and Tailwind v4 configurations from live websites.
Exports design systems to Figma variables and multi platform code components.
Conducts comprehensive CSS health audits and WCAG accessibility contrast scoring.