How do I install the Design Tokens skill?

Run npx skillmds add majiayu000/design-tokens-4 in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Design Tokens safe to use?

This skill has not completed SkillMD's automated safety review yet. Capability flags: reads secrets. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Design Tokens?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Design Tokens free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Design Tokens?

majiayu000 (@majiayu000) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Design Tokens by majiayu000 — Agent Skill

Name: Design Tokens
Rating: 4.666666666666667 (3 reviews)
Author: majiayu000

Design Tokens

(ePost) Use when working with Vien 2.0 design tokens, Figma variables, semantic colors, multi-brand theming, or translating tokens to platform-native formats (CSS variables, Swift constants, Kotlin theme objects)

majiayu000 cd522e3 2 files · 2.4 KB Updated Sep 9, 2026 567 repo stars

File contents

Figma Variables Architecture Skill

Purpose

Deep analysis of the Vien 2.0 Figma design system variables. Covers the 4-layer architecture (Primitives → Semantics → Platform → Components), multi-brand support, mode composition, and reference chain resolution.

Aspect Files

File	Coverage
`references/variables-architecture.md`	Full architectural analysis: 5 external brand libraries, 4 layers, 42 collections, reference chain patterns
`references/inconsistencies-improvements.md`	8 inconsistencies, 6 structural complexities, 14 improvement recommendations
`figma-variables.json`	Raw 2.3 MB export of all Figma design variables (machine-readable)

Key Facts

1,059 variables across 42 collections
4 architectural layers: Primitives (L1) → Semantics (L2) → Platform (L3) → Components (L4)
5 external brand libraries with 2,064 remote references
Reference chains up to 11 hops deep
200+ distinct modes across all collections
Platform layer is the bridge between design language and code implementation

Usage

Referenced by epost-muji agent for design system decisions
Used by Figma-to-code pipeline for token resolution
Informs component implementation across web, iOS, and Android

Frequently asked questions