Skip to content
SlashClone
DiscoverUse in ClaudeSubmit a link
Sign in
Made by@brandkit

Brand tokens export

@brandkit/brand-tokens-export

Turn the tokens in your brand.md into code: CSS variables, a Tailwind theme (v3 and v4), and a design-tokens.json for Figma token plugins. One source of truth, regenerated in a second whenever the brand changes.

SkillContentv1.0.0 (latest)Tested
Use in Claude Save Like Clone Comment
Activity
New: be the first to try it
  1. 1---
  2. 2name: brand-tokens-export
  3. 3description: Export the design tokens in a brand guide (brand.md) to CSS custom properties, a Tailwind theme (v4 @theme and v3 config), and a W3C design-tokens.json for Figma token plugins. Use when the user says "export our brand tokens", "make CSS variables from the brand guide", "set up Tailwind with our colors", "sync brand colors to code", or after brand.md changes.
  4. 4license: MIT
  5. 5---
  6. 6
  7. 7# Brand tokens export
  8. 8
  9. 9Turns the tokens block in `brand.md` into files a codebase and a design tool can use. The brand guide stays the single source of truth; the generated files are never edited by hand.
  10. 10
  11. 11## When to use
  12. 12
  13. 13- Setting up a new site or app and wiring in the brand's colors, fonts, sizes, spacing, and radii.
  14. 14- The brand guide changed and the code needs to catch up.
  15. 15- "Make Tailwind use our brand colors", "give me CSS variables for the brand", "export tokens for Figma".
  16. 16- Not for writing a brand guide from scratch. Use `brand-guide-builder` for that.
  17. 17
  18. 18## Inputs
  19. 19
  20. 201. **The brand guide.** Look for `brand.md`, then `docs/brand.md`. If neither exists, stop and offer to create one with `brand-guide-builder` (or by hand from `examples/brand.md`).
  21. 212. **A tokens block** inside it: a fenced block marked ```` ```yaml tokens ```` (or plain `yaml` or `json`). Groups it understands:
  22. 22 - `color`, `font` (a list, first choice first), `text` (font sizes), `weight`, `space`, `radius`, `shadow`.
  23. 23 - Plural names (`colors`, `fonts`, `spacing`) work too. `name`, `logo`, and `voice` are read by other brandkit kits and ignored here.
  24. 243. **Where to write.** Default `brand-tokens/`. Ask only if the project clearly keeps styles elsewhere (for example `src/styles/`), and then copy from `brand-tokens/` rather than writing there directly.
  25. 25
  26. 26## Steps
  27. 27
  28. 281. **Find the guide and read the tokens block.** If there is no block, show the user the format from `examples/brand.md` and offer to add one from the colors and fonts already described in prose. Confirm the values before adding them.
  29. 292. **Run the export.**
  30. 30
  31. 31 ```bash
  32. 32 node scripts/export-tokens.mjs brand.md brand-tokens
  33. 33 ```
  34. 34
  35. 35 Add `--prefix brand-` if the project already has variables like `--color-primary` that must not clash.
  36. 363. **Read the script's warnings** (for example a color that is not a valid CSS color) and fix them in `brand.md`, then run again.
  37. 374. **Wire it in.** Detect the stack and give the one step that applies:
  38. 38 - Tailwind v4 (`@import "tailwindcss"` in CSS): `@import "./brand-tokens/theme.css";` right after it. Utilities like `bg-primary` and `font-heading` then work.
  39. 39 - Tailwind v3 (`tailwind.config.js`): `theme: { extend: require("./brand-tokens/tailwind.theme.cjs") }`.
  40. 40 - Plain CSS: import `brand-tokens/tokens.css` once, then use `var(--color-primary)`.
  41. 41 - Figma: import `brand-tokens/design-tokens.json` with a design tokens plugin that reads the W3C format.
  42. 42 Show the exact line to add and ask before editing any config file yourself.
  43. 435. **Report** in the format below.
  44. 44
  45. 45## Output format
  46. 46
  47. 47```markdown
  48. 48Exported 24 tokens from brand.md to brand-tokens/
  49. 49
  50. 50| File | Use it for |
  51. 51| --- | --- |
  52. 52| tokens.css | Plain CSS: `var(--color-primary)` |
  53. 53| theme.css | Tailwind v4 `@theme` |
  54. 54| tailwind.theme.cjs | Tailwind v3 `theme.extend` |
  55. 55| design-tokens.json | Figma and other token tools |
  56. 56
  57. 57Next step for this project: <the one line to add, and where>
  58. 58Warnings: <none, or what to fix in brand.md>
  59. 59```
  60. 60
  61. 61## Naming
  62. 62
  63. 63Variables follow Tailwind v4 names so every output agrees: `--color-*`, `--font-*`, `--text-*`, `--font-weight-*`, `--spacing-*`, `--radius-*`, `--shadow-*`. Token names are lowercased with hyphens (`Primary Dark` becomes `primary-dark`).
  64. 64
  65. 65## Guardrails
  66. 66
  67. 67- Never edit the generated files by hand. Change `brand.md` and run the export again; say so in the report.
  68. 68- Never invent token values. If the guide describes a color in words only ("our green"), ask for the hex value.
  69. 69- Do not overwrite an existing `tailwind.config.*` or global stylesheet. Suggest the line; edit only after the user says yes.
  70. 70- If the tokens block fails to parse, show the script's error line and fix the YAML (usually a tab, or a missing space after a colon).
Sign in to comment on a line