---
name: sku-htmlpage
description: 写详情页 HTML (抖店 PDP 详情图 750px 分段). 用户说「写详情页」「跑 HTML <款号>」时触发. 包含 13 段骨架 + 字体 v2.3 + 命名 v2.6 + 文案 v2.4 (13 铁律) + Spec v2.5 (必查 go2 1_04).
---

# SKU 详情页 HTML — v3.0 模板（锁定 2026-05-15）

> 抖店 PDP 详情图 (750×N) lookbook 节奏. 跨 SKU 复用基线: `assets/products/发财Rich1991/L7825/pdp_html/L7825_detail_page.html`

---

## §1 模板诉求 + 调性

- **13 段 lookbook 节奏**（vs 信息流式罗列），对标 The Row / Khaite / Toteme / ICICLE 之禾
- **750px 宽**（抖店详情图截图标准）
- **中文 80% / 英文 20%**（中文为主，英文 caps 装饰小字）
- **跨 SKU 复用**：固定段不动，SKU 数据替换，文案按 §5 原则 + §6 命名法生成
- **show, don't tell**：让产品自证，不写自我标榜（"QUIET LUXURY EDITORIAL" / "if you know, you know" 都禁用）

---

## §2 字体策略 v2.3（锁定 — 2 字体严格）

| 字体 | 用法 |
|---|---|
| **Inter** (300/400/500) | 所有英文：eyebrow caps / colorway-en / atelier-en / spec-en / micro-en / pdp-meta / footer-meta / footer-mark "MAYAGI" |
| **Noto Sans SC** (300/400/500) | 所有中文：h1 / h2 / body / colorway-cn / atelier-cn / sub-cn / spec-cn / micro-cn / service-strip |

### 铁律（不可违反）

- 英文标题不做大字（永远 caps + letter-spacing 装饰小字角色，跟 The Row Centra No.2 / Khaite 自定义 sans 同思路）
- 中文不分衬线 / 无衬线（统一 Noto Sans SC，靠字号 / 字距 / 字重分层）
- **弃用**：Fraunces / Playfair Display / Noto Serif SC / Cormorant Garamond（中文衬线宋体跟现代衬线英文气质不和；多字体 = 视觉不统一）

### 字体加载

```html
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500&family=Noto+Sans+SC:wght@300;400;500&display=swap" rel="stylesheet">
```

### 字号 / 字距 / 字重体系（750px viewport）

| 角色 | 字体 | 字号 | 字重 | letter-spacing | line-height |
|---|---|---|---|---|---|
| h1 大标题 | Noto Sans SC | 26px | 400 | 0.15em | 1.5 |
| h2 章节 | Noto Sans SC | 22px | 400 | 0.12em | 1.5 |
| h2 模特子段 | Noto Sans SC | 18px | 400 | 0.12em | 1.5 |
| colorway 大字 | Noto Sans SC | 22px | 400 | 0.3em | — |
| atelier quote | Noto Sans SC | 18px | 400 | 0.15em | 1.85 |
| body 长文 | Noto Sans SC | 14px | 300 | 0.06em | 2 |
| sub-cn caps | Noto Sans SC | 12px | 300 | 0.15em | — |
| eyebrow / sub-en caps | Inter | 11px | 400 | 0.4em uppercase | — |
| atelier-en caps | Inter | 11px | 400 | 0.3em uppercase | — |
| spec-label-cn | Noto Sans SC | 13px | 400 | 0.1em | — |
| spec-label-en caps | Inter | 10px | 400 | 0.25em uppercase | — |
| spec-value-cn | Noto Sans SC | 13px | 300 | 0.04em | 1.7 |
| spec-value-en | Inter | 11px | 400 | 0.1em | 1.6 |
| micro-en | Inter | 11px | 400 | 0.15em | — |
| micro-cn | Noto Sans SC | 12px | 300 | 0.08em | — |
| pdp-header-name | Noto Sans SC | 19px | 400 | 0.12em | — |
| pdp-header-meta | Inter | 11px | 400 | 0.25em uppercase | — |
| service-strip | Noto Sans SC | 11px | 300 | 0.25em | 2 |
| footer-mark MAYAGI | Inter | 14px | 400 | 0.5em | — |
| footer-meta | Inter | 10px | 400 | 0.3em uppercase | — |

