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
json
{
"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
javascript
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