# Xhs Article To Images

把 Markdown 长文转成小红书 3:4（1080×1440）图片组的 Agent skill。内置五套设计皮肤（E 雅刊·默认 / A 暖杏奶咖 / B 雾松青 / C...

- Repository: https://github.com/Pluviobyte/rnskill (1706 stars)
- Category: Testing
- License: see repository
- Last updated: 2026-09-21
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add Pluviobyte/rnskill --skill xhs-article-to-images -g -a claude-code -y`
Codex: `npx skills add Pluviobyte/rnskill --skill xhs-article-to-images -g -a codex -y`
Cursor: `npx skills add Pluviobyte/rnskill --skill xhs-article-to-images -g -a cursor -y`
Gemini CLI: `npx skills add Pluviobyte/rnskill --skill xhs-article-to-images -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add Pluviobyte/rnskill`

## Description

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

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# 小红书长文转图片

把一篇 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-{标题}/`：

The rest: https://github.com/Pluviobyte/rnskill/blob/HEAD/skills/xhs-article-to-images/SKILL.md