design-tokens-validator

[设计系统] 验证代码和样式是否使用了官方的设计令牌而非硬编码值。在以下情况下使用：(1) 审查CSS/SCSS/Tailwind/styled-components中的硬编码颜色/间距，(2) 检查SwiftUI/UIKit中的原始颜色/字体值，(3) 审核Unity样式中的魔术数字，(4) 强制执行设计系统的一致性，(5) 用户要求'检查设计令牌'、'验证令牌'、'查找硬编码值'或'审核设计系统的使用情况'。

Design Tokens Validator

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

Quick Start

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

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

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

SwiftUI

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

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