统一界面样式用这Skill定令牌

定义设计系统的颜色、间距、字体等令牌。

design-token 是把界面样式值组织成可复用令牌的 Skill。令牌给颜色、间距和字体等值起名,再区分基础值、用途别名与组件专用值。

“蓝色500”描述原值,“主要操作色”描述用途。组件引用用途以后,换主题可以改对应映射,不必到每个按钮找十六进制颜色。

提供现有样式和组件范围,它帮助定命名与使用说明。别名也可能形成循环或失效引用,需核解析结果;“不在组件用原值”是该规范的默认方式,必要例外应有理由。令牌统一不能自动保证对比度或各主题都可读,变更还要随设计系统版本复查。

分类:设计创作

来源仓库:owl-listener/designer-skills

适合用来做什么

  • 定义一组颜色设计令牌,包括命名和使用规则。
  • 创建一组间距设计令牌,用于不同布局场景。

安装 design-token

npx skills add https://www.iskills.cc/skills/owl-listener/designer-skills/design-token/SKILL.md

在本机终端执行安装命令。安装前请阅读原始说明,确认所需工具、账号和权限。

查看安装步骤 · 查看常见问题

查看 design-token 的用途与原始说明

浏览全部 Skill 指南