shield_lock
金大哥
联系我们
← 返回 Skill 列表
extension
分类: 其它无需 API Key

product-detail-tech-web

根据产品图片、产品应用场景图和卖点文案，自动生成精美的 HTML 产品详情介绍页。支持多产品轮播（顶部标签切换+三种过渡动画）、右侧浮动设计控制台（动效微调/色彩主题/背景控制/图片替换/图标自定义/文字替换）。支持导出 PDF、JPG、PSD 格式。支持多种设计风格预设（简约商务/科技质感/温馨家居/时尚潮流/自然健康），输出单文件 HTML（内联CSS/JS），可直接浏览器打开或部署。Use when: 用户需要生成产品详情页、产品介绍页、电商商品详情、产品宣传页、产品手册、商品描述页、product detail page、多产品展示页、产品对比页、需要导出PDF/JPG/PSD格式、需要替换文字/修改文案。触发词：产品详情、产品介绍、商品详情、详情页、生成详情、产品展示页、product detail、商品描述、详情介绍、产品文案、多产品展示、产品轮播、产品切换、品牌产品页、导出PDF、导出图片、导出JPG、导出PSD、文字替换、修改文案、在线编辑文字。NOT for: 简单的产品图片编辑、海报生成（用poster-generator）、纯文案写作不含图片、产品详情页代码开发。

person作者: user_5b12983fhubcommunity
download下载资源包

产品详情介绍页生成器 Pro v3 (Product Detail Generator Pro)

根据用户提供的产品图片、产品应用场景图和产品卖点文案，自动生成精美的 HTML 产品详情展示页，支持导出 PDF / JPG / PSD 多种格式，并提供在线文字替换编辑功能。

v3.0 新特性：

  • ✏️ 文字替换：控制台新增「文字编辑」面板，支持对当前产品所有可见文本（标题/副标题/卖点标题/卖点描述/场景标题/规格等）进行实时在线编辑，无需修改代码
  • 📄 导出 PDF：一键调用浏览器打印对话框，内置专用 @media print 打印样式（隐藏控制台/导航栏/按钮，正文完整铺满打印纸），兼容 Chrome 「另存为 PDF」
  • 🖼 导出 JPG：集成 html2canvas 库，截取当前页面可视区域（或完整长页）生成高清 JPG 图片并自动下载
  • 📦 导出 PSD：提供 PSD 图层规格说明书（Markdown），标注各文字图层/图片图层的位置、尺寸、颜色、字体，并附带一键生成 PSD 的 Python 脚本（基于 psd-tools / Pillow），用户可在本地运行脚本输出 .psd 文件

v2.0 特性（保留）：

  • 🔄 多产品轮播：顶部选项卡切换，支持滑动/淡入淡出/缩放三种过渡模式，可动态添加/删除产品
  • ⚙️ 设计控制台：右侧浮动面板，支持动效速度/类型/缓动曲线/自动播放微调
  • 🎨 色彩主题：6套预设渐变配色 + 自定义主色/强调色
  • 🌌 背景控制：4种背景预设 + 自定义颜色 + 背景图片上传
  • 🖼 图片替换：点击即可上传本地图片替换首屏/细节/场景图
  • 🔲 图标自定义：15个emoji预设 + 上传图标图片 + 手输emoji

使用场景

  • 电商详情页（淘宝/京东/拼多多/Shopify 等）
  • 产品宣传手册 / 产品画册
  • 同品牌多型号产品对比展示
  • B2B 产品展示页
  • 品牌系列产品官网页
  • 微信朋友圈 / 小红书产品种草长图

适用产品类型

电子产品、智能家居、家居用品、美妆护肤、食品饮料、服装鞋帽、运动户外、母婴用品、数码配件、办公设备、工业产品、农产品等。

核心工作流（7步）

严格执行以下 7 步，不要跳步或合并步骤。每一步完成后向用户确认或直接进入下一步（根据流程说明）。

Step 1 — 素材收集

确认用户已准备好以下素材。使用 ask_followup_question 工具一次性确认：

