66 lines
1.8 KiB
Markdown
66 lines
1.8 KiB
Markdown
---
|
||
name: product-detail-designer
|
||
description: 设计电商产品的详情页。当用户需要为产品生成详情页HTML、批量渲染SKU页面、或处理产品图片时使用此技能。
|
||
---
|
||
|
||
# Product Detail Designer
|
||
|
||
## 概述
|
||
|
||
根据产品的 SKU 和配置规范，生成对应的产品详情页 HTML，并转换为 PNG 图片。自动化处理从配置数据到最终展示页面的完整流程。
|
||
|
||
## 使用场景
|
||
|
||
- 有产品种类或 SKU 变化，需要重新生成详情页
|
||
- 有产品图片变化，需要更新详情页
|
||
- 需要批量为多个 SKU 生成对应的详情页
|
||
|
||
## 工作流程
|
||
|
||
### 步骤 1: 读取 SKU 配置
|
||
|
||
从 `产品` 目录下找到对应的产品目录
|
||
|
||
|
||
### 步骤 2: 生成 HTML 文件
|
||
|
||
#### 详情页组成部分
|
||
- 购买须知
|
||
- 亚克力机箱需要自己组装，店铺会提供安装视频
|
||
- 受成本限制，产品无法做到十全十美，完美主义者慎拍
|
||
- 配置清单
|
||
- 功能描述
|
||
- 产品实拍图
|
||
- 配件清单
|
||
- 包装展示
|
||
- 常见问题
|
||
1. 产品是否支持双CPU？
|
||
2. 产品是否支持双内存条
|
||
3. 产品是否支持双硬盘
|
||
- 严格按照详情页组成生成详情页，多余的删除掉
|
||
- 需要用的产品图片，都放在对应产品目录的image目录下
|
||
- html 按照1000*1000的分辨率生成
|
||
- 一个产品有多个sku,但一个产品只需要一个详情页，不需要为每个sku生成详情页
|
||
- 详情页放到每个产品对应的`详情`目录下
|
||
- 配色采用科技风格
|
||
- 单个页面放不下，采用-1 -2 的方式拆分多个页面
|
||
|
||
|
||
|
||
### 步骤 3: HTML 转 PNG 图片
|
||
|
||
使用 `image-tools` 技能的 `convert-html-to-png.js` 脚本：
|
||
|
||
```bash
|
||
cd ../image-tools/scripts
|
||
node convert-html-to-png.js
|
||
```
|
||
|
||
### 步骤 4: 裁剪图片水印
|
||
|
||
使用 `image-tools` 技能的 `remove-watermark.js` 脚本：
|
||
|
||
```bash
|
||
node remove-watermark.js
|
||
```
|