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:

Account Folder Mapping Reference

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