design-extract
CLI tool that reverse-engineers websites to extract complete design systems
The Lens
Reverse-engineers any website to extract its complete design system. Feed it a URL and it pulls out color tokens, typography scales, spacing values, component patterns, and Tailwind configs. Exports to Figma variables, React themes, or raw JSON.
One npm install, one command. Runs headless Chrome to capture the site across viewports and analyzes the computed styles. Includes accessibility scoring for contrast ratios.
Solo developers and designers who want to study how production sites are built will get the most out of this. Zero cost, MIT licensed.
The catch: it captures what's rendered, not what was intended. Computed styles can be messy, and auto-generated Tailwind configs may need cleanup before use in production.
Free vs Self-Hosted vs Paid
fully freeFree Tier
Completely free. One npm install, one command. No accounts, no API keys, no usage limits.
Self-Hosted
Runs entirely locally via headless Chrome. No server needed.
Paid
No paid tier. MIT licensed, fully open source.
Completely free and open source.
Get tools like this every Wednesday
One featured tool, three on the radar. No fluff.
A low score is not a verdict on quality. Young and niche tools start low by design. How we calculate scores
License: MIT License
Use freely, including commercial. Just keep the license.
Commercial use: ✓ Yes
About
- Owner
- Manav Arya Singh (User)
- Stars
- 3,363
- Forks
- 318