design-tokens
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".
Security Assessment
About design-tokens
The 'design-tokens' skill is designed to generate foundational design tokens for digital projects, providing a structured system of values for colors, spacing, typography, and component-level styling. By creating a central source of truth, it ensures that every component in a project references consistent design parameters rather than relying on hardcoded values. This approach simplifies maintenance, promotes design consistency, and accelerates development workflows, particularly in projects where visual uniformity across light and dark themes is essential.
The skill offers several key capabilities. It scans the existing codebase for CSS variables, Tailwind configurations, theme providers, and token files to either extend or fill gaps in the design system. Users can provide a design brief or specify a design philosophy, which guides the generation of light and dark color palettes, spacing scales, and type ramps. The output adapts to the project's technology stack, producing CSS custom properties, Tailwind config extensions, or CSS-in-JS theme files. The skill also emphasizes semantic color tokens and consistent spacing units, aligning token values with the chosen aesthetic philosophy.
Typical use cases include initializing design tokens at the start of a new project, establishing a coherent visual system for a design team, or preparing a codebase for component development without hardcoded styles. Target users are frontend developers, UI/UX designers, and teams implementing design systems, particularly those working with frameworks like Tailwind CSS, Material UI, or Chakra UI. The skill is ideal when a project references 'tokens' or 'design system', or when developers need to create or expand token libraries that support both light and dark themes.
FAQ
How do I start using this skill in my project?
Run the skill after reviewing your design brief and before building any components. It will generate the foundational tokens that all components should reference.
Which formats can the generated tokens be output in?
The skill can output tokens as CSS custom properties, Tailwind config extensions, or CSS-in-JS theme files, depending on the project's tech stack.
Does it support both light and dark mode palettes?
Yes, the skill generates intentional light and dark mode palettes using semantic color tokens and appropriate media queries or data attributes.
Can this skill be used with existing design tokens?
Absolutely. It scans the codebase for existing token definitions and extends them rather than replacing, filling in missing values or scales.
What prerequisites are required to use this skill?
A basic design brief or specified aesthetic philosophy helps guide token generation. Familiarity with CSS, Tailwind, or CSS-in-JS is useful for integrating the generated tokens.
Install design-tokens
Quick Setup:
- Copy the skill folder to
.claude/skills/ - Claude will automatically detect and use the skill
Repository
julianoczkowski/designer-skills