作品 / 电商详情页 AI 生成客户端
AI 应用 · AI2026NO.16个人项目

电商详情页 AI 生成客户端

面向淘宝/天猫中小卖家与美工——1 张商品图进,不选品类不选风格,8 分半出一整套详情页,单套模型消耗约 1-2 元

GoGORMSQLiteWailsVue3Element PlusVitePinia
电商详情页 AI 生成客户端 界面截图
1 / 4
1 张挂拍图 → 一整套场景渲染

缘起

帮人上过一款连衣裙的详情页。找外包要等好几天,自己上手就得同时会 PS、会布光、还会写文案,我三样都不精。第一版做出来光影像贴上去的,商品边缘还走了形。

当时想要的东西其实很朴素:扔一张挂拍图进去,别问我品类、别问我风格,直接出一套能用的。

背景

现成的 AI 工具大多停在模板拼贴:光影有贴图感、商品容易变形,号称一键生成,实际仍要用户逐项选品类、选风格、选模板,等于把设计判断又还给了不会设计的人。而详情页本身是一整套东西——主图、场景图、白底图、详情长图、切片、文案,每一样尺寸和规则都不一样,分开做就要分开对齐。要压缩的是这一整段决策:上传一张商品图,不选品类、不选风格,直接得到一整套带真实感光影渲染的详情页。

方案

一个装在电脑上、双击就能用的客户端,核心是一条会自己拿主意的生成流水线:

  • 十步全自动,中途不用管:抠图 → 读图理解 → 自主规划(出几张图、每张什么场景与光影、页面分几块)→ 逐张渲染 → 画面描述 → 文案 → 本机排版合成 → 标准卡片 → 自检 → 完成。每一步的状态和中间产物都会落盘,界面上按时间线看得见进度,任务可以取消、关掉再开还能接着跑
  • 真实感出图:基于原图做编辑式生成,而不是把商品抠出来贴进模板;多张参考图输入保住商品一致性。出图引擎可在 Seedream / GLM-Image 之间切换,主选是拿真实商品盲测定的
  • 关键文字交给本机,不交给模型:卖点、参数这类文字由本机排版引擎叠加(内置可免费商用的中文字体,不消耗模型额度,可编辑、可导出),生成模型不承担关键文字的渲染
  • 自检闭环:出完自动拿成品跟原图比——查商品有没有走形、光影是否违和、图内有没有错字;没过就带着诊断重做,还是没过就标成「待人工确认」并在结果页置顶提示
  • 标准卡片产线:主图卡 + 参数卡 × 3 规格。取色优先级为 单张卡手动改色 > 任务级模板 > 类目默认模板 > 全局默认 > 按商品图派生的配色——模板只管结构,颜色默认跟着商品走
  • 商品类目可以自己管:内置 11 组,能增、能删、能改,改完直接保存下来。类目还额外带着这个类目的参数项提示、默认卡片样式,以及敏感类目下强制关闭人像场景的硬规则(无条件压过全局的人像开关)
  • 批量生成:表格文件或整个文件夹一次导入、整批排队,共用同一套队列按设定的并发数(1-3)跑;单条失败不影响其它,同一批连续 3 条失败会自动停下并提示排查
  • 密钥自带,成本透明:智谱 / DeepSeek / 火山方舟 / 阿里云四家各一把密钥,都是必需的;费用直接结算在用户自己的模型账号上,每个任务开跑前明示预估金额
  • 导出即合规:主图 800×800(含白底图)+ 详情 750px 切片(单张目标不超过 500KB)+ 文案 + 压缩包,导出前先预检尺寸和体积;生成来源的标记在切片、压缩全过程都不会被剥离,另在图上用角标显式标出

技术架构

模块技术选型
后端Go + GORM + SQLite(纯 Go 驱动,交叉编译无 CGO)
桌面运行时Wails v2(WebView2 / WKWebView),无边框窗口 + 托盘 + 崩溃落盘
前端Vue3 + Vite + Element Plus + Pinia,暗色优先设计令牌
模型网关OpenAI 兼容协议统一接入(chat + 图像生成),模型位/降级顺位/价格表全部配置化
抠图阿里云商品分割 API(≈0.002 元/次,直出白底图)
排版Go 侧 750px 位图合成 + CJK 字体渲染
工程化架构护栏(AST 断言)+ 依赖登记制 + golden 像素基线测试 + OpenSpec 治理

