mcpField
D
design-tokens

design-tokens

github.com/laurigates设计与 UI5982 次安装今天更新
代码仓库

关于 design-tokens

面向开发者的设计技能，用于在 CSS 中构建设计令牌系统，涵盖令牌结构、主题切换和组件一致性集成。

主要功能

  1. 01三层令牌架构
  2. 02CSS 自定义属性模式
  3. 03浅色与深色主题系统
  4. 04组件级令牌集成
  5. 05与 Tailwind 和框架集成

适用场景

  1. 01建立可扩展的设计令牌系统
  2. 02实现浅色和深色主题
  3. 03整理多个样式表中的 CSS 变量

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/laurigates/claude-plugins --skill design-tokens

安装后在 Claude Code 中输入/design-tokens确认已加载。

附带文件REFERENCE.md

详细介绍

设计令牌

设计令牌架构、CSS 自定义属性和主题系统实现。

何时使用此技能

在以下情况下使用此技能……在以下情况下改用其他技能……
搭建设计令牌系统编写单个组件的样式
实现浅色／深色主题切换执行无障碍审查（使用无障碍技能）
组织 CSS 自定义属性编写 CSS 布局或响应式设计
将令牌与 Tailwind／框架集成使用特定框架的组件模式

核心专长

  • 令牌架构：组织设计令牌，确保可扩展性
  • CSS 自定义属性：变量模式和继承
  • 主题系统：浅色／深色模式、用户偏好
  • 组件集成：一致地应用令牌

令牌结构

三层架构
/* 1. Primitive tokens (raw values) */
:root {
  --color-blue-50: #eff6ff;
  --color-blue-100: #dbeafe;
  --color-blue-500: #3b82f6;
  --color-blue-600: #2563eb;
  --color-blue-700: #1d4ed8;

  --spacing-1: 0.25rem;
  --spacing-2: 0.5rem;
  --spacing-4: 1rem;
  --spacing-8: 2rem;

  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
}

/* 2. Semantic tokens (purpose-based) */
:root {
  --color-primary: var(--color-blue-600);
  --color-primary-hover: var(--color-blue-700);
  --color-background: white;
  --color-surface: var(--color-gray-50);
  --color-text: var(--color-gray-900);
  --color-text-muted: var(--color-gray-600);

  --spacing-component: var(--spacing-4);
  --spacing-section: var(--spacing-8);
}

/* 3. Component tokens (specific usage) */
.button {
  --button-padding-x: var(--spacing-4);
  --button-padding-y: var(--spacing-2);
  --button-bg: var(--color-primary);
  --button-bg-hover: var(--color-primary-hover);
  --button-text: white;

  padding: var(--button-padding-y) var(--button-padding-x);
  background: var(--button-bg);
  color: var(--button-text);
}

.button:hover {
  background: var(--button-bg-hover);
}
令牌类别
:root {
  /* Colors */       --color-{name}-{shade}: value;
  /* Typography */   --font-family-{name}: value;
                     --font-size-{name}: value;
                     --font-weight-{name}: value;
                     --line-height-{name}: value;
  /* Spacing */      --spacing-{scale}: value;
  /* Borders */      --border-width-{name}: value;
                     --border-radius-{name}: value;
  /* Shadows */      --shadow-{name}: value;
  /* Transitions */  --duration-{name}: value;
                     --easing-{name}: value;
  /* Z-index */      --z-{name}: value;
}

主题实现

浅色／深色模式
/* Default (light) theme */
:root {
  --color-background: #ffffff;
  --color-surface: #f9fafb;
  --color-text: #111827;
  --color-text-muted: #6b7280;
  --color-border: #e5e7eb;
}

/* Dark theme */
[data-theme="dark"] {
  --color-background: #111827;
  --color-surface: #1f2937;
  --color-text: #f9fafb;
  --color-text-muted: #9ca3af;
  --color-border: #374151;
}

/* System preference */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-background: #111827;
    --color-surface: #1f2937;
    --color-text: #f9fafb;
    --color-text-muted: #9ca3af;
    --color-border: #374151;
  }
}

文件组织

推荐结构
styles/
├── tokens/
│   ├── primitives.css      # Raw values
│   ├── semantic.css        # Purpose-based tokens
│   └── index.css           # Combines all tokens
├── themes/
│   ├── light.css           # Light theme overrides
│   └── dark.css            # Dark theme overrides
├── base/
│   ├── reset.css           # CSS reset
│   └── typography.css      # Base typography
└── components/
    ├── button.css
    └── card.css

组件集成

组件级令牌
/* Card component with local tokens */
.card {
  --card-padding: var(--spacing-4, 1rem);
  --card-radius: var(--border-radius-lg, 0.5rem);
  --card-shadow: var(--shadow-md);
  --card-bg: var(--color-surface);
  --card-border: var(--color-border);

  padding: var(--card-padding);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  background: var(--card-bg);
  border: 1px solid var(--card-border);
}

/* Variant via token override */
.card--elevated {
  --card-shadow: var(--shadow-lg);
}

.card--outlined {
  --card-shadow: none;
  --card-border: var(--color-border-strong);
}

Agentic 优化

上下文命令
查找所有 CSS 变量grep -r '--[a-z]' styles/ --include='*.css'
检查令牌使用情况grep -r 'var(--color-primary)' src/ --include='*.css' --include='*.tsx'
查找硬编码颜色grep -rn '#[0-9a-fA-F]\{3,8\}' src/ --include='*.css'
列出所有令牌文件find styles/tokens -name '*.css'
验证 CSS 语法npx stylelint 'styles/**/*.css'

详细示例、高级模式和最佳实践，请参阅 REFERENCE.md。

参考资料

评论

支持 Markdown