design-token-generator

Installable Ships in design-system-manager — or copy the raw skill below.

Paste into Claude Code, Claude.ai, the desktop app, or the browser extension — ⌘/Ctrl+V.

ExperimentalNo security review

Design Token Generator

Generate a complete three-tier DTCG-compliant token architecture from a brand brief, Figma variables export, or inline description. The output is a set of structured JSON files ready for a Style Dictionary v4 pipeline without modification.

Usage

/design-token-generator <source> [--brands brand-a,brand-b] [--platform sitecore|optimizely|umbraco|headless] [--scale 4|8]

Examples:

/design-token-generator brand-brief.md — single brand from a markdown brief
/design-token-generator figma-export.json --brands acme,nova — multi-brand from Figma export
/design-token-generator "Primary blue #0066CC, secondary green #00A86B, 8px base grid" --platform sitecore

Phase 1 — Brand Brief Extraction

If input is a Markdown brief or inline description, extract:

Primary brand color (hex preferred)
Secondary / accent colors
Neutral / grey scale preference (warm, cool, or pure)
Typography — primary font family, secondary/mono if mentioned
Base grid — 4px or 8px (default to 8px if unspecified)
Border radius style — sharp (0–2px), soft (4–8px), rounded (12–16px), pill (9999px)
Elevation style — flat (no shadows), subtle, pronounced
Motion preference — instant, quick (150ms), standard (250ms), expressive (400ms)

If input is a Figma variables JSON export, parse the variables and collections arrays. Extract resolved values for Mode: default (or "Light" if multiple modes exist).

Phase 2 — Generate Primitive Tokens

Create tokens/core/colors.json — full color scale for each brand hue using perceptually uniform steps. Generate a 10-stop scale (50, 100, 200, 300, 400, 500, 600, 700, 800, 900) plus a neutral/grey scale.

Color generation rules:

Base hue goes at step 500.
Steps 50–400 are progressively lighter (increase lightness in oklch space).
Steps 600–900 are progressively darker.
Neutral scale: derive from primary hue with reduced chroma (≤5% chroma for near-greys).

Create tokens/core/typography.json:

font-family-sans, font-family-serif, font-family-mono
font-size scale: 10 stops using a 1.25 (major third) ratio — xs (12px) through 6xl (60px)
font-weight scale: 400 (regular), 500 (medium), 600 (semibold), 700 (bold)
line-height scale: none (1), tight (1.25), snug (1.375), normal (1.5), relaxed (1.625)
letter-spacing scale: tighter, tight, normal (0), wide, wider, widest

Create tokens/core/spacing.json — scale based on --scale flag (4 or 8px base):

8px base: 0, 1 (4px), 2 (8px), 3 (12px), 4 (16px), 5 (20px), 6 (24px), 8 (32px), 10 (40px), 12 (48px), 16 (64px), 20 (80px), 24 (96px), 32 (128px)

Create tokens/core/sizing.json — same scale as spacing (sizing tokens are separate from spacing).

Create tokens/core/border-radius.json, tokens/core/shadow.json, tokens/core/motion.json, tokens/core/z-index.json per the reference file.

Phase 3 — Generate Semantic Tokens

Create tokens/semantic/color.json — map intent to primitives:

