xhs-article-to-images

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
• 全文模式下正文忠实于原文结构，只做断行和轻度润色；封面标题可写钩子。只有用户要「摘要版」时才大幅压缩
• 不缩小字号塞内容，不让文字溢出或贴边
• 不在图片里放使用说明、快捷键提示等与内容无关的文字