How do I install the Design Tokens skill?

Run npx skillmds@latest add mshadmanrahman/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?

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

Design Tokens by mshadmanrahman — Agent Skill

Name: Design Tokens
Author: mshadmanrahman

File contents

You are establishing the design system foundation. Tokens defined here are used by every component in /frontend-design. Get this right before building anything.

First, check: does a design system already exist for this project? Ask the user to confirm. If yes, document the existing tokens rather than inventing new ones. Pull from Figma or existing CSS files if accessible.

If starting from scratch, create CSS custom properties across these five categories:

Color Brand colors (primary, secondary, accent), semantic colors (action, destructive, success, warning), neutral scale (background, surface, border, text), feedback colors (error, warning, success, info). Name every token by its purpose, not its value. Use --color-action not --color-blue. Use --color-text-primary not --color-gray-900.

Typography Font family (body, heading, mono if needed), type scale (xs, sm, base, lg, xl, 2xl, 3xl), font weights (regular, medium, semibold, bold), line heights (tight, normal, relaxed).

Spacing A consistent scale, not arbitrary values. Use a base unit (4px or 8px) and name steps by feel: --spacing-tight, --spacing-comfortable, --spacing-spacious. At minimum: 4px, 8px, 12px, 16px, 24px, 32px, 48px, 64px.

Border radius Small (input, button), medium (card), large (modal, sheet), full (pill, avatar).

Motion A duration scale (fast, default, slow) and one easing curve. Justify the slow end against the slowest device your user is actually holding.

Output as a ready-to-paste CSS :root block. Include a brief comment above each category explaining the system logic. No inline documentation that pads length; every comment must earn its space.

Dark mode: structure the tokens so that dark mode requires only new token values, not new components. Use semantic names so a dark theme can override --color-background without touching component code.

Token audit (use this when Figma and the frontend do not match)

If a value looks correct in Figma but renders differently in the browser, run this audit before filing a bug. Paste your Figma token export and your CSS file and ask:

"I am going to paste two things: a Figma token export and a CSS file. Compare them. Tell me: (1) which tokens in the export are not referenced anywhere in the CSS, (2) which CSS values are hardcoded instead of using a token, and (3) whether there are any unit mismatches between the token values and the CSS values (for example, a px value in the token but a rem value in the CSS). List each issue with the specific token name and the line in the CSS where the problem appears."

The four most common causes of a mismatch: the token was never exported from Figma, the token was exported but the CSS references a hardcoded value instead, the units differ (px in Figma, rem in CSS), or the comparison is being made at different zoom levels. Confirm all four before concluding something is broken.

---name: design-tokensdescription: Establish color, typography, spacing, radius and motion as named role-based tokens. Use before building any interface.---You are establishing the design system foundation. Tokens defined here are used by every component in `/frontend-design`. Get this right before building anything.First, check: does a design system already exist for this project? Ask the user to confirm. If yes, document the existing tokens rather than inventing new ones. Pull from Figma or existing CSS files if accessible.If starting from scratch, create CSS custom properties across these five categories:**Color**Brand colors (primary, secondary, accent), semantic colors (action, destructive, success, warning), neutral scale (background, surface, border, text), feedback colors (error, warning, success, info). Name every token by its purpose, not its value. Use `--color-action` not `--color-blue`. Use `--color-text-primary` not `--color-gray-900`.**Typography**Font family (body, heading, mono if needed), type scale (xs, sm, base, lg, xl, 2xl, 3xl), font weights (regular, medium, semibold, bold), line heights (tight, normal, relaxed).**Spacing**A consistent scale, not arbitrary values. Use a base unit (4px or 8px) and name steps by feel: `--spacing-tight`, `--spacing-comfortable`, `--spacing-spacious`. At minimum: 4px, 8px, 12px, 16px, 24px, 32px, 48px, 64px.**Border radius**Small (input, button), medium (card), large (modal, sheet), full (pill, avatar).**Motion**A duration scale (fast, default, slow) and one easing curve. Justify the slow end against the slowest device your user is actually holding.Output as a ready-to-paste CSS `:root` block. Include a brief comment above each category explaining the system logic. No inline documentation that pads length; every comment must earn its space.Dark mode: structure the tokens so that dark mode requires only new token values, not new components. Use semantic names so a dark theme can override `--color-background` without touching component code.**Token audit (use this when Figma and the frontend do not match)**If a value looks correct in Figma but renders differently in the browser, run this audit before filing a bug. Paste your Figma token export and your CSS file and ask:"I am going to paste two things: a Figma token export and a CSS file. Compare them. Tell me: (1) which tokens in the export are not referenced anywhere in the CSS, (2) which CSS values are hardcoded instead of using a token, and (3) whether there are any unit mismatches between the token values and the CSS values (for example, a px value in the token but a rem value in the CSS). List each issue with the specific token name and the line in the CSS where the problem appears."The four most common causes of a mismatch: the token was never exported from Figma, the token was exported but the CSS references a hardcoded value instead, the units differ (px in Figma, rem in CSS), or the comparison is being made at different zoom levels. Confirm all four before concluding something is broken.

Frequently asked questions

Design Tokens