Design Token

If you're building or maintaining a design system, this helps you structure your design tokens properly. It guides you through the three-tier approach (global, alias, component) and covers the usual suspects: color, spacing, typography, elevation, borders, and motion. The naming convention pattern it follows is {category}-{property}-{variant}-{state}, which keeps things predictable as your token library grows. The real value is in the organizational framework. It pushes you to stop hardcoding values and instead build a proper abstraction layer that can handle theming and cross-platform mapping without turning into a mess six months later.

Install to Claude Code

npx -y skills add owl-listener/designer-skills --skill design-token --agent claude-code