Skip to main content
affpapa.org
RU EN
skill CX Codex

xiaohongshu-images — Claude Code skill: image creation

Turns Markdown, HTML, or text into a styled page and a sequence of 3:4 images for Xiaohongshu. Use it to prepare article content for posting.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add iamzifei/xiaohongshu-images-skill --skill xiaohongshu-images -a claude-code
Open on GitHub

What xiaohongshu-images does

Give the skill Markdown, HTML, or plain text. It uses /baoyu-cover-image for a cover, builds an HTML page from prompts/default.md, then captures the page as consecutive 3:4 images. The capture flow is intended to keep text from being cut off.

The output goes into an article folder under ~/Dev/obsidian/. The account folder is chosen from --account, the source file path, or a template mapping. The workflow checks Xiaohongshu requirements for both the cover and page content. The cover step depends on /baoyu-cover-image, so that skill needs to be available for the documented flow to work.

What it helps with

  • turn a Markdown article into a styled HTML page
  • create a cover for a Xiaohongshu post
  • capture a long page as 3:4 images
  • save article assets under the selected account folder

Example prompts for the agent

  • Create Xiaohongshu images from article.md with /xiaohongshu-images article.md.
  • Prepare this article for the james-en account: /xiaohongshu-images <article> --account james-en.
  • Turn page.html into a sequence of images for Xiaohongshu: /xiaohongshu-images page.html.

How to install xiaohongshu-images

1Skills CLI (Vercel)

npx skills add iamzifei/xiaohongshu-images-skill --skill xiaohongshu-images -a claude-code

2Manually: put the files in place

~/.claude/skills/xiaohongshu-images/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/xiaohongshu-images/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about xiaohongshu-images

How do I install xiaohongshu-images in Claude Code?

Run npx skills add iamzifei/xiaohongshu-images-skill --skill xiaohongshu-images -a claude-code. The skill file is placed at ~/.claude/skills/xiaohongshu-images/SKILL.md.

What does xiaohongshu-images do?

It creates a cover and a styled HTML page from text, Markdown, or HTML, then captures the page as consecutive 3:4 images for Xiaohongshu.

How does it choose where to save the output?

It checks --account first, then derives the destination from the input file path. If neither identifies an account, it uses the template-to-folder mapping.

Similar skills

Everything for Design →
frontend-design official anthropics This skill guides intentional visual design for new interfaces and redesigns. Use it when a generic generated UI is not enough. 1,025,790installs grill-me Matt Pocock grill-me interviews you about a plan or design to expose gaps and sharpen decisions. Use it before implementation starts. 1,424,476installs design-taste-frontend Leonxlnx This skill directs the design of public pages and work screens, then checks the result in a browser through screenshots. Use it when an interface feels generic or unfinished. CX Codex +1 678,700installs prototype Matt Pocock Creates throwaway prototypes for checking state logic or exploring UI before committing the decision to the main codebase. 986,201installs grilling Matt Pocock Stress-test a plan, decision, or idea through structured rounds of questions. Use it when you need to expose assumptions before acting. 979,543installs codebase-design Matt Pocock This skill helps design modules with small interfaces and hidden complexity. Use it when refactoring code, choosing a seam, or making tests easier to write. 850,344installs

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor