前言¶
做电商详情页时，常见做法是直接让模型「写一版详情文案」或让设计先出视觉稿。前者往往缺少固定的分屏叙事，卖点顺序各说各话；后者在文案未定前就投入视觉，返工成本高。若你手头只有产品资料，却需要同时理清详情页结构、分屏文案，以及一版可在手机上预览的黑白线框稿，单靠通用提示词很难稳定对齐电商长图的惯例。
下面介绍 SkillHub 社区 Skill「电商商品详情页内容策划与线框原型生成」，它把详情页的叙事模块、文案撰写与 375px 宽线框 HTML 产出绑在同一套流程里，便于在 Cursor 等支持 Skills 的 Agent 里复用。
这是什么¶
一句话定位：基于产品信息，梳理商品详情页叙事结构、撰写分屏卖点文案，并生成 375px 手机长图黑白线框稿 HTML。
- 坐标：
@user_41dc0d90/ecommerce-detail-page-planner - 版本：1.0.1
- 来源：community（SkillHub 分类：content-creation）
- 发布者：user_41dc0d90
- 标签：
requires_api_key=false（按 SkillHub 页面说明，不依赖 API Key）
官方入口：
- API 页：https://api.skillhub.cn/user_41dc0d90/ecommerce-detail-page-planner
- SkillHub 展示页：https://www.skillhub.cn/skills/user_41dc0d90/ecommerce-detail-page-planner
核心功能¶
以下能力均来自 Skill 官方简介，安装后由 Agent 按 SKILL.md 流程执行。
详情页叙事结构¶
按固定顺序组织分屏内容：
- 核心价值主张
- 强化主张（内部可梳理痛点、痒点、爽点，对外仅呈现选定的主标题）
- 卖点转化为购买理由（固定顺序：器型 → 釉色 → 材质 → 搭配）
- 使用场景
- 产品细节图
- 产品参数
分屏文案与线框产出¶
- 根据你提供的产品信息撰写各屏文案。
- 产出宽度为 375px 的手机长图「黑白线框稿」，格式为 HTML，便于在浏览器中快速对齐版式与信息层级，再交给视觉或前端细化。
触发方式¶
在对话中使用与详情页相关的意图即可，官方列出的触发词包括：详情页策划、商品详情页、卖点文案、详情页线框稿、产品详情页结构、电商长图。
安装与启用¶
安装前需本机已有 SkillHub CLI。若尚未安装，可先检查版本；未安装时按 SkillHub 官方安装文档执行（完整安装或仅 CLI）。
command -v skillhub && skillhub --version
# 完整安装（CLI + 默认 Skill，推荐）
curl -fsSL https://skillhub-1388575217.cos.ap-guangzhou.myqcloud.com/install/install.sh | bash
# 仅安装 CLI
curl -fsSL https://skillhub-1388575217.cos.ap-guangzhou.myqcloud.com/install/install.sh | bash -s -- --cli-only
将 Skill 安装到当前 Agent 实际读取的 skills 目录；SkillHub 文档强调必须使用 --dir，否则默认落在 ./skills/ 可能不会被 Agent 识别。
skillhub install @user_41dc0d90/ecommerce-detail-page-planner --dir <你的 skills 目录>
常用客户端 skills 目录示例（以 SkillHub 安装文档为准）：
| 环境 | 目录 |
|---|---|
| Cursor | ~/.cursor/skills/ |
| Claude Code | ~/.claude/skills/ |
| Codex | ~/.codex/skills/ 或项目下的 .agents/skills/ |
也可将下面提示交给 AI，让其按官方安装说明完成安装：
请根据 https://skillhub.cn/install/skillhub.md，安装 `@user_41dc0d90/ecommerce-detail-page-planner`。
安装后按你所用客户端的要求重启或刷新 Agent，使 Skill 生效。
典型用法¶
官方页面未附带独立示例仓库；可复现的用法是：先备齐产品信息，再用触发词说明要详情页策划 + 线框稿。建议在一次请求里写清下列内容，减少来回补料。
- 产品名称、品类、核心卖点与材质/工艺等参数（表格或列表均可）。
- 若已有品牌语气或禁用词，一并说明。
- 明确需要「分屏文案 + 375px 黑白线框 HTML」，并选用触发词之一，例如「商品详情页结构」或「详情页线框稿」。
经过上面的步骤，Agent 会按 Skill 定义的叙事顺序输出各屏文案，并生成可在手机宽度下预览的线框 HTML。你可将 HTML 在浏览器中打开，核对信息顺序与留白，再交给设计替换为正式视觉。
适用场景与注意¶
适合谁
- 运营、内容或中小团队，需要在视觉定稿前统一详情页叙事与分屏文案。
- 需要在 375px 视口下快速对齐长图信息架构，而不是直接出彩色成稿的场景。
限制与注意
- 卖点转购买理由一段采用固定顺序（器型 → 釉色 → 材质 → 搭配），与陶瓷/茶器等品类表述高度相关；其他品类使用时需理解该顺序是 Skill 内置约束，必要时在对话中说明如何映射到你的卖点维度。
- Skill 产出的是黑白线框 HTML，不是可直接上架的精修长图或店铺后台富文本；后续视觉、摄影与合规审校仍需人工完成。
- SkillHub 页面显示本 Skill 当前版本为 v1.0.1，社区来源；评分与下载量会随平台更新变化，以 SkillHub 展示页为准。
结尾¶
「电商商品详情页内容策划与线框原型生成」把详情页常用的分屏叙事、文案撰写与 375px 线框 HTML 合成一条 Agent 工作流，且无需 API Key。若你正在搭商品详情页结构或卖点文案，可从 SkillHub 安装 @user_41dc0d90/ecommerce-detail-page-planner，用官方触发词发起任务。
- SkillHub：https://www.skillhub.cn/skills/user_41dc0d90/ecommerce-detail-page-planner
- API 页：https://api.skillhub.cn/user_41dc0d90/ecommerce-detail-page-planner
