小红书图文生成技能

当用户需要生成小红书风格的图文内容、将热点话题转为小红书笔记或批量生成图文笔记时，使用本技能。

When to Use

用户要求生成小红书图文、笔记、种草内容
需要将热点话题、新闻事件转为小红书风格内容
需要批量生成多篇图文笔记
需要为公众号/社群运营创作小红书风格内容

完整执行流程

Step 1: 话题分析（2 分钟）

1.1 获取热点数据

从脉脉、微博、知乎等平台获取热门话题
提取话题关键词、热度、讨论点
识别情绪倾向（吃瓜/吐槽/种草/科普）

1.2 确定内容方向

类型	特点	适用场景
吃瓜爆料	热点事件 + 网友评论	大厂八卦、娱乐热点
干货科普	知识点 + 图表说明	职场技巧、行业科普
种草推荐	使用体验 + 对比	产品推荐、好物分享
情感共鸣	个人经历 + 金句	职场感悟、生活吐槽

Step 2: 文案创作（5 分钟）

2.1 标题创作公式

情绪词 + 核心话题 + 数字/对比 + emoji
示例：美团年终奖开奖❗️L7 系数 0.7 破防了😭

2.2 正文结构

开场白（20-30 字）：吸引注意，引出话题
分隔线：---
核心内容（3-5 段）：网友评论/知识点/对比
互动引导：评论区聊聊/你怎么看
标签：5-10 个相关话题标签

2.3 小红书文风要求

✅ 多用 emoji（每段 1-2 个）
✅ 短句 + 分段（每段≤3 行）
✅ 口语化表达（家人们/谁懂啊/破防了）
✅ 情绪强烈（炸锅/绝了/真香）
❌ 避免长段落、官方语气、枯燥说明

Step 3: HTML 生成（3 分钟）

3.1 页面结构

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{标题}</title>
  <style>
    /* 小红书风格样式 */
    .page { width: 375px; height: 667px; }
    .cover { 渐变背景 + 大标题 }
    .inner-page { 内页样式 }
    .comment-card { 评论卡片 }
    .info-box { 信息框 }
    .question-box { 互动问题 }
  </style>
</head>
<body>
  <!-- 封面页 -->
  <div class="page cover">...</div>
  
  <!-- 内页 1-N -->
  <div class="page inner-page">...</div>
</body>
</html>

3.2 设计规范

元素	规格	说明
页面尺寸	375x667px	小红书标准比例
封面背景	渐变色	使用话题相关品牌色
字体大小	标题 28px/正文 13-15px	确保移动端可读性
颜色方案	主色 + 辅助色	不超过 3 种主色
emoji 使用	封面 1 个 + 内页适量	增强视觉吸引力

3.3 页面数量

封面页：1 页（必须）
内页：2-4 页（根据内容量）
总计：3-5 页为佳

Step 4: 图片转换（2 分钟）

4.1 调用 html-pages-to-images 技能

调用 html-pages-to-images 技能
参数：
- htmlFile: HTML 文件路径
- outputDir: 输出图片目录
- pageWidth: 375
- pageHeight: 667
- selector: .page

4.2 输出规格

格式：PNG
分辨率：375x667px @2x（750x1334 实际像素）
质量：95%+
命名：page-01.png（封面）、page-1.png、page-2.png...

Step 5: 交付用户（1 分钟）

5.1 输出内容

输出目录结构：
{xiaohongshu-output}/{topic-name}/
├── {topic-name}.html          # HTML 源文件
├── images/
│   ├── page-01.png            # 封面图
│   ├── page-1.png             # 内页 1
│   ├── page-2.png             # 内页 2
│   └── page-3.png             # 内页 3
└── copywriting.md             # 文案（标题 + 正文 + 标签）

5.2 发布建议

最佳发布时间
互动引导话术
预期数据范围

技能依赖

