电商滋补品详情页设计助手
📖 技能介绍
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 文件小葱技能站7w4.net每天更新，海量AI技能等你发现。
- 宽度固定
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）：
# 水印位置需要针对具体图片测定
# 通用流程：
# 1. 用 PIL 打开图片，获取尺寸
# 2. 创建 mask：水印区域填 255，其他区域填 0
# 3. cv2.inpaint() 修复
暗角处理（暖金渐变融合）：
- 适用于：需要融入深色背景的产品图
- 方法：四角添加暖金色半透明渐变
- 工具：PIL ImageDraw + Image.composite()
色温调整：
# 冷色调 → 暖胡桃木色系
# 方法：增加 R 通道、轻微增加 G 通道、保持 B 通道
第六步：导出切片
目标规格： 3000x4000 JPG（淘宝详情页标准）
导出流程：
- 用
agent-buddy打开 HTML 文件 - 用 JavaScript 获取每个
<section>的getBoundingClientRect()位置 - 用
agent-browser screenshot --full截取整页 - 用 Python PIL 按位置裁剪每个板块
- 将裁剪结果缩放并居中放置在 3000x4000 画布上
- 保存为 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（内置）
参考资料
| 文件 | 内容 |
|---|---|
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 项目经验封装 |
🤖 AI 评测
这个 Skill 整体质量较好，完整的工作流程和详细的设计规范让滋补品详情页制作变得清晰可控，对合规问题的重视是一大亮点。缺点是文档中提到的很多参考资料和脚本在实际包中找不到，导致无法完整使用最关键的切片导出功能。如果你是专业设计师可能需要等待更新后再使用。风险提示做得不错，能帮助避免违规宣传。总体适合有一定经验的电商运营者使用，新手可能需要额外学习 HTML 和图片处理知识。
