ui-design-token-system
CommunityAlign UI design and code with design tokens.
Authorjunchenghuo
Version1.0.0
Installs0
System Documentation
What problem does it solve?
This Skill bridges the gap between UI design and front-end development by standardizing design elements like colors, spacing, and typography through design tokens, reducing rework and ensuring consistency.
Core Features & Use Cases
- Tokenization: Defines and manages design tokens for colors, spacing, typography, and border-radius.
- Semantic Mapping: Establishes semantic tokens (e.g., primary, success) based on foundational tokens.
- Component Integration: Outlines strategies for mapping component-specific styles to design tokens.
- Use Case: Ensure all buttons across the application use the same primary color and consistent padding by defining and applying these as design tokens.
Quick Start
Use the ui-design-token-system skill to define color and spacing tokens for the new design system.
Dependency Matrix
Required Modules
None requiredComponents
references
💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: ui-design-token-system Download link: https://github.com/junchenghuo/openclaw-biz-agent/archive/main.zip#ui-design-token-system Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.