跳转到使用指南
Design Token作者 Owl-Listener

Design Token Skill.

为视觉决策赋予可供组件复用的名称和关系。

  • 设计系统
  • 规范
来源审查 · Design TokenSKILL.md
任务 设计系统 产出 • 令牌分类和命名方案 • 全局、别名和组件令牌之间的关系 • 使用和版本管理指南 开始之前 请提供现有视觉值、组件示例和命名约束。此技能负责定义令牌名称及其关系;导出工具和框架集成需要单独设置。
编辑摘要 · 已审查来源 2026-10-07 · 并非生成的示例

01 功能说明

Design Token:定义语义基础

设计令牌分类、三层关系、命名、使用和版本管理指南。

基于来源的工作流程并非执行基准测试

工作方法

Design Token 定义设计系统的底层基础。它涵盖颜色、间距、排版、层级、边框和动效,并通过命名和使用规则将原始值与语义含义关联起来。

三层结构将全局值、语义别名和组件专用令牌分开。这种区分有助于团队在更改某个值时,不丢失使用该值的原因。审计现有使用情况和多品牌映射被明确列为单独的任务。

预期交付物

  • 令牌分类和命名方案
  • 全局、别名和组件令牌之间的关系
  • 使用和版本管理指南
查看示例任务说明

从任务说明到审查

  1. 01
    梳理基础项

    列出产品在颜色、布局、字体、层级和动效方面所需的值。

  2. 02
    定义层级

    将基础数值梯度与语义角色分开,并且只在有用时添加组件专用名称。

  3. 03
    记录使用方式

    说明别名适用于何处,以及组件应如何引用别名而不是硬编码值。

02 适用场景

适用时机

请提供现有视觉值、组件示例和命名约束。此技能负责定义令牌名称及其关系;导出工具和框架集成需要单独设置。

适合的情形

  • 新的令牌层适用于视觉值已经存在,但还没有共享名称和角色的情况。
  • 基础规范不一致为重复使用的间距或颜色决策建立统一词汇。

需要确认的限制

  • 并非自动化审计来源指示,应使用另一项技能审计现有使用情况。
  • 并非构建流水线它描述的是令牌架构,并不保证提供导出或框架集成。

请提供这些输入

  • 当前值提供调色板、字体、间距和层级方面的决策。
  • 组件需求展示有代表性的用法和状态。
  • 命名约束明确平台惯例和版本管理预期。

03 关键决策

关键决策

  1. 名称保留意图

    当原始值发生变化时,语义别名能够保留使用意图。

  2. 分层可避免混淆

    不应将全局颜色名称和按钮状态颜色名称视为可以互换。

04 示例任务

试用聚焦的任务说明

以下示例任务说明尚未经过测试。使用前请检查该技能的设置。

检查设置

从 designer-skills 仓库将此任务的 SKILL.md 加载到代理支持的技能位置。入口文件并未规定通用的安装命令。

上游源文件
https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/design-systems/skills/design-token/SKILL.md

请提供现有视觉值、组件示例和命名约束。此技能负责定义令牌名称及其关系;导出工具和框架集成需要单独设置。

从一项交付物开始

运行该技能之前,请调整此任务说明中的范围、来源材料和约束。

示例任务说明
使用 design-token 为这个小型产品系统定义一个令牌层。将基础数值梯度、语义别名和必要的组件令牌分开。映射所提供的按钮和卡片示例,记录命名规则,并避免声称我们拥有尚未实现的导出流水线。

检查结果

根据以下可观察的标准检查实际输出。

  • 别名可解析为已定义的值。
  • 名称传达用途,而不是偶然呈现的外观。
  • 组件引用预期的令牌层级。

OpenDesign 为编码代理提供本地设计工作区。此列表并不表示该技能已被捆绑提供,也不表示其中包含其外部工具、凭据和软件依赖项。

05 来源与许可证

来源和许可证

本页面描述的是下方链接所指向的固定源代码修订版本。上游行为和要求可能发生变化。

来源所有者
Owl-Listener
许可证
MIT
已审查的快照
2026-10-07 · 9a6930cf84a8
编辑性来源摘要
设计令牌分类、三层关系、命名、使用和版本管理指南。

由 OpenDesign 基于所链接来源撰写的原创摘要。仓库星标数是有日期限制的受欢迎程度指标,并不代表技能使用量或质量评分。

06 开始前的问题

开始前的问题

令牌是否只用于颜色?

不是。来源还包括间距、排版、层级、边框和动效。

每个组件都应该使用原始值吗?

来源建议使用语义引用,而不是直接使用原始值。

这能处理多个品牌吗?

该条目将基础令牌架构与单独的主题系统(theming-system)任务区分开来。

OpenDesign

为下一轮设计迭代留出空间。

将任务说明、来源材料和设计工作集中保存在本地工作区中。将该技能添加到工作流程之前,请检查其自身的设置。

上游源文件
https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/design-systems/skills/design-token/SKILL.md