xhs-article-to-images

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

小红书长文转图片

Converting Long Articles to Xiaohongshu Images

把一篇 Markdown 文章（含图片）转成一组小红书 3:4 卡片图。流水线：读文章 → 选皮肤 → 拆页排版成 HTML → Playwright 截图 → 交付 PNG。

默认目标：全文重排版——把文章完整转成好看的图文卡片，不是 8 页精华摘要。主力页型是正文；段落有图就用图文；页型按需选用，不为凑花样硬塞金句/对比/清单页。

这个 skill 使用固定的五套皮肤 + 女性向三主题模板，不重新设计版式，目标是稳定复刻设计稿的样子。用户提到"皮肤/设计稿"或想要暖杏、雾松、黛墨、夜读、雅刊、粉色、乙游、吉卜力这类风格时用本 skill。

Turn a Markdown article, including any images, into a set of Xiaohongshu 3:4 card images. Pipeline: read article → select skin → split pages and lay out in HTML → Playwright screenshots → deliver PNGs.

Default goal: full-article relayout—turn the entire article into attractive image-and-text cards rather than an eight-page highlights summary. The primary page type is body; use media for sections containing images; select other page types as needed, and do not force quote, comparison, or list pages merely for variety.

This skill uses five fixed skins plus three women-oriented theme templates and does not redesign the layouts. Its goal is to reproduce design mockups consistently. Use this skill when the user mentions a “skin/design mockup” or asks for a style such as warm apricot, misty pine, charcoal ink and gold, gilded night, elegant editorial, pink, otome, or Ghibli.

设计系统一览

Design System Overview

