export

Convert DESIGN.md tokens to Tailwind, CSS variables, DTCG JSON, or Figma Variables.

Synopsis

design-md export <file> --to <tailwind|css-tailwind|json-tailwind|css|dtcg|figma> [--tailwind-version v3|v4]

Description

Read a DESIGN.md file and emit its tokens in a format suitable for your build tool or design system. The --to flag controls the output format. By default, Tailwind v4 CSS @theme is emitted; use --tailwind-version v3 or --to json-tailwind to export as v3 JSON instead.

This command is useful when you want to:

• Feed tokens into a Tailwind build without hand-copying them
• Generate a W3C Design Tokens JSON for tool compatibility
• Export color tokens to Figma Variables
• Consume tokens as raw CSS :root variables in other workflows

Options

Supported formats

tailwind / css-tailwind — Tailwind v4 CSS

Emits a @theme block ready to paste into your Tailwind CSS layer. This is the default output format.

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

Save to a file and import it into your Tailwind entry point, or pipe directly into your build.

json-tailwind — Tailwind v3 JSON

Emits a CommonJS module exporting the Tailwind v3 theme.extend configuration object.

module.exports = {
  "theme": {
    "extend": {
      "colors": {
        "bg": "#ffffff",
        "text": "#0a2540",
        "brand": "#635bff"
      },
      "borderRadius": {
        "sm": "4px",
        "md": "8px",
        "lg": "12px"
      }
    }
  }
}

Suitable for v3 projects or as a replacement for the colors and borderRadius sections in your tailwind.config.js.

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;
  --radius-lg: 12px;
}

Use this when you want tokens for vanilla CSS, SCSS, or a framework 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"
    }
  },
  "radius": {
    "sm": {
      "$value": "4px",
      "$type": "dimension"
    },
    "md": {
      "$value": "8px",
      "$type": "dimension"
    }
  }
}

figma — Figma Variables import format

Emits Figma Variables JSON suitable for import via Figma’s API or the Tokens Studio plugin.

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

Only colors are exported to Figma; other token types are not included.

Examples

Export to Tailwind v4 CSS

npx @webdesignhot/design-md export DESIGN.md --to tailwind

Output:

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

Export to Tailwind v3 JSON

npx @webdesignhot/design-md export DESIGN.md --to tailwind --tailwind-version v3

Or use the explicit format:

npx @webdesignhot/design-md export DESIGN.md --to json-tailwind

Pipe to a file

npx @webdesignhot/design-md export DESIGN.md --to tailwind > tailwind-theme.css

Export to raw CSS variables

npx @webdesignhot/design-md export DESIGN.md --to css

Export to Figma Variables format

npx @webdesignhot/design-md export DESIGN.md --to figma | pbcopy

Then paste the JSON directly into a Figma Variables import tool or your build script.

Export to W3C DTCG JSON

npx @webdesignhot/design-md export DESIGN.md --to dtcg

Use this output with tools like Tokens Studio for Figma or any other DTCG-compliant system.

Output

The command writes the serialized tokens to stdout, one token per line (for formats) or as a complete JSON/CSS object. Exit code is 0 on success, 2 if the file is missing or format is unknown, 1 if the file is not valid DESIGN.md.

If the input file uses multiple themes (e.g., light and dark mode), only the default theme (first one in the list) is exported. To export a different theme, manually edit the DESIGN.md or request a --theme flag in the issue tracker.

Related

• add — fetch a brand from the catalog
• init — scaffold a DESIGN.md for your own brand
• lint — validate a DESIGN.md against the schema