先看页面分区
- 左侧:选择平台、图片类型、尺寸、模板,并设置导出格式。
- 中间:上传产品图、赠品图,调整位置、缩放、旋转,并填写文案。
- 右侧:实时预览最终图片。预览固定显示,方便边改边看。
正常使用流程
- 选择 平台,再选择 图片类型:品牌主图、单 SKU 图或组合装图。
- 选择 尺寸 和 模板。
- 在 产品图 区域切换产品位,点击 上传图片,上传白底图或透明 PNG。
- 用缩放、X 位移、Y 位移调整产品图;也可以直接在预览中拖动产品图,滚轮调整缩放。
- 在 文案 区域填写主标题、副标题、卖点、SKU 名称等内容。
- 天猫 / 京东品牌主图可使用 智能粘贴,从表格复制一行 6 列文案后自动填入。
- 如果模板有赠品模块,可以上传赠品图,并单独调整赠品图位置、缩放和旋转。
- 确认预览效果后,选择 JPG 或 PNG,点击导出。
图片类型怎么选
- 品牌主图:品牌规范主图和平台主图模板。
- 单 SKU 图:单 SKU 卖点、参数和场景展示。
- 组合装图:套装、多产品组合和组合 SKU 模板。
- 三类商品图只拆模板分类,上传、拖拽、缩放、文案、字体和导出能力继续共用。
产品图和赠品图
- 产品 tab 的绿色对号表示已上传图片,红色叉号表示缺图片。
- 点击预览里的产品或赠品模块,会自动切换到对应产品位。
- 普通产品图支持缩放、X 位移、Y 位移。
- 赠品模块支持整体移动和画框大小调整。
- 赠品图本身支持单独调整 赠品图 X、赠品图 Y、缩放 和 旋转角度。
- 赠品图也可以在预览中直接拖动;拖赠品图本身只移动赠品图,拖模块其他位置移动整个赠品模块。
- 预览里的红色框只表示当前正在编辑的位置,导出图片时会自动隐藏。
文案怎么改
- 文案区默认只显示 文案位 和 内容,普通使用只需要改内容。
- 需要精修时,点击 展开高级列,可以单独调整字号、字重和颜色。
- 字号支持两位小数,例如
91.86。
- 字重按 Photoshop 常见命名显示,例如 Medium、Demibold、Semibold、Bold、Heavy。
- 主标题、副标题、卖点 1/2/3 不会被固定框裁切;文案过长会继续单行显示,由用户自己判断是否需要缩短或调小字号。
- 赠品模块两行文案默认左对齐,文案较长时会向右扩展模块,不裁切文字。
- 天猫 / 京东品牌主图
1:1 和 3:4 会同步主标题、副标题、卖点 1/2/3 的文字内容。
- 文字内容会同步,但字号、字重、颜色不会同步;每个模板可以单独调整样式。
3:4 的标题第二行是独立字段,不会强行同步到 1:1。
智能粘贴
- 适用于天猫 / 京东品牌规范主图。
- 复制顺序为:主标题、副标题、标题第二行、卖点1、卖点2、卖点3。
- 可以直接复制表格的一行,也可以带表头复制。
- 识别成功后会填入同平台的
1:1 和 3:4 主图文案。
怎么导出
JPG:默认推荐,适合电商平台上传。
PNG:画质更稳定,但文件通常更大。
- JPG 质量:高质量更清晰,文件更大;小文件会优先压体积。
- 期望最大 MB:仅 JPG 生效。工具会尝试自动降低 JPG 质量,让图片接近目标大小。
- 导出前会检查缺失产品图。如果还有红色叉号,会弹窗提醒,可以选择继续导出或返回补图。
- 参考图叠加、校准边框、产品位红框都不会进入导出图。
维护人员:模板调试
- 普通使用不需要打开这个区域。
- 参考图叠加可用于对比最终效果,支持透明度、预设和闪烁对比,导出时自动隐藏。
- 校准模式下,点击文案或产品槽位后可用方向键微调位置,按住
Shift 每次移动 10px。
- 点击 复制配置 会复制当前模板的
fixedElements、copyFields 和 slots 草稿。
常见问题
- 打不开或导出失败:确认整个
电商视觉生成器 文件夹都在,不要只复制单个 index.html;如果是维护人员单独调试内部模块,再确认 组合图主图生成器 文件夹完整。
- 导出按钮没反应:优先换 Chrome 或 Edge 打开。
- 字体看起来不对:确认
电商视觉生成器/组合图主图生成器/fonts/misans/ 或内部模块 fonts/misans/ 文件夹没有丢失。
- 图片缺失:看产品 tab 是否还有红色叉号。
- 文案太长:页面不会替你判断好不好看,需要手动缩短文案或展开高级列调小字号。
页面从离线包或线上地址打开时,上传的产品图都只在当前浏览器本地处理,不会上传到服务器。
v0.5 · 平台更新中心与商品图入口融合
更新时间:2026-06-12
更新重点
- 新增平台级版本更新弹窗,新版本首次进入会自动提示。
- 新增更新记录入口,可随时查看历史版本和详细说明。
- 平台入口合并为 商品图生成器,内部按平台和图片类型选择模板。
- 图片类型统一为 品牌主图、单 SKU 图、组合装图。
- 版本发布规则写入项目规范,公开版本号保持连续。
展开更新细节
- 把版本提醒从商品图模块提升到平台层,覆盖整个电商视觉生成器。
- 用户关闭弹窗后,同一版本不会反复打扰;下一版本更新时再提示。
- 默认进入天猫 品牌主图,切换图片类型时只更换模板列表,底层编辑器继续共用。
- 旧的
?mode=main / ?mode=combo 链接仍可打开,并自动映射到对应图片类型。
- 平台壳不再把
combo-main 展开成两个同级入口,减少重复 iframe 和入口心智负担。
- Cloudflare Pages 继续发布完整 stable 包,包含
combo-main 和 campaign-poster。
- 线上部署前会继续跑包体积、入口加载、商品图分类和模板导出验证。
v0.4 · 统一平台包与线上加载优化
更新时间:2026-06-03
更新重点
- 对外使用入口统一为
电商视觉生成器/,后续线上部署也使用同一套平台包。
- 曾按 组合图生成器、主图生成器 做入口拆分,后续已融合为商品图生成器内的图片类型。
- 主图 / 组合图始终只拆模板分类,上传、拖拽、缩放、文案、字体和导出能力继续共用。
- 内部
组合图主图生成器/ 继续作为 combo-main iframe、模板验证和包生成内容保留,不再单独发给同事。
- 优化 iframe 预加载和入口切换,已加载模块切换更快。
展开更新细节
package:offline 会生成唯一对外离线包 电商视觉生成器/;Cloudflare Pages 线上版本也以这个目录作为发布内容。
- zip / exe / Tauri 程序版本已退出常规交付路径,后续不再作为团队日常使用包。
- 平台入口支持按需加载模块 iframe,首屏先打开平台壳,点击模块后再加载对应工具。
- 已加载过的模块保留挂载状态,后续切换不重复初始化。
verify:online 会检查包体积、file:// 可打开性和平台模块加载链路。
- 实际 Cloudflare 部署仍属于外部操作,需要单独确认后再执行。
v0.3 · 赠品模块与品牌主图联动优化
更新时间:2026-05-12
更新重点
- 天猫 / 京东品牌主图的赠品模块支持单独调整赠品图位置、缩放和旋转角度。
- 赠品模块两行文案改为严格左对齐,文案过长时模块会向右扩展,不裁切文字。
- 主标题、副标题、卖点 1/2/3 不再限制展示范围,长文案会继续单行显示。
- 单SKU-斜切场景带新增专属的卖点底条宽度滑杆,可分别调整卖点 1 / 2 的橙色底条宽度。
- 天猫 / 京东品牌主图
1:1 和 3:4 同步共享主标题、副标题和卖点 1/2/3 的文字内容。
- 文案样式不跟随同步:字号、字重、颜色仍然按每个模板独立调整。
展开更新细节
- 赠品图新增 赠品图 X、赠品图 Y 和 赠品图旋转 控制项。
- 预览中直接拖动赠品图时,只移动赠品图本身;拖动赠品模块其他区域时,移动整个赠品模块。
- 赠品模块会根据两行文案的实际宽度计算最小展示宽度,主要向右扩展。
3:4 模板的标题第二行仍是独立字段,不会强行同步到 1:1。
- 长标题和长卖点不自动缩小、不自动换行、不弹溢出提醒,由使用者根据预览自行判断。
v0.2 · 模板扩展与导出体验优化
更新时间:2026-05-08
更新重点
- 新增天猫品牌规范主图
1:1 和 3:4 模板。
- 新增京东品牌规范主图
1:1 和 3:4 模板,并按新示例图更新右下角权益模块。
- 新增拼多多场景套装、双卡套装、品牌主图模板。
- 重新调整页面布局:左侧负责选择和导出,中间负责产品图和文案,右侧固定预览。
- 新增智能粘贴文案,支持天猫 / 京东品牌规范主图一行 6 列自动识别。
- 预览支持全屏查看,也支持直接点击、拖动产品图进行位置和缩放微调。
- 拼多多品牌主图 A / B、天猫品牌规范主图 1:1 / 3:4 新增参考图叠加校准,支持透明度预设、自定义透明度和闪烁对比。
- 拼多多场景套装和双卡套装增加产品图边界裁切,避免产品越过指定视觉模块。
- 导出时自动隐藏产品位红色编辑框,红框只保留在页面预览里。
展开更新细节
- 京东
1:1 / 3:4 与天猫品牌规范主图共用主要结构,但右下角权益模块使用京东专属素材。
- 智能粘贴支持从表格复制一行:主标题 / 副标题 / 标题第二行 / 卖点1 / 卖点2 / 卖点3。
- 天猫 / 京东
1:1 模板会把副标题和标题第二行拼接到同一字段;3:4 会分别填入顶部适用范围和标题第二行。
- 产品图 tab 增加绿色对号和红色叉号,能快速判断哪些位置已上传图片。
- 产品图缩放、X 位移、Y 位移增加数字输入框,方便精确微调。
- 导出区从文案区移到左侧选择区下方,产品图区域移动到文案区上方。
- 拼多多品牌主图主标题默认字号调整为
100。
- 参考图叠加仅在带有
referenceImage 的模板显示,不参与导出。
- 点击预览里的文案会激活对应输入框,点击产品图会切换到对应产品 tab。
- 模板调试和校准入口默认折叠,避免普通用户误触。
- 继续保留 JPG 质量和期望最大 MB 设置,便于控制平台上传文件体积。
v0.1 · 原型验证版
更新时间:2026-05-06 以前
更新重点
- 搭建组合装图片生成器原型,完成从模板选择到本地导出的基础流程。
- 支持天猫常用主图尺寸
1440x1440,并兼容 800x800 导出。
- 支持填写主标题、副标题、SKU 标签等基础文案。
- 支持上传产品图,并调整缩放、X 位移和 Y 位移。
- 支持导出
JPG / PNG 图片到本地。
展开更新细节
- 完成天猫 2 件、3 件、4 件组合装模板的原型结构。
- 产品图控制区改为 tab 形式,便于切换不同产品位。
- 支持复制上一张产品图的位置和缩放设置,减少重复调参。
- 新增平台选择框架,为后续拼多多、京东、抖音模板预留入口。
- 新增导出前检查、JPG 质量和期望最大 MB 设置。
- 内置 MiSans 字体,减少不同电脑打开后的字体差异。
- 新增帮助页和版本更新页,便于同事快速了解使用方式。
字体说明
本工具固定使用 MiSans 字体。MiSans 字体版权归小米所有,下载来源为官方 HyperOS 字体页面。