design-tokens-validator

【设计系统】验证代码和样式是否使用官方设计令牌而非硬编码值。当（1）审查CSS/SCSS/Tailwind/styled-components中的硬编码颜色/间距、（2）检查SwiftUI/UIKit中的原始颜色/字体值、（3）审计Unity样式中的魔法数字、（4）执行设计系统合规性、（5）用户要求‘检查设计令牌’、‘验证令牌’、‘查找硬编码值’或‘审计设计系统使用’时使用。

SKILL.md

--- frontmatter

name: design-tokens-validator
description: "[Design System] Validate that code and styles use official design tokens instead of hard-coded values. Use when (1) reviewing CSS/SCSS/Tailwind/styled-components for hard-coded colors/spacing, (2) checking SwiftUI/UIKit for raw color/font values, (3) auditing Unity styles for magic numbers, (4) enforcing design system compliance, (5) user asks to 'check design tokens', 'validate tokens', 'find hard-coded values', or 'audit design system usage'."

Design Tokens Validator

Scan source files for hard-coded design values and suggest official token replacements.

Quick Start

bash

python3 scripts/validate_tokens.py --tokens tokens.json --source src/

Supported Token Categories

Category	Example Token	Detects
Colors	`color.primary.500`	Hex (#FF0000), rgba(), hsl(), named colors
Typography	`font.size.md`, `font.weight.bold`	px/rem font sizes, numeric weights
Spacing	`spacing.4`, `spacing.lg`	px/rem padding/margin/gap values
Radius	`radius.md`	Border-radius values
Shadows	`shadow.lg`	Box-shadow definitions

Detection Examples

CSS/SCSS

css

/* Violation */
.card { color: #222222; padding: 17px; }

/* Correct */
.card { color: var(--color-text-primary); padding: var(--spacing-4); }

SwiftUI

swift

// Violation
Text("Hello").foregroundColor(Color(hex: "#222222"))

// Correct
Text("Hello").foregroundColor(.textPrimary)