How do I install the Tokens skill?

Run npx skillmds@latest add dragoon0x/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 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 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 Tokens free to use?

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

Who published Tokens?

dragoon0x (@dragoon0x) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Tokens

Name: Tokens
Author: dragoon0x

Generate a complete design token set. Covers color, typography, spacing, shadows, radii, and breakpoints. Exports as CSS custom properties, Tailwind config, SCSS variables, and W3C Design Tokens JSON.

dragoon0x cf993f9 914 B Updated Sep 17, 2026

Design & Media

Install

Press C to copy

$ npx skillmds@latest add dragoon0x/tokens

Installs into ~/.claude/skills (or .claude/skills inside a project). Restart Claude Code to pick it up.

Download SKILL.md

＋ Add to collection

README badge

[![SkillMD](https://skillmd.com/badge/dragoon0x/tokens.svg)](https://skillmd.com/skills/dragoon0x/tokens)

Trust & safety

Audits pending

Not yet audited · commit cf993f9

Works with: Claude Code Claude.ai OpenAI Codex +

File contents

/tokens — Complete Design Token Generator

Generate tokens for every design dimension:

Color: Full palette (via /palette) + semantic tokens (via /semantic-color) Typography: Type scale (via /type-scale) + font stacks + line heights + letter spacing Spacing: Full spacing scale (via /spacing) Shadows: Elevation system (sm, md, lg, xl, 2xl) Border Radius: Scale (sm: 4px, md: 8px, lg: 12px, xl: 16px, 2xl: 24px, full: 9999px) Breakpoints: sm: 640px, md: 768px, lg: 1024px, xl: 1280px, 2xl: 1440px

Output ALL tokens in four formats:

CSS Custom Properties (:root block)
Tailwind config (theme.extend)
SCSS variables
W3C Design Tokens JSON

dragoon0x/optik/tree/main/source/skills/tokens commit cf993f9cd8

Frequently asked questions

npx skillmds@latest add dragoon0x/tokens