AI agent skill · by @Pluviobyte

Xhs Article To Images

把 Markdown 长文转成小红书 3:4（1080×1440）图片组的 Agent skill。内置五套设计皮肤（E 雅刊·默认 / A 暖杏奶咖 / B 雾松青 / C 黛墨描金 / D 夜读鎏金）+ 女性向三主题（F 粉色王国 / G 乙游夜境 / H 吉卜力）× 多种页型；Agent 负责读文章、拆页和填 HTML，Playwright 渲染器负责逐张截图导出 PNG。当用户说"长文转图片"、"小红书长图"、"把这篇文章做成小红书图文/图片/卡片"、"文章转图片"、"用我的设计稿排版"、"转成 3:4 图组"、想要"女性向/少女风/粉色/乙游风/吉卜力风"排版时使用；用户给了一篇文章并提到发小红书时也应使用。

Archived 2026-10-23 · Source updated 2026-09-21. Check the original repository for the latest version.

SKILL.md instructions

# 小红书长文转图片

把一篇 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 雅刊**，只有用户点名其他皮肤、或明确让你自由挑选时才换：

```text
皮肤：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. 渲染截图

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