电商滋补品详情页设计

SKILL.md

---
name: ecommerce-tcm-product-page
description: "电商滋补品详情页全流程 skill。适用于淘宝/天猫等平台的滋补品（虫草、灵芝、桑黄等）详情页设计。触发词：做详情页、详情页设计、产品详情页、export slices、3000x4000、保障功效板块等。当用户要求创建电商产品详情页特别是滋补大健康品类时，使用此 skill。"
agent_created: true
---

# 电商滋补品详情页 · 全流程 Skill

## 概述

本 skill 封装了从 0 到 1 完成一个滋补品电商详情页的完整工作流，包括：HTML 页面构建、合规文案审查、图片处理、切片导出。核心设计风格：深色木纹基调 + 金色强调色，适配移动端 750px 宽度。

## 何时使用

- 用户说"做详情页"、"设计产品详情页"
- 用户提到"滋补品"、"虫草"、"灵芝"、"桑黄"等大健康品类
- 用户要求导出"3000x4000 切片"或"详情页图片"
- 用户提到淘宝/天猫详情页设计

## 设计系统

| 元素 | 色值 | 说明 |
|------|------|------|
| 深色背景 | `#2C2416` | 主背景（wood-dark） |
| 中深色 | `#3D3224` | 交替区块背景（wood-mid） |
| 金色强调 | `#C9A962` | 标签、边框、强调文字 |
| 金色柔和 | `#D4B896` | 次要金色文字 |
| 奶油白 | `#F5F0E8` | 主文字色（text-light） |
| 奶油暖 | `#EDE5D5` | 次要文字色（cream-warm） |
| 文字淡化 | `rgba(245,240,232,0.48)` | 说明文字（text-muted） |

**字体：** Noto Serif SC / PingFang SC，serif 后备
**基准宽度：** 750px（移动端优先）
**圆角：** 2px（极简，不花哨）

## 标准板块顺序（购买决策逻辑）

```
封面 → 开场痛点 → 品牌信任 → 鉴别科普 → 古籍背书 → 成分背书
→ 功效说明 → 适用人群 → 使用方法 → 产品展示 → 规格参数 → 售后保障 → 底部发货
```

**核心逻辑：** 吸引注意 → 痛点共鸣 → 建立信任 → 教会鉴别 → 证明价值 → 促成下单

## 完整工作流

### 第一步：收集产品信息

向用户确认以下信息（已有则跳过）：
- 产品名称、核心卖点
- 产地（海拔、具体产区）
- 鉴别要点（正品 vs 混淆品）
- 功效描述（注意合规措辞）
- 适用人群
- 使用方法
- 产品规格（净重、保质期、储存方式）
- 图片素材路径

### 第二步：创建 HTML 详情页

- 文件命名：`产品名_v序号_日期.html`
- 使用内联 CSS（`<style>` 标签内），不引用外部 CSS 文件
- 宽度固定 `750px`，`margin: 0 auto`
- 每个板块用 `<section>` 或 `<div class="pic">` 包裹
- 图片路径使用绝对路径或 `assets_产品名/` 相对路径

**关键 CSS 类：**
- `.hero` — 封面大图区（全屏视口）
- `.h2` — 板块标题（36px，cream 色）
- `.h2-sub` — 板块副标题（16px，muted）
- `.body` — 正文（21px，cream-warm）
- `.tag` — 特征标签（inline-block，金色边框）
- `.card` — 内容卡片（左金色边框）
- `.benefit-card` — 功效卡片
- `.spec-card` — 规格卡片
- `.guar-card` — 保障卡片
- `.gold-card` — 底部金色发货卡片

### 第三步：合规文案审查（⚠️ 关键）

滋补品详情页**绝对禁止**以下表述：

| 禁止类型 | 违规示例 | 替代方案 |
|---------|---------|---------|
| 医疗功效 | "抗肿瘤"、"治疗"、"治愈" | "传统食材，温和调理" |
| 绝对化承诺 | "假一赔十"、"无效退款" | "品种不符承诺赔付" |
| 夸大宣传 | "最强"、"第一" | 删除或改为客观描述 |
| 权威性暗示 | "药典认证"、"官方推荐" | 引用具体古籍原文 |

