design-tokens — Skills — getagentictools

What it does

"Set up design tokens for this project"

"Generate a token system based on Dieter Rams"

"I need a spacing scale and color palette before I start building"

"Create tokens that match our brief"

CSS variable definitions (:root, [data-theme], custom property files)

Tailwind config (tailwind.config.js, tailwind.config.ts) and any theme extensions

Theme provider files (Material UI createTheme, Chakra extendTheme, shadcn globals.css)

design tokens

Source

Repository: https://github.com/julianoczkowski/designer-skills

design-tokens FAQ

What does the design-tokens skill do?

Generate a design tokens file (CSS variables or Tailwind config) based on a chosen aesthetic philosophy, with light and dark mode palettes, spacing scale, type ramp, and component-level tokens. Use when starting a new project, establishing a visual system, setting up tokens, or mentions "tokens" or "design system". "Set up design tokens for this project" "Generate a token system based on Dieter Rams"

What does design-tokens require?

"Generate a token system based on Dieter Rams" "I need a spacing scale and color palette before I start building" Design token JSON files (Style Dictionary format, Figma token exports) Token Categories Accent colors may need lightness adjustments to maintain contrast ratios.

How do I install design-tokens?

Run: npx -y skills add https://github.com/julianoczkowski/designer-skills --skill design-tokens --agent claude-code — the source lives at github.com/julianoczkowski/designer-skills.

Maintain design-tokens?

Let people know it's listed here — add the badge (live metrics, light/dark aware) or a plain link to your README or docs.

[design-tokens on getagentictools](https://getagentictools.com/skills/julianoczkowski-designer-skills-design-tokens?ref=badge)

npx agentictools info skills/julianoczkowski-designer-skills-design-tokens

The second line is the CLI lookup for this page — handy in READMEs and docs.