设计令牌驱动的设计系统初始化：agents24 仓库 ui-design 插件 design-system-setup 命令全解

2026-09-09 21:30:29作者：羿妍玫Ivan

导读

本文深度解析 GitHub 推荐项目精选（agents24）仓库中 ui-design 插件提供的 /ui-design:design-system-setup 命令。该命令以设计令牌（Design Tokens）为核心，通过一问一答的交互式配置，自动生成包含颜色、字体、间距、圆角、阴影、断点与动效的完整设计系统基础文件，覆盖 CSS Custom Properties、Tailwind 配置、TypeScript 模块三种输出格式，并可选生成设计系统文档。读完本文，你将掌握该命令的完整执行流程、8 个交互问题背后的设计决策、生成的每个文件的落地用法，以及它与插件内 design-system-patterns 技能、create-component、design-review 命令构成的完整工作流。

一、命令定位与格式规范

design-system-setup 是 ui-design 插件四个命令之一，与 design-review（审查既有 UI）、create-component（创建组件）、accessibility-audit（无障碍审计）并列，负责设计系统的"从零初始化"。命令的元数据定义位于 plugins/ui-design/commands/design-system-setup.md 的 YAML frontmatter：

---
description: "Initialize a design system with tokens"
argument-hint: "[--preset minimal|standard|comprehensive]"
---

这里的两项元数据与仓库的通用规范一致。根目录 docs/authoring.md 中明确：命令文件以 description 和 argument-hint: 声明用途与参数提示，不同 Agent harness 会据此生成对应的斜杠命令入口（例如 Copilot 会转换为 .copilot/commands/<plugin>/<name>.md）。也就是说，--preset 是唯一的内置命令行参数，用于跳过 Q1 直接指定设计系统级别；其余配置项都通过交互问答确定。

该命令生成的设计系统以令牌为中心，这与插件 README 中"Design Systems: Token architecture, theming, multi-brand systems"的核心能力定位一致（见 plugins/ui-design/README.md）。README 同时给出了安装与调用方式：

/plugin install ui-design
/ui-design:design-system-setup --name "Acme Design System"

二、Pre-flight Checks：初始化前的环境侦察

命令执行的第一步是探测项目现状，避免与既有配置冲突。完整的预检逻辑如下：

检查 .ui-design/ 目录：若已存在且内含 design-system.json，则提示用户选择"更新"或"重新初始化"；否则创建该目录。
检测既有设计系统迹象：依次检查 tailwind.config.js 是否含自定义主题、全局样式中是否存在 CSS 自定义属性、是否已有令牌文件（如 tokens.json、theme.ts）、是否已安装设计系统类依赖包（chakra、radix、shadcn 等）。
加载项目上下文：读取 conductor/tech-stack.md（若存在）、探测样式方案（CSS / Tailwind / styled-components 等）与 TypeScript 使用情况。
发现既有设计系统时，展示如下交互菜单，交由用户决策：

I detected an existing design system configuration:

- {detected_system}

Would you like to:
1. Integrate with existing system (add missing tokens)
2. Replace with new design system
3. View current configuration
4. Cancel

Enter number:

这种"先侦察、再询问"的设计与同插件的 create-component、design-review 命令一脉相承（参见 plugins/ui-design/commands/create-component.md 与 plugins/ui-design/commands/design-review.md 的 Pre-flight Checks 小节），体现了插件对增量集成与幂等性的重视：重复执行不会盲目覆盖，而是先给出合并、替换、查看、取消四条路径。

三、交互式配置：8 个问题构建完整规格

该命令采用"一问一答"的引导式配置。原文档对此有明确的 CRITICAL RULES：

每轮只问一个问题（Ask ONE question per turn）
等待用户回复后再继续（Wait for user response before proceeding）
在生成任何文件之前，先构建完整规格（Build complete specification before generating files）

Q1：设计系统预设（可用 `--preset` 跳过）

What level of design system do you need?

1. Minimal   - Colors, typography, spacing only
               Best for: Small projects, rapid prototyping

2. Standard  - Colors, typography, spacing, shadows, borders, breakpoints
               Best for: Most projects, good balance of flexibility

3. Comprehensive - Full token system with semantic naming, component tokens,
                   animation, and documentation
               Best for: Large projects, design teams, long-term maintenance

Enter number:

三个预设的边界清晰：Minimal 只含颜色、字体、间距，适合小项目与快速原型；Standard 追加阴影、边框、断点，是多数项目的平衡之选；Comprehensive 提供完整令牌系统（语义命名、组件令牌、动画、文档），面向大型项目与长期维护。--preset 参数传入时该问题被跳过，argument-hint 中的三个取值即对应此处的三个级别。

Q2：品牌色

先索取主品牌色（hex，示例 #3B82F6），收到后立即回显确认，再索取辅助色；辅助色留空时由系统自动生成：

Let's define your brand colors.

Enter your primary brand color (hex code, e.g., #3B82F6):
...
Primary color: {color}

Now enter your secondary/accent color (or press enter to auto-generate):

主色 + 辅色的设定直接决定后续"色板生成"环节的输入（见第五节）。值得一提的是，插件内置的 plugins/ui-design/skills/visual-design-foundations/references/color-systems.md 提供了程序化色板生成与色彩和谐（互补、三角、类似色）等算法支撑，可作为自动生成辅色的底层能力。

Q3：色彩模式支持

What color modes should the design system support?

1. Light mode only
2. Dark mode only
3. Light and dark modes
4. Light, dark, and system preference

Enter number:

选择 3 或 4 时，生成的 tokens.css 会包含暗色主题的覆盖规则（prefers-color-scheme 与 [data-theme="dark"] 两种机制），详见第六节。

Q4：字体族

What font family should be used?

1. System fonts (fastest loading, native feel)
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', ...
2. Inter (modern, highly readable)
3. Open Sans (friendly, versatile)
4. Roboto (clean, Google standard)
5. Custom (provide name)

Enter number or font name:

选项同时注明了每种选择的定位（加载速度、可读性、亲和力、Google 标准风等），并允许直接输入自定义字体名。

Q5：间距刻度

What spacing scale philosophy?

1. Linear (4px base)
   4, 8, 12, 16, 20, 24, 32, 40, 48, 64
2. Geometric (4px base, 1.5x multiplier)
   4, 6, 9, 14, 21, 32, 48, 72
3. Tailwind-compatible
   0, 1, 2, 4, 6, 8, 12, 16, 20, 24, 32, 40, 48, 64
4. Custom (provide values)

Enter number:

三种刻度哲学各有利弊：线性刻度（4px 基准）简单可预测；几何刻度（4px 基准、1.5 倍率）在窄距处更精细；Tailwind 兼容刻度则直接对齐生态内最常见的间距体系。此问题与 plugins/ui-design/skills/design-system-patterns/references/design-tokens.md 中记载的 4px / 8px 基准间距规范相呼应。

Q6：圆角风格

What corner radius style?

1. Sharp    - 0px (no rounding)
2. Subtle   - 4px (slight rounding)
3. Moderate - 8px (noticeable rounding)
4. Rounded  - 12px (significant rounding)
5. Pill     - 9999px for buttons, 16px for cards

Enter number:

五档从 0px 到"胶囊形"（按钮 9999px、卡片 16px）逐级递进，覆盖从硬朗到圆润的视觉风格。

Q7：输出格式

How should the design tokens be output?

1. CSS Custom Properties (works everywhere)
2. Tailwind config (tailwind.config.js extension)
3. JavaScript/TypeScript module
4. JSON tokens (Design Token Community Group format)
5. Multiple formats (all of the above)

Enter number:

选项 4 直接对应 W3C Design Tokens Community Group 的 JSON 规范格式；选项 5 则会同时产出 CSS、Tailwind 与 TS 三份文件（第六节详述）。设计令牌的 JSON 化是插件另一重要主题，plugins/ui-design/skills/design-system-patterns/references/design-tokens.md 中给出了符合该规范的完整令牌 JSON 示例。

Q8：组件设计指南（仅 Comprehensive 预设出现）

Should I generate component design guidelines?

These include:
- Button variants and states
- Form input patterns
- Card/container patterns
- Typography hierarchy
- Icon usage guidelines

1. Yes, generate all guidelines
2. Yes, but let me select which ones
3. No, tokens only

Enter number:

注意此问仅在选择了 Comprehensive 预设后才会出现，这正是"先问规格、按预设裁剪问题集"的体现——Minimal / Standard 预设下问题数量更少、流程更短。

四、状态管理：setup_state.json 保证断点续跑

命令将整个初始化过程记录到 .ui-design/setup_state.json，使得长交互流程具备可恢复性。其标准结构如下：

{
  "status": "in_progress",
  "preset": "standard",
  "colors": {
    "primary": "#3B82F6",
    "secondary": "#8B5CF6"
  },
  "color_modes": ["light", "dark"],
  "typography": {
    "family": "Inter",
    "scale": "1.25"
  },
  "spacing": "linear",
  "radius": "moderate",
  "output_formats": ["css", "tailwind"],
  "current_step": 1,
  "started_at": "ISO_TIMESTAMP"
}

关键字段的作用：

字段	含义
`status`	流程状态：`in_progress` / 完成后更新为 `complete`
`preset`	用户选定的预设级别（minimal / standard / comprehensive）
`colors.primary / secondary`	Q2 收集的主色与辅色
`color_modes`	Q3 选择的色彩模式集合
`typography.family / scale`	Q4 选定的字体族与字号缩放比例（示例 `1.25` 为常见模块化比例）
`spacing`	Q5 选择的间距刻度哲学
`radius`	Q6 选择的圆角风格
`output_formats`	Q7 选择的输出格式
`current_step`	当前问答进行到的步骤号
`started_at`	起始时间戳

该文件扮演"会话记忆"角色：中途中断后重新运行，可依据 current_step 与既有答案续跑，而无需从头重答。同类设计也出现在 create-component（.ui-design/components/{name}.json）与 design-review（.ui-design/reviews/review_state.json）命令中，是插件在"长流程状态管理"上的统一约定。

五、Token 生成：从两个颜色到完整令牌体系

收集完规格后，命令开始从主色、辅色推导出四组令牌。以下为生成标准（以 primary 为例，secondary 结构相同）：

1. 生成色板

从主色 #3B82F6 生成 50~950 共 11 级梯度，同时生成中性色板与语义色：

{
  "colors": {
    "primary": {
      "50": "#EFF6FF",
      "100": "#DBEAFE",
      "200": "#BFDBFE",
      "300": "#93C5FD",
      "400": "#60A5FA",
      "500": "#3B82F6",
      "600": "#2563EB",
      "700": "#1D4ED8",
      "800": "#1E40AF",
      "900": "#1E3A8A",
      "950": "#172554"
    },
    "secondary": { ... },
    "neutral": {
      "50": "#F9FAFB",
      "100": "#F3F4F6",
      "200": "#E5E7EB",
      "300": "#D1D5DB",
      "400": "#9CA3AF",
      "500": "#6B7280",
      "600": "#4B5563",
      "700": "#374151",
      "800": "#1F2937",
      "900": "#111827",
      "950": "#030712"
    },
    "semantic": {
      "success": "#22C55E",
      "warning": "#F59E0B",
      "error": "#EF4444",
      "info": "#3B82F6"
    }
  }
}

关于色板生成算法，可从插件技能推断其思路：plugins/ui-design/skills/visual-design-foundations/references/color-systems.md 中提供了基于亮度阶梯的程序化色板生成函数（如 50~950 各档对应 97%~12% 的亮度），以及 OKLCH 感知均匀色板方案，是"从主色自动推导整张色板"的可行实现基础。

2. 生成字体刻度

{
  "typography": {
    "fontFamily": {
      "sans": "Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
      "mono": "ui-monospace, 'Fira Code', monospace"
    },
    "fontSize": {
      "xs": "0.75rem",
      "sm": "0.875rem",
      "base": "1rem",
      "lg": "1.125rem",
      "xl": "1.25rem",
      "2xl": "1.5rem",
      "3xl": "1.875rem",
      "4xl": "2.25rem",
      "5xl": "3rem"
    },
    "fontWeight": {
      "normal": "400",
      "medium": "500",
      "semibold": "600",
      "bold": "700"
    },
    "lineHeight": {
      "tight": "1.25",
      "normal": "1.5",
      "relaxed": "1.75"
    }
  }
}

3. 生成间距刻度

{
  "spacing": {
    "0": "0",
    "1": "0.25rem",
    "2": "0.5rem",
    "3": "0.75rem",
    "4": "1rem",
    "5": "1.25rem",
    "6": "1.5rem",
    "8": "2rem",
    "10": "2.5rem",
    "12": "3rem",
    "16": "4rem",
    "20": "5rem",
    "24": "6rem"
  }
}

该结构符合 4px 基准的线性刻度（即 Q5 选项 1），也与 plugins/ui-design/skills/design-system-patterns/references/design-tokens.md 中完整版间距令牌（含 0.5~24 全部档位）保持一致。

4. 生成扩展令牌（圆角、阴影、断点、动效）

Standard 与 Comprehensive 预设会追加以下令牌组：

{
  "borderRadius": {
    "none": "0",
    "sm": "0.125rem",
    "base": "0.25rem",
    "md": "0.375rem",
    "lg": "0.5rem",
    "xl": "0.75rem",
    "2xl": "1rem",
    "full": "9999px"
  },
  "boxShadow": {
    "sm": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
    "base": "0 1px 3px 0 rgb(0 0 0 / 0.1)",
    "md": "0 4px 6px -1px rgb(0 0 0 / 0.1)",
    "lg": "0 10px 15px -3px rgb(0 0 0 / 0.1)",
    "xl": "0 20px 25px -5px rgb(0 0 0 / 0.1)"
  },
  "breakpoints": {
    "sm": "640px",
    "md": "768px",
    "lg": "1024px",
    "xl": "1280px",
    "2xl": "1536px"
  },
  "animation": {
    "duration": {
      "fast": "150ms",
      "normal": "300ms",
      "slow": "500ms"
    },
    "easing": {
      "ease": "cubic-bezier(0.4, 0, 0.2, 1)",
      "easeIn": "cubic-bezier(0.4, 0, 1, 1)",
      "easeOut": "cubic-bezier(0, 0, 0.2, 1)"
    }
  }
}

断点档位与 Tailwind 默认断点一致，便于与 Tailwind 生态直接对接；动效令牌将时长与缓动曲线统一抽象，避免各组件自行定义离散值。

六、文件生成：三类可直接落地的产物

配置与令牌齐备后，命令在 .ui-design/ 下生成核心配置与多格式令牌文件。README 中给出了该目录的整体结构（plugins/ui-design/README.md）：

.ui-design/
├── design-system.config.json    # Design system configuration
├── component_specs/             # Generated component specifications
├── audit_reports/               # Accessibility audit reports
└── tokens/                      # Generated design tokens

1. 主配置文件 `.ui-design/design-system.json`

作为设计系统的"单一事实来源"（single source of truth），汇总全部元信息与令牌：

{
  "name": "{project_name} Design System",
  "version": "1.0.0",
  "created": "ISO_TIMESTAMP",
  "preset": "{preset}",
  "tokens": {
    "colors": { ... },
    "typography": { ... },
    "spacing": { ... },
    "borderRadius": { ... },
    "boxShadow": { ... },
    "breakpoints": { ... },
    "animation": { ... }
  },
  "colorModes": ["light", "dark"],
  "outputFormats": ["css", "tailwind"]
}

这份文件同时是插件其他命令的输入源：create-component 在生成组件时会加载 .ui-design/design-system.json 以引用既有令牌，design-review 也会读取它以校验实际 UI 与令牌的一致性。

2. CSS Custom Properties：`.ui-design/tokens/tokens.css`

面向"处处可用"的 CSS 变量输出，文件头部明确标注"Generated / Do not edit directly"，并记录生成来源命令：

/* Design System Tokens - Generated */
/* Do not edit directly. Regenerate with /ui-design:design-system-setup */

:root {
  /* Colors - Primary */
  --color-primary-50: #eff6ff;
  --color-primary-100: #dbeafe;
  --color-primary-500: #3b82f6;
  --color-primary-600: #2563eb;
  --color-primary-700: #1d4ed8;

  /* Colors - Neutral */
  --color-neutral-50: #f9fafb;
  --color-neutral-100: #f3f4f6;
  --color-neutral-500: #6b7280;
  --color-neutral-900: #111827;

  /* Colors - Semantic */
  --color-success: #22c55e;
  --color-warning: #f59e0b;
  --color-error: #ef4444;
  --color-info: #3b82f6;

  /* Typography */
  --font-family-sans: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-family-mono: ui-monospace, "Fira Code", monospace;

  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;

  /* Spacing */
  --spacing-1: 0.25rem;
  --spacing-2: 0.5rem;
  --spacing-4: 1rem;
  --spacing-6: 1.5rem;
  --spacing-8: 2rem;

  /* Border Radius */
  --radius-sm: 0.125rem;
  --radius-base: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-base: 0 1px 3px 0 rgb(0 0 0 / 0.1);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);

  /* Animation */
  --duration-fast: 150ms;
  --duration-normal: 300ms;
  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
  :root {
    --color-neutral-50: #111827;
    --color-neutral-100: #1f2937;
    --color-neutral-500: #9ca3af;
    --color-neutral-900: #f9fafb;
  }
}

