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:

/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 symbols, violence, gambling, smoking, or alcohol abuse
• Convey positive, constructive messages
• Be culturally sensitive and original

Use the /baoyu-cover-image skill to generate the cover image:

1. Invoke the skill with the article content:

/baoyu-cover-image ~/Dev/obsidian/{account_folder}/articles/<date>-<title>/index.md --style <auto-or-specified> --no-title

Or if the content is not yet saved, pass the content directly to the skill.

2. Style Selection:

   • Let baoyu-cover-image auto-select based on content signals, OR
   • Specify a style that matches the article tone:
     • tech - AI, coding, digital topics
     • warm - Personal stories, emotional content
     • bold - Controversial, attention-grabbing topics
     • minimal - Simple, zen-like content
     • playful - Fun, casual, beginner-friendly content
     • nature - Wellness, health, organic topics
     • retro - History, vintage, traditional topics
     • elegant - Business, professional content (default)

   Special: Mom Reading Club Template

   When using the mom-reading-club template, override the default cover style with calligraphy & ink-wash illustration (书法水墨风):

   /baoyu-cover-image <article> --style minimal --no-title --custom-prompt "Chinese calligraphy and ink-wash illustration style (书法水墨风). Zen-like simplicity with generous white space (留白). Include subtle ink-wash brush strokes as background texture. Minimalist botanical elements (bamboo, plum blossoms, orchids, lotus) when appropriate. Color palette: ink black (#1a1a1a), warm gray (#666666), subtle gold accents (#C9A962), warm off-white background (#F5F3EE). If human figures are included, depict an elegant woman aged 30-45 with a contemplative, refined demeanor. NO TEXT on the cover."
   

3. Use --no-title flag since Xiaohongshu covers typically use visual-only images without embedded text.

4. Move the generated image to the correct location:

   • baoyu-cover-image saves to imgs/cover.png relative to the article
   • Move/copy to ~/Dev/obsidian/{account_folder}/articles/<date>-<title>/_attachments/cover-xhs.png

mv ~/Dev/obsidian/{account_folder}/articles/<date>-<title>/imgs/cover.png ~/Dev/obsidian/{account_folder}/articles/<date>-<title>/_attachments/cover-xhs.png

Step 5: Generate HTML

⚠️ COMPLIANCE CHECK: Before generating HTML, review the text content for compliance:

• No absolute/superlative claims (最好、第一、国家级、最高级、全网最低价)
• No exaggerated effect claims (一分钟见效、吃完就变白)
• No false or unverified medical/financial advice
• No defamatory or offensive language
• If health/investment topics are involved, add disclaimer text

Using the prompt template and the user's content:

1. Parse the content to identify:

   • Title (h1)
   • Subtitles (h2-h6)
   • Paragraphs
   • Lists
   • Code blocks
   • Links
   • Emphasis/bold text
   • Blockquotes

2. Generate complete HTML following the template specifications:

   • Dark gradient background
   • 600px × 800px cream-colored card
   • Proper typography with Google Fonts (Noto Serif SC, Inter, JetBrains Mono)
   • Cover image at the top
   • All specified styling for text, links, lists, code blocks, etc.
   • Responsive design for mobile

3. Important HTML Structure:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Article Title</title>
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@700&family=Inter:wght@300;400;700;800&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
    <style>
        /* All CSS styles inline */
    </style>
</head>
<body>
    <div class="container">
        <img src="_attachments/cover-xhs.png" class="cover-image" alt="Cover">
        <div class="content">
            <!-- Article content -->
        </div>
    </div>
</body>
</html>

4. Save the HTML to ~/Dev/obsidian/{account_folder}/articles/<date>-<title>/xhs-preview.html

Step 6: Take Screenshots

After generating the HTML, capture sequential screenshots of the .container element at exact 3:4 aspect ratio:

Screenshot Specifications:

• Container viewport: 600px × 800px (3:4 ratio)
• Output resolution: 1200px × 1600px (2x device scale factor)
• Each screenshot captures exactly the .container element, not the full page

Capture Process:

1. Open the HTML page using Playwright browser with viewport larger than container
2. Configure browser context:
   • Viewport: 800px × 1000px (larger than container to ensure full visibility)
   • Device scale factor: 2x for high-resolution output
3. Scroll within the container:
   • The .container element has overflow-y: auto, making it internally scrollable
   • Start from scrollTop = 0 and increment through the content
   • Each scroll position captures one 3:4 ratio screenshot
