ds-create-token

Analyze SCSS files to create design tokens in Base.tokens.json.

111|29|Updated Oct 4, 2019

Search Tags:#design tokens #ui development #token generation #css variables #component scss

Ready to run

npx skills add https://github.com/baloise/design-system --skill ds-create-token

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: ds-create-token
Source: https://github.com/baloise/design-system/tree/main/.claude/skills/ds-create-token
Command: npx skills add https://github.com/baloise/design-system --skill ds-create-token

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

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.

Frequently Asked Questions about ds-create-token

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

FAQPage Schema

How do I generate design tokens from SCSS files?▼

You can generate design tokens from CSS variables by running the /ds-create-token command with a component name. It analyzes SCSS files, classifies variables as alias, global, component, or hardcoded, and writes structured tokens to Base.tokens.json.

What are alias, global, and component design tokens?▼

Alias, global, and component design tokens represent classifications for CSS variables extracted from SCSS files. Alias tokens reference global values, global tokens hold foundational variables, and component tokens encapsulate values specific to individual UI elements.

Do I need npm run tokens to compile design tokens?▼

Yes, you need npm run tokens to compile design tokens after generation. The Skill creates and writes token suggestions to Base.tokens.json, but requires this npm script to execute the final compilation for UI development.

Can I review design token suggestions before applying them?▼

Yes, you can review design token suggestions before applying them through an interactive workflow. The Skill provides an interactive process to confirm token suggestions and their structured paths before applying them to Base.tokens.json.

Does design token generation work without SCSS files in the component directory?▼

No, design token generation does not work without SCSS files in the component directory. The Skill assumes the presence of SCSS files in the core component directory to analyze and extract CSS variables for structured token creation.