Design Extractor by BENIBIX

Any website's design system in one click: colours, type, spacing and components, as design tokens, CSS, Tailwind or DESIGN.md.

Rebuilding a site's look by hand means opening the developer tools on element after element and guessing at the spacing. Design Extractor reads the whole design system in one click and hands it to you in the format you work in. What it does: • Colours with their roles: Primary, background, text, muted text, surfaces, borders and the state colours, worked out from the site itself, not a pile of swatches. Copy any of them as HEX, RGB, HSL or OKLCH. • Contrast that is really checked: Every piece of text against what is really behind it, with the nearest colour that passes WCAG AA and the site's own colour that does. • Type in the site's own fonts: Families, the type scale and one style per element, drawn in the fonts the site loaded, with where to get each font. • Components, live: Buttons, inputs, links, cards, navigation, tabs, badges, alerts and more, drawn with the site's own styles. Hover, focus and press them: the states are the site's own rules. • Take it with you: An HTML document of the report with the sections you pick, DESIGN.md for an AI coding assistant, W3C design tokens, CSS variables with the site's dark values, or a Tailwind v4 theme. Read the file first, then download or copy it. • Pick any element: Point at anything on the page for its type, colours, contrast and spacing, with the site's own CSS variable names, and copy it as CSS. How to use it: 1. Open any website: The home page, a pricing page, a form: any page whose design you want. 2. Click Design Extractor: Or press Alt+Shift+E. The report opens in the next tab with the site's design system. 3. Export it: Pick a format in the Export pane and download or copy it. Read more pages of the site and the report combines them. What it asks for, and why: • The tab you click it on, only then: To read the page you are on, only when you click its button, press its shortcut or choose its right-click item, and only that tab. • Run its code on pages it may reach: To run its reader, and Pick, on the page in that tab after your click. The reader measures the drawn page and returns its colours, fonts, spacing and components. • Keep its settings in your browser: To keep what it read on your device, so the report and the list of sites are there when you come back. • Keep more than the usual amount in your browser: A site's report keeps the font files it uses, so the type is shown in the real fonts. A site can take a few megabytes, more than the usual quota. • Add items to the right-click menu: To add "Pick an element's design" to the right-click menu of a page. • access to https://*/*: Asked for while you use it, for one domain at a time, never at install: to read a site's stylesheets that are served from another domain the page cannot read. • access to http://*/*: The same, for a site that still uses http. Privacy: nothing you do or see leaves your browser. No account, no tracking, no ads. Its page, with every permission explained: https://extensions.benibix.com/design-extractor/ Questions and ideas: https://extensions.benibix.com/design-extractor/#feedback Design Extractor is made by Behnia Zarei (BENIBIX) and is not made, endorsed or supported by Google or Mozilla.