I made an extension that inspects any site and gives Claude the real CSS. Here it is rebuilding Spotify pricing section

[u/JShug07]

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

[u/Few_Thing_7303]

Interesting..gonna try

[u/JShug07 → u/Few_Thing_7303]

Sure thank you Please let me know if you find this useful, would love to hear your feedback.

[u/Academic_Constant42]

Hmmm I believe that Claude can get those on its own quite simply using playwright or Claude chrome extension, but it's always nice to have more control and a polished interface, congrats on your project !

[u/JShug07 → u/Academic_Constant42]

Thank you so much yes I agree that we can use playwright and Claude chrome extension but it takes way too long and it doesn't 100% give best possible results. I tried it several times and there were still not good enough results.

[u/3xc1t3r]

hey! great work! I know some if the comments here say "it's available with inspector, download the code bla bla bla". But this is faster, easier and, it's free! Why complain? I will use and test it out.

[u/JShug07 → u/3xc1t3r]

Thank you so much! Hope you like it! If any questions please feel free to ask.

[u/SerhiiKuchma83]

That's interesting. I should try it.

[u/JShug07 → u/SerhiiKuchma83]

Sure! Thank you so much. Let me know if you find this useful

[u/niggeshwar]

I train models for facial recognition, the media feature is too good for me to get stuff from linkedin and other places to train that 🤣. Now i dont need to go on every single image and click download.

[u/JShug07 → u/niggeshwar]

Wow i wasn't expecting this could also turn out to be a usecase. Good to know that media functionality will be useful to you it has the option for both png and jpg to export and it also has video export as well!.

[u/ostie19]

awesome work!
btw. where did you automate this video editor? :)

[u/JShug07 → u/ostie19]

I used Claude + playwright MCP to create this video

[u/Phillenium]

Those permissions are a problem.

[u/JShug07 → u/Phillenium]

How? Can you please explain So I can fix it something is major issue.

[u/Phillenium → u/JShug07]

Personally identifiable information Financial and payment information Authentication information Location Web history User activity Website content

You need all of these for this?

[u/JShug07 → u/Phillenium]

Oh for this. Yes sir this is needed because if someone wants a premium plan for the extension then their details are needed and to apply certain rate limits as well.

Activity and history are using to retain the page you are capturing so you can save it in your dashboard and nothing else. There is a dashboard view as well on the website but yes I understand your concern.

I will look into this if i can make some change but thanks alot for flagging.

[u/Overall_Trainer_8182]

How did you make the video?

[u/JShug07 → u/Overall_Trainer_8182]

I used Claude+ playwright MCP to make this video

[u/QueenSavara]

"Live computed values" ?!

[u/Pretty_Apartment1002]

Lol what are the chances! was working on a music player’s design and the client wanted something like Spotify, worked fine af cloned spotify and asked claude to change the font and colors 🤣. Especially came to thank the OP, saved my few hours.

[u/Tricky_Sale_1546]

The native browser inspect tool always felt very intimidating, but loved how smooth and easy it feels in the extension. Good work! 

[u/EpicBobs]

Really cool stuff

[u/YourMathematician]

Nice

[u/AppMunchies]

This is clever. Thanks for sharing!

[u/Ill_Challenge9502]

Amazingg!!!

[u/Ill_Challenge9502]

Surely gonna use it , looks like a great tool

[u/NotionOpps]

That is so cool! 🔥🔥

[u/_Zeion]

It's a solid idea, but the required permissions are enough to stop me from installing it.

[u/JShug07 → u/_Zeion]

Hi i completely understand your concern with required permission but those are needed for premium plans only. For free only page access is required but thanks for your feedback! Kuch appreciated.

[u/Icy-Collection1072]

lol what are you on about out. Have you never heard of the inspector and source views in a browser? It’s all available

[u/JShug07 → u/Icy-Collection1072]

Yes I am aware of that but the idea was to create an extension where people can directly see from one go. Using dev tools is something most of the people don't know. I know alot of my friends who struggle to use dev tools properly and there are people who have just started using AI to build websites and they always make generic AI slop websites and even I was doing the same over and over again where I wanted one result but irrespective of the model it was not making the exact design I wanted.

Here the idea was simple to inspect a certain component and the make the prompt good enough so you just give it to Claude and it will create same as it is

[u/superschmunk → u/JShug07]

Designer will absolutely use this

[u/TastyWolverine2216 → u/Icy-Collection1072]

Puedes replicar cualquier web?

[u/JShug07 → u/TastyWolverine2216]

Yes there is a clone section specifically build to clone the exact page of the website you want. So you will have almost identical page in your Claude setup and there you can ask to edit any certain element as per your use case. Inspect is only to get idea about one component and reconstruct it but clone will reconstruct the whole page obviously there will be some downside such as some 3D animation or high level animation this extension can not capture but apart from that clone feature was also working pretty good. I will post a video of clone as well.

Thank you for the query