skills.rest
Sjdjdiejdrirhdkjej
SjdjdiejdrirhdkjejCOMMUNITY
Explore all skills by this author →
GitHub

design-tokens

Generate tokens.json and tokens.css design tokens for multi-surface systems.

Updated Jan 5, 2026
Search Tags:#accessibility#tailwind#design-system#css-variables#design-tokens#tokens.json
One-click install
npx skills add https://github.com/Sjdjdiejdrirhdkjej/Claude-code-conductor --skill design-tokens-sjdjdiejdrirhdkjej
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-tokens
Source: https://github.com/Sjdjdiejdrirhdkjej/Claude-code-conductor/tree/main/.claude/skills/design-tokens
Command: npx skills add https://github.com/Sjdjdiejdrirhdkjej/Claude-code-conductor --skill design-tokens-sjdjdiejdrirhdkjej

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a centralized design token system to generate, validate, and apply tokens across UI surfaces (UI, emails, PDFs, CLI, charts) and documentation assets, ensuring consistency and accessibility.

Core Features & Use Cases

  • Central token source: tokens.json and tokens.css that describe color, typography, spacing, and data-viz palettes.
  • Brownfield and greenfield support: scans existing code to consolidate tokens or generates a complete palette from scratch.
  • WCAG-conscious: ensures contrast and accessible token outputs across surfaces.

Quick Start

Use the design-tokens skill to initialize a tokens.json and tokens.css suite for a new design system and apply them to your project.

Frequently Asked Questions about design-tokens

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

FAQPage Schema
How do I consolidate design tokens into a single source of truth for multiple UI surfaces?▼

To consolidate design tokens into a single source of truth, this skill generates a centralized tokens.json and CSS variable set. This ensures consistent application of colors, typography, and spacing across UI components, emails, PDFs, CLI styling, charts, and documentation.

What is the best way to generate accessible CSS variables for a design system?▼

Generating accessible CSS variables for a design system is achieved by producing WCAG-conscious token outputs. This skill validates contrast and generates a CSS variable set that maintains accessibility compliance across all applied surfaces.

Can I scan existing CSS and code to consolidate design tokens for a brownfield project?▼

Yes, you can scan existing code to consolidate design tokens for brownfield projects. This skill extracts current color, typography, and spacing values to unify them into a standardized tokens.json file without requiring a full system rewrite.

Does this design token generator support data-viz palettes and typography scales?▼

Yes, this design token generator supports data-viz palettes and typography scales. It consolidates these elements into your tokens.json file, ensuring that charts and visualizations maintain consistency with your overall design system architecture.

Do I need external dependencies to generate and validate tokens.json and tokens.css files?▼

No, you do not need external dependencies to generate and validate tokens.json and tokens.css files. This skill requires no runtime dependency beyond standard tooling to produce, apply, and validate your design token outputs.

Related Skills

Explore More Design & Creative Skills→
GDSDNGDSDN
3

extract-tokens

Extract design tokens from consolidated patterns into W3C DTCG-compliant JSON.

Community
Advanced
marcusgollmarcusgoll
91

design-tokens

Generate and maintain design tokens across UI, email, PDF, CLI, chart, and doc surfaces.

Community
Advanced
hongmaple0820hongmaple0820
9

ui-design-system

Generate design-system tokens and handoff documentation for React, Tailwind, and CSS.

Community
Advanced
Pabloprogramador23Pabloprogramador23

reversa-design-system

Extract design tokens from CSS, Tailwind themes, and screenshots into a design-system reference.

Community
Advanced