Skills
.Work. You
Rest

token-map

Official

Map Figma tokens to DESIGN.md semantic vars.

Design & Creative#design system#markdown generation#token mapping#ui documentation#spec creation#figma tokens#semantic theming
Authoraziontech
Version1.0.0
Installs0

System Documentation

What problem does it solve?

It eliminates the manual, error-prone work of translating a Figma token JSON export into the exact DESIGN.md token classes and var(--*) semantic tokens your spec process expects.

Core Features & Use Cases

  • Deterministic token mapping: Converts each Figma variable into an exact DESIGN.md destination (either a semantic var like var(--bg-surface) or a generated class like .text-heading-md), without fuzzy matching.
  • Theme gap detection: Flags any Figma variable that has no exact equivalent in DESIGN.md as a theme gap and suggests the closest primitive placeholder for follow-up tokenization.
  • Workflow-ready outputs: Produces two stdout Markdown tables for token mapping and theme gaps to be directly consumed during component/spec creation.

Quick Start

Use the token-map skill with the JSON blob from figma-discover and the canonical .claude/docs/DESIGN.md to generate the token mapping and theme gaps tables.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: token-map
Download link: https://github.com/aziontech/webkit/archive/main.zip#token-map

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.