技能	用途	必需
`html-pages-to-images`	HTML 转图片	✅
`maimai-fetch`	获取脉脉热点	❌
`wechat-article-typeset`	排版参考	❌

输出示例

文件名示例

meituan-bonus/meituan-bonus.html（美团年终奖）
dewu-melon/dewu-double-melon.html（得物双瓜）
ali-qwen/ali-qwen-drama.html（阿里 Qwen 人事）

文案示例

标题：美团年终奖开奖❗️L7 系数 0.7 破防了😭

正文：
家人们谁懂啊！！美团年终奖终于开奖了🎉
今年系数到底怎么样？来听听大厂同学们的真实反馈👇

---

🔥 热搜第一：美团年终奖开奖，今年系数如何？

💬 评论区炸锅了：
「L7 符合预期 0.7 是在恶心人吗？」
「L8 系数 0.8，无股票，是 2.1 还是 2.2？」

---

❓ 互动话题：
你今年系数多少？年终奖满意吗？
评论区聊聊👇

#美团 #年终奖 #大厂爆料 #互联网大厂 #职场

模板库

模板 1：吃瓜爆料型

适用：大厂八卦、热点事件结构：

封面：热点话题 + 情绪 emoji
内页 1：事件概述
内页 2：时间线/对比
内页 3：网友评论
内页 4：互动问题

模板 2：干货科普型

适用：职场技巧、行业知识结构：

封面：核心问题 + 数字
内页 1-2：知识点讲解
内页 3：案例/图表
内页 4：总结 + 互动

模板 3：种草推荐型

适用：产品推荐、好物分享结构：

封面：产品名称 + 使用效果
内页 1：使用体验
内页 2：对比测评
内页 3：购买建议 + 互动

注意事项

版权问题
- 使用原创文案，不直接复制他人内容
- 网友评论需匿名处理
- 品牌名称合理使用
内容合规
- 避免敏感话题
- 不传播未经证实的消息
- 标注"仅供参考"等免责声明
图片质量
- 确保文字清晰可读
- 检查颜色对比度
- 避免截图模糊
发布节奏
- 单账号每日发布≤3 篇
- 避免相同时间段发布
- 注意内容多样性

文案格式要求（重要）

⚠️ copywriting.md 必须为纯文本：不要使用 markdown 表格语法

✅ 对比信息用纯文本列表：

字节：7000 人 | 转正率 60-70% | 薪资 15-25k
腾讯：5000 人 | 转正率 50-60% | 薪资 14-22k

✅ 价格信息用纯文本：

官方版本：免费 + 付费 | 基础功能免费
上门安装：666 元 | 二手平台服务

✅ Q&A 用纯文本：
```
Q1: 问题内容？
A：回答内容
```

HTML 页面布局规范
- ⚠️ 禁止使用表格：HTML 中也不要用<table>，用compare-list 样式
- ✅ 使用列表代替表格：用 compare-list 样式展示对比信息
- ✅ 使用信息框：用 info-box 样式展示基本信息
- ✅ 使用高亮框：用 highlight-box 样式强调重点内容
- ✅ 每页内容饱满：使用固定高度 667px，确保内容填满页面
- ✅ 字体大小适中：列表 13px，评论 11px，确保移动端可读性
页面布局规范
- 封面页：大标题 + 副标题 + emoji + 徽章
- 内页：Page Header + 内容模块 + 评论 + 互动
- 每页元素：4-6 个模块，确保内容饱满不溢出
- 页面间距：padding 24px 18px，模块间距 12px
🚨 严格排版限制（重要！）