必需素材（每个产品）：

  • 产品图片（1张主图 + 可选多角度/细节图）— 放入工作目录下 product-images/{产品名}/ 文件夹
  • 产品应用场景图 — 同放入对应目录
  • 卖点文案（标题 + 核心卖点列表 + 可选描述）

可选素材：

  • 品牌名称 / Logo
  • 产品规格参数（尺寸、重量、材质等）
  • 品牌故事 / 理念文案
  • 用户评价 / 认证信息

多产品说明：如果用户要展示多款产品，引导用户按产品分文件夹归置图片（如 product-images/产品A/、product-images/产品B/）。最少 1 个产品，上限不做限制（建议 ≤ 6 个，超过后标签导航可能需要滚动）。

引导话术（当用户素材不全时）：

请将素材按以下方式准备：

  • 每款产品单独一个文件夹：product-images/{产品名}/
  • 主图文件名建议：main.jpg、detail-1.jpg、detail-2.jpg、scene.jpg
  • 同时提供产品卖点文案：名称 + 核心卖点 3-6 条

Step 2 — 文案整理

使用 ask_followup_question 一次性确认以下信息：

  1. 产品数量：展示几款产品（默认 1 款，多款可逐一确认）
  2. 每款产品名称：正式产品名（会显示在标签和首屏标题）
  3. 一句话卖点：不超过 20 字的核心卖点（首屏大标题）
  4. 核心卖点列表：3-6 个卖点，每个含标题（≤8字）+ 描述（≤30字）
  5. 产品类型：电子产品 / 家居 / 美妆 / 食品 / 服装 / 运动 / 其他
  6. 设计风格：简约商务 / 科技质感 / 温馨家居 / 时尚潮流 / 自然健康（默认：科技质感）
  7. 是否启用多产品轮播：有多款产品时自动启用

如果用户只提供了零散信息，Agent 需要帮助整理成上述结构后再继续。

Step 3 — AI 图片分析

使用 read_file 工具读取所有产品图片（支持图片读取），AI 自动分析：

产品图分析：

  • 产品外观特征（形状、颜色、材质、质感）
  • 产品核心功能/使用方式（从图片推断）
  • 产品定位和目标受众

应用场景图分析：

  • 使用场景描述（家庭/办公/户外/运动等）
  • 场景氛围和情感调性

多产品对比分析（有多款产品时）：

  • 各款产品之间的定位差异
  • 建议的标签图标（从 ICON_PRESETS 列表选取）
  • 建议各产品使用不同的主题光晕色（themeGlow 参数）

分析输出（内部使用）：

产品特征：[关键词列表]
材质质感：[描述]
使用场景：[场景列表]
情感调性：[调性描述]
推荐风格：[基于图片分析的推荐]
多产品对比：[各产品差异总结]

图片处理规则：

  • HTML 中图片使用相对路径或绝对路径引用
  • 产品主图用于首屏大图
  • 细节图（最多 3 张）用于产品展示网格
  • 应用场景图用于场景区

Step 4 — 信息架构设计

基于 Step 2 的文案和 Step 3 的图片分析，设计详情页的信息架构：

单文件 HTML 结构（支持多产品轮播）：

头部导航 (navbar)
  └── 导航品牌 + 导航链接 + 设计控制台入口
产品切换栏 (product-switcher) [多产品时显示]
  └── 每款产品的图标 + 名称 + 徽章
产品内容轮播 (product-carousel)
  └── 每款产品的 product-slide
      ├── ① 首屏 (hero)：主图 + 产品标题 + 一句话卖点 + 关键数字 + CTA按钮
      ├── ② 核心卖点 (features)：4张卖点卡片（图标 + 序号 + 标题 + 描述）
      ├── ③ 产品细节 (showcase)：3张细节图网格（图片 + 标题 + 描述）
      ├── ④ 应用场景 (scenarios)：场景大图 + 场景标题 + 场景描述
      ├── ⑤ 技术规格 (specs)：双列规格参数表
      └── ⑥ CTA区 (cta)：价格/卖点 + 购买按钮 + 了解更多按钮
