Create Design System Rules
Official figma skill covering creation, design for building frontend UIs and user experiences.
Install on your platform
We auto-selected Claude Code based on this skill’s supported platforms.
Run in terminal (recommended)
claude mcp add create-design-system-rules npx -- -y @trustedskills/create-design-system-rules
Or manually add to ~/.claude/settings.json
{
"mcpServers": {
"create-design-system-rules": {
"command": "npx",
"args": [
"-y",
"@trustedskills/create-design-system-rules"
]
}
}
}Requires Claude Code (claude CLI). Run claude --version to verify your install.
About This Skill
What it does
This skill enables the creation of design system rules that ensure consistency across UI components. It helps define and enforce guidelines for spacing, typography, colors, and other visual elements within a project.
When to use it
- When starting a new design or development project and needing to establish consistent styling rules.
- When working on large teams to maintain uniformity in component libraries.
- When integrating with tools like Figma to automate the enforcement of design system standards.
Key capabilities
- Define spacing scales for layout consistency
- Set typography guidelines for text elements
- Establish color palettes and their usage rules
- Automate rule enforcement across UI components
Example prompts
- "Create a design system rule for consistent button padding."
- "Define typography rules for headings, body text, and captions."
- "Generate spacing scale based on 8px increments."
Tips & gotchas
- Ensure all team members are aligned with the defined rules to avoid inconsistencies.
- Regularly update the design system as project requirements evolve.
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 |
🏢 Official
Published by the company or team that built the technology.