AI 驱动的 UI 组件智能组合推荐：从用户行为到布局方案的自动推导

一、组件组合的"设计瓶颈"：从需求到布局的经验依赖

前端开发中，将 UI 需求转化为组件组合方案是一个高度依赖经验的环节。一个"用户信息展示"的需求，可以组合为卡片 + 头像 + 标签，也可以组合为列表 + 缩略图 + 徽章。不同组合方案在信息密度、视觉层级和交互效率上差异显著，选择不当会导致信息过载或交互冗余。

更关键的是，组件组合方案的选择应基于用户行为数据，而非设计师的直觉。用户在某个页面停留时间长、点击率高，说明当前布局有效；反之则需要调整。但将用户行为数据映射到组件组合方案，需要同时理解数据语义和组件特性，这是传统开发流程中的盲区。

二、AI 组件组合推荐的架构：从行为数据到布局方案

flowchart TD
    A[用户行为数据] --> B[行为特征提取]
    B --> C[页面语义分析]
    C --> D[LLM 布局推导]
    D --> E[组件组合方案]
    E --> F[设计规范校验]
    F --> G{符合规范?}
    G -->|是| H[生成代码模板]
    G -->|否| I[调整方案后重新校验]

    subgraph 行为特征
        J[点击热力图]
        K[停留时长分布]
        L[滚动深度]
        M[交互路径]
    end

    A --> J
    A --> K
    A --> L
    A --> M

    subgraph 设计规范约束
        N[间距 Token]
        O[色彩 Token]
        P[组件白名单]
        Q[无障碍要求]
    end

    F --> N
    F --> O
    F --> P
    F --> Q

AI 组件组合推荐的核心是：将用户行为特征和页面语义输入 LLM，由模型推导最优的组件组合方案，并通过设计系统规范校验确保方案的合规性。

三、生产级代码实现与最佳实践

/**
 * AI 组件组合推荐服务
 * 基于用户行为数据和设计规范，推荐最优组件组合
 */

interface UserBehaviorData {
  pageId: string;
  clickHeatmap: Record<string, number>;  // 元素 → 点击次数
  dwellTime: Record<string, number>;     // 区域 → 停留时长(ms)
  scrollDepth: number;                    // 平均滚动深度(%)
  interactionPaths: string[][];           // 交互路径序列
}

interface ComponentRecommendation {
  layout: LayoutScheme;
  components: ComponentSpec[];
  reasoning: string;
  confidence: number;
}

interface LayoutScheme {
  type: 'card-grid' | 'list' | 'dashboard' | 'form' | 'hero-detail';
  columns: number;
  gap: string;  // Token 值，如 "spacing-md"
}

interface ComponentSpec {
  name: string;
  variant: string;
  props: Record<string, unknown>;
  slot: string;  // 在布局中的位置
}

class ComponentRecommender {
  private designSystem: DesignSystem;

  /**
   * 根据行为数据推荐组件组合
   * 将行为特征和设计规范同时注入 Prompt
   */
  async recommend(
    behaviorData: UserBehaviorData,
    pageContext: string,
  ): Promise<ComponentRecommendation> {
    const prompt = this.buildPrompt(behaviorData, pageContext);

    const response = await this.llmClient.chat({
      messages: [{ role: 'user', content: prompt }],
      temperature: 0.2,
      response_format: { type: 'json_object' },
    });

    const recommendation = JSON.parse(response.content) as ComponentRecommendation;

    // 设计规范校验：确保推荐方案使用合法组件和 Token
    const violations = this.validateAgainstDesignSystem(recommendation);
    if (violations.length > 0) {
      // 记录违规项，但不直接拒绝——可能是设计系统需要扩展
      console.warn('设计规范违规:', violations);
      recommendation.confidence *= 0.8;  // 降低置信度
    }

    return recommendation;
  }

