From a live website to a design system
Every well-designed site runs on a system: a small set of colors with clear roles, a type scale, a spacing rhythm, a few radii and shadows. Most sites never publish it. PikSpec is a Chrome extension that reads the rendered page and reconstructs that system, so you can learn from it and build with the same discipline.
What the extracted system contains
Color: primary, secondary, accent and neutral ramps, and the roles each color plays, such as background, surface, text, border and action.
Typography: body, heading and monospace families and a type scale where each step records size, line height, weight and letter spacing.
Spacing: the steps in use and the underlying rhythm when one is detected, such as a 4px or 8px base.
Shape and depth: corner radii, box shadows ordered by elevation, and gradients.
Exported in the formats you use
One generation produces DESIGN.md, tokens.json, tokens.css, a Tailwind v4 theme and tokens.scss together, so the files never disagree. The DESIGN.md explains how each value is used, which is what AI coding tools need to apply a system instead of guessing.
Why AI tools need a design system
Ask Claude Code, Cursor, v0 or Lovable to build a page from a screenshot and you get something close but generic, because it has to guess every spacing value and font size. Give it an extracted design system and it follows rules instead. Put the files in your project and point your tool at DESIGN.md when you ask it to build or restyle a page.
Measured, not the original source
An extractor sees how a page rendered, not the design files behind it. PikSpec names values by how they are used, so a token called primary is its description of a color’s role, not necessarily the original team’s name. Each export ends with a note separating measured values from inferred ones. Treat it as a documented starting point and adapt it into your own product rather than reproducing another brand.
Free to start
Every account includes free token exports each month with no card needed, and one-time credit packs add more.
Contact PikSpec
Email support@pikspec.com for support, privacy requests or content reports.