[商品描述] + [版型/颜色/印花精确描述] + [场景/背景描述] + [光线/氛围] + [拍摄角度] + [品质词]

电商套图生成助手

概览

本 Skill 实现从「商品原始图片 + 卖点信息」到「完整电商套图」的一键生成流程：

① 上传商品图片（必须）+ 输入卖点信息（可选）
↓
② AI 视觉分析：提取商品主体，智能生成卖点文案（可编辑）
↓
③ 选择平台规范 + 套图类型（7种标准图）
↓
④ AI 生成每张图的详细 Prompt（可编辑）
↓
⑤ 调用图像生成 API，输出完整套图

---

第一步：收集输入信息

必须项

• - 商品图片：用户上传的原始商品图（平铺图/白底图/实物图均可）

可选项（若用户未提供，AI 将自动从图片中分析生成）

字段	说明
商品名称	如卡通小狗印花宽松精梳棉短袖T恤
核心卖点

材质、版型、设计特点等 3-5 条 |

| 适用人群 | 如追求舒适简约风的青少年 | | 期望场景 | 如校园日常、居家休闲、户外出游 | | 规格参数 | 材质、颜色、版型、领型、袖长等 |

---

第二步：AI 分析与卖点生成

视觉分析步骤

1. 1. 识别商品类型、颜色、款式、设计元素
2. 提取商品主体轮廓与关键视觉特征
3. 基于视觉特征推断材质、功能卖点
4. 生成结构化卖点（JSON格式，供后续图片生成使用）

卖点 JSON 结构

json { product_name: 商品名称, product_type: 服装/3C/家居/其他, visual_features: [白色, 圆领, 短袖, 卡通小狗印花], selling_points: [ {icon: fabric, en: Combed Cotton, zh: 精梳棉面料}, {icon: fit, en: Loose & Breathable, zh: 宽松透气}, {icon: design, en: Cute Design, zh: 萌趣设计} ], target_audience: 青少年、学生群体, usage_scenes: [校园, 居家, 户外], color: 白色, material: 精梳棉 }

📄 详细分析 Prompt 见 references/analysis-prompts.md

---

第三步：选择平台与套图配置

📄 各平台规范详见 references/platforms.md

平台选择

平台类型	平台	推荐尺寸	语言
国内	淘宝/天猫	800×800 (1:1)	中文
国内

京东 | 800×800 (1:1) | 中文 |

| 国内 | 拼多多 | 750×750 (1:1) | 中文 | | 国内 | 抖音/小红书 | 1080×1350 (4:5) 或 1:1 | 中文 | | 国际 | Amazon | 2000×2000 (1:1) | 英文 | | 国际 | 独立站/Shopify | 2000×2000 (1:1) 或 16:9 | 英文 |

标准套图（7种）

每种图的详细规格见 references/image-types.md

#	图片类型	核心目标	推荐位置
1	白底主图	商品全貌展示，符合平台收录规则	第1张主图
2

核心卖点图 | 3大卖点图标化呈现 | 第2张 | | 3 | 卖点图 | 单一核心卖点深度展示 | 第3张 | | 4 | 材质图 | 面料/工艺特写，建立品质信任 | 第4张 | | 5 | 场景展示图 | 生活方式场景，激发代入感 | 第5张 | | 6 | 模特展示图 | 真人/AI模特穿搭，直观展示效果 | 第6张 | | 7 | 多场景拼图 | 多场景适用性对比，提升决策 | 第7张 |

---

第四步：生成图片 Prompt

📄 各图类型的 Prompt 模板见 references/image-types.md

Prompt 构建原则

1. 1. 商品一致性：所有图片必须保持商品颜色、结构、比例、细节不变
2. 背景差异化：每张图背景/场景各不相同，形成完整故事线
3. 文字分离：图片本身不含文字，文案通过后处理叠加（除非使用图像生成API支持文字）
4. 品质标准：photorealistic, high quality, studio lighting, 8K, commercial photography

Prompt 结构模板

[商品描述] + [版型/颜色/印花精确描述] + [场景/背景描述] + [光线/氛围] + [拍摄角度] + [品质词]

---

第五步：多供应商图像生成

📄 各供应商 API 接入详情见 references/providers.md

支持的图像生成供应商（5个）

供应商	模型	国内可用	特点
OpenAI	DALL·E 3	需代理	高质量写实，细节清晰
Google

Gemini Imagen 3 | 需代理 | 色彩真实，商业感强 |

| Stability AI | Stable Image Core | 需代理 | 精准控制构图 | | 阿里云 | 千问 | ✅直连 | 中文场景优化，异步任务 | | 字节跳动 | 豆包 Seedream | ✅直连 | 中文理解好，风格多样 |

供应商检测与选择逻辑

1. 1. 用户在配置面板填入各供应商 API Key（浏览器本地存储）
2. 系统检测哪些供应商已配置（Key 非空）
3. 若只有1个供应商配置 → 自动选择
4. 若有多个 → 展示供应商选择界面让用户选择
5. 若无任何配置 → 提示用户先配置，展示 Prompt 预览模式

第六步：Canvas 文案叠加

📄 各图类型叠加坐标规范见 references/providers.md（Canvas规范部分）

核心逻辑

javascript async function applyTextOverlay(base64, typeId, sellingPoints, lang) { return new Promise((resolve) => { const img = new Image(); img.onload = () => { const canvas = document.createElement(canvas); canvas.width = img.naturalWidth; canvas.height = img.naturalHeight; const ctx = canvas.getContext(2d); ctx.drawImage(img, 0, 0);

const texts = OVERLAY_CONFIGS[typeId]?.(sellingPoints, lang) || [];
texts.forEach(t => {
const fontSize = Math.round(t.fontSize * canvas.width);
ctx.font = ${t.weight || 600} ${fontSize}px Helvetica Neue, Arial, sans-serif;
ctx.textAlign = t.align || left;
if (t.shadow) {
ctx.shadowColor = rgba(0,0,0,0.5);
ctx.shadowBlur = 8;
}
ctx.fillStyle = t.color || #fff;
ctx.fillText(t.text, t.x canvas.width, t.y canvas.height);
ctx.shadowColor = transparent;
ctx.shadowBlur = 0;
});

resolve(canvas.toDataURL(image/jpeg, 0.92).split(,)[1]);
};
img.src = data:image/jpeg;base64,${base64};
});
}

叠加规范（各图类型）

• - 白底主图 / 模特展示图：无文案叠加
• 核心卖点图：右侧区域，WHY CHOOSE US + 3个卖点标签，深色文字
• 卖点图：左上主标题 + 左下两条副标题，深色文字
• 材质图：右上主标题 + 右侧两条副标题，深色文字
• 场景展示图：左上主标题 + 左下两条副标题，白色文字+阴影
• 多场景拼图：顶部居中主标题 + 底部两侧场景标注，白色文字+阴影

---

交互式 Artifact 实现

当用户上传商品图片请求生成套图时，优先创建交互式 React Artifact，实现以下 UI 流程：

UI 流程（5步）

① API配置 → ② 图片上传+AI分析 → ③ 供应商选择（检测已配置的）
→ ④ 套图类型+语言选择 → ⑤ 生成（