设计令牌技能Skill design-tokens

---

名称: 设计令牌 描述: 设计令牌的管理、生成和多平台支持。 允许工具: 读取、写入、编辑、Bash、Glob、Grep

设计令牌技能

提供设计令牌管理的专家级协助。

能力

• 定义设计令牌
• 生成平台输出
• 配置样式字典
• 管理令牌层级结构
• 处理主题化

令牌结构

{
  "color": {
    "primary": {
      "50": { "value": "#eff6ff" },
      "500": { "value": "#3b82f6" },
      "900": { "value": "#1e3a8a" }
    }
  },
  "spacing": {
    "xs": { "value": "0.25rem" },
    "sm": { "value": "0.5rem" },
    "md": { "value": "1rem" }
  }
}

样式字典配置

module.exports = {
  source: ['tokens/**/*.json'],
  platforms: {
    css: {
      transformGroup: 'css',
      buildPath: 'build/css/',
      files: [{ destination: 'variables.css', format: 'css/variables' }],
    },
  },
};

目标流程

• 设计系统
• 多平台设计
• 主题化实施