数据侧 6 张表(Product / GenerationTask / GenerationBatch / TaskStep / GeneratedAsset / ExportRecord),其中 TaskStep 按图片实例多行存储,各自携带状态与产物引用——图级断点续跑和"已完成部分不重复计费"都依赖这个粒度。

工程约定编译成了会红的检查:分层越界(app.go 不直接 import gorm)、模型注册双向校验、新增依赖必须登记 deps.yaml、渲染层禁 import node 能力、禁硬编码色值,且护栏解析到 0 个结果会 Fatal 而非静默放行。冒烟测试定位为本地验证——三平台 CI 只做静态检查与编译,不启动图形界面。

本项目由 Wails 桌面端脚手架基座 实例化而来——运行时能力与管道契约直接复用,业务面全部在此长出。

成果

  • 从 3-7 天到 8 分半:单套(5 图)真实密钥全流程实测 8 分 27 秒,落在「≤10 分钟出整套详情页」的目标内
  • 它要替换掉的那件事:外包一套 300-1500 元、3-7 天交付;这里单套模型消耗理想值约 1 元,算上 1-3 次单张重做的真实预期 1-2 元——费用结算在用户自己的模型账号上,中间不过手
  • 出图主选是盲测翻盘定的:Seedream 4.5 把商品结构复刻到近乎完美,GLM-Image 重绘成"同类不同款"——据此调换了出图位顺位
  • 自检不是摆设:成品自检比对原图查商品走形、光影违和与图内错字,未通过带诊断重做;仍不通过就置顶标记「待人工确认」,而不是悄悄交付
  • 拿到手就是装完能用的安装包:Mac 出带拖拽引导的安装包、Windows 出安装器,目标机器不需要 Go / Node.js 运行时

体验

内测阶段的桌面客户端,目前主要是我自己在用——暂无公开下载与在线演示,源码也未公开。想先看它是怎么搭起来的,可以读本页下方列出的相关技术文章——架构、工程化与踩坑各有落笔。

MANUAL · 说明书

它到底能做什么、怎么跑起来

散文讲的是「为什么做」,这一节讲的是「它到底是什么」——可直接对照评估。

01 / 规格
交付形态
Windows / macOS 桌面客户端,装完即用,目标机器不需要另装运行环境
单套产出
主图 + 白底图 + 详情长图切片 + 文案,一套实测约 8 分半
使用成本
一套约 1-2 元,结算在你自己名下的模型账号,开跑前先给预估金额
风格决策
不用选品类、不用选风格——程序读图后自己定,也可在看图后手动指定
批量能力
表格或文件夹一次导入一整批商品排队生成,单批上限 200 条
隐私
商品图只发往你自己账号下的模型服务;长图排版与打包在本机完成
02 / 功能清单
  • 读图拿到商品图先看懂它是什么——品类、材质、结构,以及有哪些值得讲的点
  • 自主规划自己决定这套详情页要出几张图、每张配什么场景与光影、页面分几块
  • 场景渲染按规划逐张生成,商品结构保持一致,不是把商品抠出来贴进模板
  • 文字排版卖点与参数文字在本机排版合成,不吃模型的额度,也可以自己改
  • 成品自检出完自动跟原图比对,发现商品走形、光影违和或图内错字就带诊断重做
  • 导出打包一次拿到主图、白底图、详情长图切片与文案,尺寸体积先自检再打包
  • 批量生成整批商品排队跑,单条失败不影响其它;连环失败自动停下提示排查
  • 成本预估开跑前估算这一套要花多少钱,钱花在哪一步看得见
03 / 部署与运行
  • 内测阶段的桌面客户端:装包后双击即用,不需要装数据库,也不需要自己的服务器
  • 首次启动有一个配置向导,带你领四家模型服务的密钥(读图、规划、出图、抠图各一把)
  • 生成在云端跑,不吃本机算力;长图排版与打包在本机完成
04 / 已知限制
  • Mac 上关掉窗口即退出,没有常驻托盘(Windows 上可以收进托盘后台继续生成)
  • 编辑只到「模块」这一层——增删、排序、换图可以,没有元素级的拖拽排版
  • 商品模特图暂时没有:真人像生成涉及合规,留到下一版评估
  • 在设置页手动换过模型服务商之后,成本估算仍按原来的价格显示,需要重过一遍向导才会同步

有类似的事要管?

说说现在是怎么做的——Excel、微信群、纸质单子都行。我判断能不能做、大概怎么做。

聊聊你的需求