design-tokens
This skill creates a complete token foundation for new projects, generating semantic color tokens, spacing scales, typography systems, and motion parameters in your project's native format—whether Tailwind, CSS custom properties, or theme files. It always includes intentional light and dark mode palettes derived from your chosen design philosophy.
Design-tokens generates foundational design tokens and CSS variables tailored to your project's tech stack and aesthetic direction.
AI-generated summary based on this skill's SKILL.md
Install
julianoczkowski/designer-skills/design-tokens
git clone https://github.com/julianoczkowski/designer-skills
cp -r designer-skills/design-tokens ~/.claude/skills/design-tokensFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How does design-tokens generate design tokens for my project?
design-tokens creates a complete token foundation by generating semantic color tokens, spacing scales, typography systems, and motion parameters in your project's native format—whether Tailwind, CSS custom properties, or theme files. It always includes intentional light and dark mode palettes derived from your chosen design philosophy, ensuring consistency from the start.
Can design-tokens create a design system with CSS variables?
Yes. design-tokens generates CSS custom properties organized as a complete design system, including semantic color tokens, spacing scales, and typography systems. The skill structures these variables for both light and dark modes, making it easy to implement theme switching and maintain visual consistency across your entire project.
What formats does design-tokens support for output?
design-tokens outputs tokens in multiple formats to fit your workflow: Tailwind config files, CSS custom properties, JSON token files, and theme files. This flexibility lets you integrate the generated tokens directly into your existing build process and component architecture without reformatting.
How do I set up design tokens for light and dark mode?
design-tokens automatically generates intentional light and dark mode palettes as part of its token creation process. The skill derives these palettes from your chosen design philosophy, creating semantic color tokens that work across both modes. You can then reference these tokens in your CSS or Tailwind config for instant theme switching.
Can design-tokens help establish a spacing scale and color palette?
Absolutely. design-tokens sets up spacing, typography, and color scales based on your design philosophy. It generates a complete visual system including semantic color tokens, proportional spacing scales, and font hierarchies—all structured so you can standardize component-level token references across your project.
Is design-tokens suitable for projects using Tailwind?
Yes. design-tokens can extend or establish tokens directly in your Tailwind config, generating color palettes, spacing scales, and typography tokens that integrate seamlessly. The skill creates a token system before you build components, ensuring your design foundation is intentional and consistent from day one.
SKILL.md
rendered from the published skill — quoted content, verbatim
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, ChakraextendTheme, shadcnglobals.css) - Design token JSON files
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 1 file
design-tokens/SKILL.md