Retour au feed
Application Web90

Pikspec

I made an extension that inspects any site and gives Claude the real CSS. Here it is rebuilding Spotify pricing section | This helps in more AI Slop

r/ClaudeCodeu/JShug0730 septembre 2026

Post Redditchromewebstore.google.com
Capture du projet

Résumé

Pikspec est une extension Chrome qui inspecte les sites web pour récupérer leur CSS et aider Claude à reconstruire des éléments de design avec précision. L'auteur a utilisé cette extension pour reconstruire la section de tarification de Spotify avec succès.

Pourquoi c’est intéressant

Pikspec résout le problème de la difficulté pour Claude de comprendre le contexte de design d'un site web à partir d'une simple capture d'écran. Cela ouvre des possibilités pour la création de sites web plus personnalisés et précis avec l'aide de l'IA.

Comment Claude est utilisé

L'extension Pikspec permet de récupérer les feuilles de style CSS d'un site web pour fournir à Claude un contexte de design plus précis. L'auteur utilise cela pour reconstruire des éléments de sites web avec Claude.

Idées dérivées

  1. 01

    Téléchargeur de ressources web

    Un outil qui permet de télécharger les polices et les images utilisées sur un site web pour les intégrer dans des projets personnels.

  2. 02

    Analyseur de design web

    Un plugin qui analyse la structure d'un site web pour suggérer des améliorations de design et de navigation à l'aide de Claude.

  3. 03

    Générateur de thèmes web

    Une application qui utilise Claude pour générer des variations de design pour un site web en fonction de préférences utilisateur.

Afficher le post original
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 (https://chromewebstore.google.com/detail/pikspec-%E2%80%94-website-inspect/cnpghkfbhdpcendcliogffmajlkepoig)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