whatisgithub

What is xhs-article-to-images?

bozhoudev/xhs-article-to-images — explained in plain English

Analysis updated 2026-05-18

57CSSAudience · writerComplexity · 2/5LicenseSetup · moderate

In one sentence

An AI-agent skill that turns long Markdown articles into themed, portrait-format image cards ready for posting to Xiaohongshu.

Mindmap

mindmap
  root((xhs-article-to-images))
    What it is
      Markdown to images
      Xiaohongshu format
    Workflow
      AI agent splits article
      HTML templates
      Playwright render
    Themes
      Five visual styles
      Multiple page layouts
    Setup
      npm install
      Claude or Codex skill

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

What do people build with it?

USE CASE 1

Turn a long Markdown article into a set of themed image cards for a Xiaohongshu post.

USE CASE 2

Use it as a Claude or Codex skill so an AI agent handles splitting and rendering the article.

USE CASE 3

Pick from five visual themes to match the tone of a post.

What is it built with?

JavaScriptHTMLCSSPlaywright

How does it compare?

bozhoudev/xhs-article-to-imagesballwictb/besur-themesfffonion/openwrt-win98-theme
Stars575856
LanguageCSSCSSCSS
Setup difficultymoderateeasymoderate
Complexity2/51/53/5
Audiencewriterdeveloperops devops

Figures from each repo's GitHub metadata at analysis time.

How do you get it running?

Difficulty · moderate Time to first run · 30min

README is written in Chinese, requires linking the tool into a Codex or Claude skills directory.

Use freely for any purpose, including commercial use, as long as you keep the copyright notice.

So what is it?

This repository is a workflow tool that converts long Markdown articles into image cards formatted for Xiaohongshu, the Chinese social media platform sometimes called Little Red Book. The output images are sized at 1080 by 1440 pixels, matching the 3:4 portrait format Xiaohongshu uses for image-and-text posts. The project is designed to work as a skill (a reusable plugin) for AI coding agents such as Codex or Claude. Rather than running a fully automated parser on its own, the intended workflow is: an AI agent reads the article, decides how to split it into logical page units, fills those pages into HTML templates, and then uses a built-in Playwright browser to render and export each page as a PNG file. This approach gives more control over how a long article gets divided, compared to a rigid automatic splitter. The repository includes five visual themes: a clean editorial style labeled E, a warm apricot-coffee look labeled A, a misty pine blue labeled B, an ink-and-gold style labeled C, and a night-reading gold foil labeled D. Different page layouts are available, including covers, body text pages, image-and-text combinations, quote cards, list pages, and ending pages. To use it, you clone the repository, run npm install, and install the Playwright Chromium browser. You then link the folder into your Codex or Claude skills directory. From there, two commands handle the work: one initializes a task folder for your article, and one renders the folder into PNG files. The output lands in a subfolder inside your task directory. A scale flag lets you request a higher-resolution render, such as 2x. The repository is MIT licensed. The README is written in Chinese, so readers who do not read Chinese will need a translation tool to follow the full documentation.

Copy-paste prompts

Prompt 1
Help me install this tool and link it into my Claude skills directory.
Prompt 2
Walk me through initializing a new task folder for an article and rendering it into images.
Prompt 3
Explain how the five visual themes in this project differ from each other.
Prompt 4
Help me render an article at a higher resolution using the scale flag.

Frequently asked questions

What is xhs-article-to-images?

An AI-agent skill that turns long Markdown articles into themed, portrait-format image cards ready for posting to Xiaohongshu.

What language is xhs-article-to-images written in?

Mainly CSS. The stack also includes JavaScript, HTML, CSS.

What license does xhs-article-to-images use?

Use freely for any purpose, including commercial use, as long as you keep the copyright notice.

How hard is xhs-article-to-images to set up?

Setup difficulty is rated moderate, with roughly 30min to a first successful run.

Who is xhs-article-to-images for?

Mainly writer.

Open on GitHub → Ask about another repo

This repo across BitVibe Labs

Verify against the repo before relying on details.