skills.rest
Sir-chawakorn
Sir-chawakornCOMMUNITY
Explore all skills by this author →
GitHub

design-token-system

Architect W3C-DTCG design-token systems with Style Dictionary for multi-platform exports.

9|3|Updated Jun 13, 2026
Search Tags:#theming#design-system#design-tokens#ui-architecture#style-dictionary#w3c-dtcg
One-click install
npx skills add https://github.com/Sir-chawakorn/sanook-cli --skill design-token-system
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-token-system
Source: https://github.com/Sir-chawakorn/sanook-cli/tree/main/skills/design-token-system
Command: npx skills add https://github.com/Sir-chawakorn/sanook-cli --skill design-token-system

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill solves the fragmentation of design values across platforms by establishing a single, governed source of truth for design tokens that ensures consistency across web, iOS, and Android.

Core Features & Use Cases

  • Multi-Tier Architecture: Implements a robust primitive, semantic, and component token structure to enable easy theming and brand white-labeling.
  • Cross-Platform Export: Uses Style Dictionary to transform a single W3C-DTCG JSON source into CSS variables, Tailwind configurations, TypeScript modules, and native mobile resources.
  • Use Case: When a team needs to implement dark mode or support multiple brands without duplicating color palettes or hardcoding values, this skill provides the pipeline to propagate changes globally from one source.

Quick Start

Use the design-token-system skill to initialize a new token architecture by defining your primitive and semantic layers in the tokens directory.

Frequently Asked Questions about design-token-system

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

FAQPage Schema
How do I create a multi-platform design token system for web and mobile?▼

A multi-platform design token system uses W3C-DTCG standards to define a single JSON source, enabling consistent theming across web, iOS, and Android. Style Dictionary transforms these tokens into platform-specific output formats like CSS variables and native mobile resources.

How does Style Dictionary work with W3C-DTCG tokens for cross-platform theming?▼

Style Dictionary works with W3C-DTCG tokens by transforming a governed JSON source into platform-specific outputs like CSS variables, Tailwind configurations, and TypeScript modules. It manages the conversion of primitive and semantic tokens to ensure cross-platform synchronization.

What is the best way to structure design tokens for multi-brand white-labeling and dark mode?▼

The best way to structure design tokens for white-labeling and dark mode is a multi-tier architecture. Implementing primitive, semantic, and component token layers allows teams to propagate thematic changes globally from one source without duplicating color palettes or hardcoding values.

Do I need Style Dictionary to manage W3C-DTCG tokens for UI architecture?▼

Yes, Style Dictionary integration is required to manage the transformation of primitive and semantic tokens. It takes your single W3C-DTCG JSON source and converts it into platform-specific output formats required for cross-platform UI architecture synchronization.

Can I export W3C design tokens to Tailwind configurations and CSS variables?▼

Yes, you can export W3C design tokens to Tailwind configurations and CSS variables. By using Style Dictionary, a single W3C-DTCG JSON source is transformed into multiple output formats including CSS variables, Tailwind configurations, and TypeScript modules.

When should I use a multi-tier design token architecture instead of hardcoded values?▼

You should use a multi-tier design token architecture when a team needs to implement dark mode or support multiple brands. It prevents duplicating color palettes and hardcoding values by establishing a governed source of truth to propagate changes globally.

Related Skills

Explore More Software Engineering Skills→
shawn-sandyshawn-sandy

figma-design-tokens

Extract design tokens from Figma and generate CSS, SCSS, JSON, TypeScript, and DTCG files.

Community
Advanced
rafaelcallejarafaelcalleja
2

ui-styling

Generate Tailwind CSS configurations and integrate shadcn/ui components for React-based UIs.

Community
Advanced
shawn-sandyshawn-sandy

design-token-extractor

Extract design tokens from images into W3C DTCG JSON, CSS custom properties, SCSS variables, and Tailwind-style utilities.

Community
Advanced
Yoriichi-DangYoriichi-Dang

design-system-patterns

Codify design tokens, theming, and component APIs for scalable design systems.

Community
Advanced