skills.rest
anthril
anthrilOFFICIAL
Explore all skills by this author →
WebsiteGitHub

design-tokens

Generate W3C Design Tokens JSON and export CSS variables, Tailwind v4, and Style Dictionary formats.

3|Updated Apr 1, 2026
Search Tags:#design#css#conversion#tailwind#tokens#design-system
One-click install
npx skills add https://github.com/anthril/official-claude-plugins --skill design-tokens-anthril
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-tokens
Source: https://github.com/anthril/official-claude-plugins/tree/main/plugins/brand-manager/skills/design-tokens
Command: npx skills add https://github.com/anthril/official-claude-plugins --skill design-tokens-anthril

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

Generate a complete design token system and export it to CSS variables, Tailwind v4, JSON, and Style Dictionary to enable consistent theming across web and design tooling.

Core Features & Use Cases

  • Token inventory generation and validation from a single source of truth
  • Multi-format exports: CSS variables, Tailwind v4, JSON (W3C), and Style Dictionary
  • Built-in token-converter for round-tripping between formats
  • Real-world use-case: teams migrating existing brand tokens into a unified system across platforms

Quick Start

Run the token converter to generate all formats from a single W3C JSON source.

Frequently Asked Questions about design-tokens

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

FAQPage Schema
How do I export design tokens to CSS variables and Tailwind v4?▼

Export design tokens to CSS variables and Tailwind v4 by generating a W3C Design Tokens JSON source and running the built-in converter, which derives ready-to-use CSS variables and Tailwind v4 configurations for web app theming.

What is a raw and semantic design token model for design systems?▼

A raw and semantic design token model enforces strict separation between base raw values and semantic tokens, enabling consistent theming across web apps and design tooling while allowing a converter to round-trip between formats.

Can I use Style Dictionary to convert W3C design tokens?▼

Yes, the converter generates a W3C Design Tokens JSON and derives Style Dictionary exports, enabling cross-format consumption and round-tripping between formats for design-system teams building token systems.

Does this approach support migrating existing brand tokens into a unified system?▼

Migrating existing brand tokens into a unified system is a core use case. The converter generates a W3C Design Tokens JSON from a single source of truth and derives multi-format exports for consistent theming across platforms.

What's the best way to maintain a single source of truth for design tokens?▼

Maintain a single source of truth by generating a W3C Design Tokens JSON inventory and deriving CSS variables, Tailwind v4, and Style Dictionary exports from it using a built-in converter for cross-format consumption.

Why does my design token converter output mismatched CSS variables?▼

Mismatched CSS variables may occur if the strict raw and semantic token model is not followed. The converter enforces this model to correctly round-trip between formats and produce ready-to-use artifacts from the W3C JSON source.

Related Skills

Explore More Design & Creative Skills→
kinncjkinncj
23

visual-identity

Generate palette, typography, and tokens JSON for design-tokens workflows.

Community
Advanced
amit397amit397

tailwind-design-system

Build design systems with Tailwind CSS v4 using CSS-first configuration.

Community
Advanced
Higashi-KotaHigashi-Kota

ui-theme

Generate CSS variables and Tailwind theme from JSON design tokens.

Community
Intermediate
Sir-chawakornSir-chawakorn
9

design-token-system

Architect W3C-DTCG design-token systems with Style Dictionary for multi-platform exports.

Community
Advanced