用途：为网页项目建立一致的 CSS 设计基础，生成包含 CSS 自定义属性的 tokens.css 文件。当用户提出“为项目添加设计令牌”“设置 CSS tokens”“创建 tokens 文件”“添加基础 CSS 变量”等请求时使用。若项目已有设计令牌系统、用户需要框架专属方案（如 Tailwind、CSS-in-JS），或只需要部分令牌，则不建议直接使用。
主要能力：提供一套完整令牌，含排版（字体、字重、xs 至 4xl 的模块化尺寸）、间距（4px 至 96px，按像素值命名）、颜色（使用 oklch() 色彩空间，含明暗模式变体，覆盖表面、文本、品牌、交互与语义状态）、边框圆角（sm 至 full）、z-index 命名层级（下拉、模态、提示等）以及过渡时长（fast、base、slow）。令牌位于技能目录的 references/tokens.css。
使用方式：在项目中搜索常见 CSS 目录，如 css/、styles/、assets/css/、stylesheets/、src/css/、src/styles/，并在根目录、src/、public/、assets/ 等多层查找。找到后向用户确认目录与文件名 tokens.css；未找到则询问目录路径与文件名，可按需创建目录。确认后将完整令牌文件写入指定位置，并提示用户引入：CSS 中 @import url("path/to/tokens.css");，HTML 中 <link rel="stylesheet" href="path/to/tokens.css" />。之后通过 var(--token-name) 引用，如 var(--color-primary)、var(--size-16)。
适用场景：新项目或需要从零建立基础设计令牌体系的网页项目。
限制：这是脚手架类技能，只负责初始结构，不处理后续修改。不应在用户未指定时假设目录结构或文件名，写入前必须确认位置。令牌可自定义，如调整品牌色、间距比例、补充动画与阴影等。颜色同时包含明暗方案，依赖 prefers-color-scheme。