xiaohongshu-template

name	xiaohongshu-template
description	小红书图文模板生成器：根据活动/商品/清单数据，生成莫兰迪手账风 HTML 模板，可直接截图上传小红书。
version	1.0.0
author	magnes-studio
metadata	{"hermes":{"tags":["xiaohongshu","小红书","infographic","template","图文模板","morandi"],"related_skills":["baoyu-infographic","claude-design"]}}

小红书图文模板生成器

为小红书创作者生成可截图上传的图文模板 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 | 铁手招牌 | 🥛