---

name: design-system-validator description: 验证代码是否符合设计系统规范，检查令牌使用、组件属性和样式一致性 allowed-tools:

• Read
• Write
• Edit
• Bash
• Glob
• Grep

---

设计系统验证器技能

目的

验证代码是否遵循设计系统规范，检查令牌使用、组件属性使用和样式一致性。

能力

• 检查CSS/SCSS中的设计令牌使用
• 验证组件属性使用
• 检测应使用令牌的硬编码值
• 确保命名约定合规性
• 生成合规性报告
• 与代码检查工具集成

目标流程

• design-system.js
• component-library.js

集成点

• 用于设计系统的ESLint插件
• 用于CSS验证的Stylelint
• 自定义AST分析器
• 令牌文档

输入模式

{
  "type": "object",
  "properties": {
    "scanPath": {
      "type": "string",
      "description": "要验证的代码路径"
    },
    "tokenDefinitions": {
      "type": "string",
      "description": "设计令牌定义文件路径"
    },
    "rules": {
      "type": "object",
      "properties": {
        "enforceTokenColors": { "type": "boolean", "default": true },
        "enforceTokenSpacing": { "type": "boolean", "default": true },
        "enforceTokenTypography": { "type": "boolean", "default": true },
        "allowHardcodedValues": { "type": "array", "items": { "type": "string" } }
      }
    },
    "fileTypes": {
      "type": "array",
      "items": { "type": "string" },
      "default": ["css", "scss", "tsx", "jsx"]
    },
    "severity": {
      "type": "string",
      "enum": ["error", "warning", "info"],
      "default": "warning"
    }
  },
  "required": ["scanPath", "tokenDefinitions"]
}

输出模式

{
  "type": "object",
  "properties": {
    "violations": {
      "type": "array",
      "items": {
        "type": "object",
        "properties": {
          "file": { "type": "string" },
          "line": { "type": "number" },
          "rule": { "type": "string" },
          "message": { "type": "string" },
          "suggestion": { "type": "string" }
        }
      }
    },
    "summary": {
      "type": "object",
      "properties": {
        "filesScanned": { "type": "number" },
        "totalViolations": { "type": "number" },
        "byRule": { "type": "object" },
        "complianceScore": { "type": "number" }
      }
    },
    "tokenCoverage": {
      "type": "object",
      "description": "令牌使用统计"
    }
  }
}

使用示例

const result = await skill.execute({
  scanPath: './src/components',
  tokenDefinitions: './tokens/design-tokens.json',
  rules: {
    enforceTokenColors: true,
    enforceTokenSpacing: true,
    enforceTokenTypography: true
  },
  severity: 'warning'
});