diff --git a/.codebuddy/skills/image-tools/SKILL.md b/.codebuddy/skills/image-tools/SKILL.md new file mode 100644 index 0000000..2204e5b --- /dev/null +++ b/.codebuddy/skills/image-tools/SKILL.md @@ -0,0 +1,71 @@ +--- +name: image-tools +description: 图片处理工具集，用于检查图片信息、HTML转PNG、裁剪水印等操作。当用户需要处理产品图片、转换HTML为图片、或去除图片水印时使用此技能。 +--- + +# Image Tools + +## Overview + +提供产品图片处理相关功能，包括检查图片元信息、HTML页面截图、裁剪水印等操作。适用于产品文档和图片批量处理场景。 + +## Quick Start + +使用前需安装依赖： + +```bash +cd tools/image-tools/scripts +npm install +``` + +## Tasks + +### 检查图片信息 + +查看图片的宽度、高度、格式等元信息： + +```bash +cd tools/image-tools/scripts +node check-image-info.js +``` + +**用途**：批量检查产品图片尺寸，确保符合规格要求。 + +### HTML 转 PNG + +将HTML文件转换为PNG图片截图： + +```bash +cd tools/image-tools/scripts +node convert-html-to-png.js +``` + +**用途**：将产品配置清单HTML转换为PNG图片，用于产品展示。 + +### 裁剪水印 + +裁剪图片底部水印区域（默认裁剪底部300px）： + +```bash +cd tools/image-tools/scripts +node remove-watermark.js +``` + +**用途**：批量处理产品图片，去除底部水印。 + +## Configuration + +脚本默认处理路径为 `产品/飞牛 NAS/fyd-亚克力机箱 - 单/详情` 目录。如需修改： + +- **check-image-info.js**: 修改 `imageDir` 变量 +- **convert-html-to-png.js**: 修改 `detailDir` 变量及文件过滤条件 +- **remove-watermark.js**: 修改 `imageDir` 和 `CROP_BOTTOM_HEIGHT` 常量 + +## Resources + +### scripts/ + +- `check-image-info.js` - 图片信息检查脚本 +- `convert-html-to-png.js` - HTML转PNG截图脚本 +- `remove-watermark.js` - 水印裁剪脚本 +- `package.json` - Node.js 依赖配置 diff --git a/check-image-info.js b/.codebuddy/skills/image-tools/scripts/check-image-info.js similarity index 100% rename from check-image-info.js rename to .codebuddy/skills/image-tools/scripts/check-image-info.js diff --git a/convert-html-to-png.js b/.codebuddy/skills/image-tools/scripts/convert-html-to-png.js similarity index 100% rename from convert-html-to-png.js rename to .codebuddy/skills/image-tools/scripts/convert-html-to-png.js diff --git a/package-lock.json b/.codebuddy/skills/image-tools/scripts/package-lock.json similarity index 100% rename from package-lock.json rename to .codebuddy/skills/image-tools/scripts/package-lock.json diff --git a/package.json b/.codebuddy/skills/image-tools/scripts/package.json similarity index 100% rename from package.json rename to .codebuddy/skills/image-tools/scripts/package.json diff --git a/remove-watermark.js b/.codebuddy/skills/image-tools/scripts/remove-watermark.js similarity index 100% rename from remove-watermark.js rename to .codebuddy/skills/image-tools/scripts/remove-watermark.js diff --git a/.codebuddy/skills/product-detail-designer/SKILL.md b/.codebuddy/skills/product-detail-designer/SKILL.md new file mode 100644 index 0000000..a342803 --- /dev/null +++ b/.codebuddy/skills/product-detail-designer/SKILL.md @@ -0,0 +1,78 @@ +--- +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 [输出目录] +``` + +模板位置：`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 命名规则、页面设计规范 diff --git a/.codebuddy/skills/product-detail-designer/assets/templates/亚克力单/使用场景.html b/.codebuddy/skills/product-detail-designer/assets/templates/亚克力单/使用场景.html new file mode 100644 index 0000000..2610ef1 --- /dev/null +++ b/.codebuddy/skills/product-detail-designer/assets/templates/亚克力单/使用场景.html @@ -0,0 +1,91 @@ + + + + + + 使用场景 - {{PRODUCT_NAME}} + + + +
+
使用场景
+ +
+
+
🏠
+
家庭数据中心
+
集中存储家庭照片、视频、文档，全家共享访问
+
+
+
💼
+
小型办公
+
团队文件共享，数据集中管理，提升工作效率
+
+
+
🎬
+
影音娱乐
+
搭建家庭影院，存储高清电影，随时观看
+
+
+
📚
+
学习资料库
+
存储学习资料、电子书籍，构建个人知识管理系统
+
+
+
+ + diff --git a/.codebuddy/skills/product-detail-designer/assets/templates/亚克力单/功能描述.html b/.codebuddy/skills/product-detail-designer/assets/templates/亚克力单/功能描述.html new file mode 100644 index 0000000..a96b47f --- /dev/null +++ b/.codebuddy/skills/product-detail-designer/assets/templates/亚克力单/功能描述.html @@ -0,0 +1,107 @@ + + + + + + 功能描述 - {{PRODUCT_NAME}} + + + +
+
功能描述
+ +
+
+
💾
+
+

