27d - 设计系统与组件库维护

┌─────────────────────────────┐
│     Component Tokens        │  ← button-primary-bg, card-border-radius
│     (组件级 Token)           │
├─────────────────────────────┤
│     Semantic Tokens         │  ← color-action-primary, spacing-md
│     (语义级 Token)           │
├─────────────────────────────┤
│     Global/Primitive Tokens │  ← blue-500, 16px, 0.75rem
│     (全局/原始 Token)        │
└─────────────────────────────┘

{
  "color": {
    "brand": {
      "primary": {
        "$value": "#3B82F6",
        "$type": "color",
        "$description": "主品牌色，用于主要操作按钮和链接"
      }
    }
  },
  "spacing": {
    "md": {
      "$value": "16px",
      "$type": "dimension"
    }
  }
}

// .mcp.json 配置
{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": ["-y", "@anthropic/figma-mcp-server"],
      "env": {
        "FIGMA_ACCESS_TOKEN": "your-figma-token"
      }
    }
  }
}

提示词模板：

请分析 Figma 文件 [文件URL] 中的设计样式，提取所有 Design Token 并按以下结构组织：

1. 全局 Token（Global/Primitive）：
   - 颜色色板（包含所有色阶）
   - 间距系统（4px 基准网格）
   - 字体系统（字族、字重、字号）
   - 圆角、阴影、边框

2. 语义 Token（Semantic）：
   - 根据使用场景命名（如 color-text-primary, color-bg-surface）
   - 引用全局 Token

3. 输出格式：W3C Design Tokens Format（JSON）
4. 命名规范：kebab-case，层级用 . 分隔

提示词模板：

审查以下 Design Token 命名，检查是否存在：
1. 命名不一致（混用 camelCase 和 kebab-case）
2. 语义不清晰（如 color-1, color-2 应改为 color-text-primary）
3. 缺少必要的语义层（直接在组件中使用全局 Token）
4. 冗余 Token（值相同但名称不同）

Token 文件：
[粘贴 Token JSON]

请给出修改建议和修改后的完整 Token 文件。

tokens/
├── global/
│   ├── colors.json          # 全局色板（所有品牌共享的原始值）
│   ├── spacing.json         # 间距系统
│   └── typography.json      # 字体系统
├── brands/
│   ├── brand-a/
│   │   ├── colors.json      # Brand A 的品牌色覆盖
│   │   └── typography.json  # Brand A 的字体覆盖
│   ├── brand-b/
│   │   ├── colors.json      # Brand B 的品牌色覆盖
│   │   └── typography.json  # Brand B 的字体覆盖
│   └── brand-c/
│       └── ...
├── semantic/
│   ├── light.json           # 浅色模式语义映射
│   └── dark.json            # 深色模式语义映射
└── components/
    ├── button.json           # 按钮组件 Token
    └── card.json             # 卡片组件 Token

提示词模板：

基于以下基础设计系统 Token，为新品牌 [品牌名] 生成品牌 Token 覆盖文件：

基础 Token：
[粘贴 semantic/light.json]

品牌要求：
- 主色调：[色值或描述，如"科技蓝 #0066FF"]
- 风格：[如"现代简约"、"温暖亲和"、"专业严肃"]
- 圆角偏好：[如"圆润"、"直角"、"微圆"]
- 字体：[如"Inter"、"Noto Sans SC"]

请生成：
1. brands/[品牌名]/colors.json — 品牌色覆盖
2. brands/[品牌名]/typography.json — 字体覆盖
3. 确保所有语义 Token 引用正确
4. 包含浅色和深色模式的变体

// style-dictionary.config.js
import StyleDictionary from 'style-dictionary';
 
const brands = ['brand-a', 'brand-b', 'brand-c'];
const modes = ['light', 'dark'];
 
