# Ecommerce Content Wireframe

> 当用户希望基于明确的产品信息，梳理电商商品详情页内容、生成详情页内容结构、详情页文案、手机长图 HTML 黑白线框稿时使用。

- Skill: `saibodafu/ecommerce-content-wireframe` (Agent Skill)
- Install (CLI): `npx skillmds@latest add saibodafu/ecommerce-content-wireframe`
- Raw SKILL.md: https://api.skillmd.com/api/skills/saibodafu/ecommerce-content-wireframe/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-content-wireframe

---


# 电商详情页内容黑白线框稿

## 触发条件

当用户希望梳理电商商品详情页内容时，使用本 skill。

只要用户的需求涉及以下任一方向，就应触发：

- 想为某个商品整理详情页内容结构
- 想把产品信息转成详情页文案
- 想生成手机长图形式的详情页 HTML
- 想看到一版低保真黑白线框稿效果
- 想围绕核心价值、用户痛点、产品卖点、使用场景、购买理由来组织详情页
- 想把商品信息整理成可交给运营、设计、内容团队继续执行的详情页策划稿

## 核心原则

- 先收集精准信息，再生成详情页内容。
- 不使用“随便输入也先出初稿”的逻辑。
- 用户必须先提供完整产品信息表，再进入内容生成。
- 如果信息不完整，先让用户补齐关键字段。
- 按固定步骤推进，不让用户选择先精修哪一层。
- 每一步都给多个选择，并告诉用户如何选择、融合、修改或补充信息。
- 用户确认或选择后，再进入下一步。
- 所有确认内容最终先整理成一个完整的详情页内容文档。
- 内容文档确认后，再生成一份完整可运行的 HTML 黑白线框稿。

## 触发后的开始语

触发后不要直接生成内容，先使用以下固定开始语收集产品信息：

```text
我会先基于完整产品信息，帮你一步步梳理电商详情页内容；确认内容后，再整理成详情页内容文档，并生成一份可运行的手机长图 HTML 黑白线框稿。

这份黑白线框稿用于快速预览详情页内容结构、模块顺序和转化逻辑，方便你和运营、设计、内容团队对齐方向后再进入视觉设计。

请先补充产品信息，包括但不限于：

【产品名】：[填写你的产品名]
【产品定位】：[填写产品定位]
【目标人群】：[填写目标人群]
【核心场景】：[填写目标场景]
【核心卖点】：[列出所有核心卖点]

如果你暂时不确定某一项，可以先写“待定”，但产品名、目标人群和核心卖点建议尽量具体，这会直接影响详情页内容的准确度。
```

## 必要输入

开始前，先要求用户填写以下产品信息表：

```text
产品信息如下：
【产品名】：[填写你的产品名]
【产品定位】：[填写产品定位]
【目标人群】：[填写目标人群]
【核心场景】：[填写目标场景]
【核心卖点】：[列出所有核心卖点]
```

如果用户没有提供完整信息，不要直接生成 HTML。先提示用户补齐：

```text
请先补充完整产品信息，我会基于这些信息一步步生成详情页内容。

产品信息如下：
【产品名】：[填写你的产品名]
【产品定位】：[填写产品定位]
【目标人群】：[填写目标人群]
【核心场景】：[填写目标场景]
【核心卖点】：[列出所有核心卖点]
```

## 工作流程

收到完整产品信息后，按以下顺序推进：

1. 核心价值承诺层
2. 痛点锚定层
3. 卖点强化层
4. 使用场景层
5. 产品基础信息补充
6. 决策收口层
7. 整理详情页内容大文档
8. 生成完整 HTML 黑白线框稿

不要跳步。不要让用户选择先做哪一层。

每一步的固定节奏是：

1. 基于用户提供的产品信息和上一轮确认内容进行分析。
2. 给多个可选方案。
3. 用清晰话术指引用户选择、融合、修改或补充信息。
4. 用户确认后，记录该步骤结果。
5. 自动进入下一步。

## 1. 核心价值承诺层

目标：将产品的所有卖点提炼成一句有差异点和共鸣感的核心价值承诺，适合放在电商详情页第一屏。

要求：

- 用词精练有力
- 朗朗上口
- 能激发目标人群共鸣
- 适合做第一屏关键定义
- 不虚构产品没有提供的信息

输出 10 句话备选。

输出格式：

