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