01

Developers

Built for the terminal, the CI and your agent

One engine behind the product, a CLI, a GitHub Action and an MCP server, so a check that passes for your agent passes in CI, and a file generated by hand matches the pull request byte for byte.

GitHub ActionPyPI
~/acme/web
$ uvx --from basemode-tokens basemode generate \
    --file <figma-file-key> --format tailwind4 --out src/tokens
412 tokens, 2 files written to src/tokens.

$ basemode lint src --tokens src/tokens/basemode.lock.json
src/pricing/plan-card.tsx:14:22: #2563eb is already a token: use var(--action-primary).
1 hard-coded values in 212 files, 1 already tokens.
Adoption: 97% of design values come from the system (138 of 412 tokens in use).

$ claude mcp add basemode -- uvx --from basemode-tokens \
    basemode mcp --tokens src/tokens/basemode.lock.json
02

Three ways in

  1. 01

    The CLI

    No account needed

    The same engine Basemode runs, from PyPI. Generate from Figma's API, a plugin export, a W3C or Tokens Studio file, or your Basemode design system. --check changes nothing and exits 1 when files are out of date, for a CI step that fails on drift.

    basemode-tokens on PyPI
    terminal
    $ FIGMA_TOKEN=… basemode generate --file KEY --format css --format swift
$ basemode generate --input tokens.json --format android
$ BASEMODE_KEY=… basemode pull --format typescript --check
$ basemode generate --file KEY --rename-references --summary pr.md
  2. 02

    The GitHub Action

    No code changes

    Runs on a schedule or by hand and opens or updates the one pull request. An unchanged sync leaves the repository alone, so a pull request someone closed on purpose doesn't come back every night.

    arcarolabs/basemode-action
    .github/workflows/tokens.yml
    on:  schedule: [{ cron: "0 22 * * 0-4" }]  workflow_dispatch:permissions: { contents: write, pull-requests: write }jobs:  tokens:    runs-on: ubuntu-latest    steps:      - uses: actions/checkout@v4      - uses: arcarolabs/basemode-action@v1        with:          basemode-key: ${{ secrets.BASEMODE_KEY }}          formats: tailwind4,typescript          path: src/tokens
  3. 03

    The MCP server

    For coding agents

    Hosted on every plan, or local from a lock file. With a developer key it also serves your guidelines and components, stays current as designers publish, and sends report_gap requests to your team.

    terminal
    $ claude mcp add --transport http basemode \
    https://api.basemode.io/v1/mcp \
    --header "Authorization: Bearer <developer-key>"

# or, with no account, from a lock file
$ claude mcp add basemode -- uvx --from basemode-tokens \
    basemode mcp --tokens src/tokens/basemode.lock.json
03

Reference

The whole surface, on one sheet

CLI · basemode
generate
Generate from Figma, a plugin export, W3C (DTCG) or Tokens Studio--file --input --format --out
pull
Generate from your Basemode design system (BASEMODE_KEY)--format --out --api
lint
Find hard-coded colors, spacing, radii and font sizes; exit 1 if any--tokens --prefix
mcp
Serve the design system to a coding assistant--tokens --prefix --api
Flags for generate and pull
--check
Change nothing; exit 1 if files are out of date
--rename-references
Rewrite code that uses renamed tokens
--summary FILE
Write a pull request title and body
--color
hex, rgb, hsl or oklch
--unit
px, rem or em
--prefix
Put in front of every token's name
Action · arcarolabs/basemode-action@v1
basemode-key
A design system's key, from its settings
figma-token
Or read Figma directly, on Enterprise
figma-file-keys
The files to read with figma-token
formats
Comma-separated, such as tailwind4,typescript
path
The folder the tokens go in
MCP tools
get_design_system
Token counts, modes, guidelines and components. Called first.
search_tokens
Tokens by name or description, such as 'primary' or 'radius'.
find_token
The token for a raw value; exact, or the closest ones.
check_code
Hard-coded colors, spacing, radii and font sizes in a snippet.
get_guidelines
The team's written rules for using the system.
list_components
Components the system defines: status, import, when to use.
check_contrast
WCAG contrast of two colors, as values or token names.
report_gap
Tell the design team what was missing instead of inventing it.writes
Output · --format
  • csstokens.css
  • tailwind4tokens.css
  • tailwind3tokens.preset.js
  • scsstokens.scss
  • typescripttokens.ts
  • dtcgtokens.json
  • storybookTokens.mdx
  • swiftTokens.swift
  • androidvalues/colors.xml

Commit basemode.lock.json next to the tokens: it's how a rename is told apart from one token removed and another added. Add basemode-ignore in a comment to leave a line out of lint.

Sign-off

Give your design system some teeth

Try it with sample tokens in a couple of minutes, then connect Figma, GitHub and your agents when you're ready. No card needed.

Prefer email? hello@basemode.io