A CSS inspector that reads like a design spec
A CSS inspector shows you the styles behind any element on a web page. PikSpec is a Chrome extension that does it in a side panel, so you can point at a heading, a button or a card and read its font, size, color, padding, margin, border, radius and shadow without opening DevTools.
Instead of a long list of rules and overrides, PikSpec groups what you need into layout, spacing, typography and appearance, and keeps the full computed CSS one click away.
How to inspect CSS on any website
1. Open the website in Chrome, open PikSpec from the toolbar and choose Grant access & analyse.
2. Open Inspect and click the element you want, or press Ctrl+Shift+C to start picking. The element is highlighted on the page while you read its styles.
3. Read the summary, open All properties to search any CSS property or value, and copy the declarations straight into your own stylesheet.
More than one element at a time
Inspect shows each element’s anatomy, the parts it is built from, and its interactive states, so you can see what changes on hover or focus. You can also copy an element’s text content.
Styles summarises the whole page: the color palette, the font families and the type scale in use. That shows you whether a value is a one-off or part of a system before you copy it.
PikSpec vs Chrome DevTools
DevTools is built for debugging. It shows every rule, including overridden ones, for one element at a time, and it does not tell you which values repeat across the page. PikSpec shows the values that actually rendered, in plain groups, and summarises the page around them. Many people use both: PikSpec to understand a design quickly, DevTools when they need to debug.
From inspected CSS to your own project
When you want the whole system rather than one element, generate design tokens: colors, type scale, spacing, radius and shadows as CSS custom properties, a Tailwind v4 theme, SCSS, JSON and a DESIGN.md brief for AI coding tools. For a single component, a reconstruction prompt packages the element’s measured styles so Claude Code, Cursor or v0 can rebuild it in your codebase.
How the design token export works · Extract a component’s CSS
Free to use
Inspecting elements, reading CSS and copying properties are unlimited and free. Token exports, reconstruction prompts and page clones come with a free allowance, and one-time credit packs add more.
Pages you can inspect
PikSpec works on normal web pages you open in Chrome. Chrome’s internal pages and the Chrome Web Store cannot be inspected. Reading a site’s CSS to learn from it is fine; reusing its brand, artwork or licensed fonts needs permission.
Contact PikSpec
Email support@pikspec.com for support, privacy requests or content reports.