前言¶

电商、品牌站或 B2B 落地页里，产品详情往往要同时呈现主图、场景图和卖点文案，还要兼顾版式与动效。手写单页 HTML 或套模板，改一版文案就要动多处结构；纯文案 Skill 又不负责页面呈现。下面介绍 SkillHub 社区 Skill product-detail-tech-web：用图片与卖点输入，生成内联 CSS/JS 的单文件详情页，并附带可视化微调与多格式导出。

这是什么¶

product-detail-tech-web（坐标 @user_5b12983f/prduct-detail-tech-web，当前版本 1.0.1）归类为 design-media，来源为 community，由发布者 user_5b12983f（SkillHub 页面标注作者 dragon928）维护。标签 requires_api_key=false，不依赖额外 API Key。

它根据产品图片、产品应用场景图和卖点文案，自动生成 HTML 产品详情介绍页；输出为单文件 HTML（内联 CSS/JS），可在浏览器直接打开或部署到静态托管。

官方入口：

• API：https://api.skillhub.cn/user_5b12983f/prduct-detail-tech-web
• SkillHub 页面：https://www.skillhub.cn/skills/user_5b12983f/prduct-detail-tech-web

核心功能¶

以下能力均来自官方简介，按模块归纳。

页面生成与交付形态¶

• 输入：产品图、场景应用图、卖点文案。
• 输出：单文件 HTML，样式与脚本内联，便于本地预览或上线。

多产品与轮播¶

• 支持多产品展示：顶部标签切换。
• 提供三种过渡动画，用于产品之间的切换。

右侧浮动设计控制台¶

生成页内置控制台，可在不改源码的前提下调整：

• 动效微调
• 色彩主题
• 背景控制
• 图片替换
• 图标自定义
• 文字替换（在线改文案）

设计风格预设¶

内置多种风格方向，官方列举：简约商务、科技质感、温馨家居、时尚潮流、自然健康。

导出¶

支持导出 PDF、JPG、PSD，便于归档、印刷流程或交给设计工具继续处理。

安装与启用¶

SkillHub 提供通用安装说明（https://skillhub.cn/install/skillhub.md）。页面上的推荐做法是：让 Agent 按该文档安装坐标 @user_5b12983f/prduct-detail-tech-web。

1、安装 SkillHub CLI（若尚未安装）¶

先检查是否已有 CLI：

command -v skillhub && skillhub --version

未安装时，可用官方脚本（完整安装含默认 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

2、安装本 Skill 到当前 Agent 的 skills 目录¶

安装时必须用 --dir 指向当前客户端识别的 skills 目录，否则默认落在 ./skills/ 且 Agent 可能读不到。官方文档给出的常见路径示例：

在 Cursor 中可执行：

skillhub install @user_5b12983f/prduct-detail-tech-web --dir ~/.cursor/skills/

也可用搜索再安装（包名以 SkillHub 检索结果为准）：

skillhub search product-detail-tech-web
skillhub install <检索到的包名> --dir ~/.cursor/skills/

安装后按你所用客户端要求重启或刷新 Agent，使 Skill 被加载。

典型用法¶

本 Skill 通过自然语言触发；官方在简介中给出了 Use when 与触发词，可按下面步骤复现工作流。

1、准备素材¶

• 产品主图或多角度图
• 应用场景图（若有）
• 卖点文案（标题、参数、卖点段落等）

2、在 Agent 中发起任务¶

在对话中说明要生成产品详情页，并附上素材与文案。可使用官方列出的触发表述，例如：产品详情、产品介绍、商品详情、详情页、多产品展示、产品轮播、导出 PDF、文字替换、product detail 等。

示例提示（结构示意，素材路径按你本地实际填写）：

使用 product-detail-tech-web，根据以下素材生成产品详情 HTML：
- 产品图：./assets/product-main.jpg
- 场景图：./assets/scene.jpg
- 卖点文案：（粘贴文案）
风格倾向：科技质感；若有多 SKU，需要顶部标签切换。

3、预览与微调¶

用浏览器打开生成的单文件 HTML。通过页面右侧浮动设计控制台调整主题、背景、图片、图标与文字；多产品时试用顶部标签与过渡动画。

4、导出¶

在页面提供的导出能力中选择 PDF、JPG 或 PSD，按交付场景选用。

适用场景与注意¶

适合谁¶

• 需要商品详情页、产品介绍页、宣传页、产品手册式单页的运营、设计协作或独立开发者。
• 需要多产品对比或轮播展示、且希望输出可部署 HTML 的场景。
• 需要在成稿后导出 PDF/JPG/PSD 或在线改文案，而不从零写前端。

明确不适用（官方 NOT for）¶

• 简单产品图片编辑（非详情页编排）。
• 海报类需求（官方建议用 poster-generator）。
• 纯文案写作且不含图片输入。
• 产品详情页的代码工程开发（本 Skill 面向成页生成与可视化编辑，而非替你搭建电商后端或组件库）。

使用注意¶

• 坐标路径中为 prduct（官方 URL 拼写），安装与引用时请与 SkillHub 页面一致，避免装错包。
• 社区来源（community），升级前可用 skillhub 查看版本（当前页面显示 v1.0.1）。
• SkillHub 页面统计（截至抓取）：评分 100000，下载 6443，安装 90；以 SkillHub 实时数据为准。

结尾¶

product-detail-tech-web 把「图 + 场景 + 卖点」收敛为可编辑、可导出的单文件详情页，并覆盖多产品轮播与控制台微调，适合快速出稿与迭代文案。安装与说明以 SkillHub 为准：

https://www.skillhub.cn/skills/user_5b12983f/prduct-detail-tech-web