{
  "semantic": {
    "color": {
      "action": {
        "primary":              { "$value": "{core.color.brand.500}", "$type": "color" },
        "primary-hover":        { "$value": "{core.color.brand.600}", "$type": "color" },
        "primary-active":       { "$value": "{core.color.brand.700}", "$type": "color" },
        "primary-disabled":     { "$value": "{core.color.brand.200}", "$type": "color" },
        "primary-focus-ring":   { "$value": "{core.color.brand.400}", "$type": "color" }
      },
      "feedback": {
        "error":    { "$value": "{core.color.red.500}",   "$type": "color" },
        "warning":  { "$value": "{core.color.amber.500}", "$type": "color" },
        "success":  { "$value": "{core.color.green.500}", "$type": "color" },
        "info":     { "$value": "{core.color.blue.500}",  "$type": "color" }
      },
      "surface": {
        "page":     { "$value": "{core.color.neutral.50}",  "$type": "color" },
        "raised":   { "$value": "{core.color.neutral.0}",   "$type": "color" },
        "overlay":  { "$value": "{core.color.neutral.900}", "$type": "color" }
      },
      "text": {
        "default":   { "$value": "{core.color.neutral.900}", "$type": "color" },
        "secondary": { "$value": "{core.color.neutral.600}", "$type": "color" },
        "disabled":  { "$value": "{core.color.neutral.400}", "$type": "color" },
        "inverse":   { "$value": "{core.color.neutral.0}",   "$type": "color" },
        "link":      { "$value": "{semantic.color.action.primary}", "$type": "color" }
      },
      "border": {
        "default": { "$value": "{core.color.neutral.200}", "$type": "color" },
        "strong":  { "$value": "{core.color.neutral.400}", "$type": "color" },
        "focus":   { "$value": "{semantic.color.action.primary-focus-ring}", "$type": "color" }
      }
    }
  }
}

Create tokens/semantic/typography.json, tokens/semantic/spacing.json, tokens/semantic/motion.json using the same alias-to-primitive pattern. See reference.md.

Phase 4 — Generate Component Tokens

Generate tokens for the platform's standard component set. Each component token must alias a semantic token (not a primitive directly).

Components to generate (adjust per --platform flag):

Universal (all platforms): button, input, label, checkbox, radio, select, textarea, badge, tag, alert, tooltip, card, link, heading, body-text, divider, avatar, modal, navigation, breadcrumb, pagination, table, icon

Sitecore SXA additions: promo, carousel, accordion, column-splitter Optimizely additions: content-block, teaser, hero-block Umbraco additions: rich-text, block-grid, member-form

For each component, generate a file at tokens/component/<name>.json with:

background-default, background-hover, background-active, background-disabled
text-default, text-secondary, text-disabled
border-default, border-hover, border-focus
border-radius
padding-x, padding-y
Interactive states as separate token groups where applicable

Phase 5 — Multi-Brand Separation (if --brands provided)

If --brands flag lists multiple brands:

Rename base semantic file to tokens/base/semantic/color.json — this is the shared fallback.
For each brand, create tokens/brands/<brand-name>/semantic/color.json containing ONLY the semantic tokens that differ for that brand. Use $extends: "../../base/..." at file root.
Create a style-dictionary.config.js per brand (see token-transform-pipeline skill) that sources tokens/core/ + tokens/base/semantic/ + tokens/brands/<brand>/semantic/ + tokens/component/.

The output: a single component token set, multiple semantic override layers, one primitive set.

Phase 6 — Output Summary

After writing all files, print:

Generated token architecture:
  tokens/core/           — <n> primitive token files
  tokens/semantic/       — <n> semantic token files
  tokens/component/      — <n> component token files
  tokens/brands/         — <n> brand override files (if multi-brand)

Total tokens: <n>
Next step: run /token-transform-pipeline to configure Style Dictionary v4 output

Reference files

reference.md — Complete semantic token map, component token schema per component, color scale generation rules
templates.md — File structure templates for single-brand and multi-brand setups

Technical details

Plugin

design-system-manager

Author

Dakota Smith

Skill name

design-token-generator

Maturity

experimental

Security review

No security review

Owners

design
engineering

Argument hint

<brand-brief.md or figma-export.json or 'describe brand inline'> [--brands brand-a,brand-b] [--platform sitecore|optimizely|umbraco|headless] [--scale 4|8]

Allowed tools

Read
Write
Edit
Glob
Bash(node *)
Bash(ls *)

Source

plugins/design-system-manager/skills/design-token-generator/SKILL.md

Edit this skill on GitHub — opens GitHub's web editor. No git knowledge needed.