[data-theme="dark"] {
  --color-neutral-50: #111827;
  --color-neutral-100: #1f2937;
  --color-neutral-500: #9ca3af;
  --color-neutral-900: #f9fafb;
}

值得注意的两点实现细节：

双暗色机制：文件同时给出 @media (prefers-color-scheme: dark)（跟随系统偏好）与 [data-theme="dark"]（显式主题属性）两套覆盖。这正是 Q3 选项 3（明暗双模式）与选项 4（含系统偏好）在产物上的具体差异；plugins/ui-design/skills/visual-design-foundations/references/color-systems.md 中记载了相同的双机制实现（含 :root:not([data-theme="light"]) 的优先级处理）。
令牌命名：统一采用 --category-subcategory-step 的 kebab-case 命名，与 plugins/ui-design/skills/design-system-patterns/references/design-tokens.md 的命名规范（kebab-case、语义化、含刻度信息）完全吻合。

3. Tailwind 扩展：`.ui-design/tokens/tailwind.config.js`

面向 Tailwind 用户的扩展文件，注释明确提示"Import and spread in your tailwind.config.js"：

// Design System Tailwind Extension
// Import and spread in your tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: {
          50: "#EFF6FF",
          100: "#DBEAFE",
          200: "#BFDBFE",
          300: "#93C5FD",
          400: "#60A5FA",
          500: "#3B82F6",
          600: "#2563EB",
          700: "#1D4ED8",
          800: "#1E40AF",
          900: "#1E3A8A",
          950: "#172554",
        },
        // ... other colors
      },
      fontFamily: {
        sans: ["Inter", "-apple-system", "BlinkMacSystemFont", "sans-serif"],
        mono: ["ui-monospace", "Fira Code", "monospace"],
      },
      // ... other tokens
    },
  },
};

