Converting Long Articles to Xiaohongshu Images

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

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. Confirm Inputs

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. Read the Article + Plan the Pages

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. Create the Task Folder + Lay Out the Content

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. Handle Images

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. Render and Capture Screenshots

bash

npx xhs-render <任务目录>

# 或在本仓库根目录执行：
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. Quality Check + Delivery

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

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

xhs-article-to-images

NPX Install

Tags

SKILL.md Content (Chinese)