Skip to main content
Glama

export_design_tokens

Read-only

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

NameRequiredDescriptionDefault
urlYesAbsolute page URL to extract tokens from
includeNoToken categories to emit (default all)
maxNodesNoMax DOM nodes to scan (default 800, clamp 50-2000)
selectorNoCSS selector of the root element to scan (default 'body')
viewportNodesktop = 1440x900 (default); mobile = 390x844 iPhone-class with deviceScaleFactor 3, isMobile + hasTouchdesktop
publicOnlyNoRefuse private/loopback/metadata destinations and route the browser through the pinned public-address guard

Schema Changelog

Changes observed during successful MCP inspections.

  1. Changed1 schema field changedv1.18.0
    • addedInput schema / properties / publicOnly
      Added value: +{
      +  "description": "Refuse private/loopback/metadata destinations and route the browser through the pinned public-address guard",
      +  "type": "boolean"
      +}
  2. Addedv1.15.1

TDQS

A3.9/5.0
Behavior4/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

Annotations already declare readOnlyHint=true, destructiveHint=false and openWorldHint=true, so the safety profile is covered. The description adds genuine behavioral context beyond that: token names are ordinals (--color-1, --space-1) and never semantic guesses, which sets expectations about the return shape, and it discloses the awwwards.com exclusion. It stops short of explaining the publicOnly address-guard behavior or rate/scan limits.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness4/5

Is the description appropriately sized, front-loaded, and free of redundancy?

Two tight sentences, front-loaded with the core action and output format, with the ordinals caveat following logically. The 'does not fetch awwwards.com' clause is somewhat unexpected without prior context but does earn its place as a disambiguation note; nothing else is wasted.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness4/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

With six parameters, no output schema and open-world browsing behavior, the description does the essential work: it names the extraction source (computed styles), the return format (CSS custom properties + Tailwind map) and naming convention. Remaining gaps are minor for a read-only tool whose annotations and fully documented schema carry most of the load.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema description coverage is 100%, so every parameter (url, include, maxNodes, selector, viewport, publicOnly) is already documented in the schema, including defaults and the clamp range. The description adds only the conceptual note that emitted names are ordinal rather than semantic, which is not tied to any specific parameter, so the baseline of 3 applies.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description pairs a specific verb ('Extract') with a concrete resource ('a page's design tokens') and enumerates the categories covered (colors, typography, spacing, radii, shadows, borders). It also states the output artifacts (ordinal CSS custom properties plus a Tailwind theme map), so an agent can distinguish it from generic analysis siblings like analyze_page_structure or get_site_elements.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines3/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

It establishes the applicable input scope ('Runs on any URL') and a negative constraint ('does not fetch awwwards.com'), which is implicit when-not guidance. However, it never names an alternative sibling or states the condition that would make an agent pick this tool over analyze_page_structure or get_site_elements, so usage is only implied.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.