关于 design-token
面向设计团队的设计 Token 架构技能，帮助定义、组织和记录驱动视觉一致性的基础值。涵盖 Token 分类、层级、命名及主题支持实践。
主要功能
- 01组织颜色、间距与排版 Token
- 02区分全局、别名和组件层级
- 03采用一致的命名模式
- 04记录用法并随设计系统版本管理
- 05通过抽象别名支持主题
适用场景
- 01建立新的设计 Token 体系
- 02将原始值映射为语义别名
- 03为组件制定 Token 使用规范
安装
复制下面的命令，在终端中运行。
$
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