4. TypeScript 模块：`.ui-design/tokens/tokens.ts`

为 TS 工程提供强类型令牌模块，并通过 as const 与 keyof 导出类型，使消费方获得编译期类型安全：

// Design System Tokens - Generated
// Do not edit directly.

export const colors = {
  primary: {
    50: "#EFF6FF",
    // ... full palette
  },
  // ... other color groups
} as const;

export const typography = {
  fontFamily: {
    sans: "Inter, -apple-system, BlinkMacSystemFont, sans-serif",
    mono: "ui-monospace, 'Fira Code', monospace",
  },
  fontSize: {
    xs: "0.75rem",
    // ... full scale
  },
} as const;

export const spacing = {
  1: "0.25rem",
  // ... full scale
} as const;

// Type exports for TypeScript consumers
export type ColorToken = keyof typeof colors;
export type SpacingToken = keyof typeof spacing;

七、文档生成（Comprehensive 预设专属）

Comprehensive 预设下（且 Q8 选择生成指南时），命令额外产出 .ui-design/docs/design-system.md，为团队提供可直接查阅的设计规范。其结构覆盖：

Overview：设计系统定位声明
Colors：主色板表格（含 primary-500 用于主操作与链接、primary-600 悬停态、primary-700 激活态）与语义色表格（success 成功消息、warning 警示、error 错误与破坏性操作）
Typography：字号刻度表（xs 用于标注标签、sm 次要文本、base 正文、lg 强调正文、xl 小标题）
Spacing：间距令牌语义（spacing-1 4px 紧凑、spacing-2 8px、spacing-4 16px 默认、spacing-6 24px 舒适、spacing-8 32px 宽松）
Usage：附 CSS 与 Tailwind 双示例

