gitwtfhub

wtf is tokensmith?

jtmchorse/tokensmith — explained in plain English

Analysis updated 2026-05-18

1TypeScriptAudience · developerComplexity · 3/5Setup · easy

TL;DR

An MCP server that exposes a project's design system tokens to AI coding assistants and can scan code for hardcoded colors and sizes that should be tokens instead.

Mindmap

mindmap
  root((tokensmith))
    What it does
      Exposes design tokens over MCP
      Resolves token alias chains
      Audits code for drift
    Tech stack
      TypeScript
      Node.js
      MCP protocol
    Use cases
      Design system aware agents
      Token drift auditing
      CSS and JSX scanning
    Audience
      Developers
      Design system teams

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Why would anyone build with this?

REASON 1

Let an AI coding assistant look up real design token values instead of guessing hex codes.

REASON 2

Resolve a named token like a primary action color through its full alias chain.

REASON 3

Scan CSS or JSX for hardcoded colors and sizes that drifted from the design system.

REASON 4

Install as an MCP tool inside Claude Code, Claude Desktop, or Cursor.

What's in the stack?

TypeScriptNode.jsMCP

How it stacks up

jtmchorse/tokensmith0xkinno/neuralvault0xmayurrr/ai-contractauditor
Stars111
LanguageTypeScriptTypeScriptTypeScript
Setup difficultyeasyhardeasy
Complexity3/54/52/5
Audiencedeveloperdeveloperdeveloper

Figures from each repo's GitHub metadata at analysis time.

How do you spin it up?

Difficulty · easy Time to first run · 5min

Requires Node 20 or newer, installs directly via npx with no separate account or infra.

The README does not state a license, so usage rights are unclear.

Wtf does this do

Tokensmith is a small server built on the Model Context Protocol, or MCP, a way for AI coding assistants like Claude Code, Claude Desktop, or Cursor to call outside tools while they work. Its job is to make an AI coding agent aware of a project's design system, meaning the official set of colors, spacing, and other visual values a company has agreed on, instead of the agent guessing a shade of blue from memory when it writes interface code. Design systems are usually stored in a standard format called DTCG, short for Design Tokens Community Group, which is basically a structured file listing named values like the primary action color and what it should equal. Tokensmith reads one of these files and offers three main tools over MCP. One lists all the tokens, one resolves a single named token to its real value while following any chains where one token points to another, and one scans a piece of CSS or JSX code to flag any hardcoded colors or sizes that are close to, or exactly match, a token but were typed in by hand instead of referencing it properly. The project is honest that it cannot force an AI agent to actually call these tools while generating code. Instead, the intended workflow is that the agent writes code, a person or process runs the scanning tool against it, and any drifted values get fixed and swapped for the correct token reference. The maintainer includes a demo comparing a hand guessed version of a settings card component against one built using real resolved token values, showing how a wrong guess can look almost identical to the correct color yet still be technically off system. It requires Node version 20 or newer, installs through npm, and is aimed at developers and teams who already maintain a formal design system and want their AI coding tools to respect it rather than reinvent colors from scratch.

Yoink these prompts

Prompt 1
Explain what MCP is and how tokensmith uses it to expose design tokens.
Prompt 2
Walk me through installing tokensmith as an MCP server in Claude Code.
Prompt 3
How does the audit_css tool decide if a hardcoded value should be a token?
Prompt 4
Show me how resolve_token follows an alias chain to its final value.

Frequently asked questions

wtf is tokensmith?

An MCP server that exposes a project's design system tokens to AI coding assistants and can scan code for hardcoded colors and sizes that should be tokens instead.

What language is tokensmith written in?

Mainly TypeScript. The stack also includes TypeScript, Node.js, MCP.

What license does tokensmith use?

The README does not state a license, so usage rights are unclear.

How hard is tokensmith to set up?

Setup difficulty is rated easy, with roughly 5min to a first successful run.

Who is tokensmith for?

Mainly developer.

View the repo → Decode another repo

This repo across BitVibe Labs

Don't trust strangers blindly. Verify against the repo.