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