See the design system behind any website.

PikSpec is a Chrome extension for understanding how websites are designed. It is a CSS inspector, font finder, color picker and design system extractor in one side panel. You can inspect any element, see every font and color a page uses, export design tokens and a DESIGN.md for AI coding tools, and save a page to study later.

Open the website in Chrome, open PikSpec and choose Grant access & analyse. The Styles tab lists every font family on the page with its sizes, weights and line heights. To check one heading or paragraph, open Inspect and click it. PikSpec reports the font that actually rendered, not just the first name in the CSS font stack.

Open Inspect in PikSpec and click the element you want. You see its layout, spacing, typography and colors, and All properties lets you search every CSS property and copy the declarations straight into your stylesheet. To rebuild a whole component, create a reconstruction prompt and give it to Claude Code, Cursor or v0.

Analyse the page and open Styles. PikSpec reads the exact color values from the rendered page, so there are no eyedropper rounding errors, and groups them by role: background, surface, text, border and action. You can export the palette as CSS variables, a Tailwind theme, SCSS or JSON.

Yes. The Tokens tab reads the whole page and exports its colors, type scale, spacing, radius and shadows as DESIGN.md, tokens.json, tokens.css, a Tailwind v4 theme and tokens.scss, all from one generation. The values are measured from what the browser rendered, and each export notes what was measured versus inferred.

Export the DESIGN.md and tokens, add them to your project, and ask your AI tool to follow DESIGN.md when it builds or restyles a page. With real fonts, colors and spacing to follow instead of guesses, the result looks designed rather than generic. For a single component, copy its reconstruction prompt instead.

Yes, to start. Inspecting elements, finding fonts and colors, and downloading media are free with no count limit. Every account also gets 3 token exports and 10 reconstructions each month and 2 page clones, with no card needed. One-time credit packs add more, with no subscription.

DevTools is built for debugging: it shows every rule for one element at a time, including overridden ones, and does not tell you which values repeat into a system. PikSpec shows the values that actually rendered in plain groups, summarises the whole page’s fonts, colors and spacing, and exports them as design tokens and a DESIGN.md. Many people use both.

Studying how great sites handle type, color and spacing is how designers have always learned, and everything PikSpec reads is already visible to anyone in Chrome DevTools. Use what you learn to build your own design rather than copying a brand, and only reuse content, logos and licensed fonts you have the right to use.