Skip to main content
Glama
Sign In

Designers

by com.allthepossibles
OverviewDiscussionsAdmin

Design tokens to CSS

dtcg_to_css
Read-only

Convert W3C design tokens (DTCG) JSON into code. Pass tokens (JSON text or object) and optionally format (css, tailwind or both; default both) and prefix (added to every CSS name). Reads $type and $value with group-level $type inheritance, {alias} references (kept as var() references in CSS, resolved for Tailwind), color as a string or color object, dimension and duration as strings or {value, unit}, fontFamily, fontWeight, number, cubicBezier, shadow (one layer or several), border, transition and typography (expanded to one variable per field). Also reads the older value and type keys. Names come from the path (color.brand.500 becomes --color-brand-500) unless the token carries a name from css_to_dtcg. Validation reports missing types, circular or dangling aliases, name collisions and every token that has no CSS form (gradients, strokeStyle objects, unknown types) with the reason.

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": {
      "tokens": "<tokens>"
    },
    "name": "dtcg_to_css"
  }
}

Input Schema

NameRequiredDescriptionDefault
formatNoDefault both.
prefixNoOptional prefix for CSS variable names, e.g. ds gives --ds-color-brand.
tokensYesW3C design tokens as JSON text or an object.

Schema Changelog

Changes observed during successful MCP inspections.

  1. Added

TDQS

A3.9/5.0
Behavior5/5

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

The description adds substantial behavior beyond the read-only annotations: how $type/$value and group inheritance are read, how aliases become var() references in CSS but are resolved for Tailwind, which token kinds are supported, and how validation reports missing types, circular/dangling aliases, collisions, and unsupported tokens. This is exactly the kind of processing detail an agent needs for a conversion tool.

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?

The description is front-loaded and dense with useful conversion detail rather than filler. It is a single long paragraph, so structure could be clearer, but nearly every clause carries information about supported token forms or validation.

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

Completeness3/5

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

For a nontrivial converter with no output schema, the description explains inputs and validation behavior well but does not clearly state the shape of the return value, especially when `format` is `both`. An agent knows what to pass but not exactly what comes back.

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

Parameters4/5

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

Schema coverage is 100%, so the baseline is 3, but the description goes further by explaining what the `tokens` payload may contain (DTCG structures, aliases, legacy keys) and how naming derives from token paths. The `format` and `prefix` explanations largely restate the schema, but the token semantics add real meaning.

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

Purpose4/5

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

The description gives a specific verb and resource ('Convert W3C design tokens (DTCG) JSON into code') and lists the output formats, so the core purpose is unambiguous. It does not explicitly position itself against related siblings such as css_to_dtcg or extract_design_tokens, which keeps it from a 5.

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?

Usage is implied by the conversion framing and the detail about format and prefix, but there is no explicit when-to-use/when-not guidance or routing to alternatives. An agent can infer it is the DTCG-to-CSS converter, but is not told when another sibling would be more appropriate.

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

All Designers toolsInspect
Try in Browser
Claude Code, inside the Godot 4 editorFlockbay puts an AI agent in the real Godot 4 editor: it writes GDScript, runs your game and fixes what breaks. Free, or bring your own Claude Code or Codex.flockbay.comAd

Glama MCP Gateway

Add one secure layer between your agents and this server.

Resources