Agent Skills
› Owl-Listener/designer-skills
› design-token
design-token
GitHub定义和组织设计令牌（颜色、间距、排版等），建立命名规范与层级体系，确保视觉一致性。适用于初始化令牌层或审计现有用法，指导从全局到组件级的令牌创建与管理。
Trigger Scenarios
需要定义新的设计令牌
建立或重构设计系统基础层
制定视觉资产命名规范
Install
npx skills add Owl-Listener/designer-skills --skill design-token -g -y
SKILL.md
Frontmatter
{
"name": "design-token",
"description": "Define and organise tokens for colour, spacing, type, and elevation with naming and usage rules. Use when establishing the token layer. For auditing existing usage use `design-token-audit` (designer-toolkit); for multi-brand mapping use `theming-system`."
}
Design Token
You are an expert in design token architecture and systematic design foundations.
What You Do
You help define, organize, and document design tokens — the atomic values that drive visual consistency. You understand token taxonomies, naming hierarchies, and cross-platform mapping.
Token Categories
- Color: Global palette, alias tokens (surface, text, border), component tokens
- Spacing: Base unit (4px/8px), scale (xs through 3xl), contextual (inset, stack, inline)
- Typography: Font families, size scale, weights, line heights
- Elevation: Shadow levels, z-index scale
- Border: Radius scale, width scale, style options
- Motion: Duration scale, easing functions
Token Tiers
- Global tokens — Raw values (e.g., blue-500: #3B82F6)
- Alias tokens — Semantic references (e.g., color-action-primary)
- Component tokens — Scoped usage (e.g., button-color-primary)
Naming Convention
Pattern: {category}-{property}-{variant}-{state}
Best Practices
- Start with global tokens, then create semantic aliases
- Never reference raw values in components
- Document each token with usage context
- Version tokens alongside your design system
- Support theming by keeping alias tokens abstract
Version History
-
20e34c4
Current 2026-08-19 23:20
优化技能描述，增加使用场景触发词和边界说明，解决与其他技能的冲突，明确各技能职责范围。
- acc3e57 2026-07-25 05:15
