先看页面分区
- 左侧：选择平台、尺寸、模板，并设置导出格式。
- 中间：上传产品图、赠品图，调整位置、缩放、旋转，并填写文案。
- 右侧：实时预览最终图片。预览固定显示，方便边改边看。
正常使用流程
- 选择 平台、尺寸 和 模板。
- 在 产品图 区域切换产品位，点击 上传图片，上传白底图或透明 PNG。
- 用缩放、X 位移、Y 位移调整产品图；也可以直接在预览中拖动产品图，滚轮调整缩放。
- 在 文案 区域填写主标题、副标题、卖点、SKU 名称等内容。
- 天猫 / 京东品牌主图可使用 智能粘贴，从表格复制一行 6 列文案后自动填入。
- 如果模板有赠品模块，可以上传赠品图，并单独调整赠品图位置、缩放和旋转。
- 确认预览效果后，选择 JPG 或 PNG，点击导出。
产品图和赠品图
- 产品 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/ 文件夹没有丢失。
- 图片缺失：看产品 tab 是否还有红色叉号。
- 文案太长：页面不会替你判断好不好看，需要手动缩短文案或展开高级列调小字号。
所有操作都在本地浏览器完成，上传的产品图不会发送到服务器。
v0.4 · 赠品模块与品牌主图联动优化
更新时间：2026-05-12
更新重点
- 天猫 / 京东品牌主图的赠品模块支持单独调整赠品图位置、缩放和旋转角度。
- 赠品模块两行文案改为严格左对齐，文案过长时模块会向右扩展，不裁切文字。
- 主标题、副标题、卖点 1/2/3 不再限制展示范围，长文案会继续单行显示。
- 单SKU-斜切场景带新增专属的卖点底条宽度滑杆，可分别调整卖点 1 / 2 的橙色底条宽度。
- 天猫 / 京东品牌主图
1:1 和 3:4 同步共享主标题、副标题和卖点 1/2/3 的文字内容。
- 文案样式不跟随同步：字号、字重、颜色仍然按每个模板独立调整。
展开更新细节
- 赠品图新增 赠品图 X、赠品图 Y 和 赠品图旋转 控制项。
- 预览中直接拖动赠品图时，只移动赠品图本身；拖动赠品模块其他区域时，移动整个赠品模块。
- 赠品模块会根据两行文案的实际宽度计算最小展示宽度，主要向右扩展。
3:4 模板的标题第二行仍是独立字段，不会强行同步到 1:1。- 长标题和长卖点不自动缩小、不自动换行、不弹溢出提醒，由使用者根据预览自行判断。
v0.3 · 京东模板与导出细节优化
更新时间：2026-05-08
更新重点
- 新增京东品牌规范主图
1:1 和 3:4 模板，并按新示例图更新右下角权益模块。
- 新增智能粘贴文案，支持天猫 / 京东品牌规范主图一行 6 列自动识别。
- 预览支持全屏查看，也支持直接点击、拖动产品图进行位置和缩放微调。
- 拼多多品牌主图 A / B、天猫品牌规范主图 1:1 / 3:4 新增参考图叠加校准，支持透明度预设、自定义透明度和闪烁对比。
- 拼多多场景套装和双卡套装增加产品图边界裁切，避免产品越过指定视觉模块。
- 导出时自动隐藏产品位红色编辑框，红框只保留在页面预览里。
展开更新细节
- 京东
1:1 / 3:4 与天猫品牌规范主图共用主要结构，但右下角权益模块使用京东专属素材。
- 智能粘贴支持从表格复制一行：主标题 / 副标题 / 标题第二行 / 卖点1 / 卖点2 / 卖点3。
- 天猫 / 京东
1:1 模板会把副标题和标题第二行拼接到同一字段；3:4 会分别填入顶部适用范围和标题第二行。
- 拼多多品牌主图主标题默认字号调整为
100。
- 参考图叠加仅在带有
referenceImage 的模板显示，不参与导出。
- 继续保留 JPG 质量和期望最大 MB 设置，便于控制平台上传文件体积。
v0.2 · 模板扩展与易用性优化
更新时间：2026-05-08
更新重点
- 新增天猫品牌规范主图
1:1 和 3:4 模板。
- 新增拼多多场景套装、双卡套装、品牌主图模板。
- 重新调整页面布局：左侧负责选择和导出，中间负责产品图和文案，右侧固定预览。
- 产品图 tab 增加绿色对号和红色叉号，能快速判断哪些位置已上传图片。
- 产品图缩放、X 位移、Y 位移增加数字输入框，方便精确微调。
- 文案区默认只显示内容，高级列默认收起，普通用户不用直接面对字号、字重和颜色。
- 新增真实导出验证脚本，后续新增或调整模板都必须跑导出检查。
展开更新细节
- 平台框架继续保留天猫、拼多多、京东、抖音入口；京东和抖音暂时为预留入口。
- 顶部栏固定显示，帮助和版本更新入口更明显，重置模板降为次级按钮。
- 导出区从文案区移到左侧选择区下方，减少编辑区干扰。
- 产品图区域移动到文案区上方，上传和调图路径更短。
- 点击预览里的文案会激活对应输入框，点击产品图会切换到对应产品 tab。
- 模板调试和校准入口默认折叠，避免普通用户误触。
- README 和内置帮助同步更新，便于同事离线使用。
v0.1 · 原型验证版
更新时间：2026-05-06 以前
更新重点
- 搭建组合装图片生成器原型，完成从模板选择到本地导出的基础流程。
- 支持天猫常用主图尺寸
1440x1440，并兼容 800x800 导出。
- 支持填写主标题、副标题、SKU 标签等基础文案。
- 支持上传产品图，并调整缩放、X 位移和 Y 位移。
- 支持导出
JPG / PNG 图片到本地。
展开更新细节
- 完成天猫 2 件、3 件、4 件组合装模板的原型结构。
- 产品图控制区改为 tab 形式，便于切换不同产品位。
- 支持复制上一张产品图的位置和缩放设置，减少重复调参。
- 新增平台选择框架，为后续拼多多、京东、抖音模板预留入口。
- 新增导出前检查、JPG 质量和期望最大 MB 设置。
- 内置 MiSans 字体，减少不同电脑打开后的字体差异。
- 新增帮助页和版本更新页，便于同事快速了解使用方式。
字体说明
本工具固定使用 MiSans 字体。MiSans 字体版权归小米所有，下载来源为官方 HyperOS 字体页面。