Design MD Extractor

A Chrome extension that reads a live site's computed styles and CSS variables, then turns them into a DESIGN.md — a portable spec of a brand's colors, type, spacing, and radii that you can hand straight to Claude.

Download for Chrome (.zip)

v1.0.0 · unpacked extension, not yet on the Chrome Web Store

How it works

  1. Open any website and click the Design MD Extractor icon in your Chrome toolbar.
  2. It walks the page's computed styles and named CSS variables (--brand-*, --color-*, --theme-*, etc.) and ranks colors, type, and spacing by how often they're actually used.
  3. It copies a ready-made prompt — captured styles plus the DESIGN.md spec — straight to your clipboard, ready to paste into Claude.

Installing it

Since it isn't published to the Chrome Web Store yet, install it as an unpacked extension:

  1. Download and unzip the file above.
  2. Go to chrome://extensions and turn on Developer mode (top right).
  3. Click Load unpacked and select the unzipped design-md-extractor folder.

Already have a DESIGN.md? Blend it with inspiration from other sites using Design MD Mixer.