design-tokens-skill
🥈SilverA Claude skill for working with design tokens in dtcg format
1200Updated 2mo ago
Intermediate30min to implementautomation
Saves ~45 min per use
Quick InstallView Source
git clone https://github.com/ilikescience/design-tokens-skill.gitWorks with:
Claude
Overview
About This Skill
The design-tokens-skill is an intermediate-level Claude Code skill designed to streamline the management of design tokens in dtcg format. This skill automates the process of creating, updating, and utilizing design tokens, allowing developers and product managers to maintain consistency across their design systems with ease. By integrating this skill into your workflow, you can ensure that your design assets are always in sync and easily accessible, enhancing collaboration among team members. One of the key benefits of using the design-tokens-skill is the significant reduction in manual work associated with design token management. While the exact time savings are currently unknown, the automation of repetitive tasks can lead to increased efficiency and a more agile design process. For teams that frequently update design specifications or work with multiple design tokens, this skill can save valuable time and resources, allowing them to focus on more strategic initiatives. This skill is particularly beneficial for developers and product managers who are involved in product design and development. It is suitable for teams looking to implement workflow automation in their design processes, especially those who prioritize maintaining a cohesive design language across various platforms. By leveraging this skill, users can enhance their productivity and ensure that design updates are seamlessly integrated into their development cycles. Implementing the design-tokens-skill requires an intermediate understanding of AI automation and design token concepts. While the skill can be set up in approximately 30 minutes, users should be familiar with the dtcg format to maximize its potential. This skill fits well into AI-first workflows by providing an automated solution that enhances the overall efficiency of design and development processes, making it an essential tool for teams aiming to leverage AI automation in their operations.
How to Use
1. **Customize Placeholders**: Replace [COMPONENT_NAME], [BASE_COLOR], [ACCENT_COLOR], etc., with your specific design requirements. Use tools like Figma or Adobe XD to extract these values from your design system. 2. **Validate Tokens**: Paste the generated JSON into a DTCG validator (e.g., [Design Tokens Validator](https://design-tokens.github.io/community-group/validator/)) to ensure compliance with the DTCG schema. 3. **Integrate with Tools**: Import the tokens into your design system tools: - **Figma**: Use plugins like "Design Tokens" or "Tokenizer" to sync tokens. - **CSS**: Convert tokens to CSS variables using tools like Style Dictionary or Token Transformer. - **JavaScript**: Use libraries like `style-dictionary` to generate JS variables for your frontend. 4. **Test Across Modes**: Verify light/dark mode variants in your UI framework (e.g., Tailwind CSS, Material-UI) to ensure consistency. 5. **Document Changes**: Update your team’s design system documentation to reflect the new tokens, including usage guidelines and examples.
Setup & Installation
Quick Install
No install command available. Check the GitHub repository for manual installation instructions.
Alternative Install (Git Clone)
git clone https://github.com/ilikescience/design-tokens-skillRequirements
- Claude Code or compatible AI agent
- Works with: Claude
Quick Start Guide
1
Install the Skill
Copy the install command above and run it in your terminal.
2
Open Your AI Agent
Launch Claude Code, Cursor, or your preferred AI coding agent.
3
Try It Out
Use the prompt template or examples below to test the skill.
4
Customize
Adapt the skill to your specific use case and workflow.
Usage Examples
Prompt Template
Generate a set of design tokens in DTCG (Design Tokens Community Group) format for a [COMPONENT_NAME] component with the following specifications: [BASE_COLOR], [ACCENT_COLOR], [TEXT_COLOR], [BORDER_RADIUS], [SHADOW], [TYPOGRAPHY_SIZES], and [SPACING_VALUES]. Ensure tokens are organized hierarchically with semantic naming (e.g., "color.primary.500") and include both light and dark mode variants. Use JSON format for the output.
Example Output
```json
{
"$schema": "https://design-tokens.github.io/community-group/schema.json",
"version": "1.0.0",
"tokenSetOrder": ["global", "light", "dark"],
"tokens": {
"global": {
"color": {
"primary": {
"100": { "value": "#E6F2FF", "type": "color" },
"200": { "value": "#B3D9FF", "type": "color" },
"300": { "value": "#80BFFF", "type": "color" },
"400": { "value": "#4DA3FF", "type": "color" },
"500": { "value": "#0077FF", "type": "color" },
"600": { "value": "#005CE6", "type": "color" },
"700": { "value": "#0040B3", "type": "color" },
"800": { "value": "#002680", "type": "color" },
"900": { "value": "#00114D", "type": "color" }
},
"secondary": {
"100": { "value": "#F0F7FF", "type": "color" },
"500": { "value": "#3B82F6", "type": "color" },
"700": { "value": "#1D4ED8", "type": "color" }
},
"text": {
"primary": { "value": "#1F2937", "type": "color" },
"secondary": { "value": "#6B7280", "type": "color" },
"inverse": { "value": "#FFFFFF", "type": "color" }
}
},
"spacing": {
"xxs": { "value": "0.25rem", "type": "dimension" },
"xs": { "value": "0.5rem", "type": "dimension" },
"sm": { "value": "0.75rem", "type": "dimension" },
"md": { "value": "1rem", "type": "dimension" },
"lg": { "value": "1.5rem", "type": "dimension" },
"xl": { "value": "2rem", "type": "dimension" },
"xxl": { "value": "3rem", "type": "dimension" }
},
"borderRadius": {
"none": { "value": "0px", "type": "dimension" },
"sm": { "value": "0.125rem", "type": "dimension" },
"md": { "value": "0.25rem", "type": "dimension" },
"lg": { "value": "0.5rem", "type": "dimension" },
"pill": { "value": "9999px", "type": "dimension" }
},
"shadow": {
"sm": {
"value": {
"type": "dropShadow",
"color": "rgba(0, 0, 0, 0.1)",
"offsetX": "0px",
"offsetY": "1px",
"blur": "2px",
"spread": "0px"
},
"type": "boxShadow"
},
"md": {
"value": {
"type": "dropShadow",
"color": "rgba(0, 0, 0, 0.1)",
"offsetX": "0px",
"offsetY": "4px",
"blur": "6px",
"spread": "0px"
},
"type": "boxShadow"
}
},
"typography": {
"fontFamily": { "value": "Inter, sans-serif", "type": "fontFamily" },
"fontSize": {
"xs": { "value": "0.75rem", "type": "fontSize" },
"sm": { "value": "0.875rem", "type": "fontSize" },
"base": { "value": "1rem", "type": "fontSize" },
"lg": { "value": "1.125rem", "type": "fontSize" },
"xl": { "value": "1.25rem", "type": "fontSize" },
"xxl": { "value": "1.5rem", "type": "fontSize" }
},
"fontWeight": {
"regular": { "value": "400", "type": "fontWeight" },
"medium": { "value": "500", "type": "fontWeight" },
"bold": { "value": "700", "type": "fontWeight" }
}
}
},
"light": {
"color": {
"background": {
"primary": { "value": "#FFFFFF", "type": "color" },
"secondary": { "value": "#F9FAFB", "type": "color" }
}
}
},
"dark": {
"color": {
"background": {
"primary": { "value": "#111827", "type": "color" },
"secondary": { "value": "#1F2937", "type": "color" }
},
"text": {
"primary": { "value": "#F9FAFB", "type": "color" },
"secondary": { "value": "#D1D5DB", "type": "color" }
}
}
}
}
}
```Apply to these tools
Browse all toolsClaude
AI assistant built for thoughtful, nuanced conversation
Squarespace
Create stunning websites effortlessly with customizable templates and e-commerce tools.
Microsoft Teams
Get more done every day with Microsoft Teams – powered by AI
IronCalc
IronCalc is a spreadsheet engine and ecosystem
Wix
The new way to create a website
Rive
Create and collaborate on interactive animations with powerful, user-friendly tools.
Compatible MCP servers
Browse all MCP servers
Find the right skills for your stack
Take a free 3-minute scan and get personalized AI skill recommendations.
Take free scan