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

👤 赛博大福 📦 v1.0.0 ⭐ 4.5 ⬇️ 292 下载
📈 商业运营 免费

📖 技能介绍


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


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

触发条件

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

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

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

核心原则

  • 先收集精准信息,再生成详情页内容。
  • 不使用“随便输入也先出初稿”的逻辑。

    7w4.net收录了海量优质技能插件。

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

触发后的开始语

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

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

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

请先补充产品信息,包括但不限于:

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

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

必要输入

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

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

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

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

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

工作流程

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

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

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

每一步的固定节奏是:

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

1. 核心价值承诺层

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

要求:

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

输出 10 句话备选。

输出格式:

核心价值承诺备选:
1.
2.
...
10.

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

2. 痛点锚定层

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

分析维度:

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

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

输出格式:

痛点:

痒点:

爽点:

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

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

3. 卖点强化层

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

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

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

结构要求:

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

输出格式:

卖点 1
主标题:用户买点
副标题:产品卖点
对应屏幕:第 X 屏,只讲这个卖点

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

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

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

4. 使用场景层

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

按以下步骤完成:

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

输出格式:

全量使用场景:
- 场景:
  价值:

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

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

5. 产品基础信息补充

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

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

可以引导用户补充:

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

输出格式:

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

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

6. 决策收口层

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

可以从以下方向收口:

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

输出 3 到 5 组收口方案。

输出格式:

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

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

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

最终交付:内容文档与 HTML

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

内容文档包括:

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

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

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

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

HTML 要求:

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

输出 HTML 前,用一句话说明:

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

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

默认处理方式

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

质量标准

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

🤖 AI 评测

这个 Skill 质量不错,专门帮人做电商详情页内容策划。它先把产品信息收集齐全,再按核心价值、痛点、卖点、场景等层次一步步梳理内容,确认后生成可运行的 HTML 线框稿。每一步都给你多个选择,流程清晰不跳步。不足的是目前没有使用示例和快速上手指南,新用户可能需要花时间阅读完整说明才能上手。整体而言,这是一个工作流程规范、内容安全意识强的电商内容策划工具。

📊 多维度评分

适应性4.4
规范性4.5
有效性4.7
可靠性4.2
可信度5

📁 包含文件 (1 个)

📄 SKILL.md 12.6 KB