Does it support multi-platform style delivery?

Absolutely. The skill focuses on token transformation pipelines that can resolve references and deliver styles to web, mobile, and other platforms from a single source of truth.

What are design tokens?

Design tokens are the visual atoms of a design system—named entities that store visual design attributes like colors, fonts, and spacing, allowing for centralized style management.

How does this skill help with token naming?

It provides a standardized hierarchy including primitive (raw values), semantic (purpose-driven), and component-level tokens to ensure clear and maintainable naming conventions.

Can this skill generate CSS variables?

Yes, it includes specialized guidance and code patterns for transforming JSON token sets into production-ready CSS and SCSS variables automatically.

Design Token Management

Name: Design Token Management
Author: melodic-software

bymelodic-software

•

设计工具

Implements and manages scalable design token systems, CSS variable architectures, and multi-platform style pipelines.

This skill provides structured guidance for building robust design systems through a three-tier token hierarchy consisting of primitive, semantic, and component-specific levels. It enables developers to define standardized JSON-based token schemas, automate complex token transformations, and generate platform-specific outputs like CSS variables and SCSS. By using this skill, teams can maintain visual consistency across large-scale applications, bridge the gap between design tools like Figma and production code, and create maintainable styling architectures that scale.

主要功能

01Standardized JSON token schema implementation for design systems

02Multi-format output generation for CSS and SCSS variables

0312 GitHub stars

04Three-tier token hierarchy management (Primitive, Semantic, Component)

05Automated token transformation and resolution pipelines

06Integration patterns for Style Dictionary and Figma-to-code workflows

使用场景

01Implementing theme-able CSS variable architectures for enterprise-grade applications

02Establishing a single source of truth for brand colors, spacing, and typography

03Building automated pipelines to synchronize Figma design styles with production codebases

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add melodic-software/claude-code-plugins design-token-management

For use in Claude.ai and ChatGPT

Download Skill