design-system-extractionlisted

# Design system extraction Reconstructs the tokens, type scale, layout system and component patterns of a site you did not build, using its real CSS instead of squinting at a screenshot and guessing. The deliverable is an implementation document, not a list of colors. ## What this method does not do It does not copy the site. What gets extracted are measurements and composition patterns. So images, proprietary icons, copy and product names stay out. If the result could be mistaken for the original by someone on their team, it went too far. Tell the user this once, up front, without lecturing. Most already know, and whoever does not needs to hear it before investing time. ## Before you start **You need browser access.** Either through a connected Chrome extension, or by asking the user to run the scripts in DevTools and paste the output back. If neither is available, say so: with screenshots alone you can estimate typography and spacing by eye, but the values will be approximate and you must say that clearly. If the environment has restricted network access, test before promising. A `curl` that comes back 403 from the proxy means you depend entirely on the browser. **Pick the pages.** Two or three, and different from each other: 1. The **home**, which usually has the widest variety of components 2. An **inner content page**, which shows the system in ordinary use 3. If one exists, a page with a **form**, which reveals input and error states Extracting from the home