Xiaohongshu Images

Transform markdown/HTML into styled 3:4 ratio images for Xiaohongshu 新手引导:输入 `/小红书配图 新手`、「这个怎么用」「第一次用」「能干嘛」时,走 SKILL.md 的〈新手上路〉,不要直接开始干活。

Install

skills CLI (Claude Code, Cursor, Codex and more)
npx skills add iamzifei/xiaohongshu-images-skill --skill xiaohongshu-images
Manual install
git clone --depth 1 https://github.com/iamzifei/xiaohongshu-images-skill.git /tmp/xiaohongshu-images-skill
mkdir -p ~/.claude/skills
cp -r /tmp/xiaohongshu-images-skill/. ~/.claude/skills/xiaohongshu-images

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# Xiaohongshu Images Skill

This skill transforms markdown, HTML, or text content into beautifully styled HTML pages with AI-generated cover images, then captures them as sequential screenshots at 3:4 ratio for Xiaohongshu posting.

## Overview

The skill performs the following workflow:

1. **Accept Content**: Receives markdown, HTML, or txt format content from the user
2. **Load Prompt Template**: Reads the prompt template from `prompts/default.md` in this skill's directory
3. **Determine Output Account**: Determines which account folder to use (see Account Folder Resolution below)
4. **Generate Cover Image**: Uses `/baoyu-cover-image` skill to generate a cover image based on the article content
5. **Generate HTML**: Creates a beautifully styled HTML page following the prompt template specifications
6. **Save Output**: Saves the HTML to `~/Dev/obsidian/{account_folder}/articles/<date-title>/xhs-preview.html`
7. **Capture Screenshots**: Takes sequential 3:4 ratio screenshots of the entire page without cutting text

## Account Folder Resolution

The skill determines the output account folder using the following priority:

### Priority 1: Explicit `--account` Parameter

If the user specifies `--account`, use the corresponding folder:

```bash
/xiaohongshu-images <article> --account james-cn      # → 10_在悉尼和稀泥
/xiaohongshu-images <article> --account james-en      # → 11_BuildWithJames
/xiaohongshu-images <article> --account mom-reading-club  # → 12_妈妈在读
```
Read the full skill on GitHub

Details

Skill name
xiaohongshu-images
Repo updated
12 August 2026

FAQ

What does the Xiaohongshu Images skill do?

Transform markdown/HTML into styled 3:4 ratio images for Xiaohongshu 新手引导:输入 `/小红书配图 新手`、「这个怎么用」「第一次用」「能干嘛」时,走 SKILL.md 的〈新手上路〉,不要直接开始干活。

How do I install the Xiaohongshu Images skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add iamzifei/xiaohongshu-images-skill --skill xiaohongshu-images. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is Xiaohongshu Images popular?

It lives in iamzifei/xiaohongshu-images-skill, which has 7 GitHub stars and 0 forks.

Related skills

Youtube to Course

7

tstfully/youtube-to-course

Turn any YouTube video, or a few videos, into a fun interactive course: one HTML file with bite-sized modules, plain-English explanations, everyday metaphors, scenario quizzes with confetti, flip flashcards, glossary tooltips, progress tracking, a final score, and timestamp links back to the video. Use this skill whenever someone wants to learn from or study a YouTube video, lecture, tutorial, or podcast; make a course, lesson, lesson plan, study guide, training module, onboarding course, quiz, or flashcards from a YouTube video or playlist; or says 'turn this video into a course', 'teach me t

Images, Video & Audio

Video Notes

7

iamvista/video-notes

Use when the user gives a YouTube link or a local video file and wants an automatic transcript plus key-points notes. Triggers on /video-notes, "transcribe this video", "影片重點", "整理逐字稿", "影片逐字稿".

Images, Video & Audio

Capcut

6

mane23-ai/claude-capcut-skill

CapCut/JianYing 프로젝트 자동 편집. 타임코드 컷, 내용 기반 장면 찾기(자막+비전), 토킹헤드 무음·NG 제거, 롱폼->쇼츠 변환, 자막 생성/스타일/번역, 프로젝트 검사/롤백. 백엔드: capcut-cli 단독. 트리거: 키워드 자동 감지 + /capcut 명시 호출. CapCut 프로젝트(draft 폴더)가 입력일 때만 발화. 일반 mp4 편집은 video 스킬로 위임.

Images, Video & Audio

Video Layer Skill

7

Alexander-Kz/video-layer-skill

Produces whiteboard-explainer video layers from a voiceover MP3 for *Your Channel* YouTube channel (and similar faceless curiosity-essay channels). Orchestrates a multi-agent pipeline that transcribes the audio, plans rapid-cut scenes synchronized to narration, writes per-scene image prompts in fixed whiteboard style, generates images via Replicate (Grok Imagine Image / Nano Banana 2 / Flux Schnell), reviews them with vision agents, and assembles the final MP4 with FFmpeg. Use this skill whenever the user mentions whiteboard video, hand-drawn explainer, stick-figure animation, faceless YouTube

Images, Video & Audio

Diagram Tour

6

centraltowerlabs/diagram-tour

Generate a narrated architecture-tour video from a codebase. End-to-end: codebase analysis → Graphviz .dot → narration script → narrated MP4. Three confirmation gates between user and final video. Use when the user asks to "explain this codebase", "tour the architecture", "make a video about how X works", or invokes /diagram-tour explicitly. Output: a versioned MP4 at <project>/.diagram-tour/renders/. Expensive — confirm runtime expectations (~15-30 min on modern hardware, longer on lighter machines) before kicking off.

Images, Video & Audio

Video Editing Skill

7

kajisho5/video-editing-skill

Deterministic video editing from a typed edit request (trim, cut, concat with transitions, speed change, fit / fill / resize, still-image overlay) with an exact source-to-timeline mapping and per-operation provenance. Executes through ffmpeg-skill; never takes commands, argv, filter strings or executables. Use when an agent has already decided what to edit and needs the edit performed, verified and traced. Not for deciding what to cut, transcribing, captioning, colour grading or audio mastering.

Images, Video & Audio

Browse the most popular Claude skills, all images, video & audio skills, or write your own with the skills generator.