Extracting design systems from live websites

The screenshot used to be the ceiling of what an agent could learn about another team's design. That ceiling is gone. Current extractor tools drive a headless browser, read computed styles, and hand back a structured description of a live site: the palette as actual values, the type scale as rendered sizes, spacing rhythms, logo and icon assets, even the content as clean markdown. From the terminal, in one call, in a shape an agent can use as context on the next prompt.

That is a different category of input from a screenshot. A screenshot invites the agent to guess; an extraction hands it the answers. The interesting question is not whether this works — it does — but what it is legitimately for.

The strongest use is pointing it at property you already own. Extracting your own production site and diffing the result against your documented tokens is the fastest design-system audit available: it surfaces drift, hardcoded values, and the components that never got migrated, with evidence rather than opinion. The same move de-risks migrations and rebrands — extract the current state, treat it as the baseline contract, and let the agent verify the new implementation against it.

Competitive teardowns are the second honest use. Understanding how another product structures its hierarchy, density, and type scale has always been part of design research; extraction just makes the notes precise. The line is reuse. Pulling a competitor's palette and fonts into your own product is not research, and brand assets that arrive in a tidy JSON file are exactly as protected as they were on the website. The convenience of the tool does not change the rights of the material, and client work inherits whatever you feed into it.

• Audit your own sites: extraction versus documented tokens is a drift report you can generate weekly.
• Baseline migrations and rebrands with an extraction before the first component is touched.
• Use competitive extractions for understanding structure and density, not for harvesting palettes, type, or assets.
• Record the source and date of any extracted reference that ends up in a research packet, the same way this site's research runs do.

The inventory file at the centre of our canvas-sync experiments is what an extraction looks like when you own the source: tokens, components, and page snapshots generated from the repository instead of scraped from the rendered site. The two approaches meet in the middle — extraction tells you what your product actually ships, the inventory tells you what it was supposed to ship, and the diff between them is the most honest design-system status report you can get.