右侧浮动控制台 (ctrl-panel)
  ├── 产品管理：添加/重命名/删除产品
  ├── 动效调节：轮播方式/切换速度/入场时长/缓动曲线/入场动效/自动播放
  ├── 色彩主题：6套预设 + 自定义 HEX
  ├── 页面背景：4种预设 + 自定义颜色 + 背景图片上传
  ├── 图片替换：当前产品所有图片槽一键换图
  ├── 卖点图标：15个emoji预设 + 上传 + 手输emoji
  ├── ✏️ 文字编辑：当前产品所有文本字段在线编辑（标题/副标题/卖点/场景/规格）
  └── 📤 导出中心：PDF导出 / JPG截图下载 / PSD图层说明书生成
页脚 (footer)

设计决策规则：

  • 产品数量 ≥ 2：启用顶部选项卡，否则隐藏切换栏
  • 卖点数量 ≤ 3：卡片使用更大字号；≥ 4 个使用标准网格
  • 细节图数量 < 3：剩余槽用占位符替代
  • 所有图片使用 onerror 降级处理（图片加载失败时显示渐变占位）

Step 5 — 选择模板并定制

优先使用现有模板：

从 templates/ 目录中选择最合适的模板：

| 文件 | 适用风格 | 特点 | |------|---------|------| | product-detail-pro-v2.html | 科技质感（深色系） | 推荐：已内置全套功能（多产品轮播+控制台+图片替换+图标自定义+文字替换+PDF/JPG/PSD导出） | | product-detail-tech.html | 科技感（标准版） | 无控制台，代码更简洁 | | product-detail-biz.html | 简约商务（浅色系） | 适合 B2B、企业产品 |

使用 v2 模板时的定制流程：

  1. 用 read_file 读取 templates/product-detail-pro-v2.html
  2. 找到 JS 中的 defaultProducts 数组（约第 937 行）
  3. 按照以下数据结构，将用户产品信息填入：
const defaultProducts = [
  {
    id: 1,                           // 唯一ID
    name: '产品完整名称',              // 标签显示名
    badge: '推荐',                    // 标签徽章（推荐/新品/热销/空字符串不显示）
    tabIcon: '💻',                   // 标签图标（从ICON_PRESETS选取合适的）
    tag: '产品系列/特性标签',          // 首屏顶部小标签
    title: '产品品牌/主名',           // 首屏标题第一行
    titleHighlight: '型号/亮点',      // 首屏标题高亮部分（渐变色）
    desc: '产品一句话描述',            // 首屏副标题（80字以内）
    stats: [
      { num: '数字/关键词', label: '说明' },  // 最多3个关键指标
      { num: '数字/关键词', label: '说明' },
      { num: '数字/关键词', label: '说明' },
    ],
    heroImg: './product-images/产品名/main.jpg',   // 首屏主图路径
    heroImgAlt: '图片描述',
    ctaText: '立即购买',              // CTA按钮文字
    ctaPrice: '价格/卖点',            // CTA区顶部大字
    ctaPriceSub: '型号全称',          // CTA区副标题
    ctaTitle: 'CTA区标题',
    ctaDesc: 'CTA区描述（50字以内）',
    themeGlow1: 'rgba(112,0,255,0.15)',  // 首屏背景光晕色1（各产品可不同）
    themeGlow2: 'rgba(0,217,255,0.1)',   // 首屏背景光晕色2
    features: [
      { icon: '⚖️', num: '01', title: '卖点标题', desc: '卖点详细描述（40字以内）' },
      { icon: '⚡', num: '02', title: '卖点标题', desc: '卖点详细描述（40字以内）' },
      { icon: '🎮', num: '03', title: '卖点标题', desc: '卖点详细描述（40字以内）' },
      { icon: '✨', num: '04', title: '卖点标题', desc: '卖点详细描述（40字以内）' },
    ],
    showcaseItems: [
      { img: './product-images/产品名/detail-1.jpg', title: '图片标题', desc: '一行简短描述' },
      { img: './product-images/产品名/detail-2.jpg', title: '图片标题', desc: '一行简短描述' },
      { img: './product-images/产品名/detail-3.jpg', title: '图片标题', desc: '一行简短描述' },
    ],
    scenarioImg: './product-images/产品名/scene.jpg',  // 场景大图
    scenarioTitle: '场景标题',
    scenarioDesc: '场景描述（100字以内）',
    specs: [
      ['规格项', '规格值'],    // 每行一对，建议6-10行
      ['规格项', '规格值'],
    ],
  },
  // 如有第二款产品，继续添加...
];
  1. 用 write_to_file 输出到工作目录：product-detail-{产品名缩写}-pro.html

