长文 → 小红书图片(xhs-article-images)
把 Markdown 长文渲染成一组 3:4(1242×1656) 的 PNG,按 page-01.png… 编号,可直接上传小红书。全文文字与图片一张不漏。
内置五种风格(规范见 references/style-spec.md):
| 风格名 | CSS | 印象 |
|---|---|---|
| 理性暖(默认) | assets/style.css |
暖米色杂志风:米色底、棕橙强调、标题双色竖条 |
| 优雅黄 | assets/style-youya-huang.css |
浅灰底、黄色荧光记号、灰细线标题、红色打字光标收尾 |
| 灵感记 | assets/style-linggan-beiwang.css |
Apple 备忘录深色截图感:黑底、备忘录黄、每页顶栏、黄圈✓/数字列表 |
| 逻辑蓝 | assets/style-luoji-lan.css |
冷调近白底、单一强调蓝:标题粗蓝竖条、列表细蓝竖条/蓝色大数字 |
| 简约白 | assets/style-jianyue-bai.css |
纯白底黑字极简编辑器风:标题无装饰、星号*列表符、全程无彩色、黑色打字光标收尾 |
技术路线:Markdown → HTML(套用 CSS)→ Playwright 分页截图。不要用 AI 生图——中文大段文字会糊、会漏。
工作流
进度:
- [ ] 1. 拿到 Markdown
- [ ] 2. 问风格
- [ ] 3. 装依赖(仅首次)并渲染
- [ ] 4. 校验页数,预览交付
1. 拿到 Markdown
- 用户给了文件路径 → 直接用。
- 用户粘贴正文 → 先写到临时文件(建议
<标题或时间戳>.md,与图片同目录或./xhs-out/),再渲染;相对路径图片需要与 md 同目录才解析得出来。 - 都没有 → 请用户提供。
2. 问风格
每次渲染前用 AskQuestion(或列出选项)问一次:
| 选项 | 行为 |
|---|---|
| 理性暖(默认) | 不加 --style,或 --style 理性暖 |
| 优雅黄 | 加 --style 优雅黄 |
| 灵感记 | 加 --style 灵感记 |
| 逻辑蓝 | 加 --style 逻辑蓝 |
| 简约白 | 加 --style 简约白 |
用户请求里已写明风格则跳过询问。本 skill 不生成封面图,第一张就是正文。
3. 装依赖并渲染
Skill 根目录(本文件所在目录)记为 $SKILL。
首次(或 node_modules 缺失)在 $SKILL/scripts 安装:
cd "$SKILL/scripts" && npm install
渲染:
# 默认理性暖风格
node "$SKILL/scripts/render.mjs" /path/to/article.md --out /path/to/out
# 指定风格(内置:理性暖、优雅黄、灵感记、逻辑蓝、简约白;也可传自定义 .css 路径)
node "$SKILL/scripts/render.mjs" article.md --out out --style 灵感记
# 可选:指定页宽高(默认 621×828 CSS 像素 @2x → 1242×1656)
node "$SKILL/scripts/render.mjs" article.md --out out --width 621 --height 828 --scale 2
默认输出目录:与 md 同级的 <md文件名>-xhs/。产出 page-01.png…。
依赖:playwright、markdown-it(见 scripts/package.json)。系统需已安装 Chromium(本机若已有 Playwright 浏览器缓存可复用)。
4. 校验、预览、交付
- 页数 > 18 → 明确警告:小红书图文上限约 18 张,建议拆文或删图后再渲。
- 在回复中用 Markdown 图片嵌入前 2–3 张预览(读本地 PNG)。
- 告知输出目录与完整文件列表;提醒按
page-01→page-NN顺序上传。 - 用户要换风格 → 先试另一个内置风格(
--style 理性暖/--style 优雅黄/--style 灵感记/--style 逻辑蓝/--style 简约白)重跑;要微调细节 → 改对应 CSS(理性暖assets/style.css,优雅黄assets/style-youya-huang.css,灵感记assets/style-linggan-beiwang.css,逻辑蓝assets/style-luoji-lan.css,简约白assets/style-jianyue-bai.css,规范见 style-spec),再重跑同一命令。
输入约定
- 支持:标题、段落、加粗/斜体、引用、有序/无序列表、图片(本地相对路径或 http(s))、代码块、分割线、链接(链接文字保留,URL 可不展示)。
- 图片:相对路径相对 md 文件所在目录;远程图需可访问。
- 分页规则(脚本内已实现):块级装箱;标题不与后续内容拆开成页尾孤行;超长段按句号拆;列表按条目拆;过高图等比缩到单页可用高度内。
- 语义绑定(脚本内已实现):图片视为其上方文字的配图——当前页放不下时先等比缩小挤进同页(下限约 45% 宽 / 220px 高),缩不动则把上一段文字一起挪到新页与图同页;以「:」结尾的段落与下一块(图/列表)强制同页。
反模式
- ❌ 用 GenerateImage / 文生图模型画正文页
- ❌ 手工截浏览器长图再切片(易漏字、切到行中间)
- ❌ 擅自删减原文段落「为了好看」——必须全文保留