u/JShug07

follow up to my last post here (the spotify pricing one). a lot of you asked if the extension could do the whole site and not just one section, so that's what i worked on.

now when you analyse a page and hit download design system, you get one html file that's an actual design system, not a dump of hex codes:

• colours grouped by what they're for (background, text, action) and mapped to a palette
• every typeface and text style with the real sizes, weights, line heights
• spacing, corners, shadows, motion, all measured from the page
• every component with its full spec (padding, fill, type, states) plus a contrast check
• an accessibility page that grades every text colour against wcag

in the video i ran it on spotify again, then imported the file into figma with an html-to-figma plugin. it comes in as real layers with auto layout, not a flat screenshot, so you can actually design with it.

for claude: give it the file (or the DESIGN.md export) and say "build this using this design system". way less guessing than a screenshot, same as last time but for the whole system now.

same disclaimer as before, not saying go clone someone's brand lol. i use it to see how good sites structure their stuff and to start my own from something that isn't ai slop.

still free on the chrome web store: https://chromewebstore.google.com/detail/pikspec-%E2%80%93-css-inspector-f/cnpghkfbhdpcendcliogffmajlkepoig

posted this in r/ClaudeDesign : post link a few days back and people seemed to like it, so figured i'd share here too. you all probably care about this stuff more than anyone

the thing that kept annoying me: i'd find a site with really nice type or spacing and want to learn from it, but all i had was a screenshot or a messy devtools session. and when i gave claude a screenshot and said "make it look like this", it just guessed. wrong fonts, spacing off, and it ended up looking like every other ai site

so i built pikspec. you open any website, hit analyse, and it reads the design right from the page. the fonts that actually rendered, the whole color palette, the spacing scale, radius, shadows. you can also click any element, like a heading or a card, and see its exact values

i mostly use it to build references with real numbers instead of a folder of screenshots. or to figure out why a layout feels so good (it's usually the spacing and type scale tbh). sometimes i like one site's navbar and another site's cards, so i grab both

you can also export it all as a DESIGN.md, and that's what fixed the claude problem for me. give it that file and it actually follows the design instead of making something up

not trying to help anyone copy sites. it's more for learning from good design and starting from something that doesn't look generic

it's free to use. would love to know how you all collect references right now, and what would make something like this actually useful for you

link if anyone wants to try it: https://chromewebstore.google.com/detail/pikspec-%E2%80%94-website-inspect/cnpghkfbhdpcendcliogffmajlkepoig

every time i gave claude a screenshot and said "make it look like this" it just guessed. spacing off, wrong fonts, and it always came out looking like every other ai site

so i built a chrome extension (pikspec) that grabs the actual css instead. what i did in the video:

- opened spotify, opened pikspec in the side panel

- hovered over stuff to see the real font, size, colors, padding etc

- clicked the pricing cards to lock them and hit reconstruct

- copied the prompt from the dashboard and pasted it into claude

it spat out one html file and honestly it's pretty much the same as the original. same type, spacing, colors. side by side is at the end, i guess from html file you will have enough context to use it for your own website to make changes as per your tech stack.

not saying go ship someone else's site lol. i mostly use it to see how good sites are built and to start my own stuff from something that doesn't look like ai slop. Sometimes i like one website's navbar while others card design.

it's free on the chrome web store, link is here. anyone got a better way to give claude design context? genuinely curious

Chrome Extension Link - https://chromewebstore.google.com/detail/pikspec-%E2%80%94-website-inspect/cnpghkfbhdpcendcliogffmajlkepoig

Before each match you tap which team you're backing and a live map of the world fills in showing how every country is leaning. After full-time it reveals whether the planet called it right. No account, no ads just tap and watch the map move. Built it solo for the 2026 World Cup.
Would genuinely love feedback on the map UX. https://kickoffxi.com/sides
Kickoff XI Sides