Xiaohongshu Article Generator

小红书图文生成技能

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

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 设计规范

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 发布建议

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

技能依赖

输出示例

文件名示例

• 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：购买建议 + 互动

注意事项

1. 版权问题

   • 使用原创文案，不直接复制他人内容
   • 网友评论需匿名处理
   • 品牌名称合理使用

2. 内容合规

   • 避免敏感话题
   • 不传播未经证实的消息
   • 标注"仅供参考"等免责声明

3. 图片质量

   • 确保文字清晰可读
   • 检查颜色对比度
   • 避免截图模糊

4. 发布节奏

   • 单账号每日发布≤3 篇
   • 避免相同时间段发布
   • 注意内容多样性

5. 文案格式要求（重要）

   • ⚠️ copywriting.md 必须为纯文本：不要使用 markdown 表格语法
   • ✅ 对比信息用纯文本列表：

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

   • ✅ 价格信息用纯文本：

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

   • ✅ Q&A 用纯文本：

     Q1: 问题内容？
     A：回答内容
     

6. HTML 页面布局规范

   • ⚠️ 禁止使用表格：HTML 中也不要用<table>，用compare-list 样式
   • ✅ 使用列表代替表格：用 compare-list 样式展示对比信息
   • ✅ 使用信息框：用 info-box 样式展示基本信息
   • ✅ 使用高亮框：用 highlight-box 样式强调重点内容
   • ✅ 每页内容饱满：使用固定高度 667px，确保内容填满页面
   • ✅ 字体大小适中：列表 13px，评论 11px，确保移动端可读性

7. 页面布局规范

   • 封面页：大标题 + 副标题 + emoji + 徽章
   • 内页：Page Header + 内容模块 + 评论 + 互动
   • 每页元素：4-6 个模块，确保内容饱满不溢出
   • 页面间距：padding 24px 18px，模块间距 12px

8. 🚨 严格排版限制（重要！）

   页面尺寸锁定：

   .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

9. 🎨 颜色与对比度规范

   可读性要求：

   • 正文颜色：#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));
   

10. 📱 移动端适配检查

    字体大小范围：

    • 大标题：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

效果评估

提升技巧：

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