私有云存储

+

搭建个人私有云，安全存储照片、视频、文档等重要资料

+
+
+
+
🔄
+
+

数据备份

+

自动备份手机、电脑数据，防止数据丢失，多重保护

+
+
+
+
🌐
+
+

远程访问

+

随时随地远程访问，在外也能查看家中文件资料

+
+
+
+
👥
+
+

家庭共享

+

家庭成员共享存储空间，照片视频轻松分享

+
+
+
+
🤖
+
+

智能家居

+

支持Home Assistant，打造智能家居控制中心

+
+
+
+
+ + diff --git a/.codebuddy/skills/product-detail-designer/assets/templates/亚克力单/包装展示.html b/.codebuddy/skills/product-detail-designer/assets/templates/亚克力单/包装展示.html new file mode 100644 index 0000000..b5fc9d5 --- /dev/null +++ b/.codebuddy/skills/product-detail-designer/assets/templates/亚克力单/包装展示.html @@ -0,0 +1,101 @@ + + + + + + 包装展示 - {{PRODUCT_NAME}} + + + +
+
包装展示
+ +
+
+
📦
+
产品外箱
+
+
+
💻
+
主机
+
+
+
🔌
+
电源适配器
+
+
+
🔗
+
网线
+
+
+
🔋
+
电池
+
+
+
📄
+
说明书
+
+
+ +
整机包装，开箱即用
+
+ + diff --git a/.codebuddy/skills/product-detail-designer/assets/templates/亚克力单/商品卖点.html b/.codebuddy/skills/product-detail-designer/assets/templates/亚克力单/商品卖点.html new file mode 100644 index 0000000..89069d0 --- /dev/null +++ b/.codebuddy/skills/product-detail-designer/assets/templates/亚克力单/商品卖点.html @@ -0,0 +1,122 @@ + + + + + + 商品卖点 - {{PRODUCT_NAME}} + + + +
+
商品卖点
+
{{PRODUCT_NAME}}
+ +
+
+
💎
+
+

透明亚克力材质

+

高透光亚克力，清晰展示内部结构，科技感十足

+
+
+
+
🎨
+
+

时尚外观设计

+

简约现代设计，透明机身，美观大方，适合各种环境

+
+
+
+
⚡
+
+

低功耗静音

+

超低功耗设计，无风扇静音运行，7x24小时稳定

+
+
+
+
🔧
+
+

易于维护

+

透明设计便于观察，拆卸方便，升级维护简单

+
+
+
+
🌡️
+
+

散热优良

+

开放式设计，散热效果优异，保证系统稳定运行

+
+
+
+
💰
+
+

超高性价比

+

入门级NAS首选，功能齐全，价格亲民

