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 定位为"设计方案的初稿生成器"，高置信度方案直接使用，低置信度方案交由设计师优化。
