I spend a lot of time looking at how websites are put together. My usual process was slow: open DevTools, inspect a few elements, copy colors, check font sizes, look through media queries and write everything down somewhere.
That process eventually became a Chrome extension.
Design System Extractor reads the visual system of the page in your active tab and packages the results into a ZIP. Version 1.4.0 has now been published on the Chrome Web Store.
The basic workflow
Open a page you are allowed to inspect, launch the extension and click Capture.
The extension checks the page's DOM and styles for colors, typography, spacing, border radii, shadows, breakpoints, motion, contrast pairs and interaction states. It also looks for familiar components such as buttons, inputs, cards and badges.
Before downloading, you can review the detected items and remove anything you do not want.
The ZIP can contain JSON tokens, CSS custom properties, a Tailwind theme, Style Dictionary files and an inventory of the components found on the page.
Screenshot capture was harder than expected
Capturing a webpage sounds simple until the page has sticky headers, lazy-loaded sections, nested scrolling areas or an endless feed.
I decided against generating one huge full-page screenshot. The extension finds useful sections, scrolls them into view and creates separate crops instead. Each crop can be checked before it enters the export.
This also keeps endless pages under control. Capture has a hard stopping point rather than continuing to scroll through an infinite feed.
What happens to the page data
Processing stays inside the extension on your computer.
There is no backend and no analytics service. I do not receive the page URL, extracted styles, screenshots or usage information. Temporary viewport images are kept in memory only while the component crops are being made.
The extension also avoids form values, passwords, cookies, authentication tokens and browser storage.
Try version 1.4.0
The extension is available here:
https://chromewebstore.google.com/detail/gohgeagmchgejaecbdjnngcjjcgimlkm
This is the first public release. I am particularly interested in pages where the capture misses a section, chooses a poor crop or extracts a token incorrectly. Those examples will help me decide what to fix next.
Top comments (0)