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

概述

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

何时使用

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

设计系统

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

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

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

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

完整工作流

第一步：收集产品信息

向用户确认以下信息（已有则跳过）：

• 产品名称、核心卖点
• 产地（海拔、具体产区）
• 鉴别要点（正品 vs 混淆品）
• 功效描述（注意合规措辞）
• 适用人群
• 使用方法
• 产品规格（净重、保质期、储存方式）
• 图片素材路径

第二步：创建 HTML 详情页

• 文件命名：产品名_v序号_日期.html
• 使用内联 CSS（\x3Cstyle> 标签内），不引用外部 CSS 文件
• 宽度固定 750px，margin: 0 auto
• 每个板块用 \x3Csection> 或 \x3Cdiv 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）：

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

暗角处理（暖金渐变融合）：

• 适用于：需要融入深色背景的产品图
• 方法：四角添加暖金色半透明渐变
• 工具：PIL ImageDraw + Image.composite()

色温调整：

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

第六步：导出切片

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

导出流程：

1. 用 agent-buddy 打开 HTML 文件
2. 用 JavaScript 获取每个 \x3Csection> 的 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 切片。

用法：

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

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

参考资料

常见问题

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

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

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

版本记录