design-token-extractorlisted

Most design systems start as a pile of values that already exist somewhere: a screenshot, a stylesheet nobody has pruned, or a paragraph describing what a button looks like. This skill turns any of those into a first token set. Colors, type, spacing, radii, and shadows come back grouped and named in JSON shaped like the [W3C Design Tokens Community Group](https://tr.designtokens.org/format/) format, with `$value` and `$type` on every token, and every judgment call listed rather than hidden. It needs only what you paste or attach, so it runs the same on claude.ai, in Claude Code, and in Claude Cowork. In a project, [/design-tokens](/commands/design/design-tokens) runs it on a file and writes `design/tokens.json`. ## When to use this skill - A design exists as a screenshot and engineering wants named values, not hex codes copied one at a time. - A stylesheet has 40 grays and you want to see the actual palette before deciding which to keep. - You are preparing input for the [design-systems-librarian](/agents/design/design-systems-librarian) agent, which needs a token file to compare code against. > [!NOTE] > The output is DTCG-*style*: it uses that format's `$value`, `$type`, and `$description` keys so most token tooling can read it, but this skill does not validate against the specification and does not claim conformance. Values read from an image are estimates. Anything measured by eye is labeled as such in the notes, and a token derived from one occurrence is never present