如需从零生成新风格，参考 Step 5 中的风格设计规范。

设计风格规范（从零生成时参考）

风格 A — 简约商务（默认）

主色: #1E293B (深蓝灰)
辅助色: #3B82F6 (天蓝)
背景: #F8FAFC (浅灰白)
卡片背景: #FFFFFF
正文色: #334155
字体: 'Inter', 'Noto Sans SC', system-ui, sans-serif
适用: 电子产品、办公设备、B2B产品

风格 B — 科技质感（v2模板默认）

主色: #0A0A0F (深黑)
辅助色: #00D9FF (青蓝)
强调色: #7000FF (紫色)
背景: #111118 (暗灰黑)
卡片背景: #1A1A25
正文色: #E2E8F0
字体: 'Roboto', 'Noto Sans SC', system-ui, sans-serif
适用: 数码产品、智能家居、AI产品

风格 C — 温馨家居

主色: #9D4B4B (暖红棕)
辅助色: #EC4899 (粉色)
背景: #FDF2F8 (浅粉白)
适用: 家居用品、母婴、食品

风格 D — 时尚潮流

主色: #18181B (纯黑)
辅助色: #F59E0B (金色)
背景: #FAFAFA (米白)
适用: 服装、美妆、配饰

风格 E — 自然健康

主色: #166534 (深绿)
辅助色: #84CC16 (草绿)
背景: #FEFCE8 (浅黄白)
适用: 有机食品、户外运动、健康产品

HTML 生成规范（从零生成时）

必含技术要素：

  1. HTML5 文档声明 + <meta charset="UTF-8"> + viewport meta
  2. 内联 CSS：CSS 变量体系、响应式断点（768px/1024px）、滚动动画、设计控制台样式
  3. 内联 JS：产品数据结构、轮播逻辑、控制台交互（动效/色彩/背景/图片/图标）、滚动动画观察器
  4. CSS 变量：--anim-duration、--anim-easing、--carousel-duration 为动效可调变量
  5. imageRegistry 对象用于存储上传图片的 Blob URL

响应式规范：

  • 桌面端（≥1024px）：最大宽度 1200px，居中，控制台显示
  • 平板端（768-1023px）：卖点卡片 1 列，控制台隐藏
  • 手机端（<768px）：全宽，字号适当缩小

Step 6 — 生成与输出

  1. 确认产品名缩写用于文件命名（格式：product-detail-{名称}-pro.html）
  2. 读取 v2 模板或从零生成
  3. 将 defaultProducts 数组填入用户的产品数据
  4. 如果产品图片路径为本地绝对路径，直接引用（HTML 在本地打开时有效）
  5. 使用 write_to_file 写入工作目录
  6. 用 preview_url 或启动本地服务器预览

注意：如果图片路径为本地绝对路径（C:/...），直接在浏览器打开 HTML 时因跨域限制可能无法显示图片。建议：

  • 使用 npx http-server . -p 8080 启动本地服务，通过 http://localhost:8080/xxx.html 访问
  • 或引导用户使用控制台中的"图片替换"功能手动上传

Step 7 — 预览与迭代

