/extract

description: Extract the complete design language from a URL — DTCG tokens, Tailwind, Figma vars, motion, voice, components.
argument-hint: <url> [extra flags…]

Run **designlang** against the user-provided URL and surface the result.

npx designlang $ARGUMENTS

If no `$ARGUMENTS` were supplied, ask the user which URL to extract.

Default output goes to `./design-extract-output/`. Once it finishes, read the generated `*-design-language.md` (the AI-optimized markdown) and present a tight summary to the user:

• Primary palette (hex codes)
• Type families + scale
• Spacing base + scale
• WCAG accessibility score
• Component patterns detected
• Notable signals (motion feel, material language, brand voice tone)

Then offer follow-ups:

• `/grade <url>` — shareable HTML Design Report Card + SVG badge
• `/battle <urlA> <urlB>` — head-to-head graded comparison
• `/remix <url> --as <vocab>` — restyle in another vocabulary
• `/pack <url>` — bundle every output into one design-system directory

Useful flags the user may pass via `$ARGUMENTS`:

| Flag | Effect | |---|---| | `--full` | screenshots + responsive + interactions + deep-interact | | `--depth <n>` | crawl N additional canonical pages | | `--dark` | also extract dark mode | | `--platforms ios,android,flutter,wordpress` | multi-platform emitters | | `--smart` | LLM fallback for low-confidence classifiers (supports `ATLASCLOUD_API_KEY`, `OPENAI_API_KEY`, or `ANTHROPIC_API_KEY`) | | `--cookie-file ./session.json` | authenticated extraction |

Full reference: https://github.com/Manavarya09/design-extract#full-cli-reference

Atlas Cloud quick setup for `--smart`:

export ATLASCLOUD_API_KEY="<atlascloud-api-key>"
export ATLASCLOUD_MODEL="deepseek-ai/deepseek-v4-pro"
npx designlang https://stripe.com --smart