Extract design tokens
extract_design_tokensExtract the design tokens a stylesheet actually uses. Pass css (free) or a public url (Pro; every linked and inline stylesheet is read). Returns colors (hex, with alpha kept, grouped as text, background, border), font families, font sizes, weights, line heights, spacing from margin, padding and gap, radii, shadows, z-index values, media-query breakpoints, and transition durations and easings, each with a use count and where it was used. Custom properties are resolved through var() chains, with light and dark values side by side and unused variables listed. Output includes a W3C design tokens (DTCG) tree of the custom properties and a markdown summary. Reads CSS text only: styles injected by JavaScript, computed styles and inline style attributes are not seen.
Tool call template
This tool declares no required parameters. Add optional parameters from the input schema as needed.
{
"id": 1,
"jsonrpc": "2.0",
"method": "tools/call",
"params": {
"arguments": {},
"name": "extract_design_tokens"
}
}Input Schema
| Name | Required | Description | Default |
|---|---|---|---|
| css | No | CSS text to read (a stylesheet, or several concatenated). Free up to 100,000 characters; Pro up to 2,000,000. | |
| url | No | Pro only. Public page whose linked and inline stylesheets are fetched (up to 12 sheets, 5 MB). |