brands.forEach(brand => {
  modes.forEach(mode => {
    const sd = new StyleDictionary({
      source: [
        'tokens/global/**/*.json',
        `tokens/brands/${brand}/**/*.json`,
        `tokens/semantic/${mode}.json`,
        'tokens/components/**/*.json',
      ],
      platforms: {
        css: {
          transformGroup: 'css',
          buildPath: `dist/${brand}/${mode}/`,
          files: [{
            destination: 'tokens.css',
            format: 'css/variables',
            options: {
              selector: `[data-brand="${brand}"][data-mode="${mode}"]`,
            },
          }],
        },
        js: {
          transformGroup: 'js',
          buildPath: `dist/${brand}/${mode}/`,
          files: [{
            destination: 'tokens.js',
            format: 'javascript/es6',
          }],
        },
      },
    });
    sd.buildAllPlatforms();
  });
});

{
  "color": {
    "text": {
      "primary": {
        "$value": "{gray.900}",
        "$type": "color",
        "$description": "主要文本颜色，用于标题和正文。在深色模式下自动切换为 gray.100"
      },
      "secondary": {
        "$value": "{gray.600}",
        "$type": "color",
        "$description": "次要文本颜色，用于辅助说明、时间戳、占位符文本"
      }
    }
  }
}

# Token 使用指南
 
## 颜色选择规则
- 主要操作按钮：使用 `color.action.primary`
- 危险操作按钮：使用 `color.action.danger`
- 禁用状态：使用 `color.action.disabled`
- 永远不要直接使用全局 Token（如 blue-500），始终使用语义 Token
 
## 间距规则
- 组件内部间距：使用 `spacing.sm`（8px）到 `spacing.md`（16px）
- 组件之间间距：使用 `spacing.lg`（24px）到 `spacing.xl`（32px）
- 页面级间距：使用 `spacing.2xl`（48px）到 `spacing.3xl`（64px）

# .cursorrules 或 CLAUDE.md 中添加
 
## 设计系统规则
- 所有颜色值必须使用 tokens/semantic/ 中定义的语义 Token
- 禁止在代码中硬编码颜色值（如 #3B82F6）
- 间距使用 Token 变量（如 var(--spacing-md)），不使用魔法数字
- 新增组件时，先检查 tokens/components/ 是否已有对应 Token
- Token 文件位于 tokens/ 目录，使用指南见 tokens/USAGE.md

npx storybook@latest add @storybook/addon-mcp

// .storybook/main.ts
import type { StorybookConfig } from '@storybook/react-vite';
 
const config: StorybookConfig = {
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
  addons: [
    '@storybook/addon-essentials',
    '@storybook/addon-mcp',  // 添加 MCP addon
  ],
  framework: {
    name: '@storybook/react-vite',
    options: {},
  },
};
 
export default config;

// .mcp.json（Claude Code / Kiro）
{
  "mcpServers": {
    "storybook": {
      "command": "npx",
      "args": ["@anthropic/storybook-mcp-server", "--storybook-url", "http://localhost:6006"]
    }
  }
}

# 终端 1：启动 Storybook
npm run storybook
 
# 终端 2：使用 AI 编码助手
# AI 现在可以查询你的组件库了

开发者描述需求
    ↓
AI 通过 MCP 查询可用组件
    ↓
AI 选择合适的组件组合
    ↓
AI 生成使用现有组件的代码
    ↓
AI 自动生成对应的 Story
    ↓
开发者在 Storybook 中预览验证
    ↓
Chromatic 运行视觉回归测试

提示词模板：

为以下 React 组件生成完整的 Storybook Story 文件（CSF 3 格式）：

组件代码：
[粘贴组件代码]

要求：
1. 使用 CSF 3 格式（export const StoryName: Story = {}）
2. 包含 Meta 配置（title、component、argTypes、decorators）
3. 为每个重要的 props 组合创建独立的 Story：
   - Default：默认状态
   - 每个 variant/size/color 的变体
   - 禁用状态
   - 加载状态（如适用）
   - 错误状态（如适用）
   - 空状态（如适用）
4. 添加 autodocs 标签
5. 为复杂 props 配置 argTypes 控件
6. 添加 play 函数测试关键交互（如点击、输入）
7. 使用项目的 Design Token 作为装饰器背景

// Button.stories.tsx — AI 生成
import type { Meta, StoryObj } from '@storybook/react';
import { expect, fn, userEvent, within } from '@storybook/test';
import { Button } from './Button';
 
const meta = {
  title: 'Components/Button',
  component: Button,
  tags: ['autodocs'],
  argTypes: {
    variant: {
      control: 'select',
      options: ['primary', 'secondary', 'outline', 'ghost', 'danger'],
      description: '按钮变体',
    },
    size: {
      control: 'select',
      options: ['sm', 'md', 'lg'],
      description: '按钮尺寸',
    },
    disabled: { control: 'boolean' },
    loading: { control: 'boolean' },
  },
  args: {
    onClick: fn(),
  },
} satisfies Meta<typeof Button>;
 
export default meta;
type Story = StoryObj<typeof meta>;
 
export const Primary: Story = {
  args: {
    variant: 'primary',
    children: '主要按钮',
  },
};
 
export const Secondary: Story = {
  args: {
    variant: 'secondary',
    children: '次要按钮',
  },
};
 
export const AllVariants: Story = {
  render: () => (
    <div style={{ display: 'flex', gap: '12px', alignItems: 'center' }}>
      <Button variant="primary">Primary</Button>
      <Button variant="secondary">Secondary</Button>
      <Button variant="outline">Outline</Button>
      <Button variant="ghost">Ghost</Button>
      <Button variant="danger">Danger</Button>
    </div>
  ),
};
 
export const AllSizes: Story = {
  render: () => (
    <div style={{ display: 'flex', gap: '12px', alignItems: 'center' }}>
      <Button size="sm">Small</Button>
      <Button size="md">Medium</Button>
      <Button size="lg">Large</Button>
    </div>
  ),
};
 
export const Disabled: Story = {
  args: {
    variant: 'primary',
    disabled: true,
    children: '禁用按钮',
  },
};
 
export const Loading: Story = {
  args: {
    variant: 'primary',
    loading: true,
    children: '加载中...',
  },
};
 
// 交互测试
export const ClickTest: Story = {
  args: {
    variant: 'primary',
    children: '点击测试',
  },
  play: async ({ canvasElement, args }) => {
    const canvas = within(canvasElement);
    const button = canvas.getByRole('button');
    await userEvent.click(button);
    await expect(args.onClick).toHaveBeenCalledOnce();
  },
};

提示词模板：

为以下组件生成 Storybook MDX 文档页面：

组件代码：
[粘贴组件代码]

组件 Story：
[粘贴 Story 代码]

文档要求：
1. 概述：一句话说明组件用途
2. 何时使用 / 何时不使用
3. Props API 表格（自动从 TypeScript 类型生成）
4. 使用示例：
   - 基础用法
   - 常见组合
   - 与其他组件配合使用
5. 设计指南：
   - 推荐的 Token 使用
   - 间距和对齐规则
6. 无障碍说明：
   - ARIA 属性
   - 键盘交互
   - 屏幕阅读器行为
7. 变更日志（如有）

输出格式：Storybook MDX

# .github/workflows/docs-update.yml
name: Auto-update Component Docs
 
on:
  push:
    paths:
      - 'src/components/**/*.tsx'
      - '!src/components/**/*.stories.tsx'
      - '!src/components/**/*.test.tsx'
 
jobs:
  update-docs:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      
      - name: Detect changed components
        id: changes
        run: |
          echo "files=$(git diff --name-only HEAD~1 | grep 'src/components.*\.tsx$' | grep -v '.stories\|.test' | tr '\n' ',')" >> $GITHUB_OUTPUT
      
      - name: Generate/update stories and docs
        if: steps.changes.outputs.files != ''
        run: |
          # 使用 AI 检查是否需要更新 Story 和文档
          echo "Changed components: ${{ steps.changes.outputs.files }}"
          # 触发 AI 辅助文档更新（通过 Claude Code API 或自定义脚本）
          npx tsx scripts/update-component-docs.ts --files "${{ steps.changes.outputs.files }}"
      
      - name: Create PR with doc updates
        uses: peter-evans/create-pull-request@v6
        with:
          title: "docs: auto-update component documentation"
          body: "AI-generated documentation updates for changed components"
          branch: docs/auto-update

