电商场景下的 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 在模板的"可配置空间"内发挥创造力，而不是在"结构层面"做不可控的尝试。这样既保证了交互的正确性，又实现了页面的视觉差异化。