电商滋补品详情页设计

商业运营

电商滋补品详情页全流程技能，适用淘宝/天猫等平台的虫草、灵芝、桑黄等滋补品详情页设计。触发词包括：做详情页、详情页设计、产品详情页、export slices、3000x4000、保障功效板块等。当用户请求创建滋补大健康类电商产品详情页时使用。

电商运营

下载量

安装量

收藏量

★ 4.8

综合评分ⓘ

概述

更多信息

电商滋补品详情页 · 全流程 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（极简，不花哨）

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

text

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

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

完整工作流#

第一步：收集产品信息#

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

产品名称、核心卖点
产地（海拔、具体产区）
鉴别要点（正品 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 文件，根据用户反馈迭代：

首次预览：确认整体布局和配色
字体检查：确保手机端可读（正文 ≥ 19px，标题 ≥ 24px）
图片检查：确认图片路径正确、显示正常
逐板块确认，每轮只改 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（淘宝详情页标准）

导出流程：

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

输出文件命名：

text

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（内置）