Design Tokens
Generates design tokens (color, typography, spacing) based on provided brand guidelines for consistent 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 dadbodgeoff-design-tokens npx -- -y @trustedskills/dadbodgeoff-design-tokens
Or manually add to ~/.claude/settings.json
{
"mcpServers": {
"dadbodgeoff-design-tokens": {
"command": "npx",
"args": [
"-y",
"@trustedskills/dadbodgeoff-design-tokens"
]
}
}
}Requires Claude Code (claude CLI). Run claude --version to verify your install.
About This Skill
What it does
This skill, dadbodgeoff-design-tokens, provides access to a collection of design tokens. These tokens define visual properties like colors, typography, and spacing, ensuring consistency across different platforms and applications. It allows AI agents to leverage these pre-defined values for creating consistent designs.
When to use it
- Brand Consistency: When you need an AI agent to generate designs that adhere strictly to a brand's established visual guidelines.
- UI/UX Prototyping: To quickly prototype user interfaces by leveraging predefined design elements.
- Automated Design Generation: For automating the creation of marketing materials or website components based on specific design token values.
- Design System Integration: When working with a design system and needing to access its tokens programmatically.
Key capabilities
- Access to pre-defined design tokens.
- Consistent visual properties across platforms.
- Brand adherence through standardized design elements.
Example prompts
- "Use the primary brand color for the button background."
- "Apply the 'body-text' typography style to this paragraph."
- "Generate a card with 16px spacing around its content, using tokens."
Tips & gotchas
The effectiveness of this skill depends on the availability and quality of design tokens within the collection. Ensure the AI agent has access to the relevant token definitions for optimal results.
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.