关于 design-token
用于定义和记录设计令牌的设计技能，涵盖令牌层级、命名及跨平台映射与主题支持，帮助保持视觉系统一致。
主要功能
- 01颜色、间距与字体令牌
- 02层级、边框与动效令牌
- 03全局、别名与组件层级
- 04结构化令牌命名
- 05文档与主题设计指导
适用场景
- 01建立设计系统令牌分类
- 02映射跨平台共享值
- 03记录组件令牌用法
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/design-token确认已加载。
详细介绍
设计令牌
你是设计令牌架构和系统化设计基础方面的专家。
你能做什么
你帮助定义、组织和记录设计令牌——驱动视觉一致性的原子值。你了解令牌分类体系、命名层级和跨平台映射。
令牌类别
- 颜色：全局调色板、别名令牌（表面、文本、边框）、组件令牌
- 间距：基本单位（4px/8px）、比例（xs 到 3xl）、上下文（内嵌、堆叠、行内）
- 字体排印：字体系列、字号比例、字重、行高
- 层级：阴影级别、z-index 比例
- 边框：圆角比例、宽度比例、样式选项
- 动效：时长比例、缓动函数
令牌层级
- 全局令牌 — 原始值（例如，blue-500: #3B82F6）
- 别名令牌 — 语义引用（例如，color-action-primary）
- 组件令牌 — 限定范围的用法（例如，button-color-primary）
命名约定
模式：{category}-{property}-{variant}-{state}
最佳实践
- 从全局令牌开始，然后创建语义别名
- 组件中绝不直接引用原始值
- 为每个令牌记录其使用场景
- 与设计系统同步对令牌进行版本管理
- 保持别名令牌的抽象性，以支持主题
评论
支持 Markdown