**功效描述合规模板：**
- ✅ "传统食材，注重日常养生人群的温和之选"
- ✅ "日常守护，换季也不容易感到疲惫"
- ❌ "抗肿瘤"、"治疗结节"

**每次修改文案后，必须重新审查合规问题。**

### 第四步：预览与迭代

使用 `preview_url` 工具预览 HTML 文件，根据用户反馈迭代：

1. 首次预览：确认整体布局和配色
2. 字体检查：确保手机端可读（正文 ≥ 19px，标题 ≥ 24px）
3. 图片检查：确认图片路径正确、显示正常
4. 逐板块确认，每轮只改 1-2 个板块

**铁律：精准修改，不越界**
- 用户要求修改 A 板块 → 只改 A 板块
- 如需改动其他部分 → 先询问用户确认
- 绝对禁止"顺手"改其他内容

### 第五步：图片处理

**水印去除（OpenCV inpainting）：**
```python
# 水印位置需要针对具体图片测定
# 通用流程：
# 1. 用 PIL 打开图片，获取尺寸
# 2. 创建 mask：水印区域填 255，其他区域填 0
# 3. cv2.inpaint() 修复
```

**暗角处理（暖金渐变融合）：**
- 适用于：需要融入深色背景的产品图
- 方法：四角添加暖金色半透明渐变
- 工具：PIL `ImageDraw` + `Image.composite()`

**色温调整：**
```python
# 冷色调 → 暖胡桃木色系
# 方法：增加 R 通道、轻微增加 G 通道、保持 B 通道
```

### 第六步：导出切片

**目标规格：** 3000x4000 JPG（淘宝详情页标准）

**导出流程：**

1. 用 `agent-buddy` 打开 HTML 文件
2. 用 JavaScript 获取每个 `<section>` 的 `getBoundingClientRect()` 位置
3. 用 `agent-browser screenshot --full` 截取整页
4. 用 Python PIL 按位置裁剪每个板块
5. 将裁剪结果缩放并居中放置在 3000x4000 画布上
6. 保存为 JPG（quality=95）

**输出文件命名：**
```
01_封面_3000x4000.jpg
02_开场_3000x4000.jpg
03_多角度_3000x4000.jpg
...
```

**保存位置：** 桌面/`产品名第一版详情页/` 文件夹

### 第七步：最终验证

- [ ] 所有切片尺寸均为 3000x4000
- [ ] 字体在 3000x4000 画布上清晰可读
- [ ] 无水印、无拉伸变形
- [ ] 文案已通过合规审查
- [ ] HTML 源文件已备份到工作目录

## 快捷脚本

### `scripts/export_slices.py`

自动将 HTML 详情页导出为 3000x4000 JPG 切片。

**用法：**
```bash
python3 scripts/export_slices.py \
  --html /path/to/product.html \
  --output ~/Desktop/产品名第一版详情页/ \
  --sections 封面,开场,多角度,鉴别,保障功效,适用人群,三种喝法,产品规格,关于售后,底部发货
```

**依赖：** PIL/Pillow, agent-browser（内置）

## 参考资料

| 文件 | 内容 |
|------|------|
| `references/compliance-guidelines.md` | 滋补品电商合规审查指南 |
| `references/section-templates.md` | 各板块 HTML 模板代码片段 |
| `references/export-checklist.md` | 切片导出验证清单 |

## 常见问题

**Q：用户说"字体看不清"怎么办？**
A：直接大幅提升字体大小。经验值：保障/功效板块正文至少 28px，标题至少 27px。不要小幅调整，要"实打实放大"。

**Q：如何判断板块顺序是否合理？**
A：用"购买决策逻辑"检验：用户看到这个板块后，会不会更想买？如果某个板块"前面文字太多"导致用户流失，把它往后移。

**Q：export slices 时截图截错了板块？**
A：原因是 `getBoundingClientRect()` 返回的是相对于当前视口的位置，需要先 `scrollTo(0,0)` 再测量。或者直接在 HTML 里用 JavaScript 隐藏其他板块、只显示目标板块后再截图。

## 版本记录

| 版本 | 日期 | 变更 |
|------|------|------|
| v1 | 2026-05-26 | 初始版本，基于桑黄详情页 v51 项目经验封装 |