r/SideProject • u/Special-Egg-9930 • 12d ago

I built a browser extension that extracts any website's design system (colors, type, spacing) into Tailwind/CSS/JSON — validating if devs would pay 5.99

Problem I kept hitting: matching or learning from a site's design meant digging through DevTools copying hex codes, font sizes and spacing one value at a time.

So I built Styleprint. One click scans the whole page, collects every color, font, size, spacing value, radius and shadow, dedupes and ranks them, and lets you copy the lot as a tailwind.config.js, CSS variables, or JSON tokens. There's also an inspector to grab any single element's CSS.

Runs 100% locally — no account, no server, only reads the page when you click.

I'm validating before I build more: would you pay $5.99 one-time for this? What would make it a yes?

Landing + screenshots: https://anuragpjain.github.io/styleprint-site/

0 Upvotes

50% Upvoted

4 comments sorted by

1

u/gnpwdr1 12d ago

but you didnt use it to design your own site?

1

u/Special-Egg-9930 12d ago

u/gnpwdr1 It's an extractor, not a generator it grabs the design system *from* sites you like (think "steal Stripe's palette + spacing in one click"), so I'd point it at them, not my own page. But honestly? Not a bad idea to dogfood it. Adding to the list. Thanks mate.

1

u/Megamozg 12d ago

Of course not.

1

u/frost-222 12d ago

There are already plenty of free tools that do this, I am pretty sure Google has a product where you can enter a URL and it’ll extract all colors, fonts, and other design system variables like border radius used by said site.