---

## §3 色卡 + 间距

```css
:root {
  --bg: #F5F2EC;          /* 暖米卡纸 / 全局底色 */
  --ink: #1A1A1A;         /* 深炭 / 主文字（非纯黑）*/
  --muted: #8A8278;       /* 暖灰 / 副文字 */
  --line: #E5E1D9;        /* hairline 分隔线 */
  --espresso: #3D3229;    /* 浓缩棕 / atelier quote 主色 */
  --neutral-50: #FAF8F3;  /* service strip 灰底 */
}

.section { padding: 80px 40px; }       /* standard */
.section.tight { padding: 60px 40px; } /* image 后紧凑段 */
.section.flush { padding: 0; }         /* 图全幅无 padding */

body { max-width: 750px; margin: 0 auto; line-height: 1.7; }
```

### 禁用色

- ❌ 纯黑 `#000000` → 用 `#1A1A1A`
- ❌ 纯白 `#FFFFFF` → 用 `#FAF8F3` / `#F5F2EC`
- ❌ 任何饱和度 > 20% 彩色 / 红 / 橙 / 亮黄
- ❌ 圆角 > 0（圆角 = 廉价感，luxury 用方角）

---

## §4 13 段 HTML 骨架

> 字段类型：[FIXED] = 跨 SKU 不动 / [SKU] = SKU 元数据 / [COPY] = 文案生成（§5 原则）/ [GO2] = 必查 go2 排版页 1_04
> 完整代码见 `assets/products/发财Rich1991/L7825/pdp_html/L7825_detail_page.html`

| 段 | 内容 | 字段类型 | 模板规则 |
|---|---|---|---|
| 1 | HERO 全屏图 | [SKU] top_down_3x4 或 dual_3x4 | 视觉钩子（双色 + signature 一眼可见）|
| 2 | PDP Header Anchor | [SKU+COPY] 命名 · 款号 · 品类 + Inter caps meta | 格式：`<中文命名> · <款号> · <中文品类>` / meta：`<EN 命名> · SS 26` / **无价位**（铁律 9）/ ⛔ **不加 MMXXVI 罗马年** |
| 3 | 品牌叙事 | [COPY] eyebrow 季 + h1-cn 灵感主题 + sub-en + body-cn 灵感故事 | 见 §5 原则 |
| 4 | 双色对比 / DUAL COLORWAYS | [SKU+COPY] dual_3x4 + h2-cn 双色名 + body-cn 副 | 单色款删此段 / 三色款适配 |
| 5 | 黑款 silhouette + 命名 | [SKU+COPY] black_side_3x4 + colorway-cn + colorway-en | colorway 见 §6 |
| 6 | 棕款 silhouette + 命名 | [SKU+COPY] brown_side_3x4 + colorway-cn + colorway-en | 多 colorway 重复段 |
| 7 | Signature 段 | [SKU+COPY] top_down_1x1 + h2-cn signature 名 + body-cn 描述 + micro 客观注释 | 每款 signature 不同（玳瑁跟 / 鳄鱼纹 / 蝴蝶结 / Tabi 等）|
| 8 | 模特黑款 | [SKU+COPY] **2 张全宽垂直堆叠**（standing + below_knee, 4px gap）+ h2-cn 穿搭语境 + caption | 不写"上脚"，写穿搭场景；垂直堆叠每张全宽 750px = lookbook 编辑感 |
| 9 | 模特棕款 | [SKU+COPY] **2 张全宽垂直堆叠**（seated + below_knee, 4px gap）+ h2-cn 穿搭语境 + caption | 同 8 |
| 10 | Atelier note | [COPY+GO2] atelier-cn 工艺故事 + atelier-en caps | "讲工艺不讲态度"，2 行内；产地从 go2 / 用户确认 |
| 11 | Specifications 规格表 | [GO2] 必查 go2 1_04 真实数据（§7） | 中文 label 上 / 英文 caps 下；mm 对照必填 |
| 12 | Service Strip | [FIXED] `7 天无理由 · 全国包邮 · 运费险` | **不写 "15 天预售"**（合规由抖店自动）；**不写"顺丰发货"**（go2 代发实际物流不一定）|
| 13 | Footer | [FIXED] `M A Y A G I` + 季 + `@MAYAGI` | letter-spacing 0.5em |

