How to extract a website's design system: Chrome's CSS Overview vs. CSS Peeper vs. Project Wallace vs. Page Scanner

You want a site's design written down: its colors, its type scale, its spacing and radii, what changes in dark mode. Maybe it is your own site and nobody wrote it down, maybe you are rebuilding it, maybe you want an agent to make new pages that look like the old ones. All four tools below read a live site's styles. They differ in whether they read what the stylesheets declare or what the browser draws, and in whether you get a report to look at or files to build from.

Four tools at a glance

✓ yes, ✗ no, Pro and Ultra on those paid plans. An empty cell is one the product's own pages do not answer.

Declared or drawn

There are two places to read a design from. The stylesheets say what the site declares: every custom property, every rule, including rules for pages you are not on and components nobody uses any more. The browser says what it drew: the computed style of each element on the page in front of it. A read of the CSS sees the whole vocabulary; a read of the page sees which words are in use, and how often. A design system worth writing down is usually the overlap, and the counts are how you find it.

Chrome's CSS Overview

It is already in your browser. Open DevTools, open the CSS Overview panel, press Capture overview, and you get a report in five sections. In Chrome's words: "All the colors on your page", grouped by types such as background and text colors, with the "texts that have low contrast issues"; "All the fonts on your page and their occurrences"; "All the styles that have no effect, grouped by reason"; and "All the media queries defined on your page". Every value is clickable and lists the elements that use it.

That last part is its strength: a stray border color is one click away from the element that has it. The documentation still calls it "a preview feature in Chrome 96". It reports on the page you have open; the page describes no export.

Verdict: the fastest look at one page, with nothing to install.

CSS Peeper

CSS Peeper is an extension built for designers: point at the page and read its colors, its typography and its assets. Its site puts it as "Explore the typography across any site", and "Love a palette? Export it with just one click". It also lets you "grab every asset from the page", images, icons and SVGs. The free plan includes the basic inspector, exporting assets and exporting the color palette; the contrast checker, semantic color groups and locating every instance of a text style are on the paid Pro and Ultra plans.

Verdict: the most pleasant way to browse a site's look, and the only one here that hands you its images and icons.

Project Wallace

Project Wallace's design tokens analyzer takes CSS from a URL, from files or pasted in, and "statically analyzes your CSS and extracts all possible or potential design tokens out of it": colors, font sizes, font families, line heights, gradients, text and box shadows, border radii, animation durations and timing functions, and the CSS units used. It needs no page open in your browser, and a stylesheet can be pasted straight in. The same site has a CSS analyzer and a linter for the metrics side.

Verdict: the one to reach for when what you have is CSS, or when you want the whole declared vocabulary rather than what one page draws.

Page Scanner

Page Scanner's design extract runs from its command line or its MCP server, and reads the site in your own Chrome, through the extension:

page-scanner design --crawl https://example.com/ --components --out ./example-design

It reads the computed style of every element and every run of text, shadow roots included, once with the page in its light scheme and once in its dark one. --crawl follows the site's own links and reads one page of each kind, up to 10 by default, and adds them up, so the pricing table on one page and the hero on another land in one design. It writes files rather than a report:

• tokens.json in the W3C Design Tokens format, tokens.css and a tailwind.preset.js. The site's own custom properties keep their names; other values become tokens when at least two elements use them, numbered by use. A value that changes in dark mode carries its dark value.
• audit.md: values so close they were probably meant to be one, such as two grays a hair apart or a 5 px radius among 4s and 6s, and values only one page uses.
• contrast.md: every text color over the background it is drawn on, with its WCAG 2 ratio. Text over a picture or a gradient is listed apart, since the color under it is not what a reader sees.
• With --components, the buttons, fields and repeated boxes, each with its variants and what changes on hover and focus, and catalog.pdf, every variant cut from the page as vector artwork.

What it costs: Chrome with the extension, Node.js 24 and the @page-scanner/cli package; there is no button for it in the extension. Each page is read over Chrome's debugger, so Chrome's "started debugging this browser" bar shows while it runs, and the crawl opens the pages in background tabs of your own browser. It reads the top document, not the frames inside it, and it measures; it names nothing. A color with no name of its own is color-3.

Verdict: the one to use when the result is going to be built from, by you or by an agent.

Handing it to an agent: DESIGN.md

The files are measurements. Turning them into a document a person reads, with names, rules and a "do and don't", is writing, and that is a job for a model. Page Scanner's agent skills include design-md, which does exactly that: it runs the extract, reads the files in order and writes a DESIGN.md, keeping the site's own token names and reporting the audit's near-duplicates rather than promoting them.

npx skills add sbd530/page-scanner-skills

Then ask your agent for the site's DESIGN.md. Every value in it comes from what was measured, not from a screenshot.

Which should you use?

Use Chrome's CSS Overview if you want a quick look at one page and to click through to the element behind a value.

Use CSS Peeper if you are a designer browsing a site's look, or you need its images and icons.

Use Project Wallace if you have the CSS itself and want every token it declares, with no browser involved.

Use Page Scanner if you want files you can build from: tokens in both color schemes, over several pages, with the near-duplicates and the contrast failures listed, ready for an agent.

Frequently asked questions

Can I extract the design of a page behind a login? Page Scanner reads from your own Chrome, so a tab you have open and are signed in to can be read as it stands (--tab), without being reloaded.

Does any of this send the site to a server? Page Scanner's extract runs on your machine and asks no model anything; the CLI writes the files to a folder you choose. An agent you hand them to is a separate question.

Why does the dark scheme matter? A site with a dark mode defines its colors twice. A read of one scheme gives you half the palette and no way to know which colors swap.

Where this comes from

• Chrome for Developers, CSS Overview: Identify potential CSS improvements.
• CSS Peeper's home page and pricing.
• Project Wallace's CSS Design Tokens analyzer.
• Page Scanner's page-scanner design, extract_design and agent skill documentation.