Design Tokens

Generates a complete design token system before you start building components, so you're not hardcoding colors and spacing values everywhere. It checks what already exists (Tailwind config, CSS variables, theme files) and extends rather than replaces. You get semantic color tokens for light and dark mode, a spacing scale tuned to your chosen design philosophy, typography ramp, shadows, motion values, and breakpoints. The dark mode implementation is thoughtful, not just inverted values, and it handles both system preference and manual toggles. Best used right after your design brief is settled but before touching any UI code. The token categories are opinionated in a good way, pushing you toward semantic naming instead of the usual primary-500 chaos.

skills.sh installs: 6.1K
GitHub stars: 601
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add julianoczkowski/designer-skills --skill design-tokens --agent claude-code

Installs into .claude/skills of the current project.

Files

This skill generates the foundational design tokens for a project. Run this after the design brief and before building any components. Every component built after this references these tokens instead of hardcoding values.

Example prompts

"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"

Process

Check what already exists. Before generating anything, scan the codebase for:
- 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 token JSON files (Style Dictionary format, Figma token exports)
- Any tokens.css, variables.css, theme.css, or similarly named files
- package.json for UI framework dependencies (tailwindcss, @mui/material, @chakra-ui/react, etc.)