前言¶
做电商详情页时，常见流程是：运营或产品先堆卖点资料，设计再拆模块、写文案、画版式。产品信息若不够结构化，Agent 容易直接出「像成品页」的 HTML，反而难和团队对齐模块顺序与文案层级。下面介绍 SkillHub 社区 Skill「电商详情页内容黑白线框稿」，在已有明确产品信息的前提下，把详情页内容梳理、结构、文案与手机长图黑白线框稿串成一条可复用的工作流。
这是什么¶
「电商详情页内容黑白线框稿」是 SkillHub 上的社区 Skill，坐标为 @user_73fcded1/ecommerce-content-wireframe，当前版本 1.0.0，分类为 business-ops，由发布者 user_73fcded1 维护。官方资源地址为 https://api.skillhub.cn/user_73fcded1/ecommerce-content-wireframe，Skill 展示页为 https://www.skillhub.cn/skills/user_73fcded1/ecommerce-content-wireframe。
按官方简介，当用户希望基于明确的产品信息，梳理电商商品详情页内容、生成详情页内容结构、详情页文案、以及手机长图 HTML 黑白线框稿时，适合启用该 Skill。标签标明 requires_api_key=false，不依赖额外 API Key 配置。
核心功能¶
以下能力均来自 SkillHub 页面与抓取元数据中的简介说明，未单独展开的实现细节以安装后的 SKILL.md 为准。
- 详情页内容梳理：在输入产品信息已较完整的前提下，整理商品详情页应呈现的信息块与叙述顺序。
- 内容结构输出：生成详情页的模块级结构（便于评审与改版，而非直接定视觉稿）。
- 详情页文案：在结构之上产出各模块文案草案。
- 手机长图 HTML 黑白线框稿：输出面向手机长图场景的 HTML 线框，以黑白线框形式表达布局与内容占位，便于与设计、开发对齐后再做视觉与切图。
安装与启用¶
SkillHub 页面要求按官方安装文档安装本 Skill。先确认本机是否已有 skillhub CLI：
command -v skillhub && skillhub --version
若未安装，可按 SkillHub 安装文档执行完整安装（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 时必须用 --dir 指向当前 Agent 实际使用的 skills 目录；装到默认 ./skills/ 而 Agent 未配置该路径时，Skill 不会被识别。常见路径示例：
- Cursor：
~/.cursor/skills/ - Claude Code：
~/.claude/skills/ - Codex：
~/.codex/skills/或项目下的.agents/skills/
安装本 Skill 的命令形式如下（将 <skills 目录> 换成上面对应环境的路径）：
skillhub install @user_73fcded1/ecommerce-content-wireframe --dir <skills 目录>
也可在 SkillHub 站内搜索坐标 user_73fcded1/ecommerce-content-wireframe 核对名称与版本后再安装。安装完成后，在支持 Agent Skills 的客户端中按该产品的 Skill 发现方式启用即可（具体菜单因客户端而异，以当前版本文档为准）。
典型用法¶
官方未提供独立示例仓库；典型触发方式与简介一致：在对话中说明要做电商商品详情页，并先给出尽量明确的产品信息（如品名、核心卖点、参数、适用人群、售后与合规说明等），再提出具体产出需求。可按步骤递进，例如：
- 先请 Agent 基于产品信息梳理详情页应包含的内容模块与优先级。
- 再生成详情页内容结构（模块标题与每块要点）。
- 在结构确认或微调后，生成各模块文案。
- 最后生成手机长图 HTML 黑白线框稿，用于评审信息层级与版块顺序。
用户表述中若已包含「详情页结构」「详情文案」「线框稿」等关键词，与 Skill 简介中的使用场景一致，便于 Agent 匹配该 Skill 的执行约定。
适用场景与注意¶
适合谁
- 运营、产品、小团队需要在定稿视觉前，先统一详情页的模块与文案。
- 希望用 HTML 黑白线框表达手机长图详情的信息架构，而不是一开始就做高保真页面。
限制与注意
- 简介强调依赖明确的产品信息；素材含糊时，输出质量取决于你补充的事实与约束，Skill 不会替代产品定义。
- 产出为黑白线框 HTML，定位是结构与内容对齐，不是最终品牌视觉或生产环境页面代码。
- 元数据为社区来源（
community），版本以 SkillHub 显示的 1.0.0 为准；升级可用skillhub在对应--dir下按 SkillHub 文档做更新。 - 页面展示的评分、下载量会变动，以 SkillHub 站内当前数据为准（抓取时分类为 business-ops，评分为 100000，下载 6647，安装计数 0）。
结尾¶
「电商详情页内容黑白线框稿」把详情页的内容梳理、结构、文案与手机长图 HTML 黑白线框稿放在同一套 Skill 约定里，适合在视觉设计之前先把信息架构说清楚。需要安装或查看说明时，可打开 SkillHub 页面：https://www.skillhub.cn/skills/user_73fcded1/ecommerce-content-wireframe，或访问官方地址：https://api.skillhub.cn/user_73fcded1/ecommerce-content-wireframe。