CSS 用法示例展示了令牌如何在组件中落地：

.button {
  background: var(--color-primary-500);
  padding: var(--spacing-2) var(--spacing-4);
  border-radius: var(--radius-md);
}

Tailwind 等价写法：

<button class="bg-primary-500 px-4 py-2 rounded-md">Click me</button>

八、完成反馈与后续工作流

全部文件生成后，命令更新状态文件并输出完成摘要与快速上手指引：

Design System Setup Complete!

Created files:

- .ui-design/design-system.json (master configuration)
- .ui-design/tokens/tokens.css (CSS custom properties)
- .ui-design/tokens/tailwind.config.js (Tailwind extension)
- .ui-design/tokens/tokens.ts (TypeScript module)
- .ui-design/docs/design-system.md (documentation)

Quick start:

1. CSS: @import '.ui-design/tokens/tokens.css';
2. Tailwind: Spread in your tailwind.config.js
3. TypeScript: import { colors } from '.ui-design/tokens/tokens';

Next steps:

1. Review and customize tokens as needed
2. Run /ui-design:create-component to build with your design system
3. Run /ui-design:design-review to validate existing UI against tokens

Need to modify tokens? Run /ui-design:design-system-setup --preset {preset}

摘要末尾的"Next steps"揭示了该命令在整个插件工作流中的枢纽位置：