---

## §5 文案原则 v2.4（锁定 — 13 条铁律）

1. ⭐ **中文为主，英文为辅**（中文 80% / 英文 20%）— 英文不做大标题，永远 Inter caps + letter-spacing 装饰小字
2. ⭐ **不直译英文**
   - ❌ "T 字带 · 重做"（直译 "A T-strap, revisited."）
   - ✅ "不动声色的夏天" + 英文小字 sub `A QUIET SUMMER`
   - 检验法：把中文给中国朋友读 → 像翻译就重写
3. ⭐ **讲故事不罗列卖点**
   - ❌ "马油牛皮 · 玳瑁亚克力跟 / 90 年代极简 T 字带凉鞋的复刻"（罗列）
   - ✅ "灵感来自一双九十年代末的方头 T 字带凉鞋。它没有流行过,只是被一些人记着。"
4. ⭐ **穿搭语境替电商感**（模特段 h2）
   - ❌ "深炭黑 · 上脚"（电商腔）
   - ✅ "黄昏的散步" / "走过的路"（诗意句）
5. ⭐ **诗意比喻 / 客观注释 二元化**
   - 抒情段（h1 / h2 / body / atelier）— 诗意 / 短 / 有画面感
   - 客观段（micro / spec / 数字 / 单位）— 准确 / 直白 / 不文学化
6. ⭐ **不写自我标榜**
   - ❌ Footer "QUIET LUXURY EDITORIAL"（标榜即破）
   - ❌ "if you know, you know"（社交货币不能由品牌自己说）
   - ✅ 让产品自证 — show, don't tell
7. ⭐ **不承诺耐久 / 不量化**
   - ❌ "可以重复穿八个夏天"（合规风险 + 反 quiet luxury）
   - ✅ Toteme 法："made to last and be cherished" / 中文不译
8. ⭐ **不在 PDP 强调"15 天预售"** — 合规由抖店后台自动展示
9. ⭐ **PDP 文案不展示价位** — 抖店后台自动展示价，PDP 详情页内不写 ¥XXX = 跟 The Row / Khaite editorial PDP 一致
10. ⭐ **抖店主图位必须真 3:4 (0.75)** — OpenAI gpt-image-2 默认 size=1024×1536 实为 **2:3 (0.667 Pinterest 比例)**，抖店 3:4 容器会变形 / 加白边。**必须 PIL 裁切**：1024×1536 → **1024×1365** (PDP) / 2048×3072 → **1536×2048** (Model supersampling)。1:1 主图同理：抖店推荐 1024-1536px，禁止用 800×800（行业 1080+ 标准）
11. ⭐ **模特图 logo opacity 0.30 淡水印** — Model 1:1 + 3:4 + HTML 内嵌模特图全部 logo 用 0.30（PDP 主图 silhouette / dual / top_down 仍用 0.90）
12. ⭐ **禁止 "配一件 X" 电商腔句式** — 模特段 h2 不写 "配 一 件 灰 调 针 织" / "配 一 条 米 色 风 衣"。`配 + 量词 + 颜色 + 单品` = 电商话术 = 不要
13. ⭐ **不加 MMXXVI 罗马年** — PDP header / eyebrow / footer 都不加 `MMXXVI`。用户不懂 + 装饰过度。只保留 `SS 26` / `2026 春夏` 直白年份

---

## §6 命名法 v2.6（锁定 — 系列扩展规则）

⭐ **结构**：核心物体（中文 2 字）/ ENGLISH SINGLE WORD

### 已锁定案例

| SKU | 中文 | 英文 | 命名来源 |
|---|---|---|---|
| L7825 | **玳影** | TORTOISE | 玳瑁亚克力跟（最强 signature 元素）+ 影（诗意尾字）|
| HM2058 | **隙影** | CLEFT | 分趾缝隙（Tabi）+ 影（诗意尾字 + 双色 silhouette）|