┌──────────────────────────────────────────────┐
│              一致性验证金字塔                   │
├──────────────────────────────────────────────┤
│                                              │
│         🔺 视觉一致性                         │
│        （像素级视觉回归测试）                   │
│                                              │
│       🔺🔺 API 一致性                         │
│      （Props 命名、类型、模式统一）             │
│                                              │
│     🔺🔺🔺 无障碍一致性                       │
│    （ARIA、键盘导航、对比度合规）               │
│                                              │
└──────────────────────────────────────────────┘

npm install --save-dev chromatic

npx chromatic --project-token=<your-project-token>

# .github/workflows/chromatic.yml
name: Chromatic
 
on:
  push:
    branches: [main]
  pull_request:
    branches: [main]
 
jobs:
  chromatic:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
        with:
          fetch-depth: 0  # Chromatic 需要 git 历史
      
      - uses: actions/setup-node@v4
        with:
          node-version: 20
      
      - run: npm ci
      
      - uses: chromaui/action@latest
        with:
          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
          autoAcceptChanges: main  # main 分支自动接受变更作为新基线
          exitZeroOnChanges: true  # PR 中有变更时不阻塞，等待人工审查

提示词模板：

Chromatic 检测到以下组件的视觉变更：
[粘贴 Chromatic 报告或截图描述]

请分析：
1. 这些视觉变更是否是预期的？（基于最近的代码变更）
2. 是否有意外的副作用？（如修改 Button 影响了 Card）
3. 变更是否符合设计系统的 Token 规范？
4. 是否需要更新其他相关组件？

最近的代码变更：
[粘贴 git diff 或变更描述]

提示词模板：

请审计以下组件库的 Props API 一致性：

组件列表：
[列出所有组件的 Props 接口，或指向组件目录]

检查项：
1. **命名一致性**：
   - variant/color/type 是否统一？
   - size 的值是否统一（sm/md/lg vs small/medium/large）？
   - 布尔 Props 是否统一（isX vs X）？
   - 事件处理器命名是否统一（onX 模式）？

2. **类型一致性**：
   - 相同概念是否使用相同类型？
   - 是否有不必要的 string 类型（应该用联合类型）？

3. **模式一致性**：
   - 所有可禁用组件是否都支持 disabled？
   - 所有可加载组件是否都支持 loading？
   - 所有组件是否都支持 className/style 透传？
   - 所有组件是否都正确使用 ref 转发？

4. **默认值一致性**：
   - 相同 Props 的默认值是否一致？

请输出：
- 不一致问题列表（按严重程度排序）
- 建议的统一规范
- 需要修改的组件和具体变更

// .eslintrc.js
module.exports = {
  plugins: ['@your-org/design-system'],
  rules: {
    // 禁止在 CSS-in-JS 中使用硬编码颜色值
    '@your-org/design-system/no-hardcoded-colors': 'error',
    // 禁止在 CSS-in-JS 中使用硬编码间距值
    '@your-org/design-system/no-hardcoded-spacing': 'error',
    // 强制使用 Token 变量
    '@your-org/design-system/use-design-tokens': 'warn',
  },
};

提示词模板：

请对以下组件进行无障碍审计：

组件代码：
[粘贴组件代码]

检查项：
1. **ARIA 属性**：
   - 是否有正确的 role 属性？
   - 是否有必要的 aria-label / aria-labelledby？
   - 动态内容是否使用 aria-live？
   - 展开/折叠是否使用 aria-expanded？

2. **键盘交互**：
   - 是否可以通过 Tab 聚焦？
   - 是否支持 Enter/Space 激活？
   - 是否支持 Escape 关闭（弹窗/下拉）？
   - 焦点顺序是否合理？

3. **颜色对比度**：
   - 文本与背景的对比度是否 ≥ 4.5:1（AA 标准）？
   - 大文本对比度是否 ≥ 3:1？
   - 非文本元素对比度是否 ≥ 3:1？