/ui-design:create-component：基于刚建立的令牌体系引导创建组件。从 plugins/ui-design/commands/create-component.md 可见，它会加载 .ui-design/design-system.json，并让新组件从令牌取值（如 Tailwind 下直接使用 bg-primary-500 类）。
/ui-design:design-review：用既有令牌标准审查存量 UI。其审查清单中的"Magic numbers vs. design tokens"（硬编码值 vs 令牌）、"Semantic color application""Dark mode support"等检查项，正是对设计系统是否被正确消费的回归校验（见 plugins/ui-design/commands/design-review.md）。
/ui-design:accessibility-audit：对生成的组件与页面做 WCAG 合规审计，配合令牌生成时对语义色与对比度的约束，形成"设计→开发→审查→审计"的闭环。

此外，README 还给出了命令的命名参数用法 --name "Acme Design System"，可将项目名注入 design-system.json 的 name 字段。

九、错误处理与边界情况

命令对常见异常给出了明确处置策略：

异常场景	处理方式
检测到冲突配置	提供合并策略选项（对应预检阶段的 4 项选择菜单）
文件写入失败	报告错误，建议手动创建
颜色生成失败	提供手动输入色板的备选路径
未检测到 Tailwind	跳过 Tailwind 输出并告知用户

其中"未检测到 Tailwind 则跳过对应产物"的容错逻辑，保证了该命令在纯 CSS / CSS-in-JS / TypeScript 等不同技术栈项目中都能正确降级，不会因缺失某一框架而整体失败。

十、从命令到体系：令牌架构的三层纵深

如果将该命令放在插件的能力图谱中观察，它只是入口，其背后是 plugins/ui-design/skills/design-system-patterns/SKILL.md 定义的完整令牌方法论，以及 plugins/ui-design/agents/design-system-architect.md 这一专职 Agent 的能力域。SKILL.md 明确将令牌划分为三层：

Primitive tokens（原始令牌）：颜色、尺寸、字体等未经语义化的原始值（如 --color-blue-500）
Semantic tokens（语义令牌）：表达上下文含义（如 text-primary、surface-elevated），可随主题切换映射到不同原始值
Component tokens（组件令牌）：绑定具体组件用途（如 button-bg、card-border）

design-system-setup 生成的 design-system.json 与 tokens.css 主要覆盖前两层（原始色板 + 语义色 + 全局令牌）；而 plugins/ui-design/skills/design-system-patterns/references/details.md 给出了三层叠放的完整 CSS 示例（--text-primary: var(--color-gray-900) 式引用链），以及基于 CVA 的组件变体系统、Style Dictionary 多平台构建配置，可作为从"初始化"走向"组件库建设"的下一步参考。

同时，design-tokens 参考文档（plugins/ui-design/skills/design-system-patterns/references/design-tokens.md）还覆盖了令牌治理：变更管理六步法（提议→评审→测试→通告→弃用→移除）、带 deprecated / replacedBy 字段的弃用模式、以及对比度与循环引用的自动校验（AA 级 4.5:1、AAA 级 7:1）——这些是初始化完成后维持令牌体系长期健康的配套能力。

结语

/ui-design:design-system-setup 以"预检→问答→令牌生成→多格式落盘"四个阶段，把设计系统初始化的复杂决策压缩进一次可复现的交互流程：8 个问题覆盖预设级别、品牌色、色彩模式、字体、间距、圆角、输出格式与文档；setup_state.json 保证长流程可续跑；design-system.json 作为单一事实来源被 create-component 与 design-review 复用；最终产物同时服务 CSS、Tailwind 与 TypeScript 三类消费方。对于需要在项目中快速建立一致 UI 基础、并希望后续组件开发与 UI 审查都锚定同一套令牌标准的团队而言，这是一个开箱即用的起点——而插件内置的设计系统技能与专属 Agent，则为从"基础令牌"走向"完整设计系统治理"提供了延续路径。

agents

Multi-harness agentic plugin marketplace for Claude Code, Codex, Cursor, OpenCode, GitHub Copilot, and Google Antigravity

项目地址：https://gitcode.com/GitHub_Trending/agents24/agents

登录后查看全文