### 命名规则（跨款扩展）

1. **中文**：核心物体 1-2 字 + 诗意尾字（影 / 光 / 纹 / 痕 / 迹 / 雾 / 暮 / 等）
2. **英文**：核心物体的英文 single word（Khaite / The Row 法）
3. **避免**：
   - ❌ 功能描述作主名（"T 字带凉鞋"）
   - ❌ 季节 / 年份作主名（除非确有 vintage vibe，如"九六 / NINETY-SIX"致敬 90s）
   - ❌ 形容词作主名（"优雅" / "复古" 反 quiet luxury）
4. **复用层级**：
   - 内部 SKU 编号（L7825）保留作 archive code（spec / 内部档案 / 部署路径）
   - 公开命名（玳影 / TORTOISE）作 PDP / 抖店标题主名
5. **跨款形成系列感**：每款 signature 不同 → 命名各异；统一为"诗意中文 2 字"风格 = 系列识别度

### PDP Header 显示格式

- name 大字：`<中文命名> · <款号> · <中文品类>` 例 `玳影 · L7825 · 细带凉鞋`
- meta 小字：`<EN 命名> · <季>` 例 `TORTOISE · SS 26`
- ⛔ **不写价位**（§5 铁律 9）
- ⛔ **不写 MMXXVI**（§5 铁律 13）

### 品类词建议

- ✅ 「细带凉鞋」「线条凉鞋」「夹趾凉鞋」（凉鞋类）
- ✅ 「方头单鞋」「软底芭蕾」「分趾平底」（平底单鞋类）
- ✅ 「猫跟鞋」「中跟单鞋」「Slingback」（中跟类）
- ❌ 避免：「T 字凉鞋」（太技术）/「夏日凉拖」（太直白）/「优雅单鞋」（形容词主名）

### 抖店商品标题示例（≤ 15 字）

- L7825 → `MAYAGI 玳影 玳瑁跟 细带凉鞋`
- HM2058 → `MAYAGI 隙影 方头分趾 中跟凉拖`
- 通用模板：`MAYAGI <中文命名> <signature 元素> <品类>`

---

## §7 规格强制 v2.5（必查 go2 流程）

⭐ **铁律**：spec 段所有材质 / 跟高 / 尺码 **必须查 go2 排版页 1_04 / 1_06 的"产品介绍 / Product Information"段**，绝不靠猜.

### 7.1 强制 checklist

1. Read `~/下载/GO2-<档口>-<款号>/<款号>/排版/1_04.jpg`（产品介绍段一般在此）
2. 找"产品介绍 / Product Information"段（中英对照）
3. 列出真实数据：鞋面 upper / 内里 lining / 鞋垫 insole / 鞋底 sole / 跟高 / 制作 / 尺码
4. 对照 §4 段 11 spec 表 10 个字段，**每个字段填真实数据**
5. 加平台合规字段：
   - 产地（用户提供，L7825 = 成都）
   - 执行标准（QB/T 4329-2012 = 凉鞋类休闲鞋合格品）
   - 季节（SS 26 / FW 26）
6. 加尺码 mm 对照表（每码 +5 mm）：
   - 34 = 220 mm / 35 = 225 mm / 36 = 230 mm / 37 = 235 mm / 38 = 240 mm / 39 = 245 mm / 40 = 250 mm

### 7.2 L7825 教训（猜的 6 处全错）

| 字段 | 猜 | go2 真实 |
|---|---|---|
| 内里 | 植鞣猪皮 | 羊皮 |
| 鞋床/垫 | 磨砂猪反绒 | 超纤 + 羊皮 |
| 跟高 | 2.5 cm | 约 2.0 cm |
| 鞋底 | 橡胶底 | 牛筋底 |
| 尺码 | 35-39 | 34-40 |
| 制作 | 漏 | 纯手工制作 |

### 7.3 ⚠️ 二次铁律 — 材质表述（v4.0 加）

spec 段**绝不写"超纤 / 合成皮 / PU / 人造革 / 仿皮"等合成材料词**，即使 go2 1_04 标的是"超纤+X皮"复合材质，也只保留真皮部分（如"超纤+羊皮"→只写"羊皮"或"羊反绒"）.

