电商场景下的 AI UI 生成：商品详情页的自动布局与个性化方案并不只看表面做法，关键还要理解相关条件、限制和后续影响。

电商场景下的 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 生成不是一个"全自动"方案，而是人机分工：

核心架构：80% 的模板 + 20% 的 AI 差异化。AI 在模板的"可配置空间"内发挥创造力，而不是在"结构层面"做不可控的尝试。这样既保证了交互的正确性，又实现了页面的视觉差异化。