skills.rest
SensLiao
SensLiaoCOMMUNITY
Explore all skills by this author →
GitHub

design-token-pipeline

Compile W3C DTCG design tokens into CSS, Tailwind, TypeScript, Swift, and Android XML.

Updated May 28, 2026
Search Tags:#design tokens#multi-platform#Tailwind CSS#Style Dictionary#iOS Swift#Android XML
One-click install
npx skills add https://github.com/SensLiao/Claude-code-setting --skill design-token-pipeline
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-token-pipeline
Source: https://github.com/SensLiao/Claude-code-setting/tree/main/skills/design-token-pipeline
Command: npx skills add https://github.com/SensLiao/Claude-code-setting --skill design-token-pipeline

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires style-dictionary, terrazzo, @tokens-studio/sd-transforms, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill solves the challenge of managing and applying design tokens across multiple platforms by automating the conversion of token definitions into platform-specific outputs like CSS, Tailwind theme files, and iOS Swift and Android XML configurations.

Core Features & Use Cases

  • Token Compilation: Converts W3C DTCG design tokens into native platform formats for CSS, Tailwind CSS, TypeScript, Swift, and XML.
  • Multi-platform Output: Supports generation of token outputs for various platforms including iOS and Android.
  • Dark Mode & Multi-theme: Facilitates creation of dark mode and multi-brand/theme configurations.
  • Use Case: A UI developer uses this Skill to create a comprehensive design system that works seamlessly across their company's web and mobile products.

Quick Start

Run the command 'npx style-dictionary build --config style-dictionary.config.js' to generate platform-specific token files from your tokens source files.

Frequently Asked Questions about design-token-pipeline

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

FAQPage Schema
How do I compile design tokens into Tailwind CSS and Swift formats?▼

You can compile design tokens into Tailwind CSS and Swift formats by running the Style Dictionary build command. This Skill automates the conversion of W3C DTCG token definitions into native platform outputs for web and mobile applications.

Can I generate multi-theme and dark mode configurations from a single design token source?▼

Yes, you can generate multi-theme and dark mode configurations from a single design token source. This Skill utilizes Style Dictionary v5 and Terrazzo to facilitate complex permutations for multi-brand design system outputs across platforms.

Does Style Dictionary support exporting Android XML and TypeScript tokens?▼

Style Dictionary supports exporting Android XML and TypeScript tokens. This Skill configures Style Dictionary v5 with sd-transforms to translate W3C DTCG design tokens into platform-specific files including CSS, Swift, and XML.

What is the best way to manage multi-platform design tokens for web and mobile apps?▼

The best way to manage multi-platform design tokens is using an automated compilation pipeline. This Skill converts central token definitions into CSS, Tailwind, TypeScript, iOS Swift, and Android XML, streamlining development across web and mobile products.

Do I need W3C DTCG formatted tokens to use this design token pipeline?▼

Yes, you need W3C DTCG formatted tokens as the input source. This Skill processes standard W3C design tokens and applies sd-transforms to compile them into platform-specific configurations like Tailwind theme files and native mobile formats.

Related Skills

Explore More Software Engineering Skills→
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
dylantarredylantarre
38

figma

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

Community
Intermediate
Higashi-KotaHigashi-Kota

ui-theme

Generate CSS variables and Tailwind theme from JSON design tokens.

Community
Intermediate
f0d010cf0d010c
23

design-tokens

Translate, audit, and export W3C design tokens for multiple platforms.

Community
Intermediate