4. **屏幕阅读器**：
   - 图标按钮是否有文本替代？
   - 装饰性图片是否标记为 aria-hidden？
   - 表单元素是否有关联的 label？

请输出问题列表和修复建议。

// .storybook/preview.ts — 全局无障碍检查
import type { Preview } from '@storybook/react';
 
const preview: Preview = {
  parameters: {
    a11y: {
      // 使用 axe-core 进行自动化无障碍检查
      config: {
        rules: [
          { id: 'color-contrast', enabled: true },
          { id: 'label', enabled: true },
          { id: 'aria-roles', enabled: true },
          { id: 'keyboard-access', enabled: true },
        ],
      },
      // 在 Story 面板中显示无障碍检查结果
      element: '#storybook-root',
    },
  },
};
 
export default preview;

// 在 CI 中运行无障碍测试
// scripts/a11y-audit.ts
import { checkA11y } from '@storybook/addon-a11y';
 
// 配合 Storybook Test Runner 使用
// package.json
{
  "scripts": {
    "test:a11y": "test-storybook --url http://localhost:6006 --tags a11y"
  }
}

Figma 设计变更
    ↓
Token Studio 同步 Token 到 Git
    ↓
CI 触发 Style Dictionary 构建
    ↓
生成多平台 Token 文件（CSS/JS/iOS/Android）
    ↓
AI 检测受影响的组件
    ↓
AI 更新组件 Story 和文档
    ↓
Chromatic 运行视觉回归测试
    ↓
ESLint 检查 Token 使用合规性
    ↓
无障碍自动审计
    ↓
PR 审查 → 合并 → 发布新版本

# .github/workflows/tokens-build.yml
name: Build Design Tokens
 
on:
  push:
    paths:
      - 'tokens/**/*.json'
 
jobs:
  build-tokens:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      
      - uses: actions/setup-node@v4
        with:
          node-version: 20
      
      - run: npm ci
      
      - name: Validate token format
        run: npx tsx scripts/validate-tokens.ts
      
      - name: Build tokens for all platforms
        run: npx style-dictionary build
      
      - name: Check for breaking changes
        run: npx tsx scripts/check-token-breaking-changes.ts
      
      - name: Commit built files
        uses: stefanzweifel/git-auto-commit-action@v5
        with:
          commit_message: "build: update generated token files"
          file_pattern: "dist/tokens/**"

提示词模板：

以下 Design Token 发生了变更：

变更前：
[粘贴旧 Token 值]

变更后：
[粘贴新 Token 值]

请分析：
1. 哪些组件会受到影响？（基于组件 Token 的引用链）
2. 视觉影响程度（微小/中等/显著）
3. 是否是破坏性变更（需要 major 版本号）？
4. 建议的迁移步骤（如果是破坏性变更）
5. 需要更新的文档和 Story

提示词模板：

基于以下 Git 提交记录，为组件库生成 CHANGELOG：

提交记录：
[粘贴 git log --oneline]

要求：
1. 按 Conventional Commits 分类（feat/fix/breaking/docs）
2. 按组件分组
3. 标注破坏性变更（BREAKING CHANGE）
4. 包含迁移指南（如有破坏性变更）
5. 格式遵循 Keep a Changelog 规范

// scripts/design-system-health.ts
interface DesignSystemHealth {
  // Token 覆盖率：代码中使用 Token 的比例
  tokenCoverage: number;        // 目标 > 95%
  
  // 组件覆盖率：有 Story 的组件比例
  storyCoverage: number;        // 目标 100%
  
  // 文档覆盖率：有文档的组件比例
  docsCoverage: number;         // 目标 100%
  
  // 无障碍合规率：通过 axe-core 检查的组件比例
  a11yCoverage: number;         // 目标 100%
  
  // 视觉测试覆盖率：有视觉快照的 Story 比例
  visualTestCoverage: number;   // 目标 > 90%
  
