Skills
.Work. You
Rest

ds-create-token

Official

Generate design tokens from CSS variables with precision

Design & Creative#design tokens#ui development#token generation#css variables#component scss
Authorbaloise
Version1.0.0
Installs0

System Documentation

What problem does it solve?

Manages the transformation of CSS variables into structured design tokens for component use, eliminating manual errors and enhancing design system consistency.

Core Features & Use Cases

  • Automated Token Extraction: Extracts component CSS variables and identifies their type (Alias, Global, Component, Hardcoded) for efficient token generation.
  • Interactive Review Process: Provides an interactive workflow for reviewing and confirming token suggestions before applying them to the token JSON.
  • Customizable Component Tokens: Generates design tokens following a structured path for different component parts, supporting various states and categories.
  • Use Case: Convert CSS variables from your component's SCSS files into a well-organized Base.tokens.json file, enabling consistent UI development.

Quick Start

Run the /ds-create-token <component-name> command to start extracting and confirming design tokens for the specified component.

Dependency Matrix

Required Modules

None required

Components

scripts

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: ds-create-token
Download link: https://github.com/baloise/design-system/archive/main.zip#ds-create-token

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 620,000+ vetted skills library on demand.