Brand tokens export

Name: Brand tokens export
Author: @brandkit

@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
Installs: 0 installs
Likes: 0 likes
Clones: 0 clones

Clones

No clones yet.

Make your own version with slashclone clone @brandkit/brand-tokens-export. The original author keeps the credit.

0 clones · Made by @brandkit

Use in Claude

Claude Code

/kit add @brandkit/brand-tokens-export

CLI

slashclone add @brandkit/brand-tokens-export

Codex

slashclone add @brandkit/brand-tokens-export --agent codex

Not enforced. Codex does not enforce the permissions this kit declares.

Cursor

slashclone add @brandkit/brand-tokens-export --agent cursor

Not enforced. Cursor does not enforce the permissions this kit declares.

claude.ai and the desktop app

Download for Claude

Not enforced. claude.ai and the Claude desktop app do not enforce the permissions this kit declares. How to upload it

As a file

Download .kit

One file with everything in it. slashclone add ./file.kit checks it against this page before installing.

Review before installing

Set up SlashClone in Claude

Health

No keep-alive checks yet

Checks run weekly once someone keeps the kit installed.

Run reports are off

Safety

Scan passed
Not reviewed yet
Tests pass (2 of 2)

This kit reads ./brand.md, ./docs/brand.md, writes to ./brand-tokens/** and runs node scripts/export-tokens.mjs. Install it?

Full scan and review

Similar kits

Brand guide builder
@brandkit
Build a one-page brand guide (brand.md) through a short interview, pulling the colors and fonts your site already uses. Covers colors, type, logo rules, voice, and spacing, plus a machine-readable tokens block the other brandkit kits use.
Brand
@brandkit
The /brand command: make whatever you are working on match your brand. It finds your brand guide (or helps you write one), then fixes colors, fonts, logo use, voice, and spacing in a page, CSS, deck outline, email, or social post, and lists every change it made.
Two theme brand colors
@slashclone
Find brand colors that work in both light and dark mode: for each hue, the shade with the best WCAG contrast against all your light and dark backgrounds at once, so a logo or accent can keep one color in both themes. Prints a table and saves the results as JSON.
Social image templates
@brandkit
Generate on-brand social image templates as editable SVGs from your brand.md tokens: an Open Graph image (1200x630), a square post (1080x1080), and a story (1080x1920 with safe zones). Checks text contrast and fits the headline for you.

Link

https://slashclone.dev/@brandkit/brand-tokens-export

README badge

[![Install with SlashClone](https://slashclone.dev/badge/brandkit/brand-tokens-export.svg)](https://slashclone.dev/@brandkit/brand-tokens-export)

Embed

<iframe src="https://slashclone.dev/embed/brandkit/brand-tokens-export" width="480" height="200" title="@brandkit/brand-tokens-export" loading="lazy"></iframe>

Share card image