SuperAPI AI Directory
Partner with us中文AI newsFavorites
Skillsxhs-article-to-images

xhs-article-to-images

Design & creation

View repository

Updated 10-15 21:35

About this skill

Xiaohongshu long article to images

Convert a Markdown article (including images) into a set of Xiaohongshu 3:4 card images. Pipeline:Read article → choose skin → split pages and lay out into HTML → Playwright screenshot → deliver PNG。

Default goal: full-text re-layout—convert the entire article into attractive image-text cards, not an 8-page highlight summary. The main page type isbody; if a paragraph has an image, useimage-text; page types are chosen as needed, and quote/comparison/list pages are not forced in just to add variety.

This skill usesfixed five skins + three feminine-oriented theme templates, and does not redesign the layout; the goal is to stably reproduce the look of the design mockups. Use this skill when the user mentions "skin/design mockup" or wants styles such as Warm Apricot, Misty Pine, Ink Black, Night Reading, Elegant Journal, Pink, Otome, or Ghibli.

Design system overview

  • Card baseline 1080 × 1440（3:4）, skins and page types are all defined by assets/styles.css(A/B/C three skins),assets/styles-d.css(D independent system),assets/styles-e.css(E independent system),assets/styles-fem.css(three feminine-oriented themes independent system)
  • Five design skins:E Elegant Journal (default)(warm white paper + Newsreader high-contrast serif, portfolio editorial feel, cover requires one accompanying image) / A Warm Apricot Milk Coffee(warm-toned viral style) / B Misty Pine Green(fresh and healing, cover requires a 16:9 accompanying image) / C Ink Black with Gold Accents(editorial feel) / D Night Reading Gilded Gold(deep ink gilded gold, stunning direction)
  • Three feminine-oriented themes (femcard system, sharing one skeleton, switching themes changes t-pink/t-otome/t-ghibli class names + synchronously replaces in-card .fem-deco decorative blocks):F Pink Kingdom(fairy-tale sweet pink, rainbow + castle + cloud hand-drawn decorations, rounded title font) / G Otome Night Realm(dark romantic dark color, silver-purple glowing border + Roman ring + moon + butterfly, high-contrast serif) / H Ghibli(healing nature, sun + chubby clouds + flying birds + hills, fresh serif). Feminine-oriented themes come with a cover banner image slot and a 16:9 image-text image slot
  • Basic page types: cover, body, list, image-text mixed layout (16:9 image slot), closing call to action;E and the three feminine-oriented themes also have optional page types: large-text statement (statement), key-point body (points / idea), three-view comparison (views)—use only when the content is naturally suited,not required for every article
  • A/B/C share one HTML skeleton, and changing skins only changes skin-a/b/c class names;D uses dcard, E uses ecard, and the three feminine-oriented themes use femcard independent class name systems; the four systems are never mixed
  • The complete HTML skeleton is in assets/template.html, and all page types have ready-to-copy example blocks

Workflow

1. Input confirmation

Required: article path (Markdown). Optional: skin specification, brand area copy, page count preference. If the information is sufficient, start right away; do not ask follow-up questions.

2. Read the article + plan the page breakdown

Read references/content-mapping.md(skin selection criteria, per-page capacity limits, and copy rewriting requirements are all in there), then produce an internal page plan.If the user does not specify a skin, use E Elegant Magazine by default, and only switch when the user names another skin or explicitly lets you choose freely:

皮肤：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

Follow the article's H2/H3 orderto break into pages;body text first, use image-text layout when there are images; split pages when over capacity,do not delete content. Page count is usually 10–18 (Xiaohongshu limit is 18). Only compress when the user says "summary version / within N pages". Before starting, just state the skin and estimated page count in one or two sentences.

3. Create task folder + layout

Create a task folder for each article in the current project, recommended naming 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 are engineering intermediate products: after publishing, only keep output/ the PNGs in it; index.html, the two CSS files, and assets can be deleted (only delete when the user says "published/clean it up"; do not delete proactively).

Layout key points:

  • Copy the four CSS files (styles.css、styles-d.css、styles-e.css、styles-fem.css) and template.html into the task folder, rename template to index.html, delete unused example cards, and fill the remaining cards with real content according to the page plan
  • Name each card's id in order:xhs-01、xhs-02… (the rendering script names PNGs by id)
  • Strictly follow content-mapping.md 's per-page capacity limit; if exceeded,split pages，Do not delete content to make up pages，Do not shrink font size
  • Copy/download the article's images to the task assets/, and reference them in HTML using relative paths

4. Image handling

  • Prefer images included with the article; place them in image-text mixed pages
  • Skin E's cover bottom needs a banner image (cropped to about a 2.6:1 wide strip), and skin B's cover needs a 16:9 horizontal image: if the article has no suitable one, follow content-mapping.md 's section 5 three-choice process (user upload / web image / AI generation) once
  • If AI-generated images are needed, generated images are only layout intermediate products; save them in the task assets/ is enough

5. Render screenshots

npx xhs-render <任务目录>

# 或在本仓库根目录执行：
node scripts/render.cjs <任务目录>

The script will open index.html, wait for fonts to be ready, then export all .card / .dcard / .ecard / .femcard nodes one by one by id to output/, and print each one's actual size (should be 1080×1440). For 2x clarity, add --scale 2。

6. Self-check + delivery

After rendering, first use the Read tool to look through each PNG yourself and check:

  • Whether text overflows the card, presses into the brand area, or sticks to the edge
  • Whether image cropping cuts off faces / key information (when needed, give <img> add object-position adjust and re-render)
  • Whether the lower half of each page has large blank areas (body text pages should be filled; blank areas on image-text pages may come from large images, but should not be because all text was deleted)
  • Whether the page number and total page count match

If there are problems, modify the HTML and re-render; if not, deliver. When delivering, provide: task folder path, absolute path of each image, skin and page count explanation, and web image sources (if any).

If the project has its own content management conventions, you can record the task directory path, output PNG path, and publishing copy back to the corresponding note or issue.

Taboos

  • Do not mix skins: one set of images uses only one skin; A/B/C's card, D's dcard, E's ecard, and the female-oriented three themes' femcard four sets of class name systems are not interchangeable; among the female-oriented three themes, only one can be chosen (t-pink / t-otome / t-ghibli)
  • Do not invent new layouts or color schemes: use only the classes already present in the four CSS files; if fine-tuning is needed, add inline styles only in the task folder's index.html,do not modify the CSS in skill assets
  • In full-text mode, the body text stays faithful to the original structure, with only line breaks and light polishing; the cover title may use a hook. Only compress heavily when the user asks for a "summary version"
  • Do not shrink the font size to cram in content, and do not let text overflow or touch the edges
  • Do not put usage instructions, shortcut key hints, or other text unrelated to the content in the images