---

name: color-palette-generator 描述: 生成符合WCAG标准的无障碍配色方案 允许使用的工具:

• 读取
• 写入
• 编辑
• Bash
• Glob
• Grep

---

配色方案生成器技能

目的

生成符合WCAG对比度要求的无障碍配色方案，创建颜色梯度，并导出为设计令牌格式。

能力

• 从基础颜色创建颜色梯度
• 生成互补色、类似色和三色配色方案
• 确保符合WCAG 2.1 AA/AAA对比度标准
• 将配色方案导出为设计令牌格式（CSS、SCSS、JSON）
• 生成深色模式颜色变体
• 计算颜色对比度比率
• 建议无障碍颜色替代方案

目标流程

• design-system.js
• component-library.js (colorSystemDesignTask)
• accessibility-audit.js

集成点

• chroma.js 用于颜色操作
• color-contrast-checker 用于WCAG验证
• Style Dictionary 用于令牌导出

输入模式

{
  "type": "object",
  "properties": {
    "baseColors": {
      "type": "array",
      "items": { "type": "string" },
      "description": "十六进制格式的基础颜色"
    },
    "schemeType": {
      "type": "string",
      "enum": ["complementary", "analogous", "triadic", "split-complementary", "monochromatic"]
    },
    "contrastLevel": {
      "type": "string",
      "enum": ["AA", "AAA"],
      "default": "AA"
    },
    "includeDarkMode": {
      "type": "boolean",
      "default": true
    },
    "outputFormat": {
      "type": "string",
      "enum": ["css", "scss", "json", "tokens"],
      "default": "tokens"
    }
  },
  "required": ["baseColors"]
}

输出模式

{
  "type": "object",
  "properties": {
    "palette": {
      "type": "object",
      "description": "生成的带有梯度的配色方案"
    },
    "contrastMatrix": {
      "type": "array",
      "description": "颜色对之间的对比度比率"
    },
    "darkModePalette": {
      "type": "object",
      "description": "深色模式颜色变体"
    },
    "tokenOutput": {
      "type": "string",
      "description": "以请求格式导出的令牌"
    },
    "accessibilityReport": {
      "type": "object",
      "description": "WCAG合规性报告"
    }
  }
}

使用示例

const result = await skill.execute({
  baseColors: ['#1a73e8', '#34a853', '#ea4335'],
  schemeType: 'complementary',
  contrastLevel: 'AA',
  includeDarkMode: true,
  outputFormat: 'tokens'
});