79 lines
2.0 KiB
Markdown
79 lines
2.0 KiB
Markdown
---
|
||
name: product-detail-designer
|
||
description: 设计电商产品的详情页。当用户需要为产品生成详情页HTML、批量渲染SKU页面、或处理产品图片时使用此技能。
|
||
---
|
||
|
||
# Product Detail Designer
|
||
|
||
## 概述
|
||
|
||
根据产品的 SKU 和配置规范，生成对应的产品详情页 HTML，并转换为 PNG 图片。自动化处理从配置数据到最终展示页面的完整流程。
|
||
|
||
## 使用场景
|
||
|
||
- 有产品种类或 SKU 变化，需要重新生成详情页
|
||
- 有产品图片变化，需要更新详情页
|
||
- 需要批量为多个 SKU 生成对应的详情页
|
||
|
||
## 工作流程
|
||
|
||
### 步骤 1: 读取 SKU 配置
|
||
|
||
从 `产品/{产品线}/{产品名}/sku/` 目录下的 markdown 文件读取产品配置。
|
||
|
||
文件格式示例：
|
||
```
|
||
亚克力-单-AMD-A4-2G-16G.md
|
||
```
|
||
|
||
### 步骤 2: 渲染 HTML 模板
|
||
|
||
使用 `scripts/render.js` 脚本，将 SKU 数据填充到 HTML 模板中：
|
||
|
||
```bash
|
||
cd .codebuddy/skills/product-detail-designer/scripts
|
||
node render.js <sku文件路径> [输出目录]
|
||
```
|
||
|
||
模板位置：`assets/templates/{产品类型}/`
|
||
|
||
可用模板变量：
|
||
- `{{PRODUCT_NAME}}` - 产品名称
|
||
- `{{SKU_CODE}}` - SKU 编码
|
||
- `{{CPU}}` / `{{MEMORY}}` / `{{STORAGE}}` - 核心配置
|
||
- `{{TOTAL_COST}}` / `{{RETAIL_PRICE}}` - 价格信息
|
||
- `{{NOTE}}` - 备注信息
|
||
|
||
### 步骤 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
|
||
```
|
||
|
||
## 资源说明
|
||
|
||
### scripts/
|
||
|
||
- `render.js` - HTML 模板渲染脚本，读取 SKU markdown 并生成对应的 HTML 文件
|
||
|
||
### assets/templates/
|
||
|
||
- `亚克力单/` - 亚克力单机箱详情页模板（7个 HTML 模板）
|
||
- `亚克力双/` - （预留）
|
||
- 其他产品模板可按需添加
|
||
|
||
### references/
|
||
|
||
- `产品配置规范.md` - 产品设计原则、SKU 命名规则、页面设计规范
|