电商场景下的 AI UI 生成：商品详情页的自动布局与个性化方案
一、一个商品详情页 14 套模板——运营排期比开发排期长
电商运营每周都要上新活动页面。同一个商品详情页，六一儿童节是卡通风格+礼物按钮，618 大促是红色倒计时+满减标签，日常销售是标准信息+加购按钮。这些变体看起来不同，但底层结构有 80% 的共通性：商品图→价格→规格选择→促销标签→购买按钮。剩下的 20% 是"这一场活动的视觉差异化表达"。
AI UI 生成在电商场景中的正确用法不是"从零生成整个页面"，而是基于模板骨架 + AI 填充差异化内容。结构由人定义（保证交互逻辑正确），装饰由 AI 生成（保证视觉差异化）。
二、电商详情页 AI 生成架构
三、电商详情页 AI 生成实现
// ecommerce/page-generator.ts
// 电商详情页 AI 布局生成器
interface ProductData {
name: string;
category: 'apparel' | 'food' | 'electronics' | 'home' | 'beauty';
price: number;
originalPrice?: number;
images: string[];
specs: Array<{ name: string; options: string[] }>;
promotions: Array<{
type: 'discount' | 'full-reduction' | 'flash-sale' | 'coupon' | 'gift';
label: string;
value: string;
}>;
targetAudience: 'female' | 'male' | 'children' | 'general';
salesVolume: number;
rating: number;
}
interface PageTemplate {
/** 模板 ID */
id: string;
/** 模板名称 */
name: string;
/** 适用的类目 */
categories: string[];
/** 布局骨架（区域定义） */
sections: SectionDefinition[];
/** 适用的促销类型 */
applicablePromotions: string[];
}
interface SectionDefinition {
/** 区域名称 */
name: string;
/** 区域类型 */
type: 'image-gallery' | 'price-info' | 'specs' | 'promotion' | 'buy-button' | 'recommendation';
/** 区域位置顺序 */
order: number;
/** 该区域的可配置项 */
configurableProps: string[];
}
/**
* 电商详情页 AI 生成器
*
* 设计意图：模板骨架保证交互结构正确，
* AI 在骨架上做差异化装饰
*/
class EcommercePageGenerator {
private templateLibrary: PageTemplate[] = [];
/**
* 接收商品数据，生成完整详情页
*
* 流程：
* 1. 按商品特征匹配模板
* 2. AI 填充模板的内容和样式
* 3. 返回可渲染的页面配置
*/
async generateDetailPage(product: ProductData) {
// 步骤 1：选择模板
const template = this.selectTemplate(product);
// 步骤 2：AI 生成配色方案
const colorScheme = await this.generateColorScheme(product);
// 步骤 3：AI 生成促销区块
const promotionBlocks = this.generatePromotionBlocks(
product.promotions,
colorScheme
);
// 步骤 4：AI 生成推荐商品（基于类目 + 价格区间）
const recommendations = await this.generateRecommendations(product);
// 步骤 5：组装完整页面配置
return {
template: template.id,
colorScheme,
sections: template.sections.map((section) =>
this.fillSection(section, product, colorScheme, promotionBlocks)
),
recommendations
};
}
/**
* 模板选择引擎
*
* 规则引擎 + 匹配度评分：
* 1. 类目匹配（权重 40%）
* 2. 促销类型匹配（权重 30%）
* 3. 目标人群匹配（权重 20%）
* 4. 价格区间匹配（权重 10%）
*/
private selectTemplate(product: ProductData): PageTemplate {
const candidates = this.templateLibrary.filter((tpl) =>
tpl.categories.includes(product.category)
);
if (candidates.length === 0) {
// 无匹配模板：使用通用模板
return this.getDefaultTemplate();
}
// 按促销匹配度排序
const matchCount = (tpl: PageTemplate) =>
product.promotions.filter(p =>
tpl.applicablePromotions.includes(p.type)
).length;
candidates.sort((a, b) => matchCount(b) – matchCount(a));
return candidates[0];
}
/**
* AI 配色方案生成
*
* 策略：
* – 服饰类目：取商品主图的主色调作为品牌色
* – 食品类目：暖色系（橙/红/黄）
* – 3C 数码：冷色系（蓝/灰/黑）
* – 大促：红色系（营造紧急感）
* – 日常：品牌色 + 中性灰
*/
private async generateColorScheme(
product: ProductData
): Promise<ColorScheme> {
// 根据类目预设基础色调
const categoryColorMap: Record<string, string> = {
'apparel': '#ff6b6b', // 时尚暖色
'food': '#ff8c00', // 食欲橙
'electronics': '#1a73e8', // 科技蓝
'home': '#5f9ea0', // 家居木色
'beauty': '#e91e63' // 美妆粉
};
const baseColor = categoryColorMap[product.category] || '#1677ff';
// 如果是大促，升级为红色系
const isPromotion = product.promotions.some(
p => p.type === 'flash-sale' || p.type === 'discount'
);
return {
primary: isPromotion ? '#e53935' : baseColor,
secondary: '#ffffff',
accent: isPromotion ? '#ff6f00' : '#ffd700',
background: isPromotion ? '#fff5f5' : '#fafafa',
text: '#333333',
price: isPromotion ? '#e53935' : '#333333',
promotionTag: '#e53935',
buyButton: isPromotion ? '#e53935' : baseColor
};
}
/**
* 生成促销信息块
*
* 不同促销类型对应不同的展示组件：
* – flash-sale → 秒杀倒计时 + 进度条
* – discount → 折扣标签（"5折"）
* – full-reduction → "满300减50"标签
* – coupon → 优惠券领取入口
* – gift → "买即赠"标签
*/
private generatePromotionBlocks(
promotions: ProductData['promotions'],
colorScheme: ColorScheme
): PromotionBlock[] {
return promotions.map((promo) => {
switch (promo.type) {
case 'flash-sale':
return {
type: 'countdown',
label: '限时抢购',
color: colorScheme.promotionTag,
config: { endTime: promo.value }
};
case 'discount':
return {
type: 'discount-tag',
label: promo.label,
color: colorScheme.promotionTag,
config: { discount: promo.value }
};
default:
return {
type: 'tag',
label: promo.label,
color: colorScheme.primary
};
}
});
}
/**
* 填充单个区域的内容
*/
private fillSection(
section: SectionDefinition,
product: ProductData,
colorScheme: ColorScheme,
promotions: PromotionBlock[]
): any {
switch (section.type) {
case 'image-gallery':
return {
images: product.images,
showThumbnails: product.images.length > 3
};
case 'price-info':
return {
price: product.price,
originalPrice: product.originalPrice,
discount: product.originalPrice
? Math.round((1 – product.price / product.originalPrice) * 100)
: 0,
colorScheme
};
case 'promotion':
return { blocks: promotions };
case 'specs':
return { specs: product.specs };
default:
return {};
}
}
private getDefaultTemplate(): PageTemplate {
return {
id: 'default',
name: '通用详情页',
categories: [],
sections: [
{ name: '商品图', type: 'image-gallery', order: 1, configurableProps: [] },
{ name: '价格区', type: 'price-info', order: 2, configurableProps: [] },
{ name: '促销区', type: 'promotion', order: 3, configurableProps: [] },
{ name: '规格区', type: 'specs', order: 4, configurableProps: [] },
{ name: '购买区', type: 'buy-button', order: 5, configurableProps: [] }
],
applicablePromotions: []
};
}
private async generateRecommendations(product: ProductData): Promise<any[]> {
return [];
}
}
interface ColorScheme {
primary: string;
secondary: string;
accent: string;
background: string;
text: string;
price: string;
promotionTag: string;
buyButton: string;
}
interface PromotionBlock {
type: string;
label: string;
color: string;
config?: Record<string, any>;
}
四、AI 生成电商页面的信任边界
价格信息必须从后端数据源读取，AI 不参与。AI 可以决定价格区块的布局和配色，但不能生成价格数字。这是电商场景的铁律——AI 生成的标题文案可以审核后发布，但价格信息必须来自商品数据库的单一真实源。
促销标签的合法性检查。"5 折"、"买一送一"这些表述可能违反广告法（"全场最低价"等绝对化用语）。AI 生成的促销文案需要经过合规检查管道（关键词过滤 + LLM 二次审核）。
个性化不是"过度拟合"。AI 为每个商品生成"高度个性化"的页面，可能导致品牌风格的碎片化。需要限制 AI 的创作自由度：配色方案在品牌色板中选择、字体在品牌字体集中选择、组件使用设计系统中的标准组件——个性化的是"内容的组合方式"而非"元素本身"。
五、总结
电商详情页的 AI UI 生成不是一个"全自动"方案，而是人机分工：
- 人负责：模板骨架定义、交互逻辑、合规审查
- AI 负责：配色方案、促销标签、推荐商品、差异化装饰
核心架构：80% 的模板 + 20% 的 AI 差异化。AI 在模板的"可配置空间"内发挥创造力，而不是在"结构层面"做不可控的尝试。这样既保证了交互的正确性，又实现了页面的视觉差异化。
