rednote-convert-skill

将 Markdown 文件一键转换为小红书风格的图片系列，适合将技术文章、教程、笔记等内容发布到小红书平台。

效果预览

以下是一篇 Python 数据处理教程转换后的效果（共 14 张图）：

封面页	代码块页	内容页

功能特点

• 自动分页：根据内容高度智能分页，标题不会孤立在页尾
• 封面页：自动提取 Markdown 中的 H1 标题和第一段描述生成封面
• 语法高亮：代码块自动高亮，支持 Python、JavaScript、Bash 等多种语言，并显示语言标签
• 表格渲染：斑马纹表格样式，圆角边框，清晰易读
• 引用块：绿色左边框 + 淡绿背景，视觉层次分明
• 中文字体：使用 PingFang SC，适合中文内容排版
• 高分辨率输出：2x 设备像素比，输出 2160×2880 物理像素，文字清晰锐利

图片规格

属性	值
尺寸	1080 × 1440 像素（3:4 竖版）
格式	PNG
分辨率	2x（物理像素 2160×2880）
背景色	#FAFAF8（米白色）
字体	PingFang SC
主题色	珊瑚红 #FF6B6B + 青绿 #4ECDC4

项目结构

rednote-convert-skill/
├── SKILL.md                          # Claude Code Skill 定义文件
├── assets/
│   └── template.html                 # HTML 渲染模板（含 CSS + JS 分页逻辑）
├── examples/
│   ├── test-article.md               # 示例 Markdown 文件
│   └── test-article-rednote/         # 示例输出图片（01.png ~ 14.png）
└── README.md

工作原理

这是一个 Claude Code Skill，通过以下步骤完成转换：

1. 读取 Markdown：读取用户指定的 .md 文件
2. 注入模板：将内容 URL 编码后注入 assets/template.html
3. 本地 HTTP 服务：启动 python3 -m http.server 供 Playwright 访问
4. 浏览器渲染：Playwright MCP 打开页面，自动完成 Markdown 解析和智能分页
5. 截图输出：对每个 .page 元素截图，以 2x 分辨率保存为 PNG
6. 清理临时文件：关闭 HTTP 服务，删除临时 HTML 文件

使用方法

在 Claude Code 中，直接用自然语言描述需求即可触发该 Skill：

把 /path/to/article.md 转换成小红书图片

将这篇文章生成小红书风格的图片系列

转换完成后，图片会保存在 Markdown 文件同级目录下的 <文件名>-rednote/ 文件夹中。

例如：

• 输入：/Users/liubin/articles/python-tips.md
• 输出：/Users/liubin/articles/python-tips-rednote/01.png、02.png...

依赖环境

• Claude Code：需要配置 Playwright MCP
• Python 3：用于 HTTP 服务和内容编码（系统自带）
• Playwright MCP：浏览器自动化截图

分页逻辑说明

assets/template.html 中的 JavaScript 实现了贪心装箱算法：

• 每页有效内容高度为 1240px（1440 - 上下边距 - 页脚预留）
• 代码块和表格若超过页面高度，单独占一页
• 标题后剩余空间不足 100px 时，标题移至下一页，避免标题孤立
• 封面页单独渲染，不参与内容分页