  /**
   * 构建推荐 Prompt
   * 关键：将行为数据量化呈现，而非原始数据堆砌
   */
  private buildPrompt(
    behavior: UserBehaviorData,
    context: string,
  ): string {
    // 提取行为特征摘要
    const topClickedElements = Object.entries(behavior.clickHeatmap)
      .sort(([, a], [, b]) => b - a)
      .slice(0, 5)
      .map(([el, count]) => `${el}: ${count}次`)
      .join(', ');

    const highDwellAreas = Object.entries(behavior.dwellTime)
      .filter(([, time]) => time > 3000)
      .map(([area, time]) => `${area}: ${(time / 1000).toFixed(1)}s`)
      .join(', ');

    return `你是一个前端 UI 设计专家，擅长根据用户行为数据推荐组件组合方案。

页面上下文: ${context}

用户行为特征:
- 高点击元素: ${topClickedElements}
- 长停留区域: ${highDwellAreas}
- 平均滚动深度: ${behavior.scrollDepth}%
- 常见交互路径: ${behavior.interactionPaths.slice(0, 3).map(p => p.join('→')).join(', ')}

可用组件（设计系统白名单）:
${this.designSystem.getComponentList().map(c => `- ${c.name}: ${c.description}`).join('\n')}

布局 Token:
- 间距: ${this.designSystem.getSpacingTokens().join(', ')}
- 列数: 1-4 列

请推荐组件组合方案，要求:
1. 高点击元素使用交互组件（按钮、链接）
2. 长停留区域使用详情展示组件
3. 滚动深度低时减少页面长度
4. 所有组件和 Token 必须在设计系统范围内

输出 JSON 格式: {layout, components, reasoning, confidence}`;
  }

  /**
   * 设计规范校验
   * 确保推荐方案中的组件和 Token 都是合法的
   */
  private validateAgainstDesignSystem(
    recommendation: ComponentRecommendation,
  ): string[] {
    const violations: string[] = [];
    const validComponents = new Set(
      this.designSystem.getComponentList().map(c => c.name)
    );
    const validSpacingTokens = new Set(this.designSystem.getSpacingTokens());

    // 检查组件是否在白名单中
    for (const comp of recommendation.components) {
      if (!validComponents.has(comp.name)) {
        violations.push(`组件 ${comp.name} 不在设计系统白名单中`);
      }
    }

    // 检查间距 Token 是否合法
    if (!validSpacingTokens.has(recommendation.layout.gap)) {
      violations.push(`间距 Token ${recommendation.layout.gap} 不合法`);
    }

    return violations;
  }
}

四、AI 组件推荐的局限：行为数据的时效性与设计规范的刚性

行为数据时效性。用户行为数据反映的是过去的使用模式，不能代表未来需求。当产品功能变更时，历史行为数据的参考价值降低。建议使用最近 7 天的行为数据，而非全量历史数据。

设计规范的刚性。AI 推荐的方案必须符合设计系统规范，但规范本身可能需要演进。如果 AI 持续推荐规范外的组件，可能是设计系统需要扩展的信号。建议建立"推荐 → 审核 → 规范扩展"的反馈闭环。

置信度校准。AI 输出的置信度往往偏高，不能直接用于自动化决策。建议将置信度作为辅助参考，高置信度的方案直接使用，低置信度的方案交由设计师审核。

适用边界：AI 组件推荐适用于信息展示类页面（如仪表盘、列表页、详情页），这类页面的组件组合模式相对固定。对于高度定制化的创意页面（如营销活动页），AI 的价值有限。

五、总结

AI 驱动的 UI 组件智能组合推荐，通过量化用户行为特征并注入设计系统规范约束，让 LLM 推导最优的组件组合方案。核心价值在于将行为数据驱动的决策从经验判断提升为数据推理。但 AI 推荐存在行为数据时效性和设计规范刚性的局限，必须配合规范校验和人工审核。工程实践中，建议将 AI 定位为"设计方案的初稿生成器"，高置信度方案直接使用，低置信度方案交由设计师优化。