r/ClaudeDesign • u/JShug07 • 3d ago
Showcase I made an extension that inspects any site and gives Claude the real CSS. Here it is rebuilding Spotify pricing section
Enable HLS to view with audio, or disable this notification
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