design-tokens

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

This skill generates the foundational design tokens for a project. Run this after the design brief and before building any components. Every component built after this references these tokens instead of hardcoding values.

本技能可为项目生成基础design tokens。请在完成设计简报之后、构建任何组件之前运行本技能。后续构建的所有组件都将引用这些令牌，而非硬编码数值。

Example prompts

示例提示词

"Set up design tokens for this project"
"Generate a token system based on Dieter Rams"
"I need a spacing scale and color palette before I start building"
"Create tokens that match our brief"

"Set up design tokens for this project"
"Generate a token system based on Dieter Rams"
"I need a spacing scale and color palette before I start building"
"Create tokens that match our brief"

Process

流程

Check what already exists. Before generating anything, scan the codebase for:
- CSS variable definitions (
```
:root
```
  ,
```
[data-theme]
```
  , custom property files)
- Tailwind config (
```
tailwind.config.js
```
  ,
```
tailwind.config.ts
```
  ) and any theme extensions
- Theme provider files (Material UI
```
createTheme
```
  , Chakra
```
extendTheme
```
  , shadcn
```
globals.css
```
  )
- Design token JSON files (Style Dictionary format, Figma token exports)
- Any
```
tokens.css
```
  ,
```
variables.css
```
  ,
```
theme.css
```
  , or similarly named files
- ```
package.json
```
  for UI framework dependencies (tailwindcss, @mui/material, @chakra-ui/react, etc.)
If tokens already exist, extend them rather than replacing. Identify gaps (missing dark mode, incomplete spacing scale, no motion tokens) and fill those.
Read the brief. Look for a design brief at
```
.design/*/DESIGN_BRIEF.md
```
. If multiple subfolders exist, use the most recently modified one, or ask the user which feature they are working on. If a philosophy is named, use the parameters from
```
/frontend-design
```
to derive token values. If no brief exists, ask the user what direction they want.
Generate tokens in the format that matches the project's tech stack:
- Tailwind project → extend
```
tailwind.config.js
```
  and write to
```
globals.css
```
- CSS/HTML project → write to a
```
tokens.css
```
  file
- CSS-in-JS project → write to a
```
theme.ts
```
  or
```
theme.js
```
  file
- If unclear, default to CSS custom properties (most portable)
Always generate both light and dark mode palettes. Use
```
[data-theme="dark"]
```
or
```
prefers-color-scheme
```
media query. Both palettes should feel intentional for the chosen philosophy, not just inverted values.

检查现有内容。 在生成任何内容前，先扫描代码库查找以下内容：
- 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等）
如果令牌已存在，请扩展而非替换它们。找出缺失项（缺少暗模式、间距尺度不完整、没有动效令牌）并补充完整。
阅读设计简报。 在
```
.design/*/DESIGN_BRIEF.md
```
路径查找设计简报。如果存在多个子文件夹，使用最近修改的那个，或询问用户正在开发哪个功能。如果指定了美学理念，使用
```
/frontend-design
```
下的参数来推导令牌值。如果没有简报，询问用户想要的设计方向。
生成令牌 按照项目技术栈匹配的格式生成：
- Tailwind项目 → 扩展
```
tailwind.config.js
```
  并写入
```
globals.css
```
- CSS/HTML项目 → 写入
```
tokens.css
```
  文件
- CSS-in-JS项目 → 写入
```
theme.ts
```
  或
```
theme.js
```
  文件
- 如果不清楚，默认使用CSS自定义属性（兼容性最强）
始终同时生成明暗模式调色板。 使用
```
[data-theme="dark"]
```
或
```
prefers-color-scheme
```
媒体查询。两个调色板都应符合所选美学理念的设计意图，而非简单翻转色值。

Token Categories

令牌分类

Color

颜色

css

/* 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 */

css

/* 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 */

Spacing

间距

Generate a consistent scale. The base unit should match the philosophy:

Tight philosophies (Brutalist, Swiss): 4px base
Balanced philosophies (Rams, Scandinavian): 4px or 8px base
Spacious philosophies (Japanese Minimalism, Editorial): 8px base with larger multipliers

css

--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 */

生成统一的尺度。基准单位应匹配设计理念：

紧凑风格（野兽派、瑞士风格）：4px基准
平衡风格（Rams、斯堪的纳维亚风格）：4px或8px基准
宽松风格（日式极简、编辑风格）：8px基准，搭配更大的倍数

css

--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 */

Typography

排版

css

--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 */

css

--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 */

Layout

布局

css

--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 */

css

--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 */

Motion

动效

css

--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);

css

--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);

Responsive Breakpoints

响应式断点

css

--breakpoint-sm:   375px;    /* Mobile */
--breakpoint-md:   768px;    /* Tablet */
--breakpoint-lg:   1024px;   /* Small desktop */
--breakpoint-xl:   1280px;   /* Desktop */
--breakpoint-2xl:  1536px;   /* Wide desktop */

css

--breakpoint-sm:   375px;    /* Mobile */
--breakpoint-md:   768px;    /* Tablet */
--breakpoint-lg:   1024px;   /* Small desktop */
--breakpoint-xl:   1280px;   /* Desktop */
--breakpoint-2xl:  1536px;   /* Wide desktop */

Dark Mode

暗模式

Always generate dark mode tokens alongside light mode. Rules:

Do not simply invert colors. Dark backgrounds should be warm or cool depending on the philosophy.
Reduce contrast slightly in dark mode (pure white text on pure black is harsh).
Shadows should use darker, more transparent values in dark mode, not the same shadows as light.
Accent colors may need lightness adjustments to maintain contrast ratios.
Include a
```
prefers-color-scheme
```
media query AND a
```
[data-theme="dark"]
```
attribute selector so the user can support both system preference and manual toggle.

css

: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 */
  }
}

始终同时生成明模式和暗模式令牌。规则如下：

不要简单翻转颜色。暗模式背景的冷暖色调应符合设计理念。
暗模式下适当降低对比度（纯白文字配纯黑背景会过于刺眼）。
暗模式下的阴影应使用更深、透明度更高的数值，不要和明模式使用相同的阴影。
强调色可能需要调整明度以保持对比度比例。
同时包含
```
prefers-color-scheme
```
媒体查询和
```
[data-theme="dark"]
```
属性选择器，这样用户可以同时支持系统偏好设置和手动切换。

css

: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 */
  }
}

Output

输出

Save the tokens file in the appropriate location for the project's tech stack. State which philosophy the tokens are derived from and note any deviations or choices made.

将令牌文件保存到项目技术栈对应的合适位置。说明令牌基于哪种美学理念生成，并标注所有的偏差或自定义选择。