Skip to content
Get packs

Token Map

Maps design tokens from Figma or code onto your active design system with a reviewable audit list

Source Download skill
Repository
nexu-io/open-design
Stars
105,448
Licence
Apache-2.0
Files
3 files

What it does

When you move a design from Figma or an existing codebase into a project that uses a set design system, colours, fonts and spacing values often don't line up by name. This skill tells the agent to produce a mapping file that pairs each source token with a matching token in the active design system, and to list anything it could not match in an unmatched file for a human to review. It also tries to infer what anonymous tokens (like color-3) are used for, from their location and context, before deciding a match, and it avoids guessing when the evidence is weak or conflicting.

Great for

  • Designers moving a Figma file into a product that already has a design system
  • Developers converting an existing codebase's styling tokens to a new design system
  • Teams who want an auditable list of unmatched colours, fonts and spacing instead of silent guesses

Skip it if

  • Projects with no active design system, since there are no target tokens to map onto
  • Brand decisions that need human judgement: the skill is designed to leave ambiguous cases unmatched rather than decide them, and it never adds tokens to DESIGN.md without user approval
  • Exact visual colour matching: the skill explicitly does not match colours by visual proximity alone, so it is not a substitute for visual diff tools

Try asking

  • “Map the tokens from my exported Figma file onto our active design system and list anything that doesn't match”
  • “Convert the colour and spacing tokens in this codebase to the tokens in our current design system”
  • “Review the unmatched.json output from the last token mapping run and explain each unmatched item”
Step-by-step guide: how to use Token MapInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 3 original files, the Apache-2.0 licence and an attribution note.

    token-map.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip token-map.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip token-map.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Run this only after an active design system is selected, otherwise every token will land in unmatched.json
  • Review unmatched.json by hand, especially entries flagged target-collision or with competing candidates
  • Use the strict convergence mode if you need the run to fail when anything is unmatched

What's inside

  • examples/semantic-inference-before-after.json
  • open-design.json
  • SKILL.md

Redistributed unmodified from nexu-io/open-design under the Apache-2.0 licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.