生成完成后：

  1. 启动本地 HTTP 服务器：npx --yes http-server {工作目录} -p 8080 --silent &
  2. 用 preview_url 打开：http://localhost:8080/{文件名}.html
  3. 告知用户以下功能使用方式：
    • 顶部标签切换产品
    • 右侧 ⚙ 按钮（或导航栏「设计控制台」）展开控制面板
    • 图片替换：在控制台「图片替换」区点击「换图」
    • 动效微调：在控制台「动效调节」区调整后点击「应用动效」
  4. 询问用户是否需要调整：
    • 产品数据（名称/卖点/规格）
    • 配色微调
    • 添加/删除产品
    • 图片路径更换

如果用户需要修改，直接用 replace_in_file 修改已生成的 HTML，然后再次预览。

输出规范

文件结构

{工作目录}/
├── product-images/
│   ├── 产品A/
│   │   ├── main.jpg           # 首屏主图
│   │   ├── detail-1.jpg       # 细节图1
│   │   ├── detail-2.jpg       # 细节图2
│   │   ├── detail-3.jpg       # 细节图3
│   │   └── scene.jpg          # 场景图
│   └── 产品B/
│       └── ...
└── product-detail-{名称}-pro.html   # 生成的产品详情页 Pro 版

HTML 文件要求

  • 单文件 HTML，无外部 CDN 依赖（CSS/JS 全部内联）
  • 图片使用相对路径或本地绝对路径引用（非 base64）
  • 文件体积 < 300KB（不含图片）
  • 可直接双击在浏览器中打开（图片需本地 HTTP 服务）
  • 兼容 Chrome / Firefox / Safari / Edge 最新版
  • 中文编码 UTF-8
  • 移动端适配（响应式布局）

功能说明（对用户的）

用户生成完产品详情页后，可通过右侧控制台进行以下操作：

🔄 多产品轮播

  • 顶部选项卡快速切换产品，支持键盘左右键
  • 三种切换动画：滑动（默认）/ 淡入淡出 / 缩放
  • 可设置自动轮播（3s / 5s / 8s）

⚙️ 动效微调

  • 轮播方式：滑动/淡入淡出/缩放切换
  • 切换速度：200ms ～ 1200ms
  • 入场时长：300ms ～ 1200ms
  • 缓动曲线：6种（平滑/标准/进出缓动/弹跳回弹/超出减速/线性）
  • 入场动效：淡出上升/左侧淡入/右侧淡入/缩放淡入/上滑入场
  • 自动播放：关闭/3s/5s/8s

🎨 色彩主题

  • 6套渐变主题一键切换：极光蓝紫 / 橙金科技 / 翠绿海蓝 / 玫红紫罗兰 / 暖金橙 / 冰霜蓝
  • 支持颜色选择器 + HEX 输入自定义

🌌 页面背景

  • 4种预设：极致暗黑 / 深海蓝黑 / 渐变深色 / 磨砂玻璃
  • 自定义背景颜色
  • 上传背景图片

🖼 图片替换

  • 当前产品的所有图片（首屏/细节1-3/场景）均可点击「换图」上传本地图片
  • 图片实时替换，无需刷新页面

📦 产品管理

  • 添加新产品（复制当前产品结构，可进一步编辑）
  • 重命名产品
  • 删除产品（保留至少1款）

🔲 图标自定义

  • 15个emoji预设图标一键切换
  • 支持上传自定义图标图片
  • 支持手动输入任意emoji

✏️ 文字替换（v3 新增）

  • 控制台「文字编辑」面板列出当前产品所有可编辑文本字段
  • 支持修改：产品标题（title / titleHighlight）、副标题（desc）、标签（tag）、一句话卖点（badge）、关键数字（stats.num/label）、卖点标题和描述（features）、细节图标题（showcaseItems）、场景标题/描述（scenarioTitle/Desc）、规格参数（specs）
  • 修改后实时预览，点击「保存文案」将改动同步写回内存中的 products 数组
  • 点击「重置文案」恢复当前产品初始文案

📤 导出格式（v3 新增）

