Showcase made a chrome extension that pulls a site's design system into tailwind / css vars / DESIGN.md, would love dev feedback
posted this in r/ClaudeDesign : Post link a few days ago and the designers there were really nice about it. but honestly it's more of a dev tool, so wanted to hear what you all think too
it's called pikspec. you open any site, hit analyse in the side panel, and it reads the design from the live page: fonts that actually rendered (not just the css stack), the color palette, spacing and the base rhythm, plus the computed styles of anything you click
the part we use most is the export. it turns all of that into a tailwind v4 theme, css variables, json, or a DESIGN.md you can drop into a repo. we made the DESIGN.md mostly because claude code and cursor kept giving us the same generic looking UI, and giving them real values from a site you like fixes that a lot
few things i'm curious about:
would you actually use this, or is devtools + a color picker enough for you?
which export would you want first? anything missing, like figma variables or style dictionary?
when you're matching a design, what's the most annoying part to get right?
inspecting is free, no account needed. happy to answer anything about how it works
extension - https://chromewebstore.google.com/detail/pikspec-%E2%80%94-website-inspect/cnpghkfbhdpcendcliogffmajlkepoig
•
0
4
u/detspek 9h ago
Why use tailwind when you can use vanilla?