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.
Get tools like this every Wednesday
One featured tool, three on the radar. No fluff.
Free vs Self-Hosted vs Paid
fully free## Free 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.
License: MIT License
Use freely, including commercial. Just keep the license.
Commercial use: ✓ Yes
About
- Owner
- Manav Arya Singh (User)
- Stars
- 702
- Forks
- 58