  // API 一致性得分
  apiConsistencyScore: number;  // 目标 > 90%
  
  // 组件采用率：应用中使用设计系统组件的比例
  adoptionRate: number;         // 目标 > 80%
}

提示词模板：

请分析我们设计系统的健康度指标：

[粘贴健康度数据]

请给出：
1. 总体健康度评分（A/B/C/D/F）
2. 最需要改进的 3 个领域
3. 每个领域的具体改进建议
4. 优先级排序和预估工作量

1. 需求分析
   ├── 从设计稿提取组件规格
   ├── AI 分析是否可复用现有组件
   └── 确定 Props API 设计

2. Token 准备
   ├── 检查现有 Token 是否满足需求
   ├── AI 建议新增 Token（如需要）
   └── 更新 Token 文件

3. 组件开发
   ├── AI 生成组件骨架代码
   ├── 开发者完善业务逻辑
   └── AI 检查 Token 使用合规性

4. Story 编写
   ├── AI 生成覆盖所有变体的 Story
   ├── 添加交互测试（play 函数）
   └── 配置 argTypes 控件

5. 文档编写
   ├── AI 生成 MDX 文档
   ├── 添加使用指南和设计规范
   └── 添加无障碍说明

6. 质量验证
   ├── Chromatic 视觉快照
   ├── 无障碍自动审计
   ├── API 一致性检查
   └── 单元测试和交互测试

7. 发布
   ├── AI 生成变更日志
   ├── 语义化版本号
   └── 发布到 npm / 内部 registry

提示词模板：

请为设计系统开发一个新的 [组件名] 组件。

设计规格：
- 用途：[组件用途描述]
- 变体：[列出所有变体，如 primary/secondary/outline]
- 尺寸：[列出所有尺寸，如 sm/md/lg]
- 状态：[列出所有状态，如 default/hover/active/disabled/loading]

技术要求：
- 框架：[React/Vue/Svelte]
- 样式方案：[Tailwind CSS / CSS Modules / styled-components]
- Token 文件位置：[tokens/ 目录路径]
- 现有组件参考：[参考类似组件的代码路径]

请生成：
1. 组件代码（使用 Design Token，支持 ref 转发）
2. TypeScript 类型定义
3. Storybook Story（CSF 3 格式，覆盖所有变体和状态）
4. 单元测试（使用 Vitest + Testing Library）
5. MDX 文档页面

API 设计规范：
- variant Props 使用联合类型
- size 使用 sm/md/lg
- 布尔 Props 不加 is 前缀（disabled 而非 isDisabled）
- 事件使用 on 前缀（onClick, onChange）
- 支持 className 和 style 透传
- 使用 forwardRef

提示词：
我需要为一个多品牌 SaaS 产品设计 Design Token 架构。
三个品牌：Enterprise（专业蓝）、Education（活力绿）、Personal（温暖橙）。
共享组件库，通过 Token 切换品牌主题。
每个品牌支持浅色和深色模式。
请设计完整的 Token 目录结构和示例文件。

tokens/
├── global/
│   ├── colors.json          # 完整色板（blue-50~950, green-50~950, ...）
│   ├── spacing.json         # 4px 基准网格（space-1: 4px ~ space-16: 64px）
│   ├── typography.json      # 字体系统
│   ├── radius.json          # 圆角系统
│   └── shadow.json          # 阴影系统
├── brands/
│   ├── enterprise/
│   │   └── overrides.json   # 主色 blue-600, 字体 Inter
│   ├── education/
│   │   └── overrides.json   # 主色 green-500, 字体 Nunito
│   └── personal/
│       └── overrides.json   # 主色 orange-500, 字体 DM Sans
├── semantic/
│   ├── light.json           # 浅色模式映射
│   └── dark.json            # 深色模式映射
└── components/
    ├── button.json
    ├── input.json
    ├── card.json
    └── ...

// build-tokens.js
import StyleDictionary from 'style-dictionary';
 
const brands = ['enterprise', 'education', 'personal'];
const modes = ['light', 'dark'];
 
