New to Claude Skills? Learn how to install them →

Tnexu-io on GitHub

Token Map

Free

Automate Figma and code token mapping to design systems.

by nexu-io84.9k stars on nexu-io/open-design
1 views
Updated Aug 10, 2026
Get this skill

Free · Opens the source repo

What Token Map does

Token Map is a specialized tool designed for developers and designers who need to streamline the process of mapping tokens from Figma or source code into an active design system. This skill generates a deterministic mapping that can be consumed during the design generation stage, ensuring that every token is accounted for in a structured manner. By leveraging this tool, teams can reduce the manual effort involved in token migration, thereby increasing efficiency and consistency across design projects.

The skill requires input tokens from either Figma or code, specifically formatted as JSON files. It reads from the active design system's context and produces several output files, including mappings for colors, typography, and spacing. Importantly, it also generates an unmatched tokens list, allowing for human review of any tokens that could not be mapped. This transparency is crucial for maintaining design integrity and ensuring that no tokens are silently discarded or incorrectly mapped.

One of the key features of Token Map is its semantic inference capability. It intelligently analyzes the context in which tokens are used, inferring their roles based on evidence from the design. This means that anonymous tokens, which typically lack clear identifiers, can be accurately associated with their intended design functions. For example, a token named color-3 may be mapped to a primary color if sufficient contextual evidence supports that role. This reduces ambiguity and enhances the quality of the mapping process.

The tool is particularly beneficial in environments where Figma and design systems are frequently updated, as it automates the tedious aspects of token management. By ensuring that every token is either mapped or documented as unmatched, it provides a clear audit trail for designers and developers alike. This skill is essential for teams looking to maintain a robust design system while minimizing the overhead associated with token migrations.

When to use it

Use this skill when migrating design tokens from Figma or code to ensure accurate and efficient mapping to your design system.

When not to use it

This tool may not be suitable for projects that do not utilize Figma or have a very different token structure that does not align with the expected input format.

What you can build with it

Migrating Figma Tokens to Design System

When transitioning design assets from Figma to a design system, Token Map automates the token mapping process, ensuring consistency.

Handling Anonymous Tokens

In cases where Figma exports anonymous tokens, this skill infers their roles based on contextual evidence, improving mapping accuracy.

Auditing Token Migrations

The unmatched tokens output allows teams to review and make informed decisions on any tokens that could not be mapped, enhancing oversight.

How to install Token Map

View source

1. Install with the skills CLI

npx skills add nexu-io/open-design/token-map --agent claude-code

2. Or install it manually

Download the skill folder and drop it into ~/.claude/skills/ for all projects, or .claude/skills/ to scope it to one repo. Restart Claude Code so it picks up the new skill.

Anthropic's agentic coding CLI, and the reference implementation of Agent Skills. Drop a skill folder into ~/.claude/skills and Claude Code loads it automatically whenever a task matches the skill's description. Claude Code docs

Inside SKILL.md

Written by nexu-io

Token map

Spec §10 / §21.3.1: every figma-migration / code-migration run crosses the same boundary — "the source has its own tokens; the target uses the active OD design system; we need a deterministic mapping". This atom produces that mapping.

Inputs

  • figma/tokens.json from figma-extract (figma-migration), OR
  • code/tokens.json from design-extract (code-migration).
  • The active design system DESIGN.md (already injected into the prompt; the atom reads from the staged design-system context).

Output

project-cwd/
└── token-map/
    ├── colors.json     # { source: '#hex' | 'tokenName', target: '--ds-token' }[]
    ├── typography.json # font + size + weight pairings
    ├── spacing.json    # spacing scale crosswalk
    ├── unmatched.json  # { source: ..., reason: 'no-target-equivalent' }[]
    └── meta.json       # { sourceKind: 'figma' | 'code', generatedAt, atomDigest }

unmatched.json is the audit list a human reviews; the agent must not invent target tokens silently.

Semantic token inference

Figma often exports anonymous source names such as color-3, paint/17, or raw #5B8DEF. Do not ask the user to rename those before mapping. First infer the semantic role from usage evidence:

  • Node path, component name, instance overrides, variant/state labels, frame name, layer name, and nearby text such as Primary, Selected, Link, Error, Focus, Nav, Button, or CTA.
  • CSS-like position in the rendered tree: background fill, foreground text/icon, border, divider, overlay, shadow tint, focus ring, status badge, chart series, or brand/accent treatment.
  • Contrast relationships: a color paired repeatedly with the main canvas is likely foreground; one paired with foreground inside CTA components is likely primary/accent background; a thin outline around interactive elements is likely border or focus-ring.
  • Reuse topology: a value that appears across primary buttons, selected tabs, and active nav items is stronger evidence for --ds-color-primary than a value that appears once in an illustration.

Use that role evidence to choose among existing active design-system tokens and to decide whether an anonymous token should be renamed or left unmatched before the executable mapping pass. Keep the on-disk token-map contract unchanged: the atom still writes the existing bucket files, unmatched.json, and meta.json only.

For example, this is a useful reasoning note for deciding whether color-3 should map to the active primary token:

{
  "source": "color-3",
  "value": "#5B8DEF",
  "role": "primary",
  "targetCandidates": ["--ds-color-primary", "--ds-color-link"],
  "evidence": [
    "Button/Primary fill",
    "Selected tab indicator",
    "Link text in Settings frame"
  ]
}

Then map to an active design-system token only when the evidence is role-based, not value-only. If the top candidates are too close to call, or if the evidence points to conflicting roles (primary vs link vs focus-ring), leave the source token unmatched using the existing no-target-equivalent reason and include the competing candidates in the hint. This keeps automation useful for common anonymous-token cases while preserving human review for ambiguous brand decisions.

Before / after expectation

Without semantic inference, an anonymous Figma token can only produce an uncertain value-level mapping:

{
  "source": "color-3",
  "value": "#5B8DEF",
  "target": null,
  "reason": "no-target-equivalent"
}

With semantic inference, the same token should carry role evidence before it is accepted:

{
  "source": "color-3",
  "value": "#5B8DEF",
  "target": "--ds-color-primary",
  "via": "name"
}

This deterministic v1 atom does not claim a measured accuracy lift by itself. Treat the expected improvement as coverage of previously manual anonymous-token cases when the Figma tree contains enough role evidence. Real accuracy numbers require a fixture suite with known source tokens, expected semantic roles, and a before/after agent run. See examples/semantic-inference-before-after.json for a deterministic same-token-batch simulation that compares the old value-level output with the semantic inference output.

Convergence

The atom completes when every input token is either mapped or explicitly recorded under unmatched.json with a non-empty reason. The until evaluator reads tokens.unmatched.length === 0 on strict mode; default is "soft converge" (proceed with unmatched.json populated).

Anti-patterns the prompt fragment forbids

  • Injecting a new token into DESIGN.md without explicit user approval (use a confirmation GenUI surface for that).
  • Mapping hex colours by visual proximity alone; perceptual ΔE thresholds belong in the visual-diff evaluator (Phase 7).
  • Collapsing distinct source tokens onto the same target token silently; record collisions in unmatched.json with reason target-collision.

Status

Implemented by the daemon runner in apps/daemon/src/plugins/atoms/token-map.ts. It parses design-system tokens, performs deterministic mapping, and writes the mapped and unmatched outputs.

Frequently asked questions about Token Map

Similar skills