```text
核心价值承诺备选：
1.
2.
...
10.

你可以这样回复我：
- 直接选一个编号，例如：选 3
- 选多个让我融合，例如：3 和 8 结合
- 说明你想要的方向，例如：更高端、更直接、更有情绪、更专业、更像天猫首屏
- 如果都不满意，告诉我“不满意 + 原因”，我会重新生成一组
```

## 2. 痛点锚定层

基于用户选中的核心价值承诺，挖掘用户的痛点、痒点、爽点。

分析维度：

- 痛点：用户在此情境中最担忧或最想解决的问题是什么？
- 痒点：用户希望呈现出的理想状态、身份感或角色投射是什么？
- 爽点：用户在哪一瞬间获得情绪满足、轻松感或被理解的感受？

然后提炼出适合电商详情页的一句话表达，给 10 个选择。

输出格式：

```text
痛点：

痒点：

爽点：

详情页表达备选：
1.
2.
...
10.

你可以这样回复我：
- 直接选择一句详情页表达，例如：选 5
- 让我融合多个方向，例如：2 和 9 结合
- 告诉我痛点要更尖锐、痒点要更有向往感，或爽点要更有被理解的感觉
- 如果你觉得痛点不准，可以补充真实用户抱怨、差评、咨询问题或购买前顾虑
```

## 3. 卖点强化层

目标：精准翻译产品卖点，将功能转化成用户真正关心的购买理由。

对每一个卖点按以下步骤处理：

1. 提炼卖点：识别最重要的功能、成分、工艺、标准或差异化特征。
2. 转化买点视角：说明它能解决什么问题、带来什么好处。
3. 文案再造：写成一句更有感知力、更有画面感的详情页买点文案，每句控制在 25 字以内。

结构要求：

- 一个核心卖点必须对应详情页里的独立一屏。
- 不要把多个核心卖点合并到同一屏讲。
- 如果一个卖点下面有多个证据点，可以放在同一屏内作为辅助信息；但该屏只能服务这一个核心卖点。
- 如果用户给出的卖点过多，先按转化优先级排序，并建议哪些卖点进入详情页主屏，哪些放到参数、问答或补充信息区。

输出格式：

```text
卖点 1
主标题：用户买点
副标题：产品卖点
对应屏幕：第 X 屏，只讲这个卖点

卖点 2
主标题：用户买点
副标题：产品卖点
对应屏幕：第 X 屏，只讲这个卖点

你可以这样回复我：
- 确认保留，例如：这组可以
- 指定某个卖点重写，例如：卖点 2 重写
- 告诉我某个卖点要更理性、更生活化、更有画面感或更适合详情页大标题
- 如果卖点有证据，例如成分、工艺、认证、数据、材质、使用方法，可以继续补充，我会把它转成更有说服力的买点
```

如果用户给的卖点没有证据，不要补造数据。可以用体感、场景或结果表达，但避免虚假承诺。

## 4. 使用场景层

目标：把产品从抽象卖点落到真实购买和使用情境。

按以下步骤完成：

1. 基于产品信息和核心卖点，系统拆解可能出现的使用场景。
2. 根据市场大小、品牌优势和转化价值，筛选 Top 4 高价值场景。
3. 对 Top 4 高价值场景做极简概括。

输出格式：

```text
全量使用场景：
- 场景：
  价值：

Top 4 高价值场景：
1. 场景名：一句话概括
2. 场景名：一句话概括
3. 场景名：一句话概括
4. 场景名：一句话概括

你可以这样回复我：
- 确认保留这 4 个场景
- 替换某个场景，例如：把第 3 个换成通勤场景
- 告诉我哪个场景最重要，我会把它放到详情页更靠前的位置
- 如果你有真实销售场景、用户反馈、直播话术或小红书种草场景，也可以补充，我会重新筛选 Top 4
```

## 5. 产品基础信息补充

目标：让用户补充产品基础参数、成分、规格、用法、适用边界、认证、研发数据等事实性信息，用于后续整理内容文档和 HTML 线框稿。

这一部分以用户输入为准，不由 AI 编造。尤其是儿童、食品、健康相关产品，凡是涉及参数、成分、功效、认证信息等事实性内容，都必须要求用户提供或后续自行核查。

可以引导用户补充：

