skills.rest
jpoindexter
jpoindexterCOMMUNITY
Explore all skills by this author →
Website𝕏@microninkGitHub

design-tokens

Organize design systems into primitive, semantic, and component token tiers.

1|Updated Jun 9, 2026
Search Tags:#theming#architecture#figma#tokens#design-systems
One-click install
npx skills add https://github.com/jpoindexter/design-and-ai-skills --skill design-tokens-jpoindexter
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-tokens
Source: https://github.com/jpoindexter/design-and-ai-skills/tree/main/design-system-skills/design-tokens
Command: npx skills add https://github.com/jpoindexter/design-and-ai-skills --skill design-tokens-jpoindexter

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires tokens-studio, style-dictionary, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill streamlines the creation, management, and usage of design tokens for a cohesive and themeable UI across platforms.

Core Features & Use Cases

  • Design Tokens Definition: Architect tokens in a structured format that serve as a single source of truth.
  • Semantic and Component Layers: Build on primitives to create semantically meaningful tokens and components.
  • Theming Support: Easily switch between light/dark modes and multi-brand themes.
  • Tooling Pipeline Integration: Leverages tools like Figma Variables, Tokens Studio, and Style Dictionary v4 for seamless design to development workflows.

Quick Start

Run 'build-skills-index.py' to update the skill index and ensure all design tokens are up to date.

Frequently Asked Questions about design-tokens

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I structure design tokens for multi-brand and theme switching?▼

Design tokens for theming are organized into primitive, semantic, and component tiers. This structured architecture maintains consistency across design systems and enables seamless light/dark mode and multi-brand theme switching.

Does this design tokens architecture work with Figma Variables and Tokens Studio?▼

Yes, the design tokens pipeline integrates directly with Figma Variables and Tokens Studio. These tools function as dependencies to ensure seamless design to development workflows within the architecture.

What is the best way to manage semantic and component layers in a design system?▼

The best way to manage semantic and component layers is to build them systematically on top of primitive tokens. This approach creates semantically meaningful tokens and components that serve as a cohesive, themeable UI foundation.

How do I sync design tokens from Figma to development using Style Dictionary?▼

Sync design tokens from Figma to development using the tooling pipeline integration. Run the build-skills-index.py script to update the skill index and translate structured tokens via Style Dictionary v4 into development-ready formats.

Do I need Tokens Studio to maintain consistency across design systems?▼

Yes, Tokens Studio is a required dependency for maintaining consistency across design systems. It functions alongside Style Dictionary v4 to facilitate the structured token pipeline from design to development.

Related Skills

Explore More Design & Creative Skills→
theodrosyimertheodrosyimer

figma-sync

Synchronize design tokens between Figma and local DTCG JSON files.

Community
Intermediate
mrodrigues1mrodrigues1

design-system-patterns

Generate design tokens and platform outputs with Style Dictionary pipelines.

Community
Advanced
dylantarredylantarre
38

figma

Synchronize design tokens between codebases and Figma bidirectionally via API workflows involving Tokens Studio or Variables.

Community
Intermediate
joshua3403joshua3403

phase-5-design-system

Create a platform-agnostic design system with token definitions and component scaffolding.

Community
Advanced