电商详情页内容黑白线框稿
📖 技能介绍
name: ecommerce-content-wireframe description: 当用户希望基于明确的产品信息，梳理电商商品详情页内容、生成详情页内容结构、详情页文案、手机长图 HTML 黑白线框稿时使用。
电商详情页内容黑白线框稿
触发条件
当用户希望梳理电商商品详情页内容时，使用本 skill。
只要用户的需求涉及以下任一方向，就应触发：
- 想为某个商品整理详情页内容结构
- 想把产品信息转成详情页文案
- 想生成手机长图形式的详情页 HTML
- 想看到一版低保真黑白线框稿效果
- 想围绕核心价值、用户痛点、产品卖点、使用场景、购买理由来组织详情页
- 想把商品信息整理成可交给运营、设计、内容团队继续执行的详情页策划稿
核心原则
- 先收集精准信息，再生成详情页内容。
- 不使用“随便输入也先出初稿”的逻辑。
- 用户必须先提供完整产品信息表，再进入内容生成。
- 如果信息不完整，先让用户补齐关键字段。
- 按固定步骤推进，不让用户选择先精修哪一层。
- 每一步都给多个选择，并告诉用户如何选择、融合、修改或补充信息。
- 用户确认或选择后，再进入下一步。
- 所有确认内容最终先整理成一个完整的详情页内容文档。
- 内容文档确认后，再生成一份完整可运行的 HTML 黑白线框稿。
触发后的开始语
触发后不要直接生成内容，先使用以下固定开始语收集产品信息：
我会先基于完整产品信息，帮你一步步梳理电商详情页内容；确认内容后，再整理成详情页内容文档，并生成一份可运行的手机长图 HTML 黑白线框稿。
这份黑白线框稿用于快速预览详情页内容结构、模块顺序和转化逻辑，方便你和运营、设计、内容团队对齐方向后再进入视觉设计。
请先补充产品信息，包括但不限于：
【产品名】：[填写你的产品名]
【产品定位】：[填写产品定位]
【目标人群】：[填写目标人群]
【核心场景】：[填写目标场景]
【核心卖点】：[列出所有核心卖点]
如果你暂时不确定某一项，可以先写“待定”，但产品名、目标人群和核心卖点建议尽量具体，这会直接影响详情页内容的准确度。
必要输入
开始前，先要求用户填写以下产品信息表：
产品信息如下：
【产品名】：[填写你的产品名]
【产品定位】：[填写产品定位]
【目标人群】：[填写目标人群]
【核心场景】：[填写目标场景]
【核心卖点】：[列出所有核心卖点]
如果用户没有提供完整信息，不要直接生成 HTML。先提示用户补齐：
请先补充完整产品信息，我会基于这些信息一步步生成详情页内容。
产品信息如下：
【产品名】：[填写你的产品名]
【产品定位】：[填写产品定位]
【目标人群】：[填写目标人群]
【核心场景】：[填写目标场景]
【核心卖点】：[列出所有核心卖点]
工作流程
收到完整产品信息后，按以下顺序推进：
- 核心价值承诺层
- 痛点锚定层
- 卖点强化层
- 使用场景层
- 产品基础信息补充
- 决策收口层
- 整理详情页内容大文档
- 生成完整 HTML 黑白线框稿
不要跳步。不要让用户选择先做哪一层。
每一步的固定节奏是：
- 基于用户提供的产品信息和上一轮确认内容进行分析。
- 给多个可选方案。
- 用清晰话术指引用户选择、融合、修改或补充信息。
- 用户确认后，记录该步骤结果。
- 自动进入下一步。
1. 核心价值承诺层
目标：将产品的所有卖点提炼成一句有差异点和共鸣感的核心价值承诺，适合放在电商详情页第一屏。
要求：
- 用词精练有力
- 朗朗上口
- 能激发目标人群共鸣
- 适合做第一屏关键定义
- 不虚构产品没有提供的信息
输出 10 句话备选。
输出格式：
核心价值承诺备选：
1.
2.
...
10.
你可以这样回复我：
- 直接选一个编号，例如：选 3
- 选多个让我融合，例如：3 和 8 结合
- 说明你想要的方向，例如：更高端、更直接、更有情绪、更专业、更像天猫首屏
- 如果都不满意，告诉我“不满意 + 原因”，我会重新生成一组
2. 痛点锚定层
基于用户选中的核心价值承诺，挖掘用户的痛点、痒点、爽点。
分析维度：
- 痛点：用户在此情境中最担忧或最想解决的问题是什么？
- 痒点：用户希望呈现出的理想状态、身份感或角色投射是什么？
- 爽点：用户在哪一瞬间获得情绪满足、轻松感或被理解的感受？
然后提炼出适合电商详情页的一句话表达，给 10 个选择。
输出格式：
痛点：
痒点：
爽点：
详情页表达备选：
1.
2.
...
10.
你可以这样回复我：
- 直接选择一句详情页表达，例如：选 5
- 让我融合多个方向，例如：2 和 9 结合
- 告诉我痛点要更尖锐、痒点要更有向往感，或爽点要更有被理解的感觉
- 如果你觉得痛点不准，可以补充真实用户抱怨、差评、咨询问题或购买前顾虑
3. 卖点强化层
目标：精准翻译产品卖点，将功能转化成用户真正关心的购买理由。
对每一个卖点按以下步骤处理：
- 提炼卖点：识别最重要的功能、成分、工艺、标准或差异化特征。
- 转化买点视角：说明它能解决什么问题、带来什么好处。
- 文案再造：写成一句更有感知力、更有画面感的详情页买点文案，每句控制在 25 字以内。
结构要求：
- 一个核心卖点必须对应详情页里的独立一屏。
- 不要把多个核心卖点合并到同一屏讲。
- 如果一个卖点下面有多个证据点，可以放在同一屏内作为辅助信息；但该屏只能服务这一个核心卖点。
- 如果用户给出的卖点过多，先按转化优先级排序，并建议哪些卖点进入详情页主屏，哪些放到参数、问答或补充信息区。
输出格式：
卖点 1
主标题：用户买点
副标题：产品卖点
对应屏幕：第 X 屏，只讲这个卖点
卖点 2
主标题：用户买点
副标题：产品卖点
对应屏幕：第 X 屏，只讲这个卖点
你可以这样回复我：
- 确认保留，例如：这组可以
- 指定某个卖点重写，例如：卖点 2 重写
- 告诉我某个卖点要更理性、更生活化、更有画面感或更适合详情页大标题
- 如果卖点有证据，例如成分、工艺、认证、数据、材质、使用方法，可以继续补充，我会把它转成更有说服力的买点
如果用户给的卖点没有证据，不要补造数据。可以用体感、场景或结果表达，但避免虚假承诺。
4. 使用场景层
目标：把产品从抽象卖点落到真实购买和使用情境。
按以下步骤完成：
7w4.net小葱技能站收录全网优质技能，值得收藏。
- 基于产品信息和核心卖点，系统拆解可能出现的使用场景。
- 根据市场大小、品牌优势和转化价值，筛选 Top 4 高价值场景。
- 对 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 线框稿。每一步都给你多个选择，流程清晰不跳步。不足的是目前没有使用示例和快速上手指南，新用户可能需要花时间阅读完整说明才能上手。整体而言，这是一个工作流程规范、内容安全意识强的电商内容策划工具。
