电商详情页逐屏视觉设计与长图拼接
使用场景
当用户已经完成详情页文字信息梳理，并提供详情页 HTML 图、原型图、产品图、包装图、品牌图或单屏设计稿时，使用本 skill 协助完成后续视觉设计流程。
本 skill 不负责从零梳理详情页内容结构；如果用户还没有详情页文案、模块顺序或产品信息，应先使用 ecommerce-content-wireframe。
触发条件
用户需求涉及以下任一情况时触发：
- 已有详情页文案，希望逐屏判断每一屏怎么设计
- 已有详情页 HTML 图、原型图或线框稿，希望转成视觉设计
- 希望推荐 3 个适合详情页的统一视觉风格方向
- 希望一屏一屏生成电商详情页设计，并逐屏确认修改
- 希望把确认后的单屏详情页纵向拼接成 750px 长图
- 希望检查长图是否漏屏、错序、重复、文字裁切或产品裁切
核心原则
- 保留用户原始流程，不把它改写成复杂方案。
- 先分析，不直接出图。
- 先统一视觉风格，再逐屏作图。
- 每次只处理一屏，等用户确认后再进入下一屏。
- 卖点屏必须遵守“一个核心卖点一屏”：每一屏只讲一个核心卖点，不把多个卖点合并在同一屏。
- 修改时只修改当前屏，保留用户已经确认的部分。
- 凡涉及生成详情页单屏图片或长图视觉稿，必须调用
ChatGPT Image 2；不要改用其他生图模型替代。 - 不改写详情页文案，除非用户明确要求。
- 不编造功效、数据、认证、平台规则、广告法结论或竞品信息。
- 如涉及最新平台规则、合规要求、榜单、价格、店铺或投放机制，先联网核验并标注来源和时间。
必要输入
开始前，优先确认用户是否已经提供原型图和包装图。其他材料不限，有则使用，没有则基于现有信息推进，并在输出中标注“假设”。
text【原型图】：必须提供，用于判断每一屏结构、文案位置和信息顺序 【包装图】：必须提供，用于提取品牌色、产品气质、包装元素和视觉统一方向 【其他可选材料】：详情页文案、HTML 图、产品图、品牌规范、目标平台、字体要求、禁用表达、必须露出的资质或卖点
如果缺少原型图或包装图，先请用户补充。其他材料不作为启动门槛；缺少时做轻量合理假设，并在输出中标注“假设”。
触发后的开始语
当用户想进入详情页视觉设计流程时，使用下面的话术，不要直接套用“假如你是……”：
text我会基于你已经整理好的详情页文案、原型图和产品图，按“逐屏分析 - 分析确认 - 3 个视觉风格方向 - 逐屏生图提示词 - 单屏生成 - 修改确认 - 长图拼接 - 最终质检”的顺序推进。 我先不直接出图，会先帮你判断每一屏的信息任务、适合的视觉表达、核心视觉元素和需要避开的风险点。确认后，再进入统一视觉风格和逐屏作图。 请先提供详情页文案/HTML 图、原型图、产品图或品牌包装图。已经提供的话，我会先从逐屏分析开始。
如果用户已经提供完整材料，可以直接进入“阶段 1：逐屏分析”。
工作流程
按以下顺序推进，不要跳步：
- 逐屏分析
- 逐屏分析确认
- 推荐 3 个视觉风格方向
- 逐屏生成 AI 生图提示词
- 逐屏生成设计
- 当前屏修改确认
- 进入下一屏
- 长图拼接
- 最终质检
阶段 1：逐屏分析
目标：根据每一屏文案，判断这一屏承担的转化任务和视觉表达方向。
输出表格：
| 屏序 | 当前屏核心文案 | 信息任务 | 视觉表达类型 | 核心视觉元素 | 不允许出现的内容/风险点 |
|---|
判断标准：
- 信息任务要具体，例如“首屏建立品类认知”“解释核心卖点”“证明成分/材质”“制造使用场景代入”“降低购买顾虑”“决策收口”。
- 如果当前屏是卖点屏，信息任务必须明确对应唯一核心卖点，例如“解释卖点 1：低糖好喝”；不要写成“同时解释低糖、好喝、补充电解质”。
- 如果原型图把多个核心卖点放在同一屏，先标记为“需要拆屏”，并建议拆成多个独立卖点屏，等用户确认后再进入提示词阶段。
- 视觉表达类型要可执行，例如“产品主视觉大图”“场景化生活方式图”“成分/结构拆解图”“对比图”“步骤图”“证据背书图”“参数信息图”。
- 核心视觉元素要能指导画面制作，例如产品、包装、手部、场景、符号、图标、质感、局部特写、对比区域。
- 风险点要指出可能涉及广告法、功效夸大、绝对化用语、医疗化表达、虚假承诺或无法证明的数据表达。
阶段收尾话术：
text以上是逐屏视觉分析。你可以确认这版分析，也可以指定某一屏调整信息任务、视觉类型或风险判断。确认后，我会进入 3 个视觉风格方向推荐。
阶段 2：逐屏分析确认
目标：让用户先确认逐屏分析是否准确，再进入视觉风格方向推荐。
如果用户没有明确确认，不要直接进入生图。可以继续修改某一屏的信息任务、视觉表达类型、核心视觉元素或风险判断。
确认话术：
text如果这版逐屏分析没有问题，你可以回复“确认”，我会基于已提供的产品信息、品牌包装图和详情页文案，推荐 3 个适合电商详情页的视觉风格方向。
阶段 3：推荐 3 个视觉风格方向
目标：根据已提供的产品信息、品牌包装图和详情页文案，推荐 3 个适合电商详情页的视觉风格方向。每个方向用一句话描述风格、构图、字体方向，方便复用在每一屏作图前的统一视觉风格提示词。
输出格式：
text视觉风格方向 1： 一句话描述：[风格、构图、字体、色彩质感、适合复用的屏幕类型] 视觉风格方向 2： 一句话描述：[风格、构图、字体、色彩质感、适合复用的屏幕类型] 视觉风格方向 3： 一句话描述：[风格、构图、字体、色彩质感、适合复用的屏幕类型] 推荐优先方向： [说明为什么这个方向最适合当前产品、品牌包装和转化目标]
要求：
- 优先延展品牌包装已有颜色、材质和字体气质。
- 不要只写“高级感、年轻化、简约风”等空泛词。
- 风格描述要能直接复用到作图提示词里。
- 如果用户选择其中一个方向，后续每一屏都沿用该方向。
阶段收尾话术：
text你可以直接选一个方向，例如“选 2”；也可以说“1 和 3 融合”，或告诉我想更偏高端、清爽、专业、场景化、货架感。确认风格后，我会基于原型图逐屏生成可用于 AI 生图的提示词。
阶段 4：逐屏生成 AI 生图提示词
目标：基于用户提供的详情页原型图，按照原型图中的每一屏文案、版式和信息层级，逐屏生成可用于 AI 生图的提示词。
这一阶段只生成提示词，不直接生成图片。
每一屏提示词必须包含：
text第 X 屏 AI 生图提示词 主体：[画面主体] 场景/背景：[画面场景或背景] 核心元素：[必须出现的视觉元素] 构图：[画面主体位置]，[文字位置]，[信息层级要求] 风格要求：[贴入已确认的固定统一视觉风格描述] 尺寸：竖版电商详情页，宽 750px
限制要求：
- 画面中只允许出现原型图的文字说明，不要新增任何未经确认的标题、标签、小字、证明、参数或功效解释。
- 卖点屏提示词必须只围绕一个核心卖点展开；不要在同一屏提示词中同时要求表现多个卖点。
- 如果某个卖点需要证明材料，证明材料只能作为该卖点屏内的辅助元素，不新增另一个核心卖点。
- 不要打乱原型图的信息层级。
- 不要修改产品包装。
- 不要出现错误文字。
- 不要直接生成图片。
- 每一屏提示词都要服务对应屏的信息任务、视觉表达类型和核心视觉元素。
阶段收尾话术：
text以上是逐屏 AI 生图提示词。你可以确认全部提示词，也可以指定某一屏修改主体、背景、核心元素、构图或风格要求。确认后，我会使用 ChatGPT Image 2 从第 1 屏开始逐屏生成。
阶段 5：逐屏生成设计
每次只生成一屏。不要一次性生成全部屏。
生成当前屏图片时，必须调用 ChatGPT Image 2。该模型更适合电商详情页里的中文标题、卖点和长图文案呈现。
如果当前环境无法调用 ChatGPT Image 2，不要改用其他生图模型替代；应先说明限制，并输出可复制给 ChatGPT Image 2 的单屏作图提示词。
单屏生成前，先明确：
text当前生成：第 X 屏 使用的 AI 生图提示词： 信息任务： 沿用视觉风格： 核心视觉元素： 需要避开的风险点：
单屏作图要求：
- 宽度按用户要求，默认 750px。
- 保持当前屏文案完整，不漏字、不改字、不压缩成摘要。
- 画面必须服务当前屏的信息任务。
- 产品、卖点、使用场景或关键视觉元素要服务转化。
- 不使用绝对化、医疗化、功效承诺或无法证明的数据表达。
- 不让文字被产品、装饰、边缘或背景干扰。
- 严格按照已确认的当前屏 AI 生图提示词执行。
- 生成后等待用户确认。
单屏生成后的固定话术：
text这是第 X 屏。你可以回复“确认”，我再继续下一屏；也可以告诉我需要修改的地方，例如产品更大、文字更突出、风格更清爽、场景更生活化、色彩更贴近包装。
阶段 6：当前屏修改确认
用户提出修改意见时，只修改当前屏。
修改规则：
- 保留用户已经确认的部分。
- 不影响其他屏。
- 如果用户要求会导致文字裁切、合规风险或视觉冲突，先指出问题，再给替代方案。
- 修改完成后继续等待确认。
修改后的话术：
text已按你的意见调整当前屏。你可以继续提出修改，或回复“确认”进入下一屏。
阶段 7：进入下一屏
用户确认当前屏后，继续下一屏。
进入下一屏的话术：
text当前屏已确认。我会沿用已经确认的整体视觉风格，继续生成第 X 屏；这一屏会根据它的信息任务调整画面重点，避免和上一屏构图完全重复。
阶段 8：长图拼接
当所有单屏都确认后，再执行长图拼接。
长图要求：
- 顺序不变。
- 宽度统一 750px，除非用户另有要求。
- 不裁切文字和产品。
- 不压缩导致文字模糊。
- 屏与屏之间衔接自然。
- 不漏屏、不错序、不重复。
拼接前确认话术：
text所有单屏已经确认。我接下来会按确认顺序纵向拼接成长图，默认宽度 750px，并检查漏屏、错序、重复、文字裁切和产品裁切问题。
阶段 9：最终质检
长图完成后必须做最终检查，并输出检查结果。
质检清单：
text长图质检结果： - 屏幕顺序： - 是否漏屏： - 是否重复： - 宽度是否统一： - 文字是否完整清晰： - 产品是否被裁切： - 屏与屏衔接： - 合规风险复查：
如果发现问题，先列出问题，再修正，不要直接说完成。
