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...