design-extractlisted

# Design Extract Extract a live website's design system and write the results into `brain/brand-guide/brand-guide.md`. Uses [designlang](https://github.com/Manavarya09/design-extract) — a headless-browser tool that reads the design system off the live DOM and emits structured tokens. --- ## Prerequisites - Node 20+ - `designlang` CLI (installed automatically if missing) --- ## Workflow ### Step 1: Get the URL Ask the user: > What website URL should I extract the design system from? If they already provided a URL in their message, confirm it. Optional follow-ups: - "Should I extract dark mode too?" (adds `--dark` flag) - "Any pages behind auth I should include?" (adds `--cookie` flag) ### Step 2: Install designlang if needed Check if designlang is available: ```bash command -v designlang || npm list -g designlang 2>/dev/null ``` If not installed, use npx to avoid global install permission issues: ```bash npx -y designlang <url> ... ``` Alternatively, if the user prefers a global install: ```bash npm i -g designlang ``` ### Step 3: Run extraction Run designlang's `brand` subcommand against the URL. This generates a full editorial brand-guidelines document (13 chapters, print-ready) along with design tokens: ```bash designlang brand <url> --out ./design-extract-output --name brand --verbose ``` If the `brand` subcommand fails or produces insufficient output, fall back to the default extraction: ```bash designlang <url> --out ./design-extract-output --name