If you update content on the website, the public account and Xiaohongshu at the same time, you should have encountered the same problem: a long article has already been written, but you want to send it to Xiaohongshu, but you almost have to do it again.
Direct screenshots, the font size is too small; copying the text will not fit the content; setting up ready-made templates will not match your account style. Tutorial-type articles are even more troublesome. With one less key screenshot, readers may be stuck at a certain step.
Recently, I organized my repeatedly polished Little Red Book typesetting process into a Codex Skill--Punk XHS Cards。
It can automatically generate a set of vertical knowledge cards with personal IP based on the person photos (or existing IP) provided by you, the specified person movements, and a Markdown long text, and also output the title, body, topic tags and final ZIP package, allowing a piece of written content to be reused across platforms at a lower cost.
Why do you make this Skill?
In the past, my little red book mainly posted pictures and prompts. The content was not long and could be published after sorting it out.
Later, there were more and more tutorials and long articles. Although there was almost no need to modify them when they were posted to the website and public accounts, when it came to Xiaohongshu, there was always no satisfactory way to find: the full-text screenshots could not be clearly seen, the copied text could not be put down, and the retypesetting was too time-consuming.
So, I started asking Codex to help me automatically tear Markdown into vertical HTML. Initially, it only solved the problem of "how to arrange a long article on the mobile phone screen", allowing the article to be automatically divided into multiple pictures and maintaining a uniform size, spacing and layout.
As I did more and more, I found that the real duplication was actually far more than typography.
Almost every article requires:
- Redraft a title suitable for Little Red Book;
- Automatically disassemble Markdown into multiple knowledge cards;
- Confirm the character IP and serve as the cover author;
- Keep key screenshots in the tutorial;
- Generate cover, text and topic tags;
- Check for text truncation, picture omissions and character proportions.
Since the process is the same every time, it can be solidified into a set of workflows.
Just as I was creating my own personal IP, I designed the image of Punk in a red hooded hoodie, and integrated the characters, theme colors and typography rules into the entire process, and finally organized it into Punk XHS Cards。
For creators who operate multiple platforms at the same time, it is difficult to establish brand recognition if the same content simply changes the size and templates; with a unified IP and vision system, readers can recognize your content at first sight even on different platforms.
In the end, the input to this Skill is a Markdown, and the output is a complete set of knowledge cards, directly publishable copywriting, and the final ZIP package.
how it works
Punk XHS Cards does not immediately print out pictures in batches as soon as they receive an article. Instead, they set up three confirmation nodes:
- Character confirmation
- Card style confirmation
- Cover confirmation
The complete process is as follows:
上传人物照片或已有 IP 图
↓
确认人物名称、主题色、人物设定与卡片动作
↓
确认动作图、专属主色和正文样稿
↓
上传 Markdown 长文
↓
解析标题、正文结构和关键图片
↓
确认 IP 主题插图与 16:9 macOS 窗口封面
↓
生成从 01 开始编号的正文卡片、发布文案和 ZIP
The biggest advantage of this is to minimize the cost of modification.
If there is a problem with the proportion of characters, only the characters will be changed; if the theme color is not satisfied, only the Profile will be adjusted; the cover layout needs to be revised, and there is no need to regenerate more than a dozen body cards.
After the cover is confirmed, all inside pages will be officially rendered. The cover is responsible for displaying the theme, title, author and personal IP, and does not participate in the body numbering; the body is unified from 01 Start.
Everyone can have their own version
Many people will notice the red theme when they see my presentation.
In fact, red is just my Punk Profile.
When each user uses Skill for the first time, they can upload their own photos or existing IP and specify:
- character name
- character movements
- Brand theme color
If no color is specified, Skill will automatically extract candidate colors from the character's clothing or accessories and then confirm them by the user.
For example:
- Blue coat → Blue vision system
- Orange Scarf → Orange Cover and Focus Box
- Brand green → All cards are unified green
The characters determine the visual system, and the template is responsible for maintaining consistency.
Character movements can also be freely specified, for example:
- Stand up and explain
- linked to
- holding a tablet
- whiteboarding
- Sitting and using the computer
After the action is confirmed, the character Profile will be written, and all subsequent covers and body will remain consistent. Characters are always rendered to scale and are not stretched or compressed to fill the layout.
Tutorial screenshots are also part of the body
This is what I care about the most when making Skills.
Many typesetting tools only process Markdown text, either discarding the pictures completely or distributing them mechanically equally.
It has little impact on opinion articles, but the tutorial is completely different.
The lack of a key screenshot may prevent readers from completing the entire operation process.
Therefore, Punk XHS Cards will first read the pictures in Markdown, then judge their role based on the context, and create a "step-screenshot-completion status" mapping.
Priority reservations include:
- Screenshot of operation interface
- Schematic diagram of input content
- Result chart after completion of setting
- Flowchart, structure chart
- Important pictures that affect understanding after missing
Decorative drawings, duplicate covers, avatars, and irrelevant logos will not occupy text space.
If the tutorial does require 12 or even 20 cards, Skill will automatically increase the number of pages instead of compressing screenshots or deleting steps to make up a fixed number.
The first priority for tutorials is alwaysAllow readers to follow the entire operation process。
New cover design
The new cover is generated in two layers.
The first layer consists of Punk IP Article Illustrations Illustrations that truly correspond to the theme of the article are generated based on Markdown content, and the characters will participate in the content expression rather than standing next to it and doing decoration.
The second layer is responsible for layout:
- Use the theme color of the character Profile
- Place a concise, centered title at the top
- Use a sophisticated macOS window in the middle
- Retain complete 16:9 illustrations
- Author name appears at the bottom
The author name comes from the character name confirmed when creating the character, rather than re-entering it every time.
The title and author's text are drawn by the renderer and do not rely on the graphics model, so typos will not occur; the font will also automatically select a compatibility solution based on macOS, Windows, and Linux.
What will ultimately be delivered
By default, an article will be generated:
- 1 cover
- 9 text cards
If the article is longer or the tutorial has more screenshots, the number of pages in the body will automatically increase.
The final catalog is as follows:
<article-slug>-小红书/
├── source.md
├── cover-illustration.png
├── assets/article-images/
├── cards.json
├── publish-copy.md
├── output/
│ ├── cover.png
│ ├── card-01.png
│ └── ...
└── <article-slug>-小红书.zip
wherein publish-copy.md Contains:
- 1 recommended title
- 3 alternative titles
- The main text of the small red book that can be released directly
- 6~10 recommended topic tags
After all pictures are generated, they will also be automatically checked:
- Whether the text is truncated
- Whether elements overlap
- Is the proportion correct?
- Are the tutorial steps complete
- Whether key screenshots were missed
After confirming that there is no error, package it to generate the final ZIP.
An Obsidian tutorial I recently tested finally generated 1 cover, 17 body cards, and 16 key screenshots are completely retained。
installation method
The project has been open source on GitHub.
You can install it directly when using Codex:
git clone https://github.com/adrianpunk/punk-xhs-cards.git
cp -R punk-xhs-cards/punk-xhs-cards ~/.codex/skills/
Windows：
git clone https://github.com/adrianpunk/punk-xhs-cards.git
Copy-Item -Recurse punk-xhs-cards\punk-xhs-cards "$HOME\.codex\skills\punk-xhs-cards"
py -3 -m pip install -r "$HOME\.codex\skills\punk-xhs-cards\requirements.txt"
Now we no longer rely on Swift and AppKit in macOS, but use the Python + Pillow renderer. Windows, Linux and macOS share the same set of card data and layout. Only Linux requires additional installation of Chinese fonts (Noto Sans CJK).
Cover stage dependence Punk IP Article Illustrations, so please confirm that the Skill is installed first.
After that, just send in the new Codex task:
请使用 $punk-xhs-cards。
先根据我上传的照片建立个人 IP，
确认人物、卡片动作和视觉风格后，
再把我提供的 Markdown 做成小红书知识卡片。
When using it for the first time, Skill will confirm in turn:
- Photo of people (or existing IP)
- Character name (as cover author)
- Theme color (Hex is recommended)
- character movements
After the confirmation of the characters and visual system is completed, the long text will be processed, and the whole process will be smoother.
current boundary
The current version has some known limitations:
- Python + Pillow already supports common layouts for macOS, Windows, and Linux;
- Linux requires Noto Sans CJK Chinese font installed;
- The operating environment needs to support image generation;
- Cover illustrations rely on Punk IP Article Illustrations;
- Currently, it is mainly optimized for Chinese tutorials and knowledge-based long texts;
- The final effect will still be affected by the character photos, Markdown structure, and the quality of the original screenshot.
User photos, personal profiles, articles and generated results are saved in the running directory and will not be written to the Skill installation directory, nor will they be uploaded to the public GitHub repository.
last
At first, I just wanted to solve a very simple problem: how to publish more and more tutorials and long articles to Xiaohongshu more easily.
Later, starting from the vertical version of HTML, the title, cover, body, Tags, tutorial screenshots, character IP and visual system were completed step by step, finally forming today's set Punk XHS Cards。
For multi-platform creators, the most regrettable thing is that a piece of content that has been written with a lot of time only appears once on one platform and then slowly sinks.
What Punk XHS Cards wants to do is simple: reorganize the completed long text in a way that is more suitable for reading small red books, while retaining your content, personal IP, and consistent brand recognition across platforms.
If you often sync content between, public account and Xiaohongshu, you might as well find a tutorial you have written in the past and run it through it completely to see how much duplication it can save you.𝕏
Project address: