design-tokens

该技能为项目生成基础设计令牌。在设计简报之后、构建任何组件之前运行。之后构建的每个组件都引用这些令牌，而不是硬编码值。

示例提示

• "为该项目设置设计令牌"
• "基于Dieter Rams生成令牌系统"
• "在开始构建之前，我需要间距比例和颜色调色板"
• "创建与我们的简报匹配的令牌"

流程

1. 检查已有内容。 在生成任何内容之前，扫描代码库以查找：

   • CSS变量定义（:root、[data-theme]、自定义属性文件）
   • Tailwind配置（tailwind.config.js、tailwind.config.ts）及任何主题扩展
   • 主题提供者文件（Material UI createTheme、Chakra extendTheme、shadcn globals.css）
   • 设计令牌JSON文件（Style Dictionary格式、Figma令牌导出）
   • 任何tokens.css、variables.css、theme.css或类似命名的文件
   • package.json中的UI框架依赖（tailwindcss、@mui/material、@chakra-ui/react等）

   如果令牌已存在，则扩展它们而不是替换。识别缺失部分（缺少暗色模式、间距比例不完整、无动效令牌）并填补。

2. 阅读简报。 在.design/*/DESIGN_BRIEF.md中查找设计简报。如果存在多个子文件夹，使用最近修改的那个，或询问用户正在处理哪个功能。如果指定了理念，使用/frontend-design中的参数推导令牌值。如果没有简报，询问用户想要的方向。

3. 生成令牌，格式与项目的技术栈匹配：

   • Tailwind项目 → 扩展tailwind.config.js并写入globals.css
   • CSS/HTML项目 → 写入tokens.css文件
   • CSS-in-JS项目 → 写入theme.ts或theme.js文件
   • 如果不确定，默认使用CSS自定义属性（最可移植）

4. 始终生成亮色和暗色模式调色板。 使用[data-theme="dark"]或prefers-color-scheme媒体查询。两个调色板都应针对所选理念有意图，而不仅仅是反转值。

令牌类别

颜色

/* 语义化颜色令牌，而非原始值 */
--color-bg-primary:          /* 主背景 */
--color-bg-secondary:        /* 次要/卡片背景 */
--color-bg-tertiary:         /* 微妙背景（输入框、凹陷区域） */
--color-bg-inverse:          /* 反转背景 */

--color-text-primary:        /* 主文本 */
--color-text-secondary:      /* 弱化文本 */
--color-text-tertiary:       /* 占位符、禁用文本 */
--color-text-inverse:        /* 反转背景上的文本 */
--color-text-link:           /* 链接颜色 */

--color-border-primary:      /* 默认边框 */
--color-border-secondary:    /* 微妙边框 */
--color-border-focus:        /* 焦点环颜色 */

--color-accent-primary:      /* 主要操作颜色 */
--color-accent-primary-hover:
--color-accent-primary-active:
--color-accent-secondary:    /* 次要操作颜色 */

--color-status-success:
--color-status-warning:
--color-status-error:
--color-status-info:

--color-surface-overlay:     /* 模态框/下拉菜单背景 */

间距

生成一致的刻度。基本单位应与理念匹配：

• 紧凑型理念（粗野主义、瑞士风格）：4px基础
• 平衡型理念（Rams、斯堪的纳维亚）：4px或8px基础
• 宽敞型理念（日式极简、编辑风格）：8px基础，乘数更大

--space-0:   0;
--space-1:   /* 基础 * 0.25 */
--space-2:   /* 基础 * 0.5 */
--space-3:   /* 基础 * 0.75 */
--space-4:   /* 基础 * 1 */
--space-5:   /* 基础 * 1.5 */
--space-6:   /* 基础 * 2 */
--space-7:   /* 基础 * 3 */
--space-8:   /* 基础 * 4 */
--space-9:   /* 基础 * 6 */
--space-10:  /* 基础 * 8 */
--space-11:  /* 基础 * 12 */
--space-12:  /* 基础 * 16 */

排版

--font-family-display:       /* 标题/展示字体 */
--font-family-body:          /* 正文文本字体 */
--font-family-mono:          /* 代码/等宽字体 */

--font-size-xs:
--font-size-sm:
--font-size-base:
--font-size-md:
--font-size-lg:
--font-size-xl:
--font-size-2xl:
--font-size-3xl:
--font-size-4xl:             /* 英雄/展示尺寸 */

--font-weight-normal:
--font-weight-medium:
--font-weight-semibold:
--font-weight-bold:

--line-height-tight:         /* 标题：1.1-1.3 */
--line-height-normal:        /* 正文：1.4-1.6 */
--line-height-relaxed:       /* 宽松正文：1.6-1.8 */

--letter-spacing-tight:      /* 展示类型 */
--letter-spacing-normal:
--letter-spacing-wide:       /* 全大写、标签 */

布局

--max-width-content:         /* 最大阅读宽度（65-75字符等效） */
--max-width-wide:            /* 宽内容区域 */
--max-width-page:            /* 页面最大宽度 */

--border-radius-sm:
--border-radius-md:
--border-radius-lg:
--border-radius-full:        /* 药丸/圆形 */

--shadow-sm:
--shadow-md:
--shadow-lg:
--shadow-focus:              /* 焦点环阴影 */

动效

--duration-instant:   50ms;
--duration-fast:      150ms;
--duration-normal:    250ms;
--duration-slow:      400ms;
--duration-slower:    600ms;

--easing-default:     cubic-bezier(0.4, 0, 0.2, 1);
--easing-in:          cubic-bezier(0.4, 0, 1, 1);
--easing-out:         cubic-bezier(0, 0, 0.2, 1);
--easing-bounce:      cubic-bezier(0.34, 1.56, 0.64, 1);

响应式断点

--breakpoint-sm:   375px;    /* 手机 */
--breakpoint-md:   768px;    /* 平板 */
--breakpoint-lg:   1024px;   /* 小桌面 */
--breakpoint-xl:   1280px;   /* 桌面 */
--breakpoint-2xl:  1536px;   /* 宽桌面 */

暗色模式

始终在亮色模式旁边生成暗色模式令牌。规则：

• 不要简单地反转颜色。暗色背景应根据理念偏暖或偏冷。
• 在暗色模式下略微降低对比度（纯白文本在纯黑上过于刺眼）。
• 暗色模式下的阴影应使用更暗、更透明的值，而不是与亮色模式相同的阴影。
• 强调色可能需要调整亮度以保持对比度比例。
• 包含prefers-color-scheme媒体查询和[data-theme="dark"]属性选择器，以便用户同时支持系统偏好和手动切换。

:root {
  /* 亮色模式令牌 */
}

[data-theme="dark"] {
  /* 暗色模式覆盖 */
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* 系统偏好暗色模式，除非用户明确选择了亮色 */
  }
}

输出

将令牌文件保存在项目技术栈的适当位置。说明令牌源自哪种理念，并注明任何偏差或选择。