export_design

Convert a brand's tokens to Tailwind, CSS vars, DTCG, or Figma Variables — agent-loop edition.

Convert a design’s tokens to a target format. Returns ready-to-paste output for Tailwind v4 CSS, CSS custom properties, W3C Design Tokens JSON, or Figma Variables—same emitters as the CLI’s export command, returned as a string for agent integration.

Input schema

{
  "type": "object",
  "required": ["slug", "format"],
  "properties": {
    "slug": {
      "type": "string",
      "description": "The design slug, e.g. \"stripe\", \"linear\", \"figma\". See list_designs."
    },
    "format": {
      "type": "string",
      "enum": ["tailwind", "css", "dtcg", "figma"],
      "description": "Output format: tailwind (v4 CSS @theme), css (root variables), dtcg (W3C Design Tokens), or figma (Figma Variables JSON)."
    }
  }
}

Output

{
  "content": [
    {
      "type": "text",
      "text": "/* The exported content as a plain string */\n@theme {\n  --color-bg: #ffffff;\n  --color-text: #0a2540;\n  --color-brand: #635bff;\n  ...\n}"
    }
  ]
}

The response wraps the exported content (CSS, JSON, or JavaScript) as a plain text string. No metadata — just the raw output ready to paste into a file or build tool.

Example: agent dialogue

User: “Give me Anthropic’s tokens as a Tailwind theme.”

Agent: Calls export_design({ slug: 'anthropic', format: 'tailwind' }) → returns:

@theme {
  --color-accent: #7c3aed;
  --color-neutral-950: #1a1a2e;
  --color-neutral-900: #2d2d44;
  --color-neutral-100: #f5f5f7;
  --color-neutral-0: #ffffff;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
}

Agent: “I’ve exported Anthropic’s tokens as Tailwind v4 CSS. Paste this into your theme layer or copy to a file. Should I also export it to other formats?”

User: “Export Stripe’s colors to Figma.”

Agent: Calls export_design({ slug: 'stripe', format: 'figma' }) → returns JSON array of variables.

Agent: “Done. Stripe’s 8 colors are formatted for Figma Variables. You can now import them directly via the Figma API or Tokens Studio.”

Supported formats

tailwind — Tailwind v4 CSS

Emits a @theme block ready to paste into your Tailwind CSS entry or layer. Default format.

@theme {
  --color-bg: #ffffff;
  --color-text: #0a2540;
  --color-brand: #635bff;
  --radius-sm: 4px;
  --radius-md: 8px;
}

For full details on Tailwind v3 JSON export (legacy), see the CLI docs.

css — Raw CSS variables

Emits a :root block with bare CSS custom properties, no framework dependencies.

:root {
  --color-bg: #ffffff;
  --color-text: #0a2540;
  --color-brand: #635bff;
  --radius-sm: 4px;
  --radius-md: 8px;
}

Use this for vanilla CSS, SCSS, or frameworks other than Tailwind.

dtcg — W3C Design Tokens Community Group JSON

Emits tokens in the W3C Design Tokens format for use with tools like Tokens Studio or other DTCG-compatible platforms.

{
  "$schema": "https://design-tokens.github.io/community-group/format/",
  "color": {
    "bg": {
      "$value": "#ffffff",
      "$type": "color"
    },
    "text": {
      "$value": "#0a2540",
      "$type": "color"
    },
    "brand": {
      "$value": "#635bff",
      "$type": "color"
    }
  }
}

figma — Figma Variables format

Emits Figma Variables JSON suitable for import via the Figma API or Tokens Studio plugin. Only colors are exported.

{
  "variables": [
    {
      "name": "bg",
      "type": "COLOR",
      "value": "#ffffff",
      "description": "Brand Name · bg"
    },
    {
      "name": "text",
      "type": "COLOR",
      "value": "#0a2540",
      "description": "Brand Name · text"
    }
  ]
}

For complete format details and options (e.g., Tailwind v3 JSON), see the CLI export reference.

  • get_design — Fetch the full DESIGN.md (frontmatter + body) if you need everything, not just exports.
  • list_designs — Discover available brands before calling export.
  • CLI export — Same emitters, human terminal use.