# 小红书内页设计原则（2026-06-26，v6 Playwright 方案）

## 核心原则（来自 claude-design + Notion 设计系统）

1. **每页一个视觉焦点**：不是四张平均卡片，而是一个核心数字/结论占据视觉中心
2. **排版建立层级，不是装饰**：用字号、粗细、颜色区分主次，不是用框和线
3. **少即是多**：每个元素必须值得存在，去掉一切装饰性内容
4. **暖色中性 + 一个强调色**：绿系为主，橙色只标记最重要的 1-2 个元素
5. **底图必须保留**：内页.png 是品牌底板，内容渲染后 alpha_composite 叠加，绝不许替换

## 技术方案

- **渲染引擎**：Playwright Chromium（不是 WeasyPrint/wkhtmltoimage——它们中文有 bug）
- **输出格式**：HTML 透明底 → Playwright 截图 → PIL 叠底图
- **字体**：内嵌 base64（优设标题黑 + 文泉驿正黑），不依赖系统字体
- **封面**：仍用 Pillow（固定模板，不需要 HTML）

## 页面结构（4区制）

品牌条(72px) → 标题区(动态) → 内容区(≤3区块) → 页脚(72px)

## 色彩

- 深绿 #285A37：品牌条、标题、关键数字
- 橙色 #E67E22：仅每页最核心的 1-2 个元素
- 浅绿 #DCEEE2：卡片背景、交替行
- 浅橙 #FCEBD7：首张卡片背景
- 近黑 #1E3C28：正文
- 中绿 #649B73：说明文字、分隔

## 已验证不可行的方案

- WeasyPrint：中文字符右侧裁剪（标题末尾 2-3 字不渲染）
- wkhtmltoimage：完全不渲染中文（QtWebKit 字体问题）
- Gemini 生图：中文文字乱码，数据不可控

## 验证方法

- Qwen-VL (百炼 CLI)：`bl vision analyze --image <path> --prompt "文字重叠了吗？" --non-interactive`
- 像素扫描：`score_xhs_image.py`（numpy 5维评分，注意 1/4 缩放陷阱）
- 文件大小：HTML 方案 76-130KB/页 vs Pillow 1.1MB+/页