📄 PDF 导出

  • 控制台「导出中心」点击「导出 PDF」按钮
  • 实现方式：调用 window.print()，配合 @media print 样式，自动隐藏控制台/导航栏/按钮，完整呈现当前产品内容
  • 建议使用 Chrome 浏览器，打印对话框中选择「另存为 PDF」
  • 打印尺寸：A4（210×297mm），推荐横向/纵向根据内容量选择

🖼 JPG 导出

  • 点击「导出 JPG」按钮，利用内联的 html2canvas 库对整个 #app 区域进行截图
  • 自动下载为 product-detail-{产品名}.jpg，分辨率基于 window.devicePixelRatio（Retina屏为 2x）
  • 可选「截取当前视口」或「截取完整长页」（通过 scrollY + fullPage 参数控制）

📦 PSD 导出

  • 点击「生成 PSD 说明书」，在页面内生成一份 Markdown 图层规格文档，包含：
    • 画布尺寸（宽×高px）
    • 每个文字图层：内容、字号、字重、颜色、坐标（x/y）
    • 每个图片图层：路径/url、尺寸（w×h）、坐标（x/y）
    • 背景图层：颜色值或渐变参数
  • 同时提供一份 Python 脚本（generate_psd.py，使用 psd-tools + Pillow），用户在本地运行即可生成 .psd 文件
  • 说明书和脚本均可一键复制/下载

关于 PSD 的说明：PSD 是 Adobe Photoshop 专有二进制格式，浏览器端无法原生生成完整编辑层级的 PSD（psd-tools 在 Python 端可生成带图层的 PSD）。控制台提供的 Python 脚本已封装好所有层级逻辑，用户只需安装 pip install psd-tools Pillow 后运行即可。

常见问题

Q: 图片太少怎么办？

建议至少 1 张产品主图 + 1 张场景图。细节图不足 3 张时，系统自动显示占位符。

Q: 图片加载失败/显示空白？

使用 npx http-server . -p 8080 启动本地服务，通过 http://localhost:8080/ 访问，而不是直接双击打开 HTML 文件。

Q: 不想用预设风格，想要自定义配色？

直接告知主色 + 强调色的 HEX 值，或者生成后用控制台的「色彩主题」自定义。

Q: 需要添加/删除产品？

通过右侧控制台「产品管理」区操作，也可在生成的 HTML 中直接修改 defaultProducts 数组。

Q: 需要更多卖点（超过 4 个）？

在 features 数组中增加元素，布局会自动调整。

Q: 适配特定电商平台（如淘宝 750px 宽度）？

生成后修改 CSS 中 --max-width: 750px，并在 hero section 去掉 min-height: 90vh。

Q: 导出的 PDF 图片显示不完整/空白？

请使用本地 HTTP 服务（npx http-server . -p 8080）打开 HTML，直接双击打开时跨域限制会导致图片加载失败，影响打印效果。

Q: 导出 JPG 时图片变模糊？

JPG 导出使用 html2canvas，受浏览器渲染精度影响。在 Retina 屏下已自动开启 2x 缩放，如需更高分辨率可将 scale: 2 改为 scale: 3（在生成的 HTML 源码中搜索 html2canvas）。

Q: 如何生成 PSD？

在控制台「导出中心」点击「生成 PSD 说明书」，复制生成的 Python 脚本，在本地安装 pip install psd-tools Pillow 后运行，即可输出 .psd 文件。

Q: 文字替换后刷新页面会丢失吗？

会，因为修改保存在内存中。如需持久化，在「文字编辑」面板点击「下载修改后 HTML」，将已修改文案写入 HTML 文件保存到本地。

与其他 Skill 的关系

| Skill | 关系 | 说明 | |-------|------|------| | poster-generator | 互补 | poster 输出静态图片，本 Skill 输出可交互 HTML | | ui-ux-pro-max | 参考 | 本 Skill 的设计风格预设参考其电商设计指南 | | canvas-design | 互补 | canvas 输出视觉设计图，本 Skill 输出产品详情页 | | psd-to-animated-h5 | 进阶 | 如有 PSD 设计稿，可先用该 Skill 分析布局再生成 |