# Ecommerce Detail Page Visual Design

> 当用户已经有电商详情页文案、HTML 图、原型图、产品图、包装图，想逐屏判断信息任务、推荐视觉风格、生成单屏详情页设计、逐屏修改确认，并最终拼接成 750px 电商详情页长图时使用。

- Skill: `saibodafu/ecommerce-detail-page-visual-design` (Agent Skill)
- Install (CLI): `npx skillmds@latest add saibodafu/ecommerce-detail-page-visual-design`
- Raw SKILL.md: https://api.skillmd.com/api/skills/saibodafu/ecommerce-detail-page-visual-design/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: saibodafu (https://skillmd.com/u/saibodafu)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/saibodafu/ecommerce-detail-page-visual-design

---


# 电商详情页逐屏视觉设计与长图拼接

## 使用场景

当用户已经完成详情页文字信息梳理，并提供详情页 HTML 图、原型图、产品图、包装图、品牌图或单屏设计稿时，使用本 skill 协助完成后续视觉设计流程。

本 skill 不负责从零梳理详情页内容结构；如果用户还没有详情页文案、模块顺序或产品信息，应先使用 `ecommerce-content-wireframe`。

## 触发条件

用户需求涉及以下任一情况时触发：

- 已有详情页文案，希望逐屏判断每一屏怎么设计
- 已有详情页 HTML 图、原型图或线框稿，希望转成视觉设计
- 希望推荐 3 个适合详情页的统一视觉风格方向
- 希望一屏一屏生成电商详情页设计，并逐屏确认修改
- 希望把确认后的单屏详情页纵向拼接成 750px 长图
- 希望检查长图是否漏屏、错序、重复、文字裁切或产品裁切

## 核心原则

- 保留用户原始流程，不把它改写成复杂方案。
- 先分析，不直接出图。
- 先统一视觉风格，再逐屏作图。
- 每次只处理一屏，等用户确认后再进入下一屏。
- 卖点屏必须遵守“一个核心卖点一屏”：每一屏只讲一个核心卖点，不把多个卖点合并在同一屏。
- 修改时只修改当前屏，保留用户已经确认的部分。
- 凡涉及生成详情页单屏图片或长图视觉稿，必须调用 `ChatGPT Image 2`；不要改用其他生图模型替代。
- 不改写详情页文案，除非用户明确要求。
- 不编造功效、数据、认证、平台规则、广告法结论或竞品信息。
- 如涉及最新平台规则、合规要求、榜单、价格、店铺或投放机制，先联网核验并标注来源和时间。

## 必要输入

开始前，优先确认用户是否已经提供原型图和包装图。其他材料不限，有则使用，没有则基于现有信息推进，并在输出中标注“假设”。

```text
【原型图】：必须提供，用于判断每一屏结构、文案位置和信息顺序
【包装图】：必须提供，用于提取品牌色、产品气质、包装元素和视觉统一方向
【其他可选材料】：详情页文案、HTML 图、产品图、品牌规范、目标平台、字体要求、禁用表达、必须露出的资质或卖点
```

如果缺少原型图或包装图，先请用户补充。其他材料不作为启动门槛；缺少时做轻量合理假设，并在输出中标注“假设”。

## 触发后的开始语

当用户想进入详情页视觉设计流程时，使用下面的话术，不要直接套用“假如你是……”：

```text
我会基于你已经整理好的详情页文案、原型图和产品图，按“逐屏分析 - 分析确认 - 3 个视觉风格方向 - 逐屏生图提示词 - 单屏生成 - 修改确认 - 长图拼接 - 最终质检”的顺序推进。

我先不直接出图，会先帮你判断每一屏的信息任务、适合的视觉表达、核心视觉元素和需要避开的风险点。确认后，再进入统一视觉风格和逐屏作图。

请先提供详情页文案/HTML 图、原型图、产品图或品牌包装图。已经提供的话，我会先从逐屏分析开始。
```

如果用户已经提供完整材料，可以直接进入“阶段 1：逐屏分析”。

## 工作流程

按以下顺序推进，不要跳步：

1. 逐屏分析
2. 逐屏分析确认
3. 推荐 3 个视觉风格方向
4. 逐屏生成 AI 生图提示词
5. 逐屏生成设计
6. 当前屏修改确认
7. 进入下一屏
8. 长图拼接
9. 最终质检

## 阶段 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
长图质检结果：
- 屏幕顺序：
- 是否漏屏：
- 是否重复：
- 宽度是否统一：
- 文字是否完整清晰：
- 产品是否被裁切：
- 屏与屏衔接：
- 合规风险复查：
```

如果发现问题，先列出问题，再修正，不要直接说完成。