Xiaohongshu Images
Turn long-form markdown or HTML into Xiaohongshu-ready 3:4 carousel images with an AI cover and full-page screenshots saved beside your Obsidian vault.
Overview
Xiaohongshu Images is an agent skill for the Grow phase that converts markdown or HTML articles into styled 3:4 HTML previews, AI covers, and sequential screenshots ready for Xiaohongshu posting.
Install
npx skills add https://github.com/iamzifei/xiaohongshu-images-skill --skill xiaohongshu-imagesWhat is this skill?
- End-to-end pipeline: ingest markdown/HTML/txt, render styled HTML, generate cover via baoyu-cover-image, capture sequent
- Account-folder resolution via explicit --account flags (e.g. james-cn, james-en) mapping to Obsidian vault paths under ~
- Loads prompt template from prompts/default.md in the skill directory for consistent Xiaohongshu visual layout
- Saves xhs-preview.html alongside captured images for review before posting
- 3:4 ratio capture for Xiaohongshu layouts
- Sequential full-page screenshots designed to avoid cutting text mid-line
Adoption & trust: 1.7k installs on skills.sh; 6 GitHub stars; 1/3 security scanners passed (skills.sh audits).
What problem does it solve?
You have a long article in markdown but Xiaohongshu needs polished carousel frames at 3:4 without chopping sentences or rebuilding layouts by hand.
Who is it for?
Indie builders and creators who draft in Obsidian (or similar), run multiple language or brand accounts, and post educational carousels to Xiaohongshu on a schedule.
Skip if: Teams that only need English LinkedIn graphics, builders with no Obsidian-style vault layout, or anyone who wants a one-off meme image without article structure.
When should I use this skill?
Transform markdown/HTML into styled 3:4 ratio images for Xiaohongshu posting.
What do I get? / Deliverables
You get a saved xhs-preview.html, a generated cover image, and ordered full-page screenshots in your Obsidian article folder ready to upload.
- xhs-preview.html in the dated article folder
- AI-generated cover image
- Sequential 3:4 ratio screenshots of the full page
Recommended Skills
Journey fit
Repurposing articles into platform-native visuals is a compounding content workflow after you have something to say—classic Grow shelf for lifecycle and channel content. Output is styled previews and screenshot sequences for posting, not idea research or ship-time QA—fits the content subphase under Grow.
How it compares
A workflow skill for social carousel production—not a generic markdown-to-PDF or standalone image generator without account routing.
Common Questions / FAQ
Who is xiaohongshu-images for?
Solo and indie creators who publish on Xiaohongshu and already organize articles under named Obsidian account folders with optional --account targets.
When should I use xiaohongshu-images?
Use it in Grow when repurposing a finished article into carousel assets; use it in Launch when preparing distribution assets for a new post; use it in Build/docs only if you are previewing how documentation reads as social slides.
Is xiaohongshu-images safe to install?
It writes to your filesystem under ~/Dev/obsidian and chains another cover-image skill—review the Security Audits panel on this page and confirm vault paths before running.
Workflow Chain
Requires first: baoyu cover image
SKILL.md
READMESKILL.md - Xiaohongshu Images
# 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_妈妈在读 ``` ### Priority 2: Infer from Input File Path If no `--account` is specified, try to infer from the input file path: ``` Input: ~/Dev/obsidian/12_妈妈在读/articles/2026-01-20-xxx/index.md → Output to: ~/Dev/obsidian/12_妈妈在读/articles/2026-01-20-xxx/ Input: ~/Dev/obsidian/10_在悉尼和稀泥/articles/2026-01-20-xxx/index.md → Output to: ~/Dev/obsidian/10_在悉尼和稀泥/articles/2026-01-20-xxx/ ``` ### Priority 3: Fallback to Template Mapping If the account cannot be determined from the path (e.g., raw content input), use template-based mapping: | Template | Account Folder | |----------|----------------| | `default` | `10_在悉尼和稀泥` | | `mom-reading-club` | `12_妈妈在读` | ### Account Folder Mapping Reference | Account | Folder | |---------|--------| | `james-cn` | `10_在悉尼和稀泥` | | `james-en` | `11_BuildWithJames` | | `mom-reading-club` | `12_妈妈在读` | ## Usage When the user invokes this skill, follow these steps: ### Step 1: Identify the Input The user will provide one of the following: - A file path to a markdown, HTML, or txt file (e.g., `/path/to/article.md`) - Raw content directly in the conversation - A URL to fetch content from If the input is unclear, ask the user to provide either a file path, URL, or paste the content directly. ### Step 2: Read the Prompt Template Read the prompt template from this skill's directory: ``` {{SKILL_DIR}}/prompts/default.md ``` Use the Read tool to get the prompt template content. This template defines the HTML/CSS styling specifications. ### Step 3: Extract Article Title, Date, and Determine Account From the content, extract: - **Title**: The main heading (h1) or first significant title in the content - **Date**: Current date in YYYY-MM-DD format - **Account Folder**: Determine using the priority rules above (--account → path inference → template mapping) Create the output folder path as: `~/Dev/obsidian/{account_folder}/articles/<date>-<sanitized-title>/` - Replace spaces with hyphens - Remove special characters - Keep the title reasonably short (max 50 characters) - All images go in `_attachments/` subfolder ### Step 4: Generate Cover Image with baoyu-cover-image Skill **⚠️ COMPLIANCE CHECK**: Before generating, ensure the image concept complies with Xiaohongshu community guidelines (Section 11 of the prompt template). The image must: - Be age-appropriate with no revealing clothing or suggestive poses - Avoid political s