extract-designlisted

# Extract Design Language <!-- Vendored from github.com/Manavarya09/design-extract (MIT) - see UPSTREAM.md. Local changes: version pinned, lifecycle scripts skipped, output dir fixed, steps 3-4 point at the design-system skill instead of copying themes. --> Run the `designlang` extractor against one public URL and read what it found. This skill produces RAW data only. Turning it into the project's rules is the job of the `design-system` skill. ## 1. Run the extraction (pinned version) Use the pinned, audited release. Do not use `@latest`. If Google Chrome is installed (fast path, skips the 150 MB Chromium download): ```bash npm_config_ignore_scripts=true npx -y designlang@12.21.0 <url> \ --system-chrome --depth 2 --screenshots --wait 2500 --no-history \ -o .design-extract/<host> ``` If Chrome is not installed, drop both `npm_config_ignore_scripts=true` and `--system-chrome`. The package postinstall then downloads Playwright Chromium. - Dark-mode sites with a light variant: add `--dark`. - Single-page apps that render late: raise `--wait` (ms). - Never pass `--smart`: it sends a page digest to a third-party LLM API. - Never pass `--cookie` / `--cookie-file` unless the user gives them explicitly. ## 2. Read the results ```bash ls .design-extract/<host> ``` Read, in this order: 1. `*-DESIGN.md` - compact summary (colors, type, layout, elevation, shapes). 2. `*-variables.css` - every CSS custom property the site declares. Most exact source for colors. 3.