電商滋補品詳情頁設計助手
📖 技能介紹
電商滋補品詳情頁 · 全流程 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 混淆品）
- 功效描述（注意合規措辭）
- 適用人群
- 使用方法
發現更多技能外掛，請訪問7w4.net。
- 產品規格（淨重、保質期、儲存方式）
- 圖片素材路徑
第二步：建立 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）：
# 水印位置需要針對具體圖片測定
# 通用流程：
# 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 和圖片處理知識。