- ✅ **真皮表述**（按 go2 1_04 实际料）：牛皮 / 羊皮 / 羊反绒 / 马油牛皮 / 植鞣牛皮 / 猪反绒
- ❌ **合成材料词全删**：超纤 / 合成皮 / PU / 人造革 / 仿皮 / 化纤

Why：mayagi quiet luxury 调性 = 让消费者看到的全是天然真皮表述. **通用规则跨所有 SKU 适用**.

### 7.4 ⚠️ 三次铁律 — go2 spec 偶尔错（按用户实际判断）

go2 1_04 spec 偶尔标错（HM2058 标 5cm 实际 3cm，HM6124 标 1cm 实际 2cm — 用户从实物 / ref 视觉判断）.

**当 1_04 标值跟用户实际判断不符时，按用户判断写**（用户持有过样品 + 实物校准 > 档口排版页标值）.

如果用户没明说，按 1_04 写但跑款时一定**审 1 张图问用户确认跟高合理性**.

---

## §8 跨 SKU 复用流程（10 步）

跑下款详情页按此流程：

1. ⭐ **必查 go2 排版页 1_04** → 列真实规格（§7）
2. **想命名**（§6）→ 按"诗意中文 2 字 + ENGLISH SINGLE WORD" 规则
3. **复制 L7825 模板** → `cp -r assets/products/发财Rich1991/L7825/pdp_html/* assets/products/<档口>/<款号>/pdp_html/`
4. **改文件名** → `mv <款号>_detail_page.html` + 改 imgs 文件名
5. **改 段 2 PDP Header**：`<中文命名> · <款号> · <中文品类>` + Inter caps meta（不写价 / 不写 MMXXVI）
6. **改 段 3 品牌叙事**：按 §5 文案原则写 h1-cn + sub-en + 灵感故事 body-cn
7. **改 段 4 双色对比 + 段 5/6 colorway 命名**（按 §6）
8. **改 段 7 Signature 段**：每款 signature 不同（h2 名 + body 描述 + micro 客观注释）
9. **改 段 8/9 模特穿搭 h2**：穿搭语境（不写"上脚" / 不写"配一件 X"）
10. **改 段 10 Atelier note + 段 11 Specifications**（按 §7 真实数据）

---

## §9 子代理审计模板（复杂调性 / 合规审计）

跑详情页 v1 后建议派 2 个子代理审，提升模板质量：

```
Agent 1 - 抖店运营视角（6 年女鞋类目操盘）→ 合规字段 / 转化锚 / 移动端阅读 / 抖音用户心智
Agent 2 - 品牌总监视角（The Row / Khaite 总监）→ 调性 / 字体 / 文案克制度 / 编辑感
```

**Prompt 模板**（800 字 / 角色 + 项目背景 + 任务边界 + 工具偏好）：

- 用 `agent-prompt` skill 生成
- 必须包含：mayagi 项目背景（quiet luxury / ¥178-500 / 主理人是用户老婆 / 抖音 8554 粉）
- **工具偏好**：`mcp__tavily__tavily_search` 不要 SearXNG / WebSearch
- **不要做**：直接改文件 / 加 emoji / 加促销文案

**输出格式**：P0（必改）/ P1（建议改）/ P2（nice to have），每条 2-3 句"问题 + 原因 + 改法".

**冲突 vs 共识**：共识立改 / 冲突让用户拍板.

---

## §10 跨 skill 跳转

- 生 PDP / Model → `Skill(skill="sku-generate")`
- 派生 / 渲染 segments / 部署 / 上架 → `Skill(skill="sku-deploy")`

---

## §11 改进备忘

- **2026-05-15** L7825 v3.0 模板锁定（13 段 + 字体 v2.3 + 命名 v2.6 + 文案 13 铁律）
- **2026-05-15** v4.0 加二次铁律 — 材质表述去合成词（"超纤+羊皮"→"羊反绒"）
- **2026-05-15** v2.5 加三次铁律 — go2 spec 偶尔错按用户实际判断（HM2058 5→3cm）