mshadmanrahman

Design Tokens — Design skill for Claude Code

Design community

You are establishing the design system foundation.

How to install Design Tokens

Installs to ~/.claude/skills/mshadmanrahman-claude-for-designers-design-tokens/SKILL.md

Terminal

mkdir -p ~/.claude/skills/mshadmanrahman-claude-for-designers-design-tokens && curl -fsSL https://raw.githubusercontent.com/mshadmanrahman/claude-for-designers/HEAD/skills/design-tokens.md -o ~/.claude/skills/mshadmanrahman-claude-for-designers-design-tokens/SKILL.md

Restart Claude Code, or start a new session, for it to be picked up.

What Design Tokens does

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, se

Alternatives in Design

Frontend Design — Create distinctive, production-grade frontend interfaces with high design quality 94.1k ★
Part 3 — Technical Design Document Generator — I'll help you create a Technical Design Document for your MVP 2.1k ★
Deepen — Spare-budget design pass 1.1k ★