Design Tokens Skill
Expert assistance for design token management.
Capabilities
- Define design tokens
- Generate platform outputs
- Configure Style Dictionary
- Manage token hierarchies
- Handle theming
Token Structure
{
"color": {
"primary": {
"50": { "value": "#eff6ff" },
"500": { "value": "#3b82f6" },
"900": { "value": "#1e3a8a" }
}
},
"spacing": {
"xs": { "value": "0.25rem" },
"sm": { "value": "0.5rem" },
"md": { "value": "1rem" }
}
}Style Dictionary Config
module.exports = {
source: ['tokens/**/*.json'],
platforms: {
css: {
transformGroup: 'css',
buildPath: 'build/css/',
files: [{ destination: 'variables.css', format: 'css/variables' }],
},
},
};Target Processes
- design-system
- multi-platform-design
- theming-implementation