Design Tokens
Automatically generate and manage design tokens across platforms, ensuring consistent branding and efficient UI development.
Install on your platform
We auto-selected Claude Code based on this skill’s supported platforms.
Run in terminal (recommended)
claude mcp add design-tokens npx -- -y @trustedskills/design-tokens
Or manually add to ~/.claude/settings.json
{
"mcpServers": {
"design-tokens": {
"command": "npx",
"args": [
"-y",
"@trustedskills/design-tokens"
]
}
}
}Requires Claude Code (claude CLI). Run claude --version to verify your install.
About This Skill
What it does
This skill allows AI agents to generate, manage, and apply design tokens. It helps maintain consistency in visual elements across projects by defining values for colors, typography, spacing, and more. The agent can output these tokens in various formats suitable for CSS, JavaScript, or other styling systems.
When to use it
- Creating a Design System: Generate foundational design tokens (colors, fonts, spacing) for a new project.
- Maintaining Brand Consistency: Ensure consistent visual branding across multiple websites or applications by applying existing design token values.
- Automating Style Updates: Quickly update the appearance of an application by modifying design token values and having the agent propagate those changes.
- Generating CSS from Tokens: Convert a set of design tokens into usable CSS code for immediate implementation.
Key capabilities
- Generation of color palettes, typography scales, and spacing units.
- Output in various formats (e.g., JSON, CSS).
- Management of existing token sets.
- Application of tokens to styling systems.
Example prompts
- "Generate a design token for the primary brand color."
- "Convert these design tokens into CSS variables."
- "Update the 'secondary-text' color token to #333333."
- “Create a typography scale with 4 font sizes, starting from 16px.”
Tips & gotchas
The skill’s effectiveness depends on clear and specific requests. Providing context about the desired visual style or brand guidelines will improve the quality of generated tokens.
Tags
TrustedSkills Verification
Unlike other registries that point to live repositories, TrustedSkills pins every skill to a verified commit hash. This protects you from malicious updates — what you install today is exactly what was reviewed and verified.
Security Audits
| Gen Agent Trust Hub | Pass |
| Socket | Pass |
| Snyk | Pass |
🌐 Community
Passed automated security scans.