How do I install the Design Tokens skill?

Run npx skillmds@latest add build-with-dhiraj/design-tokens in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Design Tokens safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Design Tokens?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Design Tokens free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Design Tokens?

build-with-dhiraj (@build-with-dhiraj) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Design Tokens by build-with-dhiraj — Agent Skill

Name: Design Tokens
Author: build-with-dhiraj

Design Tokens

Generate, extend, or audit design tokens in DTCG format with the 3-tier architecture (primitive → semantic → component). Use when the user wants a color palette, type scale, spacing/shadow/radius/motion tokens, multi-brand theming, or wants to validate token files. Covers colors, typography, spacing, shadows, borders, breakpoints, motion, gradients, opacity, blur, sizing, states, theming.

File contents

Skill: Design Tokens

Produce and maintain DTCG ($type/$value) tokens following the project's 3-tier system.

Steps

Read KIT-PROTOCOL.md → "Token System" + "Color/Typography/Spacing Guidelines" for the rules (4px base, Major Third scale, OKLCH palette generation, dark-mode-at-semantic-layer).
Read the relevant existing files in tokens/ to match structure: colors.json, typography.json, spacing.json, shadows.json, borders.json, breakpoints.json, motion.json, gradients.json, opacity.json, blur.json, sizing.json, states.json, theming.json.
Generate/extend tokens:
- Primitives = raw values (never used directly). Semantic = purpose aliases. Component = component-scoped.
- New palettes: generate 11 OKLCH shades; verify 500 ≥ 4.5:1 on white (text), 600 ≥ 3:1 (UI) using the a11y-audit skill / scripts/contrast.py.
- Multi-brand/density → theming.json.
Validate: run python3 scripts/validate_tokens.py (JSON validity + alias resolution).

Output

DTCG JSON. Preserve $description on every token. Reference, never hardcode.

Frequently asked questions