| name | xhs-article-to-images |
| description | 把 Markdown 长文转成小红书 3:4（1080×1440）图片组的 Agent skill。内置五套设计皮肤（E 雅刊·默认 / A 暖杏奶咖 / B 雾松青 / C 黛墨描金 / D 夜读鎏金）+ 女性向三主题（F 粉色王国 / G 乙游夜境 / H 吉卜力）× 多种页型；Agent 负责读文章、拆页和填 HTML，Playwright 渲染器负责逐张截图导出 PNG。当用户说"长文转图片"、"小红书长图"、"把这篇文章做成小红书图文/图片/卡片"、"文章转图片"、"用我的设计稿排版"、"转成 3:4 图组"、想要"女性向/少女风/粉色/乙游风/吉卜力风"排版时使用；用户给了一篇文章并提到发小红书时也应使用。 |
小红书长文转图片
把一篇 Markdown 文章（含图片）转成一组小红书 3:4 卡片图。流水线：读文章 → 选皮肤 → 拆页排版成 HTML → Playwright 截图 → 交付 PNG。
默认目标：全文重排版——把文章完整转成好看的图文卡片，不是 8 页精华摘要。主力页型是正文；段落有图就用图文；页型按需选用，不为凑花样硬塞金句/对比/清单页。
这个 skill 使用固定的五套皮肤 + 女性向三主题模板，不重新设计版式，目标是稳定复刻设计稿的样子。用户提到"皮肤/设计稿"或想要暖杏、雾松、黛墨、夜读、雅刊、粉色、乙游、吉卜力这类风格时用本 skill。
设计系统一览
- 卡片基准 1080 × 1440（3:4），皮肤与页型全部由
assets/styles.css（A/B/C 三套皮肤）、assets/styles-d.css（D 独立体系）、assets/styles-e.css（E 独立体系）、assets/styles-fem.css（女性向三主题独立体系）定义
- 五套设计皮肤：E 雅刊（默认）（暖白纸 + Newsreader 高对比衬线，作品集编辑感，封面需一张配图）/ A 暖杏奶咖（暖调爆款）/ B 雾松青（清爽治愈，封面需 16:9 配图）/ C 黛墨描金（编辑感）/ D 夜读鎏金（深墨鎏金，惊艳向）
- 女性向三主题（
femcard 体系，共用一套骨架，换主题改 t-pink/t-otome/t-ghibli 类名 + 同步替换卡内 .fem-deco 装饰块）：F 粉色王国（童话甜粉，彩虹+城堡+云朵手绘装饰，圆体标题）/ G 乙游夜境（暗黑浪漫深色，银紫光边框+罗马环+月+蝴蝶，高对比衬线）/ H 吉卜力（治愈自然，太阳+胖云+飞鸟+山丘，清新衬线）。女性向主题自带封面横幅图槽与 16:9 图文图槽
- 基础页型：封面、正文、清单、图文混排（16:9 图槽）、结尾号召；E 与女性向三主题另有可选页型：大字陈述（statement）、要点正文（points / idea）、三观对比（views）——只在内容天然适合时用，不是每篇必用
- A/B/C 共用一套 HTML 骨架，换肤只改
skin-a/b/c 类名；D 用 dcard、E 用 ecard、女性向三主题用 femcard 独立类名体系，四套体系绝不混排
- 完整 HTML 骨架在
assets/template.html，所有页型都有现成可拷的示例块
工作流
1. 输入确认
需要：文章路径（Markdown）。可选：皮肤指定、品牌区文案、页数偏好。信息够就直接开工，不要追问。
2. 读文章 + 拆页规划
读 references/content-mapping.md（皮肤选择标准、页型容量上限、文案改写要求都在里面），然后产出内部页计划。用户不指定皮肤时默认用 E 雅刊，只有用户点名其他皮肤、或明确让你自由挑选时才换：
皮肤：E 雅刊（默认）
P1 cover 钩子标题 + 导语
P2 body §1 为什么选 Obsidian（第 1 页）
P3 body §1 续（装不下就拆页）
P4 media 下载安装截图
P5 body 新建仓库 + git clone
P6 media GitHub 创建仓库截图
...
Pn body 最后一节
Pn+1 ending （可选）CTA
按文章 H2/H3 顺序拆页；正文为主，有图用图文；超容量拆页，不删内容。页数通常 10–18（小红书上限 18）。用户说「摘要版 / N 页以内」才做压缩。开工前用一两句话说明皮肤和预计页数即可。
3. 建任务文件夹 + 排版
在当前项目中为每篇文章建立一个任务文件夹，推荐命名为 imgs-{标题}/：
imgs-Agent记忆/
├── index.html ← 从 template.html 拷贝骨架后填内容
├── styles.css ← 从 skill assets/ 拷贝
├── styles-d.css ← 从 skill assets/ 拷贝
├── styles-e.css ← 从 skill assets/ 拷贝
├── styles-fem.css ← 从 skill assets/ 拷贝（女性向三主题）
├── assets/ ← 文章配图、封面图；并拷入 assets/avatar.png（品牌头像）
└── output/ ← 渲染产物 PNG（最终交付物）
HTML/CSS 是工程中间产物：发布后只需保留 output/ 里的 PNG，index.html、两个 CSS 和 assets 可以删掉（用户说"发布了/清理一下"时再删，不要主动删）。
排版要点：
- 把四个 CSS（
styles.css、styles-d.css、styles-e.css、styles-fem.css）和 template.html 拷进任务文件夹，把 template 改名 index.html，删掉用不到的示例卡，留下的卡按页计划填入真实内容
- 每张卡的 id 按顺序命名：
xhs-01、xhs-02…（渲染脚本按 id 命名 PNG）
- 严格遵守
content-mapping.md 的每页容量上限，超了就拆页，禁止删内容凑页，不许缩字号
- 文章里的图片拷贝/下载到任务
assets/，HTML 用相对路径引用
4. 配图处理
- 文章自带图优先，放进图文混排页
- 皮肤 E 的封面底部需要一张横幅配图（约 2.6:1 宽条裁切）、皮肤 B 的封面需要一张 16:9 横图：文章没有合适的就按
content-mapping.md 第五节的三选一流程（用户上传 / 网图 / AI 生成）处理一次
- 如需 AI 生成配图，生成图只作为排版中间产物，存任务
assets/ 即可
5. 渲染截图
npx xhs-render <任务目录>
node scripts/render.cjs <任务目录>
脚本会打开 index.html，等字体就绪后把所有 .card / .dcard / .ecard / .femcard 节点按 id 逐张导出到 output/，并打印每张实际尺寸（应为 1080×1440）。需要 2 倍清晰度加 --scale 2。
6. 自检 + 交付
渲染完先自己用 Read 工具看一遍每张 PNG，检查：
- 文字是否溢出卡片、压到品牌区或贴边
- 配图裁切是否裁掉了人脸 / 关键信息（需要时给
<img> 加 object-position 调整再渲）
- 每页下半部分是否大面积空白（正文页应填满；图文页空白可能来自大图，但不应是因为删光了字）
- 页码、总页数是否对得上
有问题改 HTML 重渲，没问题再交付。交付时给出：任务文件夹路径、每张图的绝对路径、皮肤和页数说明、网图来源（如有）。
如项目有自己的内容管理约定，可以把任务目录路径、输出 PNG 路径和发布文案记录回对应笔记或 issue。
禁忌
- 不混皮肤：一组图只用一套皮肤；A/B/C 的
card、D 的 dcard、E 的 ecard、女性向三主题的 femcard 四套类名体系不互换；女性向三主题之间也只能选一个（t-pink / t-otome / t-ghibli）
- 不发明新版式、新配色：只用四份 CSS 里已有的类，需要微调也只在任务文件夹的 index.html 里加内联样式，不改 skill assets 里的 CSS
- 全文模式下正文忠实于原文结构，只做断行和轻度润色；封面标题可写钩子。只有用户要「摘要版」时才大幅压缩
- 不缩小字号塞内容，不让文字溢出或贴边
- 不在图片里放使用说明、快捷键提示等与内容无关的文字
