Agent skill
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)
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/other/other/design-tokens-klara-copilot-epost-agent-kit
Metadata
Additional technical details for this skill
- keywords
-
figma variables tokens design-system semantic
- platforms
-
[ "all" ] - connections
-
{ "requires": [ "figma" ] } - agent affinity
-
[ "epost-muji" ]
SKILL.md
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-mujiagent for design system decisions - Used by Figma-to-code pipeline for token resolution
- Informs component implementation across web, iOS, and Android
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?