- 产品规格
- 关键成分或配方
- 使用方法
- 适用人群与不适用人群
- 功效、标准、检测、认证或研发数据
- 包装、口味、容量、材质等基础参数
- 需要谨慎表达或不能承诺的边界

输出格式：

```text
产品基础信息补充：
规格参数：
成分/配方：
使用方法：
适用边界：
认证/检测/研发数据：
其他需要进入详情页的信息：

你可以这样回复我：
- 直接补充具体信息，例如：规格是 250ml，适合 3 岁以上儿童
- 某一项没有就写“暂无”或“待核查”
- 如果有检测报告、研发数据、认证信息，可以直接贴出来，我只基于你提供的内容整理
- 如果涉及儿童、食品、健康相关表述，请优先提供真实研发数据和可核查信息
```

## 6. 决策收口层

目标：在详情页底部完成购买理由总结，降低用户犹豫。

可以从以下方向收口：

- 安心感
- 专业感
- 场景必要性
- 性价比
- 礼赠价值
- 低试错成本
- 长期使用价值

输出 3 到 5 组收口方案。

输出格式：

```text
决策收口备选：
1. 主标题：
   副标题：
   行动提示：

2. 主标题：
   副标题：
   行动提示：

你可以这样回复我：
- 直接选择一组，例如：选 2
- 让我融合两组，例如：1 和 4 结合
- 告诉我收口方向，例如：更强转化、更克制、更高端、更有安全感、更突出性价比
- 如果用户下单前还有具体顾虑，例如价格、规格、适用人群、效果担心、售后问题，可以补充，我会把它写进收口层
```

## 最终交付：内容文档与 HTML

当六层内容都确认后，必须先整理完整的详情页内容文档。

内容文档包括：

- 产品信息
- 核心价值承诺
- 痛点、痒点、爽点
- 详情页表达句
- 每个卖点的产品卖点、用户买点、主标题、副标题
- Top 4 使用场景
- 产品基础信息补充
- 决策收口方案

内容文档输出后，用以下话术引导用户确认：

```text
你可以这样回复我：
- 回复“确认”，我会继续生成完整 HTML
- 指定修改某一层，例如：核心价值承诺层再改一下
- 告诉我 HTML 呈现偏好，例如更像天猫详情页、更像小红书种草长图、更像品牌官网低保真稿
- 如果不需要 HTML，也可以让我只保留内容文档
```

内容文档确认后，再生成完整可运行的 HTML 黑白线框稿。

HTML 要求：

- 手机长图详情页形式，竖向滚动
- 每个核心卖点必须拆成独立一屏，按“一个卖点一屏”组织内容
- 单个卖点屏只承载一个核心卖点，标题、副标题、证据点和线框元素都服务该卖点
- 不要把两个或多个核心卖点压缩进同一屏；如需合并，必须先向用户说明原因并获得确认
- 主容器宽度控制在 `375px` 左右并居中展示
- 白底、黑字、浅灰模块
- 低保真黑白线框稿风格
- 每一屏之间用细黑线分隔
- 标题大、粗、短句化
- 用灰色卡片、圆形节点、简单线条图、流程图表达内容
- 不依赖外部图片、字体、CDN 或第三方库
- CSS 写在同一个 HTML 文件内

输出 HTML 前，用一句话说明：

```text
本框架图仅作为内部探讨示例，AI生成的内容都可能有问题。尤其是儿童、食品、健康相关产品，凡是涉及参数、成分、功效、认证信息等这类事实性内容，应该以你的研发数据为准，做好事实核查。

下面是根据已确认内容生成的完整 HTML，可直接保存为 .html 文件运行。
```

## 默认处理方式

- 缺少产品信息表：先让用户补齐，不直接生成。
- 缺少关键字段：先追问，不跳到内容生成。
- 缺少非关键细节：可以做轻量假设，但必须标注“假设”。
- 用户中途要求重写某一层：只重写该层，并说明最终内容文档和 HTML 会同步更新。
- 用户要求直接生成 HTML：如果产品信息完整，可以直接生成；如果信息不完整，先补齐关键字段。

## 质量标准

- 内容必须基于用户提供的产品信息。
- 文案必须回到商品价值、人群需求、平台场景和转化路径。
- 不写泛泛的电商理论。
- 不堆空泛字段。
- 不编造未经核验的数据、政策、案例、认证或竞品事实。
- 页面结构要清楚，模块要像可交给设计师继续细化的低保真线框稿。