AI 辅助的设计系统主题扩展：从品牌色到完整配色方案的智能推导

里欧跑得慢

1013人浏览 · 2026-06-11 10:46:22

里欧跑得慢 · 2026-06-11 10:46:22 发布

AI 辅助的设计系统主题扩展：从品牌色到完整配色方案的智能推导

cover

一、主题扩展的"色板困境"：设计系统的规模化痛点

设计系统（Design System）的核心价值是一致性，但一致性不意味着单一主题。企业级产品通常需要支持多品牌（白标产品）、暗色模式、高对比度模式等多种主题。每个主题需要从品牌主色推导出完整的色板：主色、辅色、背景色、文字色、边框色、状态色（成功/警告/错误/信息），以及每个颜色的多个层级（50-950）。

手动创建一个完整的主题色板需要 2-4 小时，且不同设计师创建的色板风格可能不一致。AI 辅助的主题扩展，核心思路是：输入一个品牌主色，自动推导出完整的配色方案，保证色彩和谐、对比度合规、层级分明。

二、AI 主题扩展的架构与色彩推导机制

flowchart TD
    A[品牌主色输入] --> B[色彩空间转换: HSL/OKLCH]
    B --> C[AI 推导配色方案]
    C --> D[主色层级: 50-950]
    C --> E[辅色推导: 互补/类似/三角]
    C --> F[中性色推导: 冷灰/暖灰]
    C --> G[状态色推导: 成功/警告/错误]
    D & E & F & G --> H[对比度校验: WCAG AA/AAA]
    H --> I{对比度不达标?}
    I -->|是| J[自动微调亮度]
    I -->|否| K[生成 Design Token]
    J --> H
    K --> L[输出: CSS 变量 / JSON / Figma Token]

三、AI 主题扩展的代码实现

3.1 色彩推导引擎

interface ColorPalette {
  primary: ColorScale;      // 主色层级 50-950
  secondary: ColorScale;    // 辅色层级
  neutral: ColorScale;      // 中性色层级
  success: ColorScale;      // 成功色层级
  warning: ColorScale;      // 警告色层级
  error: ColorScale;        // 错误色层级
}

interface ColorScale {
  50: string; 100: string; 200: string; 300: string;
  400: string; 500: string; 600: string; 700: string;
  800: string; 900: string; 950: string;
}

class ThemeExpander {
  /**
   * 从品牌主色推导完整配色方案
   * 使用 OKLCH 色彩空间，感知均匀性优于 HSL
   */
  expandFromPrimary(primaryHex: string): ColorPalette {
    const primary = this.hexToOKLCH(primaryHex);

    return {
      primary: this.generateScale(primary),
      secondary: this.generateScale(this.deriveSecondary(primary)),
      neutral: this.generateScale(this.deriveNeutral(primary)),
      success: this.generateScale(this.deriveSuccess()),
      warning: this.generateScale(this.deriveWarning()),
      error: this.generateScale(this.deriveError()),
    };
  }

  /**
   * 生成颜色层级：从浅到深的 11 级色阶
   * 核心逻辑：固定色相，线性插值亮度和微调色度
   */
  private generateScale(baseColor: OKLCHColor): ColorScale {
    const { h, c } = baseColor;
    // 亮度从 0.97（最浅）到 0.15（最深）
    // 色度在中段最高，两端降低
    const levels = [0.97, 0.94, 0.88, 0.80, 0.70, 0.60,
                    0.50, 0.40, 0.30, 0.22, 0.15];

    const scale: any = {};
    const scaleKeys = [50, 100, 200, 300, 400, 500,
                       600, 700, 800, 900, 950];

    levels.forEach((l, i) => {
      // 色度在中段（500）最高，两端降低
      const chromaFactor = 1 - Math.abs(l - 0.6) / 0.5;
      const adjustedC = c * Math.max(0.1, chromaFactor);
      const color = { l, c: adjustedC, h };
      scale[scaleKeys[i]] = this.oklchToHex(color);
    });

    return scale as ColorScale;
  }

  /**
   * 推导辅色：使用互补色（色相偏移 180°）
   */
  private deriveSecondary(primary: OKLCHColor): OKLCHColor {
    return { ...primary, h: (primary.h + 180) % 360 };
  }

  /**
   * 推导中性色：降低色度，保留微量色相
   * 避免纯灰色显得"死板"
   */
  private deriveNeutral(primary: OKLCHColor): OKLCHColor {
    return { l: 0.5, c: primary.c * 0.05, h: primary.h };
  }

  /**
   * WCAG 对比度校验与自动微调
   */
  private ensureContrast(
    foreground: string, background: string,
    level: 'AA' | 'AAA' = 'AA'
  ): string {
    const minRatio = level === 'AA' ? 4.5 : 7;
    let fg = this.hexToOKLCH(foreground);
    const bg = this.hexToOKLCH(background);
    let ratio = this.contrastRatio(fg, bg);

    // 对比度不足时，微调前景色亮度
    while (ratio < minRatio && fg.l > 0.05 && fg.l < 0.95) {
      fg = fg.l > bg.l
        ? { ...fg, l: fg.l + 0.02 }  // 前景更亮
        : { ...fg, l: fg.l - 0.02 }; // 前景更暗
      ratio = this.contrastRatio(fg, bg);
    }

    return this.oklchToHex(fg);
  }

  private contrastRatio(fg: OKLCHColor, bg: OKLCHColor): number {
    const l1 = fg.l, l2 = bg.l;
    const lighter = Math.max(l1, l2);
    const darker = Math.min(l1, l2);
    return (lighter + 0.05) / (darker + 0.05);
  }
}

3.2 Design Token 输出

class DesignTokenExporter {
  /**
   * 将配色方案导出为 CSS 变量
   */
  toCSSVariables(palette: ColorPalette): string {
    const lines: string[] = [':root {'];
    for (const [name, scale] of Object.entries(palette)) {
      for (const [level, color] of Object.entries(scale)) {
        lines.push(`  --color-${name}-${level}: ${color};`);
      }
    }
    lines.push('}');
    return lines.join('\n');
  }

  /**
   * 导出为 JSON Token（兼容 Style Dictionary）
   */
  toJSONTokens(palette: ColorPalette): object {
    const tokens: any = { color: {} };
    for (const [name, scale] of Object.entries(palette)) {
      tokens.color[name] = {};
      for (const [level, color] of Object.entries(scale)) {
        tokens.color[name][level] = {
          value: color,
          type: 'color',
          description: `${name} ${level}`
        };
      }
    }
    return tokens;
  }
}