Design Tokens
Generates design tokens in various formats (JSON, CSS, etc.) based on provided brand guidelines and specifications.
Install on your platform
We auto-selected Claude Code based on this skill’s supported platforms.
Run in terminal (recommended)
claude mcp add laurigates-design-tokens npx -- -y @trustedskills/laurigates-design-tokens
Or manually add to ~/.claude/settings.json
{
"mcpServers": {
"laurigates-design-tokens": {
"command": "npx",
"args": [
"-y",
"@trustedskills/laurigates-design-tokens"
]
}
}
}Requires Claude Code (claude CLI). Run claude --version to verify your install.
About This Skill
What it does
This skill helps you generate design tokens, which are named values used to represent design decisions like colors, spacing, and typography. It facilitates the creation of a structured system for managing these tokens using CSS custom properties (variables). The skill supports organizing tokens into three tiers: primitive, semantic, and component – enabling scalable and maintainable design systems.
When to use it
- Setting up a design token system from scratch.
- Organizing existing CSS custom properties.
- Implementing light/dark theme switching.
- Integrating design tokens with frameworks like Tailwind CSS.
Key capabilities
- Token Architecture: Organizing design tokens for scalability using a three-tier structure (primitive, semantic, component).
- CSS Custom Properties: Defining and managing variable patterns and inheritance within CSS.
- Theme Systems: Implementing light/dark mode functionality.
- Component Integration: Applying tokens consistently across different UI components.
Example prompts
- "Generate design tokens for a blue color palette with shades 50, 100, 500, 600, and 700."
- "Create semantic tokens based on these primitive values: --color-blue-600, --spacing-4."
- "Show me an example of how to implement a light/dark theme using design tokens."
Tips & gotchas
- This skill is designed for setting up and organizing design token systems; it's not intended for writing individual component styles or handling CSS layout.
- Familiarity with CSS custom properties and basic design principles will be helpful to effectively utilize this skill.
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.