小红书内容生成技能#

功能概述#

将任意文章/内容转换为 小红书风格 的 HTML 页面，输出多张可截图发布的图片，并附上 标题 + 正文摘要。

支持 两种风格：

• 🎨 热情风（红色系）：#FF6B6B → #FF8E53 橙红渐变，适合激情、励志、营销类内容
• 🔬 科技风（蓝紫系）：#4A90E2 → #7B68EE 蓝紫渐变，适合技术干货、科普、编程类内容

---

风格选择#

风格主色调渐变适用场景热情风#FF6B6B (珊瑚红)#FF6B6B → #FF8E53营销/励志/个人成长/情感类科技风#4A90E2 (科技蓝)#4A90E2 → #7B68EE技术干货/编程/数据库/架构类

生成内容时，根据内容主题自动选择风格：

• 数据库、缓存、架构、编程 → 科技风
• 营销、增长、个人IP、情感 → 热情风
• 可通过指令指定风格，如"用热情风生成"

---

使用方式#

方式一：发送内容给 AI#

直接把你的文章内容发给我（可以是 Markdown 或纯文本），告诉我"帮我生成小红书内容"或"做成适合小红书的格式"。

示例：

"帮我把这篇关于 Redis 缓存的文章做成小红书风格的内容"

我会自动：

1. 分析内容结构，提取核心要点
2. 根据内容类型选择合适风格（科技风/热情风）
3. 生成适配小红书的 HTML 页面（封面 + 多个内容区块）
4. 截图并发送给你
5. 提供标题和正文建议

方式二：命令行调用#

bash

cd ~/.openclaw/workspace/skills/xiaohongshu-content
bash scripts/generate_content.sh "你的内容" "输出标题" [tech|passion]

---

输出规格#

项目说明图片数量1张完整长图（包含所有内容）图片格式PNG图片宽度680px（小红书标准宽度）图片高度自动（根据内容长度）HTML输出可在浏览器打开查看完整效果截图工具wkhtmltoimage

---

HTML 模板#

技能包含两个预设模板：

科技风 (tech_style.html)#

• 主色: #4A90E2 (科技蓝)
• 渐变: #4A90E2 → #7B68EE (蓝紫渐变)
• 背景: #F0F4FF / #F8F0FF (淡蓝/淡紫)
• 强调色: #4A90E2 (蓝), #7B68EE (紫)
• 适用: 技术干货、编程、数据库、架构、DevOps 等

热情风 (passion_style.html)#

• 主色: #FF6B6B (珊瑚红)
• 渐变: #FF6B6B → #FF8E53 (橙红渐变)
• 背景: #FFF5F5 / #FFF9F0 (淡粉/淡黄)
• 强调色: #FF6B6B (红), #FF8E53 (橙)
• 适用: 营销、个人成长、情感、励志等

通用组件#

两种风格共用相同的组件结构：

• 封面卡片：emoji + 标题 + 副标题 + 标签
• 内容卡片：图标 + 标题 + 副标题 + 要点列表 + 类比框
• 对比表格：渐变色表头 + 斑马纹行
• 流程图：渐变按钮 + 箭头
• 徽章标签：圆角胶囊样式
• 总结网格：2列 Summary Card

---

截图脚本用法#

bash

cd /root/.openclaw/workspace/skills/xiaohongshu-content/outputs

# 生成长图（完整内容）
wkhtmltoimage --width 680 --quality 90 input.html output.png

# Python 截图（可获取精确尺寸）
python3 scripts/take_screenshot.py --input input.html --output output.png --width 680

---

标题与摘要生成规则#

标题公式#

text

[符号] + [核心关键词] + [效果词] + [平台词]

示例（科技风）：
🔍 一文搞懂MySQL索引核心原理
💡 5分钟理解Redis缓存雪崩
🚀 微服务架构避坑指南

示例（热情风）：
🔥 这个思维模式，悄悄拉开了差距
✨ 3个技巧，让你的效率翻倍
💪 坚持30天，发生惊人变化

摘要公式#

text

[一句话概括价值] + [时间/难度暗示] + [行动引导]

示例：
Redis缓存穿透、击穿、雪崩一篇全搞懂，收藏慢慢看～
#Redis #缓存技术 #后端开发 #知识分享

标签策略#

• 3-5个标签
• 结构：1个领域词 + 1-2个技术词 + 1个平台词 + 1个情绪词
• 示例：#MySQL #数据库索引 #技术干货 #知识分享

---

依赖项#

依赖用途安装Python3截图脚本系统自带wkhtmltoimageHTML渲染引擎apt install wkhtmltopdfImageMagick图片裁剪apt install imagemagick

---

文件结构#

text

xiaohongshu-content/
├── SKILL.md                    # 本技能说明
├── scripts/
│   ├── generate_content.sh     # 内容生成主脚本
│   ├── take_screenshot.py      # Python截图工具
│   └── open_preview.sh         # 浏览器打开预览
├── templates/
│   ├── tech_style.html         # 科技风模板（蓝紫渐变）
│   └── passion_style.html      # 热情风模板（红橙渐变）
└── outputs/                    # 生成的内容目录

---

示例输出#

用户提供内容 → AI 生成以下内容：

标题： 🔍 MySQL 索引全景图解｜用图书馆类比秒懂索引底层逻辑

正文：

聚簇索引、非聚簇索引、ICP、MRR、GROUP BY、最左前缀 —— 这篇用"图书馆"类比帮你彻底搞懂！ 收藏慢慢看 💪 #MySQL #数据库索引 #技术干货 #知识分享 #后端开发

图片： 1 张完整长图（可发布到小红书）

---

数学公式渲染#

如果内容包含数学公式，需要使用 katex 进行渲染。

引入方式#

html

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css">
<script src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.js"></script>

渲染方式#

公式使用 katex.render() 渲染到指定的 <span> 或 <div> 元素中：

javascript

katex.render(
  "\\text{score}(t,d) = IDF(t) \\times \\frac{f(t,d) \\cdot (k_1 + 1)}{f(t,d) + k_1 \\cdot (1 - b + b \\cdot \\frac{|d|}{avgdl})}",
  document.getElementById("formula-main"),
  { displayMode: true, throwOnError: false }
);

注意事项#

• 注意大小写：CDN 加载的是小写 katex，调用时也要用小写
• 使用 window.onload：确保 DOM 加载完成后再渲染公式
• 给公式留空容器：先在 HTML 中放一个空的 <span id="formula-xxx"></span>，JS 渲染到容器中
• 设置 displayMode: true：公式较长时使用行内显示模式

示例公式容器#

html

<div class="formula-box">
  <span id="formula-main"></span>
</div>

---

注意事项#

1. 图片宽度固定 680px，适配小红书笔记宽度
2. 长图高度根据内容自动增长，完整包含所有信息
3. 标签使用 emoji + 文字，增加视觉吸引力
4. 摘要控制在 100 字以内，小红书显示完整
5. 标题控制在 20 字以内，超过会被截断
6. 风格默认选择：技术类 → 科技风，营销/个人类 → 热情风
7. 代码块格式：代码语句之间用 <br> 换行保持独立行，函数体/回调/链式调用使用 2 空格缩进，禁止所有代码挤在一行