css-tokens

用途

css-tokens 是一个用于为 Web 项目建立统一设计基础的技能，提供一整套 CSS 设计令牌（自定义属性）。当用户请求基础令牌系统或设计令牌时使用。

主要能力

该技能提供一份完整的 tokens.css 文件，包含以下类别的设计令牌：

• 排版：字体族、字重，以及从 xs 到 4xl 的模块化尺寸比例。
• 间距：从 4px 到 96px 的一致尺寸比例，按像素值命名。
• 颜色：使用 oklch() 色彩空间，提供感知均匀的颜色，并为表面、文本、品牌、交互元素和语义状态提供浅色/深色模式变体。
• 边框：从尺寸比例派生的圆角值（sm 到 full）。
• z-index：用于堆叠上下文的命名层级（dropdown、modal、toast 等）。
• 过渡：标准时间值（fast、base、slow）。

用户可通过 CSS 自定义属性语法引用单个令牌：var(--token-name)。完整的令牌定义位于该技能目录下的 references/tokens.css 中，按类别组织。

使用方式

1. 检测 CSS 目录：在项目中搜索常见 CSS 目录名，如 css/、styles/、assets/css/、stylesheets/、src/css/、src/styles/，并在多个层级（根目录、src/、public/、assets/）检查。

2. 与用户确认位置：若找到 CSS 目录，展示发现的位置并询问确认，例如“我在 [路径] 找到了 CSS 目录。是否将设计令牌以 tokens.css 文件名添加到此目录？”若需其他位置或文件名，请用户指定。若未找到 CSS 目录，则直接询问用户所需的目录路径和文件名。

3. 写入令牌文件：确认后，将完整令牌文件写入指定位置，使用技能目录中 references/tokens.css 的精确内容。

4. 告知用户导入方式：写入成功后，提示用户在主要 CSS 文件或 HTML 中导入该文件。CSS 中：@import url('path/to/tokens.css'); HTML 中：<link rel="stylesheet" href="path/to/tokens.css" />。令牌随后可作为 CSS 自定义属性在整个项目中使用，例如 var(--color-primary)、var(--size-16)。

适用场景

适用于用户提出以下请求时：

• “为我的项目添加设计令牌”
• “设置 CSS 令牌”
• “创建令牌文件”
• “添加基础 CSS 变量”
• 其他对基础 CSS 自定义属性的类似请求

限制

以下情况不应使用该技能：

• 用户已有现成的设计令牌系统（应建议修改而非新建）。
• 用户明确要求特定框架的令牌系统（如 Tailwind 配置、CSS-in-JS 令牌）。
• 用户只需要部分令牌（可提议提取特定类别）。

其他注意事项：

• 若用户未指定，不要假设目录结构或文件名。
• 写入前始终确认位置。
• 如需要且用户确认，可创建目录。
• 令牌文件通过 prefers-color-scheme 包含浅色和深色两种配色方案。
• oklch() 色彩空间提供感知均匀的颜色，有助于提升可访问性和一致性。

自定义

这些令牌提供坚实基础，但应针对项目进行自定义：调整颜色值以匹配品牌、修改间距比例以适配设计系统、按需添加项目特定令牌、扩展类别（动画、阴影等）。该技能属于脚手架类，仅搭建初始结构，不处理后续修改。