Design Tokens Validator

[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'.

aibot88 Updated 3 repo stars

File contents

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)

aibot88/sec_skill_store/tree/main/skills/claudskills/design-tokens-validator commit c40184a46d

Frequently asked questions

npx skillmds@latest add aibot88/design-tokens-validator