for (const brand of brands) {
  for (const mode of modes) {
    const sd = new StyleDictionary({
      source: [
        'tokens/global/**/*.json',
        `tokens/brands/${brand}/**/*.json`,
        `tokens/semantic/${mode}.json`,
        'tokens/components/**/*.json',
      ],
      platforms: {
        css: {
          transformGroup: 'css',
          buildPath: `dist/${brand}/${mode}/`,
          files: [{
            destination: 'variables.css',
            format: 'css/variables',
            options: {
              selector: `:root[data-brand="${brand}"][data-mode="${mode}"]`,
            },
          }],
        },
        tailwind: {
          transformGroup: 'js',
          buildPath: `dist/${brand}/${mode}/`,
          files: [{
            destination: 'tailwind-tokens.js',
            format: 'javascript/es6',
          }],
        },
      },
    });
    await sd.buildAllPlatforms();
    console.log(`✅ Built tokens for ${brand}/${mode}`);
  }
}

// .storybook/preview.ts
import type { Preview } from '@storybook/react';
 
// 导入所有品牌主题
import '../dist/enterprise/light/variables.css';
import '../dist/enterprise/dark/variables.css';
import '../dist/education/light/variables.css';
import '../dist/education/dark/variables.css';
import '../dist/personal/light/variables.css';
import '../dist/personal/dark/variables.css';
 
const preview: Preview = {
  globalTypes: {
    brand: {
      name: 'Brand',
      description: '切换品牌主题',
      defaultValue: 'enterprise',
      toolbar: {
        icon: 'paintbrush',
        items: [
          { value: 'enterprise', title: 'Enterprise' },
          { value: 'education', title: 'Education' },
          { value: 'personal', title: 'Personal' },
        ],
      },
    },
    mode: {
      name: 'Mode',
      description: '切换颜色模式',
      defaultValue: 'light',
      toolbar: {
        icon: 'sun',
        items: [
          { value: 'light', title: 'Light' },
          { value: 'dark', title: 'Dark' },
        ],
      },
    },
  },
  decorators: [
    (Story, context) => {
      const brand = context.globals.brand;
      const mode = context.globals.mode;
      return (
        <div data-brand={brand} data-mode={mode}>
          <Story />
        </div>
      );
    },
  ],
};
 
export default preview;

// .storybook/modes.ts — 配置 Chromatic 多主题快照
export const allModes = {
  'enterprise-light': {
    brand: 'enterprise',
    mode: 'light',
  },
  'enterprise-dark': {
    brand: 'enterprise',
    mode: 'dark',
  },
  'education-light': {
    brand: 'education',
    mode: 'light',
  },
  'education-dark': {
    brand: 'education',
    mode: 'dark',
  },
  'personal-light': {
    brand: 'personal',
    mode: 'light',
  },
  'personal-dark': {
    brand: 'personal',
    mode: 'dark',
  },
};
 
// 在 Story 中使用
// Button.stories.tsx
export const Primary: Story = {
  args: { variant: 'primary', children: 'Button' },
  parameters: {
    chromatic: {
      modes: allModes,  // Chromatic 会为每个品牌×模式组合截图
    },
  },
};

提示词：
请对我们的设计系统进行发布前审计：

1. Token 审计：
   - 检查 tokens/ 目录中是否有未使用的 Token
   - 检查是否有组件直接使用全局 Token（应使用语义 Token）
   - 检查三个品牌的 Token 覆盖是否完整

2. 组件 API 审计：
   - 检查所有组件的 Props 命名一致性
   - 检查 TypeScript 类型导出是否完整

3. Story 审计：
   - 检查是否所有组件都有对应的 Story
   - 检查是否覆盖了所有变体和状态

4. 文档审计：
   - 检查是否所有组件都有 MDX 文档
   - 检查文档中的代码示例是否可运行

5. 无障碍审计：
   - 运行 axe-core 检查所有 Story
   - 检查颜色对比度（所有品牌×模式组合）

组件目录：src/components/
Token 目录：tokens/
Story 目录：src/components/**/*.stories.tsx