2.0 KiB
2.0 KiB
name, description
| name | description |
|---|---|
| product-detail-designer | 设计电商产品的详情页。当用户需要为产品生成详情页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 模板中：
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 脚本：
cd ../image-tools/scripts
node convert-html-to-png.js
步骤 4: 裁剪图片水印
使用 image-tools 技能的 remove-watermark.js 脚本：
node remove-watermark.js
资源说明
scripts/
render.js- HTML 模板渲染脚本，读取 SKU markdown 并生成对应的 HTML 文件
assets/templates/
亚克力单/- 亚克力单机箱详情页模板（7个 HTML 模板）亚克力双/- （预留）- 其他产品模板可按需添加
references/
产品配置规范.md- 产品设计原则、SKU 命名规则、页面设计规范