4. Smart text boundary detection:
   • Before each screenshot, analyze visible block elements (p, h1-h6, li, blockquote, pre, img)
   • If an element would be cut at the bottom boundary, end the current screenshot before that element
   • Add whitespace mask to cover partial content, maintaining clean 3:4 frame
   • Next screenshot starts with the cut element at the top
5. Capture the complete .container content:
   • Use container.screenshot() to capture only the container element (excludes page background)
   • Continue until all content is captured (scrollTop reaches scrollHeight - clientHeight)
6. Save screenshots to ~/Dev/obsidian/{account_folder}/articles/<date>-<title>/_attachments/:
   • Sequential naming: xhs-01.png, xhs-02.png, xhs-03.png, etc.

Use the screenshot script:

cd {{SKILL_DIR}} && python scripts/screenshot.py ~/Dev/obsidian/{account_folder}/articles/<date>-<title>/xhs-preview.html

Script Output:

• Each screenshot: exactly 1200×1600 pixels (3:4 ratio at 2x scale)
• Only the cream-colored card content is captured
• No text is cut off between screenshots

Step 7: Report Results

After completion, report to the user:

• HTML file location
• Number of screenshots generated
• Screenshots folder location
• Preview of the first screenshot (if possible)

Directory Structure

{{SKILL_DIR}}/
├── SKILL.md              # This file
├── prompts/
│   └── default.md        # Default HTML/CSS styling prompt
│   └── mom-reading-club.md  # Mom Reading Club styling prompt
├── scripts/
│   └── screenshot.py     # Screenshot capture script
└── .gitignore

Output directory (outside skill folder):
~/Dev/obsidian/{account_folder}/articles/<date>-<title>/
├── xhs-preview.html          # Styled HTML preview page
├── imgs/                     # Created by baoyu-cover-image
│   ├── prompts/
│   │   └── cover.md          # Cover image prompt
│   └── cover.png             # Generated cover (moved to _attachments/)
└── _attachments/             # Obsidian-style attachments folder
    ├── cover-xhs.png         # Cover image (moved from imgs/cover.png)
    ├── xhs-01.png            # Screenshot page 1 (1200×1600)
    ├── xhs-02.png            # Screenshot page 2
    └── ...

Account folder mapping:
- james-cn → 10_在悉尼和稀泥
- james-en → 11_BuildWithJames
- mom-reading-club → 12_妈妈在读

Dependencies

This skill depends on:

• /baoyu-cover-image skill for cover image generation (must be installed in ~/.claude/skills/)

Example Workflow

User: Create a styled article page from this markdown:

# My Article Title

This is the introduction paragraph...

how to use xiaohongshu-images
CursorClaude CodeClineCodexWindsurfGooseGitHub CopilotVS CodeGemini CLIKiloOpencodeKimi CLIRoo ClineAiderContinueZedBolt.newLovablev0Replit AgentSweepSmol DeveloperDevinCavemanAmpAntigravity
How to use xiaohongshu-images on Cursor
AI-first code editor with Composer
1
Prerequisites
Before installing skills in Cursor, ensure your development environment meets these requirements:
›Cursor installed and configured on your development machine
›Node.js version 16.0+ with npm package manager (verify with node --version)
›Active project directory or workspace where you want to add xiaohongshu-images
2
Execute installation command
Execute the skills CLI command in your project's root directory to begin installation:
$npx skills add https://github.com/iamzifei/xiaohongshu-images-skill --skill xiaohongshu-imagescopy
The skills CLI fetches xiaohongshu-images from GitHub repository iamzifei/xiaohongshu-images-skill and configures it for Cursor.
3
Select Cursor when prompted
The CLI will show a list of available agents. Use arrow keys to navigate and space to select Cursor:
◆ Which agents do you want to install to?
│
│ ── Universal (.agents/skills) ── always included ────
│   • Amp
│   • Antigravity
│   • Cline
│   • Codex
│ ●Cursor(selected)
│   • Cursor
│   • Windsurf
4
Verify installation
Confirm successful installation by checking the skill directory location:
.cursor/skills/xiaohongshu-images
Reload or restart Cursor to activate xiaohongshu-images. Access the skill through slash commands (e.g., /xiaohongshu-images) or your agent's skill management interface.
⚠
Security & Verification Notice
We perform automated surface-level scans (Gen AI Scanner, Socket, Snyk) during installation. These checks detect common vulnerabilities but do not guarantee complete security. Always review skill source code and verify the publisher's reputation before production use.
Skills execute code in your development environment. Always verify the publisher's identity, review recent commits, and test in isolated environments before production deployment.
Additional Resources
›View source code on GitHub›Skills CLI documentation›Learn more about Cursor›What are agent skills?