extract-design-tokenslisted

# Extract design tokens Pull a named, source-linked design-token set out of a URL, a set of screenshots, or a CSS dump. Output both a `:root` CSS block and a JSON file in the W3C Design Tokens Community Group draft shape. ## When to run this Run when the user gives you one or more of: - A live URL - fetch it, read linked stylesheets, inline styles, and computed values. - One or more screenshots - read colors, proportions, and type visually. - A CSS or SCSS file, pasted or attached. If none of the three are present, ask for one. Do not guess a palette or scale from a text description alone. ## Step 1 - capture, in this order Work through these six groups. A group that is hard to read is not a reason to skip it - mark it not extracted instead (Step 4). 1. **Palette** - 5 to 8 hex colors, each with a role label (naming rule in Step 2). 2. **Typography** - 1 to 2 font families plus the type scale (the distinct font sizes in use, largest to smallest). 3. **Spacing** - the base unit (commonly 4px or 8px) and the ramp built from it. 4. **Radii** - up to 3 border-radius values, smallest to largest. 5. **Shadows** - up to 3 box-shadow values, smallest to largest. 6. **Motion** - transition/animation durations and easing curves, only if the source shows motion (hover states, CSS transitions, a GIF or video the user provides). If the source gives no signal that motion exists at all, mark it not extracted instead (Step 4). Source-specific reading: - **URL**: fetch the page, rea