页面尺寸锁定：
```
.page {
  width: 375px;
  height: 667px;  /* 固定高度，不可更改 */
  overflow: hidden;  /* 隐藏溢出内容 */
  position: relative;
}
```
内页布局约束：
```
.inner-page {
  padding: 30px 28px 35px;  /* 上 30px，左右 28px，下 35px */
  display: flex;
  flex-direction: column;
  max-height: 667px;  /* 不可超过页面高度 */
}
```
内容高度分配原则：
- Page Header：50px（包含标题和分隔线）
- 信息框：每个 80-120px（根据内容量）
- 代码块：每个 60-80px
- 互动区：150px（固定）
- 标签区：80px（固定）
每页最大内容量：
- 信息框：≤3 个
- 代码块：≤2 个
- 列表项：≤6 个
- 总行数：≤35 行（13px 字体）
间距规范：
```
/* 模块间距 */
.info-box { margin-bottom: 14px; }
.code-block { margin: 12px 0; }
.step-item { margin-bottom: 12px; }

/* 底部留白检查 */
.inner-page > :last-child {
  margin-bottom: 0;  /* 最后一个元素不额外留白 */
}
```
防溢出检查清单：
- 所有元素在 667px 高度内
- 底部无多余留白（内容贴近底部边缘）
- 无内容被截断（检查 overflow）
- 文字行数可控（每段≤3 行）
- 图片尺寸适配（最大宽度 319px）
内容适配策略：
- 如果内容过多 → 拆分为多页
- 如果内容过少 → 增加示例/说明
- 如果底部留白 → 调整 padding 或增加内容
- 如果内容溢出 → 删减文字或拆分页面
视觉平衡检查：
- 封面页：内容垂直居中，上下留白均衡
- 内页：内容从上到下均匀分布
- 最后一页：互动区 + 标签，底部留白≤20px
🎨 颜色与对比度规范

可读性要求：
- 正文颜色：#333 或 #555（深灰色）
- 背景颜色：白色或浅灰色（#f5f5f5 或更浅）
- 对比度：≥4.5:1（WCAG AA 标准）
品牌色使用：
- 主色：#667eea（紫蓝渐变起点）
- 辅助色：#764ba2（紫）、#f093fb（粉）
- 强调色：#FF6B6B（警告）、#48BB78（成功）
渐变背景规范：
```
/* 封面渐变 */
background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);

/* 信息框渐变 */
background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
```
📱 移动端适配检查

字体大小范围：
- 大标题：28-36px（封面）
- 小标题：16-20px（内页标题）
- 正文：13-15px
- 辅助文字：11-12px
- 标签：11px
最小点击区域：
- 按钮高度：≥40px
- 链接间距：≥8px
图片清晰度：
- 输出分辨率：750x1334px（@2x）
- 文字边缘清晰（抗锯齿开启）
- 二维码最小尺寸：120x120px

快速开始

命令行调用

# 使用默认配置
node index.js --topic "美团年终奖"

# 完全自定义
node index.js \
  --topic "美团年终奖" \
  --output-dir "./xiaohongshu-output" \
  --template "gossip" \
  --pages 4

代码调用

import { generateXiaohongshuArticle } from './index.js';

const result = await generateXiaohongshuArticle({
  topic: '美团年终奖',
  hotData: [...],  // 热点数据
  template: 'gossip',
  outputDir: './xiaohongshu-output'
});

console.log(result);

技能目录结构

skills/xiaohongshu-article-generator/
├── SKILL.md              # 技能说明（本文件）
├── index.js              # 主入口
├── generator.js          # 文案 +HTML 生成
├── templates/
│   ├── gossip.js         # 吃瓜爆料模板
│   ├── knowledge.js      # 干货科普模板
│   └── recommendation.js # 种草推荐模板
├── styles/
│   └── xiaohongshu.css   # 小红书样式
├── package.json
└── README.md

效果评估

指标	及格	良好	优秀
点赞数	500+	2000+	10000+
收藏数	200+	800+	5000+
评论数	100+	300+	2000+
转化率	5%+	10%+	20%+

提升技巧：

标题抓眼球（数字 + 情绪）
内容有干货（真实信息）
互动引导清晰
发布时间准确

小红书图文生成器