电商场景下的 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); // 步骤 2AI 生成配色方案 const colorScheme await this.generateColorScheme(product); // 步骤 3AI 生成促销区块 const promotionBlocks this.generatePromotionBlocks( product.promotions, colorScheme ); // 步骤 4AI 生成推荐商品基于类目 价格区间 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 ): PromiseColorScheme { // 根据类目预设基础色调 const categoryColorMap: Recordstring, 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): Promiseany[] { 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?: Recordstring, any; }四、AI 生成电商页面的信任边界价格信息必须从后端数据源读取AI 不参与。AI 可以决定价格区块的布局和配色但不能生成价格数字。这是电商场景的铁律——AI 生成的标题文案可以审核后发布但价格信息必须来自商品数据库的单一真实源。促销标签的合法性检查。5 折、买一送一这些表述可能违反广告法全场最低价等绝对化用语。AI 生成的促销文案需要经过合规检查管道关键词过滤 LLM 二次审核。个性化不是过度拟合。AI 为每个商品生成高度个性化的页面可能导致品牌风格的碎片化。需要限制 AI 的创作自由度配色方案在品牌色板中选择、字体在品牌字体集中选择、组件使用设计系统中的标准组件——个性化的是内容的组合方式而非元素本身。五、总结电商详情页的 AI UI 生成不是一个全自动方案而是人机分工人负责模板骨架定义、交互逻辑、合规审查AI 负责配色方案、促销标签、推荐商品、差异化装饰核心架构80% 的模板 20% 的 AI 差异化。AI 在模板的可配置空间内发挥创造力而不是在结构层面做不可控的尝试。这样既保证了交互的正确性又实现了页面的视觉差异化。
