Design Tokens Emit

---
name: design-tokens-emit
description: Convert a design system spec into code-deliverable token files — CSS variables, a Tailwind config fragment, SCSS variables, or Style-Dictionary JSON. Trigger when the user says "emit tokens", "tailwind config", "css variables", "style dictionary", "convert design system to code", or wants to bridge from spec to implementation.
---

# design-tokens-emit

**Family:** design
**Status:** Stable

## Purpose

Bridge "we have a design system spec" to "we have tokens we can `import`." Takes a
`design-system-gen` result and emits real token files in the chosen format(s), so
the palette/typography/effects become part of the build instead of staying a doc.

## Triggers

- "emit tokens" / "convert design system to code"
- "tailwind config" / "css variables" / "style dictionary"
- "tokens for [tailwind/css/scss]"

## Inputs

- A design system as **engine JSON** from `design-system-gen` (re-run it in JSON
  mode if you only have a saved `MASTER.md` — the emitter reads JSON, not Markdown)
- Target format: `css` | `tailwind` | `scss` | `json` | `all`
- Output directory

## Steps

1. **Get the design JSON.** Run `design-system-gen` (JSON mode) or read a saved one.
2. **Emit tokens:**
   ```
   python3 "${CLAUDE_PLUGIN_ROOT}/scripts/design/tokens_emit.py" --design-json ds.json --format all --out-dir tokens/
   ```
   On Windows, use `py` if `python3` is absent; in PowerShell the variable is
   `$env:CLAUDE_PLUGIN_ROOT`.
   Produces `tokens.css` (`:root` custom properties), `tailwind.tokens.js` (merge
   into `theme.extend`), `_tokens.scss`, and `tokens.json` (Style-Dictionary shape).
   Use `--print` to preview without writing.
3. **Wire it in.** Tell the user where each file goes (import the CSS, merge the
   Tailwind fragment, `@use` the SCSS) and include the contrast-safe `on_primary`
   color for button text.
4. **Keep it in sync.** Re-run when the design system changes; tokens are generated,
   not hand-maintained.

## Outputs

- One token file per requested format (CSS / Tailwind / SCSS / JSON)
- Wiring notes for the target stack

## Dependencies

- `scripts/design/tokens_emit.py` (required) — Python 3.10+, standard library only
- `design-system-gen` (required) — upstream source of the design JSON the emitter reads

## Notes

Pairs with `design-build` (which consumes the tokens) and `design-system-persist`
(which stores the source design system). SwiftUI/Compose targets are on the roadmap;
web formats ship today.