What PikSpec is
PikSpec is a Chrome extension and web workspace made by a small independent product team. It shows the design system behind any website, its fonts, colours, type scale, spacing, radii and shadows, and turns it into design tokens, a DESIGN.md, or an AI Kit that makes Lovable, Claude, Cursor and other AI tools build in that style.
The guides, comparisons and design system pages on this site are written and checked by the same team. They are published under the PikSpec name rather than a personal byline, and every one shows the date it last changed.
How PikSpec measures a website
PikSpec reads the page as Chrome rendered it, not a screenshot. Once you grant access to a site, it reads the computed styles of the elements on the page, the font faces the page actually loaded, and the CSS rules the page ships, including its own breakpoints, hover states and animations.
Colours are exact values from those styles, so there is no eyedropper or anti-aliasing guesswork. Fonts are the faces that rendered, not just the first name in a font-family list. Spacing, radii and shadows are grouped from the values the page repeats, which is how a scale or a rhythm shows up in real CSS.
Nothing is read from a site until you choose Grant access & analyse on it, and PikSpec works only on pages you can already open in your browser.
What is measured and what is inferred
Values are measured. Names and roles are inferred: calling a colour “primary” or a size “heading 2” is PikSpec’s reading of where the page uses it, and you can see the evidence behind each one. Where a site uses a licensed font, PikSpec names it and suggests a free alternative rather than redistributing the font.
How the design system pages are made
Each page in the design systems library is measured from the public home page of that site with PikSpec, on the capture date shown on the page. They are not official design systems and are not affiliated with or endorsed by the companies they describe. A site that redesigns will drift from its page until it is captured again.
How we write comparisons
PikSpec is our product, so our comparison pages are not neutral. We write them from the other tool’s public listing and documentation, say what it does better, and say when to choose it. Each page shows when it was last checked.
Corrections
If a value, a font or a claim on this site is wrong, email us and we will check it and correct the page. When a correction changes what a page says, its updated date changes too.
Questions
Who makes PikSpec?
A small independent product team. The extension, the website and the guides on it are built and written by the same people, and published under the PikSpec name.
Are PikSpec’s values measured or estimated?
Measured. Colours, sizes, spacing, radii and shadows are read from the styles Chrome computed for the page. Only the names and roles given to those values, such as “primary” or “heading 2”, are inferred.
Are the design system pages official?
No. Each is measured from that site’s public home page on the date shown, and none is affiliated with or endorsed by the company it describes.
How do I report a mistake?
Email support@pikspec.com with the page and what looks wrong. We check it, correct the page and update its date.
Contact PikSpec
Email support@pikspec.com for support, privacy requests or content reports.