julianoczkowski/design-tokens

design-tokens 是做什么的？

根据所选美学理念生成设计令牌文件（CSS 变量或 Tailwind 配置），包含浅色和深色模式调色板、间距比例、字体层级和组件级令牌。适用于开始新项目、建立视觉系统、设置令牌或提及“令牌”或“设计系统”时。

功能概述

该技能自动创建设计令牌，确保视觉一致性，并支持以下特性：

• 美学理念：从预设的美学风格中选择，如“极简主义”或“现代波普”。
• 颜色调色板：生成浅色和深色模式所需的颜色变量（主色、次要色、背景色、文本色等）。
• 间距比例：基于 4px 或 8px 网格系统生成层级分明的间距值（xs、sm、md、lg、xl 等）。
• 字体层级：定义标题、正文和代码等不同文本样式的字体大小、行高和字重。
• 组件级令牌：为按钮、卡片、输入框等常见 UI 组件生成专用令牌。

使用方法

1. 在您的 AI 编码环境（如 Cursor、Claude Code）中提示该技能。
2. 技能会自动检测项目结构，询问您期望的输出格式（CSS 变量或 Tailwind 配置）。
3. 选择美学理念后，技能会生成完整的令牌文件。
4. 将生成的令牌文件直接放入项目中使用。

输出示例

CSS 变量输出

:root {
  --color-primary: #4A90D9;
  --color-primary-light: #7DB3E6;
  --color-primary-dark: #2C5F8A;
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --font-size-body: 16px;
  --font-size-h1: 32px;
  --component-button-padding: var(--spacing-sm) var(--spacing-md);
}

Tailwind 配置输出

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: '#4A90D9',
        'primary-light': '#7DB3E6',
        'primary-dark': '#2C5F8A',
      },
      spacing: {
        xs: '4px',
        sm: '8px',
        md: '16px',
      },
      fontSize: {
        body: '16px',
        h1: '32px',
      },
    },
  },
};

支持的平台

• Claude Code
• Cursor
• Codex
• 其他支持自定义 AI 工具的开发环境

注意事项

• 确保您的项目已安装 Tailwind CSS（如选择 Tailwind 输出格式）。
• 生成的令牌可作为起点，根据具体设计需求进行微调。
• 若项目中已存在设计令牌，技能会尝试合并而非覆盖。

许可

该项目基于 MIT 许可证发布。