+
+
+
+
+ + diff --git a/.codebuddy/skills/product-detail-designer/assets/templates/亚克力单/配件清单.html b/.codebuddy/skills/product-detail-designer/assets/templates/亚克力单/配件清单.html new file mode 100644 index 0000000..845fcf1 --- /dev/null +++ b/.codebuddy/skills/product-detail-designer/assets/templates/亚克力单/配件清单.html @@ -0,0 +1,96 @@ + + + + + + 配件清单 - {{PRODUCT_NAME}} + + + +
+
配件清单
+ +
+
+
📦
+
主机 x1
+
✓
+
+
+
🔌
+
电源适配器 x1
+
✓
+
+
+
🔗
+
网线 x1
+
✓
+
+
+
🔋
+
电池 x1
+
✓
+
+
+
📝
+
说明书 x1
+
✓
+
+
+
+ + diff --git a/.codebuddy/skills/product-detail-designer/assets/templates/亚克力单/配置清单-1.html b/.codebuddy/skills/product-detail-designer/assets/templates/亚克力单/配置清单-1.html new file mode 100644 index 0000000..b4d2dd6 --- /dev/null +++ b/.codebuddy/skills/product-detail-designer/assets/templates/亚克力单/配置清单-1.html @@ -0,0 +1,187 @@ + + + + + + 配置清单 (1/2) - {{PRODUCT_NAME}} + + + +
+
+
配置清单 (1/2)
+
{{PRODUCT_SUBTITLE}}
+
{{SKU_CODE}}
+
+ +
+
机箱类型
+
+
+ 亚克力-单 + 单SATA口 +
+
+ 亚克力-双 + 双SATA口 +
+
+
+ +
+
处理器 (CPU)
+
+
+ Intel N2840 + 双核 2.16GHz +
+
+ Intel N2930 + 四核 1.83GHz +
+
+ AMD A4 + 双核 2.0GHz +
+
+ Intel 1037U + 双核 1.8GHz +
+
+ Intel J1900 + 四核 2.0GHz +
+
+ Intel J3160 + 四核 1.6GHz +
+
+
+ +
+
已选配置
+
+
+ CPU + {{CPU}} +
+
+ 内存 + {{MEMORY}} +
+
+ 系统盘 + {{STORAGE}} +
+
+ 机箱 + {{CASE}} +
+
+
+ +
+ 成本合计：¥{{TOTAL_COST}} +
+
+ + diff --git a/.codebuddy/skills/product-detail-designer/assets/templates/亚克力单/配置清单-2.html b/.codebuddy/skills/product-detail-designer/assets/templates/亚克力单/配置清单-2.html new file mode 100644 index 0000000..3fc6712 --- /dev/null +++ b/.codebuddy/skills/product-detail-designer/assets/templates/亚克力单/配置清单-2.html @@ -0,0 +1,154 @@ + + + + + + 配置清单 (2/2) - {{PRODUCT_NAME}} + + + +
+
+
配置清单 (2/2)
+
{{SKU_CODE}}
+
+ +
+
随机配件
+
+
+ 电源 + {{POWER}} +
+
+ 硬盘线 + {{CABLE}} +
+
+ 电池 + {{BATTERY}} +
+
+ 网线 + {{ETHERNET_CABLE}} +
+
+
+ +
+
费用明细
+
+
+ 运费 + ¥{{SHIPPING_FEE}} +
+
+ 包装费 + ¥{{PACKAGING_FEE}} +
+
+ 装机费 + ¥{{ASSEMBLY_FEE}} +
+
+ 总成本 + ¥{{TOTAL_COST}} +
+
+
+ +
+
建议零售价
+
¥{{RETAIL_PRICE}}
+
{{NOTE}}
+
+
+ + diff --git a/.codebuddy/skills/product-detail-designer/references/产品配置规范.md b/.codebuddy/skills/product-detail-designer/references/产品配置规范.md new file mode 100644 index 0000000..349c47c --- /dev/null +++ b/.codebuddy/skills/product-detail-designer/references/产品配置规范.md @@ -0,0 +1,59 @@ +# 产品配置规范参考 + +## 亚克力机箱配置原则 + +- 亚克力机箱-单：可安装所有单SATA口主板 +- 亚克力机箱-双：可安装所有双SATA口主板 +- 内存规格：2G-16G, 2G-32G, 4G-64G, 4G-128G +- 支持 CPU：N2840, N2930, AMD-A4, 1037U, J1900, J3160, i3 + +## SKU 命名规则 + +格式：`亚克力-单-{CPU}-{内存}-{系统盘}` + +示例：`亚克力-单-AMD-A4-2G-16G` + +## SKU Markdown 文件格式 + +```markdown +# 产品信息 + +| 字段 | 配件名称 | 价格 | +:|------|---------|------:| +| **产品编号** | - | - | +| **产品名称** | 飞牛NAS 亚克力-单 AMD-A4 | - | +| **产品型号** | 亚克力-单-AMD-A4-2G-16G | - | +| **CPU** | AMD-A4 | ¥45 | +| **内存** | D3-2G | ¥13 | +| **系统盘** | mSATA-16G | ¥15 | +| **机箱** | 亚-单 | ¥42 | +| **电源** | 电源-60W | ¥12 | +| **硬盘线** | 硬盘线-单 | ¥4 | +| **电池** | 电池 | ¥1 | +| **网线** | 网线 | ¥1 | +| **运费** | 运费 | ¥10 | +| **包装费** | 包装费 | ¥5 | +| **装机费** | 装机费 | ¥10 | +| **总成本** | - | ¥158 | +| **建议零售价** | - | ¥205 | +| **备注** | 亚克力机箱，单SATA口，入门级配置 | - | +``` + +## 详情页组成部分 + +1. **配置清单-1.html** - 机箱类型、CPU 选项、已选配置 +2. **配置清单-2.html** - 随机配件、费用明细、建议零售价 +3. **商品卖点.html** - 产品核心卖点 +4. **功能描述.html** - 功能列表 +5. **使用场景.html** - 应用场景展示 +6. **配件清单.html** - 随机配件列表 +7. **包装展示.html** - 包装内容展示 + +## 页面设计规范 + +- 尺寸：1000x1000px +- 背景：青绿色渐变 `#e0f2f1 → #b2dfdb → #80cbc4` +- 圆角卡片：20px +- 主色调：#00695c (深青色) +- 强调色：#26a69a (青绿色) +- 字体：Microsoft YaHei / PingFang SC diff --git a/.codebuddy/skills/product-detail-designer/scripts/render.js b/.codebuddy/skills/product-detail-designer/scripts/render.js new file mode 100644 index 0000000..d6f2bd8 --- /dev/null +++ b/.codebuddy/skills/product-detail-designer/scripts/render.js @@ -0,0 +1,132 @@ +const fs = require('fs'); +const path = require('path'); + +// SKU 字段映射表 +const FIELD_MAP = { + '{{PRODUCT_NAME}}': 'productName', + '{{PRODUCT_SUBTITLE}}': 'productSubtitle', + '{{SKU_CODE}}': 'skuCode', + '{{CPU}}': 'cpu', + '{{MEMORY}}': 'memory', + '{{STORAGE}}': 'storage', + '{{CASE}}': 'case', + '{{POWER}}': 'power', + '{{CABLE}}': 'cable', + '{{BATTERY}}': 'battery', + '{{ETHERNET_CABLE}}': 'ethernetCable', + '{{SHIPPING_FEE}}': 'shippingFee', + '{{PACKAGING_FEE}}': 'packagingFee', + '{{ASSEMBLY_FEE}}': 'assemblyFee', + '{{TOTAL_COST}}': 'totalCost', + '{{RETAIL_PRICE}}': 'retailPrice', + '{{NOTE}}': 'note' +}; + +// 从 SKU markdown 文件解析字段 +function parseSkuFile(skuPath) { + const content = fs.readFileSync(skuPath, 'utf-8'); + const data = {}; + + content.split('\n').forEach(line => { + const match = line.match(/:\s*\|\s*(.+?)\s*\|\s*(.+?)\s*\|/); + if (match) { + const [, fieldName, value] = match; + data[fieldName.trim()] = value.trim(); + } + }); + + return data; +} + +// 将 SKU 数据映射为模板变量 +function mapSkuToVariables(skuData) { + const cpu = skuData['CPU'] || ''; + const memory = skuData['内存'] || ''; + const storage = skuData['系统盘'] || ''; + const caseType = skuData['机箱'] || ''; + + return { + '{{PRODUCT_NAME}}': `飞牛NAS ${caseType}`, + '{{PRODUCT_SUBTITLE}}': '亚克力机箱 透明系列', + '{{SKU_CODE}}': skuData['产品型号'] || '', + '{{CPU}}': cpu, + '{{MEMORY}}': memory, + '{{STORAGE}}': storage, + '{{CASE}}': caseType, + '{{POWER}}': skuData['电源'] || '电源-60W', + '{{CABLE}}': skuData['硬盘线'] || '硬盘线-单', + '{{BATTERY}}': skuData['电池'] || '电池', + '{{ETHERNET_CABLE}}': skuData['网线'] || '网线', + '{{SHIPPING_FEE}}': skuData['运费']?.replace('¥', '') || '10', + '{{PACKAGING_FEE}}': skuData['包装费']?.replace('¥', '') || '5', + '{{ASSEMBLY_FEE}}': skuData['装机费']?.replace('¥', '') || '10', + '{{TOTAL_COST}}': skuData['总成本']?.replace('¥', '') || '0', + '{{RETAIL_PRICE}}': skuData['建议零售价']?.replace('¥', '') || '0', + '{{NOTE}}': skuData['备注'] || '' + }; +} + +// 渲染 HTML 模板 +function renderTemplate(templatePath, variables) { + let html = fs.readFileSync(templatePath, 'utf-8'); + + Object.entries(variables).forEach(([placeholder, value]) => { + html = html.split(placeholder).join(value); + }); + + return html; +} + +// 主函数：生成亚克力单详情页 +function generateDetailPages(skuFilePath, outputDir) { + const skuData = parseSkuFile(skuFilePath); + const variables = mapSkuToVariables(skuData); + + const skuCode = variables['{{SKU_CODE}}']; + const productType = '亚克力单'; + const templateDir = path.join(__dirname, '..', 'assets', 'templates', productType); + + // 创建输出目录 + const productOutputDir = path.join(outputDir, skuCode); + if (!fs.existsSync(productOutputDir)) { + fs.mkdirSync(productOutputDir, { recursive: true }); + } + + // 模板列表 + const templates = [ + '配置清单-1.html', + '配置清单-2.html', + '商品卖点.html', + '功能描述.html', + '使用场景.html', + '配件清单.html', + '包装展示.html' + ]; + + templates.forEach(template => { + const templatePath = path.join(templateDir, template); + if (!fs.existsSync(templatePath)) { + console.log(`跳过（模板不存在）: ${template}`); + return; + } + + const html = renderTemplate(templatePath, variables); + const outputPath = path.join(productOutputDir, template); + fs.writeFileSync(outputPath, html, 'utf-8'); + console.log(`已生成: ${outputPath}`); + }); + + console.log(`\n完成！共生成 ${templates.length} 个 HTML 文件到: ${productOutputDir}`); +} + +// 使用示例 +const skuFile = process.argv[2]; +const outputDir = process.argv[3] || path.join(__dirname, '..', '..', '..', '产品', '飞牛 NAS', 'fyd-亚克力机箱 - 单', '详情'); + +if (!skuFile) { + console.log('用法: node render.js [输出目录]'); + console.log('示例: node render.js ../产品/飞牛NAS/fyd-亚克力机箱 - 单/sku/亚克力-单-AMD-A4-2G-16G.md'); + process.exit(1); +} + +generateDetailPages(skuFile, outputDir); diff --git a/.codebuddy/skills/sku设计/SKILL.md b/.codebuddy/skills/sku设计/SKILL.md new file mode 100644 index 0000000..1ffcfd3 --- /dev/null +++ b/.codebuddy/skills/sku设计/SKILL.md @@ -0,0 +1,26 @@ +--- +name: sku设计 +description: This skill should be used when the user asks to design or plan a SKU (Stock Keeping Unit) for a product. It provides structured guidance for creating SKU codes, organizing product variants, and documenting product configurations. Trigger scenarios include: "设计一个SKU"、"规划产品SKU"、"SKU配置"等。 +--- + +# SKU 设计 + +## Overview + +[TODO: 描述此技能的作用和使用场景] + +## SKU 编码规则 + +[TODO: 定义 SKU 编码的命名规范和结构] + +## 产品配置模板 + +[TODO: 定义不同产品类型的配置模板] + +## 设计流程 + +[TODO: 描述 SKU 设计的标准流程] + +## 参考资源 + +[TODO: 如有参考文档，在此引用] diff --git a/产品/飞牛 NAS/fyd-亚克力机箱 - 单/详情/亚克力机箱 - 单_商品实拍图.html b/产品/飞牛 NAS/fyd-亚克力机箱 - 单/详情/亚克力机箱 - 单_商品实拍图.html index b62fb6d..4012f37 100644 --- a/产品/飞牛 NAS/fyd-亚克力机箱 - 单/详情/亚克力机箱 - 单_商品实拍图.html +++ b/产品/飞牛 NAS/fyd-亚克力机箱 - 单/详情/亚克力机箱 - 单_商品实拍图.html @@ -52,12 +52,13 @@ object-fit: cover; } .image-label { - padding: 15px; + padding: 20px 15px 15px; text-align: center; font-size: 24px; color: #00796b; font-weight: bold; background: rgba(255,255,255,0.95); + margin-top: auto; } diff --git a/产品/飞牛 NAS/fyd-亚克力机箱 - 单/详情/亚克力机箱 - 单_商品实拍图.png b/产品/飞牛 NAS/fyd-亚克力机箱 - 单/详情/亚克力机箱 - 单_商品实拍图.png index e18b567..2530f7d 100644 Binary files a/产品/飞牛 NAS/fyd-亚克力机箱 - 单/详情/亚克力机箱 - 单_商品实拍图.png and b/产品/飞牛 NAS/fyd-亚克力机箱 - 单/详情/亚克力机箱 - 单_商品实拍图.png differ