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 或类似名称的文件
   • 用于 UI 框架依赖项的 package.json（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 媒体查询。两套调色板都应体现所选设计理念，而不只是简单地反转颜色。

令牌类别

颜色

/* Semantic color tokens, not raw values */
--color-bg-primary:          /* Main background */
--color-bg-secondary:        /* Secondary/card background */
--color-bg-tertiary:         /* Subtle background (inputs, wells) */
--color-bg-inverse:          /* Inverted background */

--color-text-primary:        /* Main text */
--color-text-secondary:      /* Subdued text */
--color-text-tertiary:       /* Placeholder, disabled text */
--color-text-inverse:        /* Text on inverse backgrounds */
--color-text-link:           /* Link color */

--color-border-primary:      /* Default borders */
--color-border-secondary:    /* Subtle borders */
--color-border-focus:        /* Focus ring color */

--color-accent-primary:      /* Primary action color */
--color-accent-primary-hover:
--color-accent-primary-active:
--color-accent-secondary:    /* Secondary action color */

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

--color-surface-overlay:     /* Modal/dropdown backdrop */

间距

生成一致的比例。基础单位应符合设计理念：

• 紧凑型设计理念（Brutalist、Swiss）：基础单位为 4px
• 均衡型设计理念（Rams、Scandinavian）：基础单位为 4px 或 8px
• 宽松型设计理念（Japanese Minimalism、Editorial）：基础单位为 8px，并使用更大的倍数

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

字体排版

--font-family-display:       /* Headline/display font */
--font-family-body:          /* Body text font */
--font-family-mono:          /* Code/monospace font */

--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:             /* Hero/display size */

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

--line-height-tight:         /* Headings: 1.1-1.3 */
--line-height-normal:        /* Body: 1.4-1.6 */
--line-height-relaxed:       /* Spacious body: 1.6-1.8 */

--letter-spacing-tight:      /* Display type */
--letter-spacing-normal:
--letter-spacing-wide:       /* All-caps, labels */

布局

--max-width-content:         /* Max reading width (65-75ch equivalent) */
--max-width-wide:            /* Wide content area */
--max-width-page:            /* Full page max width */

--border-radius-sm:
--border-radius-md:
--border-radius-lg:
--border-radius-full:        /* Pill/circle */

--shadow-sm:
--shadow-md:
--shadow-lg:
--shadow-focus:              /* Focus ring shadow */

动效

--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;    /* Mobile */
--breakpoint-md:   768px;    /* Tablet */
--breakpoint-lg:   1024px;   /* Small desktop */
--breakpoint-xl:   1280px;   /* Desktop */
--breakpoint-2xl:  1536px;   /* Wide desktop */

深色模式

始终在浅色模式令牌旁生成深色模式令牌。规则：

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

:root {
  /* Light mode tokens */
}

[data-theme="dark"] {
  /* Dark mode overrides */
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* System-preference dark mode, unless user explicitly chose light */
  }
}

输出

将令牌文件保存到适合项目技术栈的位置。说明令牌基于哪种设计理念，并注明任何偏离或所做的选择。