卡片基准 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
```
，所有页型都有现成可拷的示例块

Card baseline: 1080 × 1440 (3:4). All skins and page types are defined by
```
assets/styles.css
```
(three skins: A/B/C),
```
assets/styles-d.css
```
(D’s independent system),
```
assets/styles-e.css
```
(E’s independent system), and
```
assets/styles-fem.css
```
(the independent system for the three women-oriented themes)
Five design skins: E Elegant Editorial (default) (warm white paper + high-contrast Newsreader serif, curated portfolio-editorial feel, cover requires an image) / A Warm Apricot Latte (warm-toned viral look) / B Misty Pine Teal (fresh and restorative, cover requires a 16:9 image) / C Charcoal Ink with Gold Accents (editorial feel) / D Gilded Night Reading (deep ink and gold, visually striking)
Three women-oriented themes (
```
femcard
```
system, sharing one skeleton; switch themes by changing the
```
t-pink
```
/
```
t-otome
```
/
```
t-ghibli
```
class and replacing the corresponding
```
.fem-deco
```
decoration blocks): F Pink Kingdom (fairy-tale sweet pink, hand-drawn rainbow, castle, and cloud decorations, rounded title typeface) / G Otome Night (dark romantic palette, silver-purple glowing borders, Roman ring, moon, and butterfly motifs, high-contrast serif) / H Ghibli (healing nature aesthetic, sun, puffy clouds, birds, and hills, fresh serif). The women-oriented themes include a cover banner image slot and a 16:9 mixed image-and-text image slot
Basic page types: cover, body, list, mixed image-and-text with a 16:9 image slot, and ending call to action. E and the three women-oriented themes also provide optional page types: large statement, key-point body (
```
points
```
/
```
idea
```
), and contrasting views (
```
views
```
). Use them only when the content naturally suits them; they are not required for every article
A/B/C share one HTML skeleton and switch skins by changing the
```
skin-a
```
/
```
skin-b
```
/
```
skin-c
```
class. D uses
dcard
, E uses
ecard
, and the three women-oriented themes use the independent
femcard
class system. These four class systems must never be mixed
The complete HTML skeleton is in
```
assets/template.html
```
, with ready-to-copy example blocks for every page type

工作流

Workflow

1. 输入确认

1. Confirm Inputs

需要：文章路径（Markdown）。可选：皮肤指定、品牌区文案、页数偏好。信息够就直接开工，不要追问。

Required input: the Markdown article path. Optional inputs: a specified skin, brand-area copy, and page-count preference. If the necessary information is available, start immediately without asking follow-up questions.

2. 读文章 + 拆页规划

2. Read the Article + Plan the Pages

读

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 页以内」才做压缩。开工前用一两句话说明皮肤和预计页数即可。

Read

references/content-mapping.md

, which contains the skin-selection criteria, per-page capacity limits, and copy-rewriting requirements, then create an internal page plan. Use E Elegant Editorial by default when the user does not specify a skin. Switch to another skin only when the user names it or explicitly asks you to choose freely:

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

Split pages according to the article’s H2/H3 order. Favor body pages and use media whenever an image is available. Split pages when they exceed the capacity limit; do not remove content. The usual length is 10–18 pages, which is Xiaohongshu’s maximum of 18 pages. Only compress the content when the user requests a “summary version” or a maximum of N pages. Before starting, briefly explain the selected skin and estimated page count in one or two sentences.

3. 建任务文件夹 + 排版

3. Create the Task Folder + Lay Out the Content

在当前项目中为每篇文章建立一个任务文件夹，推荐命名为

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 用相对路径引用

Create a task folder for each article in the current project. The recommended naming convention is

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（最终交付物）

The HTML and CSS are engineering intermediates. After publishing, only the PNG files in

output/

need to be retained;

index.html

, the CSS files, and

assets/

can be deleted. Delete them only when the user says “published” or asks you to clean up; do not delete them proactively.

Key layout requirements:

Copy the four CSS files (
```
styles.css
```
,
```
styles-d.css
```
,
```
styles-e.css
```
, and
```
styles-fem.css
```
) and
```
template.html
```
into the task folder. Rename the template to
```
index.html
```
, remove unused example cards, and fill the remaining cards with the actual content
Name each card’s id in order:
```
xhs-01
```
,
```
xhs-02
```
, and so on. The rendering script uses the id to name the PNG files
Strictly follow the per-page capacity limits in
```
content-mapping.md
```
. If a page exceeds its limit, split it. Do not remove content to fit, and do not reduce the font size
Copy or download images from the article into the task’s
```
assets/
```
directory and reference them with relative paths in the HTML

4. 配图处理

4. Handle Images

文章自带图优先，放进图文混排页
皮肤 E 的封面底部需要一张横幅配图（约 2.6:1 宽条裁切）、皮肤 B 的封面需要一张 16:9 横图：文章没有合适的就按
```
content-mapping.md
```
第五节的三选一流程（用户上传 / 网图 / AI 生成）处理一次
如需 AI 生成配图，生成图只作为排版中间产物，存任务
```
assets/
```
即可

Prefer images already included in the article and place them on mixed image-and-text pages
Skin E requires a banner image at the bottom of its cover, cropped to approximately a 2.6:1 wide strip. Skin B requires a 16:9 horizontal cover image. If the article contains no suitable image, follow the three-option process in section five of
```
content-mapping.md
```
—user upload, web image, or AI generation—and handle it once
If AI-generated imagery is needed, treat the generated image as an intermediate layout asset and save it in the task’s
```
assets/
```
directory

5. 渲染截图

5. Render and Capture Screenshots

bash

npx xhs-render <任务目录>

bash

npx xhs-render <任务目录>

或在本仓库根目录执行：

node scripts/render.cjs <任务目录>


脚本会打开 `index.html`，等字体就绪后把所有 `.card` / `.dcard` / `.ecard` / `.femcard` 节点按 id 逐张导出到 `output/`，并打印每张实际尺寸（应为 1080×1440）。需要 2 倍清晰度加 `--scale 2`。

node scripts/render.cjs <任务目录>


The script opens `index.html`, waits for the fonts to be ready, and then exports every `.card`, `.dcard`, `.ecard`, and `.femcard` node to `output/` one by one according to its id. It also prints each image’s actual dimensions, which should be 1080×1440. Add `--scale 2` for 2× resolution.

6. 自检 + 交付

6. Quality Check + Delivery

渲染完先自己用 Read 工具看一遍每张 PNG，检查：

文字是否溢出卡片、压到品牌区或贴边
配图裁切是否裁掉了人脸 / 关键信息（需要时给
```
<img>
```
加
```
object-position
```
调整再渲）
每页下半部分是否大面积空白（正文页应填满；图文页空白可能来自大图，但不应是因为删光了字）
页码、总页数是否对得上

有问题改 HTML 重渲，没问题再交付。交付时给出：任务文件夹路径、每张图的绝对路径、皮肤和页数说明、网图来源（如有）。

如项目有自己的内容管理约定，可以把任务目录路径、输出 PNG 路径和发布文案记录回对应笔记或 issue。

After rendering, use the Read tool to inspect every PNG and check the following:

Whether text overflows the card, overlaps the brand area, or sits too close to an edge
Whether image cropping cuts off a face or important information. When necessary, adjust the
```
<img>
```
element with
```
object-position
```
and render again
Whether the lower half of each page contains excessive empty space. Body pages should be filled; mixed image-and-text pages may have whitespace because of a large image, but not because text was removed
Whether the page numbers and total page count are correct

Fix the HTML and render again if there are any problems. Once everything passes, deliver the task folder path, the absolute path of every image, the skin and page-count details, and the source of any web images used.

If the project has its own content-management conventions, record the task directory path, output PNG paths, and publishing copy in the corresponding note or issue.

禁忌

Prohibitions

不混皮肤：一组图只用一套皮肤；A/B/C 的
```
card
```
、D 的
```
dcard
```
、E 的
```
ecard
```
、女性向三主题的
```
femcard
```
四套类名体系不互换；女性向三主题之间也只能选一个（t-pink / t-otome / t-ghibli）
不发明新版式、新配色：只用四份 CSS 里已有的类，需要微调也只在任务文件夹的 index.html 里加内联样式，不改 skill assets 里的 CSS
全文模式下正文忠实于原文结构，只做断行和轻度润色；封面标题可写钩子。只有用户要「摘要版」时才大幅压缩
不缩小字号塞内容，不让文字溢出或贴边
不在图片里放使用说明、快捷键提示等与内容无关的文字

Do not mix skins: each image set must use only one skin. Never interchange the A/B/C
```
card
```
, D
```
dcard
```
, E
```
ecard
```
, and women-oriented
```
femcard
```
class systems. Never combine multiple women-oriented themes; choose only one of
```
t-pink
```
,
```
t-otome
```
, or
```
t-ghibli
```
Do not invent new layouts or color schemes. Use only the existing classes in the four CSS files. If minor adjustments are needed, add inline styles only to the task folder’s
```
index.html
```
; never modify the CSS in the skill assets
In full-article mode, keep the body content faithful to the original structure and make only line breaks and light polishing. The cover title may use a hook. Only compress the content substantially when the user requests a “summary version”
Do not reduce the font size to fit content, and do not allow text to overflow or sit against an edge
Do not place usage instructions, shortcut hints, or other content-irrelevant text in the images