export_design_tokens
Extracts a page's colors, typography, spacing, radii, shadows and borders from computed styles, returning ordinal CSS custom properties and a Tailwind theme map for any URL.
Instructions
Extract a page's design tokens (colors, typography, spacing, radii, shadows, borders) from computed styles and return ordinal CSS custom properties plus a Tailwind theme map. Token names are ordinals (--color-1, --space-1, ...), never semantic guesses. Runs on any URL — does not fetch awwwards.com.
Tool call template
Replace each placeholder with a value matching the input schema. Only required parameters are included; add optional parameters as needed.
{
"id": 1,
"jsonrpc": "2.0",
"method": "tools/call",
"params": {
"arguments": {
"url": "<url>"
},
"name": "export_design_tokens"
}
}Input Schema
| Name | Required | Description | Default |
|---|---|---|---|
| url | Yes | Absolute page URL to extract tokens from | |
| include | No | Token categories to emit (default all) | |
| maxNodes | No | Max DOM nodes to scan (default 800, clamp 50-2000) | |
| selector | No | CSS selector of the root element to scan (default 'body') | |
| viewport | No | desktop = 1440x900 (default); mobile = 390x844 iPhone-class with deviceScaleFactor 3, isMobile + hasTouch | desktop |
| publicOnly | No | Refuse private/loopback/metadata destinations and route the browser through the pinned public-address guard |