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

Ready to run

npx skills add https://github.com/SensLiao/Claude-code-setting --skill design-token-pipeline

💬 Prompt for ChatGPT / Claude Chat▼

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.