# Xiaohongshu Template

> 小红书图文模板生成器：根据活动/商品/清单数据，生成莫兰迪手账风 HTML 模板，可直接截图上传小红书。

- Skill: `tianfeicoding/xiaohongshu-template` (Agent Skill, multi-file: 3 files)
- Install (CLI): `npx skillmds@latest add tianfeicoding/xiaohongshu-template`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tianfeicoding/xiaohongshu-template/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: tianfeicoding (https://skillmd.com/u/tianfeicoding)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tianfeicoding/xiaohongshu-template

---


# 小红书图文模板生成器

为小红书创作者生成可截图上传的图文模板 HTML 文件。

## 适用场景

- 市集/活动推荐合集
- 商品测评对比
- 旅行攻略清单
- 美食探店合集
- 任何需要「一列 N 个」卡片式展示的内容

## 设计风格

- **比例**: 3:4（小红书图文标准，375x500px）
- **风格**: 莫兰迪手账风（morandi-journal）
- **色调**: 米色背景 + 灰绿标题 + 赭石重点
- **装饰**: Washi 胶带、手绘波浪线、角落 emoji

## 使用方法

### 方式一：直接调用（推荐）

提供数据，生成模板文件：

```
生成小红书图文模板：
- 标题: 上海三月市集攻略
- 副标题: 3个免费面包市集
- 活动列表:
  1. 外滩国际面包节 | 3月14-15日、21-22日 | BFC外滩枫径 | 免费 | 200+面包店
  2. 超级美好面包节 | 3月12-15日 | 上海万象城 | 免费 | 150家品牌
  3. 海派法式生活节 | 3月13-15日 | 新天地时尚二期 | 免费 | 生活方式市集
```

### 方式二：使用模板文件

1. 复制 `templates/base.html` 到工作目录
2. 修改其中的数据占位符
3. 浏览器打开，F12 → Device Toolbar → 375x500
4. 截图保存，上传小红书

## 模板结构

```
xiaohongshu-template/
├── SKILL.md                 # 本文件
├── templates/
│   └── base.html            # 基础模板（可直接编辑复用）
└── references/
    └── style-guide.md       # 设计规范参考
```

## 数据格式

生成模板时需要提供：

| 字段 | 说明 | 示例 |
|------|------|------|
| title | 主标题 | 上海三月市集攻略 |
| subtitle | 副标题 | 3个免费面包市集 周末逛起来 |
| items | 条目列表（3-5个最佳） | 见下 |

每个 item 需要：
- name: 名称
- time: 时间
- location: 地点
- price: 门票/价格（通常写「免费」或具体金额）
- highlight: 亮点描述（可包含数字强调）
- icon: emoji 图标（🥐🍞☕ 等）

## 输出

- HTML 文件路径（默认保存到 `/tmp/xiaohongshu-output/`）
- 使用说明（如何截图上传）

## 自定义选项

| 选项 | 默认值 | 可选值 |
|------|--------|--------|
| 比例 | 3:4 | 1:1, 4:3, 9:16 |
| 风格 | morandi-journal | 可扩展 |
| 卡片数量 | 3 | 2-5 |
| 显示标签 | 否 | 是/否 |
| 显示页码 | 否 | 是/否 |

## 注意事项

1. 小红书图文建议 **3-5 个条目**，太多会拥挤
2. 截图时用浏览器开发者工具锁定 **375x500** 尺寸
3. 字体已优化到最小可读大小，不建议再缩小
4. 免费标签统一显示为「FREE」绿色标签

## 示例调用

```
用 xiaohongshu-template 生成一个咖啡探店合集：
- 标题: 上海春日咖啡地图
- 副标题: 5家值得打卡的独立咖啡馆
- 店铺:
  1. 三顿半原力飞行 | 愚园路 | 人均35 | 特调咖啡 | ☕
  2. Ops Cafe | 太原路 | 人均40 | 季节限定 | 🍵
  3. Metal Hands | 永嘉路 | 人均30 | 铁手招牌 | 🥛
```