更新产品配置和技能定义

.trae/skills/product-detail-designer/SKILL.md

@@ -0,0 +1,88 @@
+---
+name: product-detail-designer
+description: 设计电商产品的详情页。当用户需要为产品生成详情页HTML、批量渲染SKU页面、或处理产品图片时使用此技能。
+---
+
+# Product Detail Designer
+
+## 概述
+
+根据产品的 SKU 和配置规范，生成对应的产品详情页 HTML，并转换为 PNG 图片。自动化处理从配置数据到最终展示页面的完整流程。
+
+## 使用场景
+
+- 有产品种类或 SKU 变化，需要重新生成详情页
+- 有产品图片变化，需要更新详情页
+- 需要批量为多个 SKU 生成对应的详情页
+
+## 工作流程
+
+### 步骤 1: 读取 SKU 配置
+
+从 `产品` 目录下找到对应的产品目录
+
+
+### 步骤 2: 生成 HTML 文件   
+
+#### 详情页组成部分
+- 购买须知 （不需要二级标题）
+    - 亚克力机箱需要自己组装，店铺会提供安装视频
+    - 受成本限制，产品无法做到十全十美，完美主义者慎拍
+- 配置清单
+    1. 以表格的形式展示
+    2. cpu 内存 系统盘，网口，
+    3. 内存体现容量和ddr3，内存插槽数量
+    4. 支持硬盘数量，尺寸， 容量
+- 使用场景
+   1. 手机扩容
+      照片视频备份，自动同步，远程同步
+   2. 小型办公/团队协作
+      远程文件访问，多人协作，权限分级，文件共享，文件归档，在线编辑
+   3. 监控视频存储
+      小米摄像头存储，onvif协议支持
+   4. 家庭影院打造
+      流畅播放4k视频，硬解4k
+   5. 微信聊天记录备份
+      支持微信聊天记录备份
+   6. 远程访问
+      远程访问照片，视频，文件等内容
+- 产品特点
+    1. 体积小，容量大，功能强
+    2. 低耗静音
+    3. 支持远程访问
+    4. 支持wifi联网
+    5. 来电自启
+    6. 远程开关机
+- 产品实拍图
+- 飞牛系统截图
+- 配件清单
+- 包装展示
+- 常见问题
+  
+
+- 严格按照详情页组成生成详情页，多余的删除掉
+- 需要用的产品图片，都放在对应产品目录的image目录下
+- html 按照宽1500的分辨率生成
+- 一个产品有多个sku,但一个产品只需要一个详情页，不需要为每个sku生成详情页
+- 详情页放到每个产品对应的`详情`目录下
+- 配色采用绿色清晰的风格
+
+
+
+
+### 步骤 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
+```