design-tokens

Community

Forge scalable design tokens for any project.

Authorandronics
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This skill helps design teams create, organize, and implement design tokens across platforms, providing a single source of truth for color, spacing, typography, and component tokens.

Core Features & Use Cases

  • Token architecture: global, semantic, and component tokens.
  • Multi-format outputs: CSS variables, Sass, JS, JSON.
  • Use with design systems: easily theme and adapt tokens for dark mode.

Quick Start

Define color tokens for the brand and export a button token set in CSS variables.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 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: design-tokens
Download link: https://github.com/andronics/claude-plugin-css-pro/archive/main.zip#design-tokens

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