用途：该技能用于为网页项目建立一套基础 CSS 设计令牌（自定义属性），帮助形成统一的设计基础。当用户提出“添加设计令牌”“设置 CSS 令牌”“创建 tokens 文件”“添加基础 CSS 变量”等需求时使用。若项目已有设计令牌系统、需要框架专属令牌（如 Tailwind config 或 CSS-in-JS），或只需部分令牌，则不适合直接套用，可改为建议性修改或按类别提取。
主要能力：提供完整的 tokens.css，包含排版（字体族、字重、xs 到 4xl 的模块化字号）、间距（4px 到 96px，按像素值命名）、颜色（使用 oklch() 色彩空间，提供浅色与深色模式变体，覆盖表面、文本、品牌、交互元素与语义状态）、边框圆角（sm 到 full，源自尺寸比例）、z-index（dropdown、modal、toast 等命名层）以及过渡时间（fast、base、slow）。令牌以 CSS 自定义属性形式存在，可通过 var(--token-name) 引用。
使用方式：先搜索项目常见 CSS 目录（css/、styles/、assets/css/、stylesheets/、src/css/、src/styles/，可检查根目录、src/、public/、assets/ 等多层）。找到目录后向用户确认路径与文件名（默认 tokens.css），未找到则请用户指定目录与文件名，必要时可在确认后创建目录。确认后将 references/tokens.css 的完整内容写入指定位置。随后提示用户导入：CSS 中可用 @import url("path/to/tokens.css");，HTML 中可用 <link rel="stylesheet" href="path/to/tokens.css" />。导入后即可通过 var(--color-primary)、var(--size-16) 等引用。
适用场景与限制：适合新项目搭建初始设计结构，属于脚手架类技能，不负责后续持续修改。令牌值应针对项目自定义，如调整品牌颜色、修改间距比例、扩展动画或阴影等类别。文件内置基于 prefers-color-scheme 的浅色与深色配色。未指定目录结构或文件名时不应擅自假设，写入前需先确认。