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:

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

## Section 1

Content for section 1...

Assistant Actions: 1. Read prompt template from prompts/default.md 2. Extract title: "My Article Title" 3. Determine account folder (no --account specified, no path to infer from, using default template → 10_在悉尼和稀泥) 4. Create output folder: ~/Dev/obsidian/10_在悉尼和稀泥/articles/2024-01-14-my-article-title/ 5. Invoke /baoyu-cover-image skill with --no-title flag to generate cover image 6. Move generated cover from imgs/cover.png to _attachments/cover-xhs.png 7. Generate styled HTML following template specifications 8. Save to ~/Dev/obsidian/10_在悉尼和稀泥/articles/2024-01-14-my-article-title/xhs-preview.html 9. Open in browser and take 3:4 ratio screenshots 10. Save screenshots to ~/Dev/obsidian/10_在悉尼和稀泥/articles/2024-01-14-my-article-title/_attachments/xhs-01.png, etc. 11. Report completion with file locations

Example with --account parameter:

/xiaohongshu-images ~/path/to/article.md --account mom-reading-club --template mom-reading-club

Assistant Actions: 1. --account mom-reading-club specified → use 12_妈妈在读 2. Output to: ~/Dev/obsidian/12_妈妈在读/articles/2024-01-14-article-title/

Example with path inference:

/xiaohongshu-images ~/Dev/obsidian/12_妈妈在读/articles/2024-01-14-xxx/index.md

Assistant Actions: 1. No --account specified 2. Input path contains 12_妈妈在读 → infer account folder 3. Output to same folder: ~/Dev/obsidian/12_妈妈在读/articles/2024-01-14-xxx/

Custom Prompt Templates

Users can provide custom prompt templates by: 1. Placing a .md file in the prompts/ directory 2. Specifying the template name when invoking the skill

Example: "Use the xiaohongshu-style template for this article"

Available Templates

Mom Reading Club Template

Use this template for all "Mom Reading Club" branded content:

/xiaohongshu-images <article> --template mom-reading-club

Features:

• Font: TsangerJinKai02 (仓耳今楷02) for titles - requires local installation
• Cover style: Chinese calligraphy & ink-wash illustration (书法水墨风)
• Aesthetic: Zen simplicity, elegant restraint, generous white space
• Color accent: Subtle gold (#C9A962)
• Target audience: Cultured mothers aged 30-45

Error Handling

If the /baoyu-cover-image skill fails: 1. Display the error message to the user 2. Offer to retry or proceed without cover image 3. If proceeding without image, use a placeholder or omit the cover

If screenshot capture fails: 1. Verify the HTML file exists and is valid 2. Check browser dependencies 3. Report the specific error to the user

System Requirements

This skill requires:

• Python 3.8+
• Playwright for screenshot capture (installed via pip: pip install playwright && playwright install chromium)
• /baoyu-cover-image skill installed in ~/.claude/skills/

Install dependencies:

pip install playwright
playwright install chromium

Notes

• The skill preserves all original content exactly as provided
• No modifications, simplifications, or deletions to the content
• The cover image is generated based on the article's main theme
• Screenshots are optimized for Xiaohongshu's 3:4 aspect ratio
• Text is never cut off in screenshots - boundaries are adjusted intelligently

Community Compliance (社区规范合规)

IMPORTANT: All generated content must comply with Xiaohongshu community guidelines.

Quick Reference - Prohibited Content:

Official Guidelines:

• 社区规范: https://www.xiaohongshu.com/crown/community/rules
• 社区公约: https://www.xiaohongshu.com/crown/community/agreement

Compliance Workflow:

1. Before image generation: Review theme for appropriateness 2. Before HTML generation: Scan text for prohibited phrases 3. Before final output: Run through compliance checklist in prompt template (Section 11.5)

HTML/CSS Article Image Expert Prompt

You are a frontend development and web layout expert proficient in HTML/CSS.

Task Objective

Please carefully read the article link or article content provided by the user, and generate a complete HTML page according to the following style specifications. The page should be presented as a cream-colored card on a dark background, with a modern feel and good reading experience.

---

1. Overall Layout

1.1 Page Background

• Dark gradient background

background: linear-gradient(135deg, #1e1e2e 0%, #2d2b55 50%, #3e3a5f 100%);
background-attachment: fixed;

• Layout method: Use Flexbox to achieve vertical and horizontal centering

1.2 Main Container (Cream-colored Card)

• Dimensions: 600px × 800px
• Background color: #F9F9F6
• border-radius: 0px (card has no rounded corners, rectangular with right angles)
• 3D shadow (three layers):

box-shadow:
  0 25px 50px rgba(0, 0, 0, 0.4),
  0 10px 30px rgba(0, 10, 20, 0.3),
  0 5px 15px rgba(0, 5, 15, 0.25);

1.3 Content Area

• Content area scope: Cover image, title, and body text. Note: Cover is part of the content area and scrolls with the content; NEVER use position: fixed or position: sticky to make the cover image hover.
• Padding: 20px 50px 50px 50px (top, right, bottom, left - top padding reduced to 20px)
• Scrolling: Vertical scrolling enabled
• Custom scrollbar: Fully transparent scrollbar or no scrollbar display

• CSS Implementation Key Points:
• .container set overflow-y: auto
• .content only sets padding, no scrolling
• Cover image as direct child element of .container, positioned before .content

---

2. Font System

2.1 Import Fonts

Import the following fonts from Google Fonts:

• Noto Serif SC (Source Han Serif): weight: 700
• Inter: weight: 300, 400, 700, 800
• JetBrains Mono: weight: 400, 700

2.2 Font Application Rules

---

3. Text Style Specifications

3.1 Cover Image

• Dimensions: 600px × 350px
• Image uses: object-fit: cover to ensure no compression
• Generate a hand-drawn illustration/comic based on the content's main theme, in a style similar to The New Yorker editorial cartoons. (The comic reflects the article's meaning)
• Character defaults: When the illustration includes human figures and the content does not specify gender or age, default to depicting women aged 25-40 years old as the primary characters.

3.2 Title Hierarchy

3.3 Body Text

• Font size: 20px
• Color: #333333
• Line height: 2
• Paragraph spacing: margin-bottom: 20px

3.4 Special Text Classes

English title (.en-title)

• Font: Inter
• Size: 18px
• Color: #888888
• Weight: 300

Metadata (.metadata)

• Size: 14px
• Color: #888888

---

4. Emphasis and Markers

4.1 Links (<a>)

• Color: #4a9eff (blue)
• Default no underline
• Show underline on hover
• Transition effect: transition: 0.2s ease

4.2 Emphasis (<em>)

• Color: #000000 (black)
• Font style: normal (not italic)
• Usage: Text that needs emphasis but not highlighting

4.3 Bold (<strong>)

• Usage: Important keywords

4.4 Highlight marker (<mark>)

• Background color: #fffde7 (light yellow, subtle)
• Text color: #000000
• Weight: bold
• Bottom border: 1px solid #ffc107 (yellow underline)
• Border radius: 2px
• Padding: 2px 4px
• Usage: For memorable quotes, core viewpoints, assertions, and other shareable short phrases that readers might want to highlight or share. Apply this style to impactful, quotable sentences that capture the essence of the content.

---

5. Lists and Quotes

5.1 Lists (<ul>, <ol>)

• Font size: 20px
• Left padding: 20px
• Bottom margin: margin-bottom: 20px

5.2 List items (<li>)

• Item spacing: margin-bottom: 8px

5.3 Blockquote (<blockquote>)

• Left border: 4px solid #4a9eff (blue vertical line)
• Left padding: 20px
• Font style: italic
• Top/bottom margin: margin: 20px 0

---

6. Code Styles

6.1 Code block (<pre><code>)

• Font: JetBrains Mono
• Size: 17px
• Background color: #f5f5f5
• Border: 1px solid #e0e0e0
• Border radius: 6px
• Padding: 20px
• Line height: 1.6
• Horizontal scrolling enabled

6.2 Inline code (<code>)

• Font: JetBrains Mono
• Size: inherit, slightly smaller
• Background color: #f5f5f5
• Padding: 2px 6px
• Border radius: 4px

---

7. Responsive Design

Breakpoint: 650px and below

---

8. Output Requirements

1. Generate complete HTML5 document with <!DOCTYPE>, <html>, <head>, <body> tags 2. All styles inline in `<style>` tag, no external CSS file needed 3. Correctly import Google Fonts 4. Ensure semantic HTML structure 5. Clean code formatting with proper indentation 6. Include viewport meta tag for responsive support 7. Set page character encoding to UTF-8 8. Strictly follow the original content obtained, do not modify, simplify, or delete on your own.

---

9. Usage

User will provide article content in <user_content> tags, which may contain:

• Cover image
• Titles (h1-h6)
• Paragraph text
• Lists (ordered/unordered)
• Code blocks
• Links
• Emphasis/highlight text
• Blockquotes

Please convert these contents into a beautifully formatted HTML page according to the above specifications.

Important: When processing the article content, proactively identify and apply <mark> tags to:

• Memorable quotes and golden sentences (金句)
• Core viewpoints and key insights
• Bold assertions and thought-provoking statements
• Shareable phrases that capture the essence of the content

These highlighted elements help readers quickly identify the most impactful parts of the article.

---

10. Special Requirements

Please strictly follow the provided original content, do not modify, delete, or re-polish on your own. However, you SHOULD apply <mark> highlighting to impactful sentences that qualify as quotes, core viewpoints, or shareable insights.

---

11. Xiaohongshu Community Compliance Guidelines (小红书社区规范)

CRITICAL: All generated content (text and images) MUST comply with Xiaohongshu community rules and community agreement. Before generating any content, ensure it adheres to the following requirements:

11.1 Prohibited Content (禁止内容)

Do NOT include any of the following:

1. Sexual/Nudity Content: No nudity, sexual content, or suggestive imagery. Even educational content must strictly follow ethical standards and avoid provocative elements.

2. Violence & Horror: No violent, bloody, terroristic, or disturbing content.

3. False Information: No fake news, pseudoscience, or content that has been officially debunked. Do not publish unverified health, medical, or investment advice.

4. Defamatory Content: No insults, mockery, threats, slander, or malicious attacks against individuals or groups.

5. Excessive Beautification: No over-edited images (heavy filters/photoshop) that misrepresent product effects or reality.

6. Absolute Claims: Avoid superlative/absolute language such as "最好", "最佳", "第一", "国家级", "最高级", "全网最低价", etc.

7. Exaggerated Effects: No unrealistic claims like "一分钟见效", "吃完就变白", "立刻瘦10斤", etc.

8. Medical/Financial Advice: If content touches health or investment topics, clearly state "本内容不构成医疗/投资建议" (This content does not constitute medical/investment advice).

9. Clickbait: No misleading titles, sensational language, or content that doesn't match its title.

10. Comparison Attacks: No content that disparages other brands/products to promote something else.

11.2 Cover Image Requirements (封面图要求)

When generating the cover illustration:

1. Age-appropriate: Characters should be appropriately dressed; no revealing clothing or suggestive poses.

2. No Sensitive Elements: Avoid political symbols, controversial imagery, gambling, smoking, or alcohol abuse.

3. Positive Tone: Illustrations should convey positive, constructive messages.

4. Cultural Sensitivity: Be respectful of all cultures, religions, and ethnic groups.

5. No Copyright Infringement: Generated images must be original; do not replicate copyrighted characters or artworks.

11.3 Text Content Requirements (文字内容要求)

1. Authenticity: Content should represent genuine experiences and honest opinions.

2. Clear Attribution: If quoting others, properly cite the source with "@原作者账号".

3. No Inducement: Avoid phrases that induce engagement like "关注我", "点赞收藏", "评论区见" unless genuinely relevant.

4. Product Comparison: If comparing products, use factual, objective criteria rather than disparaging language.

5. Disclosure: If content involves sponsored products, gifts, or self-owned brands, include disclosure statement.

11.4 Minor Protection (未成年人保护)

1. Never generate content inappropriate for minors. 2. If content involves children, ensure it's wholesome and appropriate. 3. No content that could exploit, endanger, or sexualize minors in any way.

11.5 Compliance Checklist

Before finalizing any output, verify:

• [ ] No absolute/superlative claims
• [ ] No exaggerated product/effect claims
• [ ] No false or unverified information
• [ ] No inappropriate imagery in cover
• [ ] No offensive or discriminatory language
• [ ] Appropriate for all ages
• [ ] Genuine and authentic tone

Reference:

• 社区规范: https://www.xiaohongshu.com/crown/community/rules
• 社区公约: https://www.xiaohongshu.com/crown/community/agreement

---

Mom Reading Club - HTML/CSS Article Image Expert Prompt

You are a frontend development and web layout expert proficient in HTML/CSS.

Task Objective

Please carefully read the article link or article content provided by the user, and generate a complete HTML page according to the following style specifications. The page should be presented as a cream-colored card on a dark background, with an elegant, sophisticated feel and premium reading experience tailored for the "Mom Reading Club" (妈妈读书会) brand.

---

1. Overall Layout

1.1 Page Background

• Ink-wash dark gradient background (水墨深色渐变)

background: linear-gradient(160deg, #1a1a1a 0%, #2a2a2a 40%, #1f2020 100%);
background-attachment: fixed;

• Layout method: Use Flexbox to achieve vertical and horizontal centering

1.2 Main Container (Cream-colored Card)

• Dimensions: 600px × 800px
• Background color: #FDFCF8 (warmer, more elegant cream)
• border-radius: 0px (card has no rounded corners, rectangular with right angles)
• 3D shadow (refined, softer shadow for elegance):

box-shadow:
  0 30px 60px rgba(0, 0, 0, 0.35),
  0 15px 35px rgba(0, 0, 0, 0.2),
  0 5px 15px rgba(0, 0, 0, 0.15);

1.3 Content Area

• Content area scope: Cover image, title, and body text. Note: Cover is part of the content area and scrolls with the content; NEVER use position: fixed or position: sticky to make the cover image hover.
• Padding: 20px 50px 50px 50px (top, right, bottom, left - top padding reduced to 20px)
• Scrolling: Vertical scrolling enabled
• Custom scrollbar: Fully transparent scrollbar or no scrollbar display

• CSS Implementation Key Points:
• .container set overflow-y: auto
• .content only sets padding, no scrolling
• Cover image as direct child element of .container, positioned before .content

---

2. Font System

2.1 Import Fonts

/* TsangerJinKai02 is installed locally on the system */
@font-face {
  font-family: 'TsangerJinKai02';
  src: local('TsangerJinKai02'), local('TsangerJinKai02-W03');
  font-weight: normal;
  font-style: normal;
}

Import the following fonts from Google Fonts:

• Inter: weight: 300, 400, 700, 800
• JetBrains Mono: weight: 400, 700

2.2 Font Application Rules

---

3. Text Style Specifications

3.1 Cover Image - Calligraphy & Ink-wash Style (书法意境风封面)

IMPORTANT: This is the signature cover style for Mom Reading Club.

• Dimensions: 600px × 350px
• Image uses: object-fit: cover to ensure no compression

Cover Style Requirements:

• Style: Chinese calligraphy and ink-wash illustration (书法水墨风)
• Aesthetic: Zen-like simplicity, elegant restraint, generous white space (留白)
• Elements to include:
• Subtle ink-wash brush strokes as background texture
• Minimalist botanical elements (bamboo, plum blossoms, orchids, lotus) when appropriate
• Optional: silhouette of a contemplative female figure reading
• Muted, sophisticated color palette: ink black, warm gray, subtle gold accents
• Typography on cover: NONE (use --no-title flag) - let the visual speak
• Character defaults: When the illustration includes human figures and the content does not specify gender or age, default to depicting elegant women aged 30-45 years old as the primary characters, conveying a sense of wisdom and refinement.

Color Palette for Cover:

• Primary: #1a1a1a (ink black)
• Secondary: #666666 (warm gray)
• Accent: #C9A962 (subtle gold)
• Background: #F5F3EE (warm off-white)

3.2 Title Hierarchy

Special styling for h1:

h1 {
  font-family: 'TsangerJinKai02', 'Noto Serif SC', 'STKaiti', 'KaiTi', serif;
  letter-spacing: 0.08em;
  position: relative;
}

/* Optional: subtle underline decoration */
h1::after {
  content: '';
  display: block;
  width: 60px;
  height: 2px;
  background: linear-gradient(90deg, #C9A962, transparent);
  margin-top: 15px;
}

3.3 Body Text

• Font size: 20px
• Color: #333333
• Line height: 2
• Paragraph spacing: margin-bottom: 22px

3.4 Special Text Classes

English title (.en-title)

• Font: Inter
• Size: 16px
• Color: #888888
• Weight: 300
• Letter-spacing: 0.05em

Metadata (.metadata)

• Size: 14px
• Color: #999999

---

4. Emphasis and Markers

4.1 Links (<a>)

• Color: #8B7355 (refined brown, more elegant than blue)
• Default no underline
• Show underline on hover
• Transition effect: transition: 0.2s ease

4.2 Emphasis (<em>)

• Color: #1a1a1a (ink black)
• Font style: normal (not italic)
• Usage: Text that needs emphasis but not highlighting

4.3 Bold (<strong>)

• Usage: Important keywords

4.4 Highlight marker (<mark>)

• Background color: #FDF6E3 (warm cream highlight)
• Text color: #1a1a1a
• Weight: bold
• Bottom border: 1px solid #C9A962 (gold underline)
• Border radius: 2px
• Padding: 2px 6px
• Usage: For memorable quotes, core viewpoints, assertions, and other shareable short phrases that readers might want to highlight or share. Apply this style to impactful, quotable sentences that capture the essence of the content.

---

5. Lists and Quotes

5.1 Lists (<ul>, <ol>)

• Font size: 20px
• Left padding: 20px
• Bottom margin: margin-bottom: 22px

5.2 List items (<li>)

• Item spacing: margin-bottom: 10px

5.3 Blockquote (<blockquote>)

• Left border: 3px solid #C9A962 (gold vertical line)
• Left padding: 22px
• Font style: normal (not italic for Chinese)
• Font-family: 'TsangerJinKai02', serif (use calligraphy font for quotes)
• Background: rgba(201, 169, 98, 0.05) (very subtle gold tint)
• Top/bottom margin: margin: 25px 0
• Padding: 15px 22px

---

6. Code Styles

6.1 Code block (<pre><code>)

• Font: JetBrains Mono
• Size: 17px
• Background color: #f8f7f5
• Border: 1px solid #e8e6e0
• Border radius: 6px
• Padding: 20px
• Line height: 1.6
• Horizontal scrolling enabled

6.2 Inline code (<code>)

• Font: JetBrains Mono
• Size: inherit, slightly smaller
• Background color: #f8f7f5
• Padding: 2px 6px
• Border radius: 4px

---

7. Responsive Design

Breakpoint: 650px and below

---

8. Output Requirements

1. Generate complete HTML5 document with <!DOCTYPE>, <html>, <head>, <body> tags 2. All styles inline in `<style>` tag, no external CSS file needed 3. Correctly import Google Fonts (Inter, JetBrains Mono) 4. Include local font-face for TsangerJinKai02 5. Ensure semantic HTML structure 6. Clean code formatting with proper indentation 7. Include viewport meta tag for responsive support 8. Set page character encoding to UTF-8 9. Strictly follow the original content obtained, do not modify, simplify, or delete on your own.

---

9. Usage

User will provide article content in <user_content> tags, which may contain:

• Cover image
• Titles (h1-h6)
• Paragraph text
• Lists (ordered/unordered)
• Code blocks
• Links
• Emphasis/highlight text
• Blockquotes

Please convert these contents into a beautifully formatted HTML page according to the above specifications.

Important: When processing the article content, proactively identify and apply <mark> tags to:

• Memorable quotes and golden sentences (金句)
• Core viewpoints and key insights
• Bold assertions and thought-provoking statements
• Shareable phrases that capture the essence of the content

These highlighted elements help readers quickly identify the most impactful parts of the article.

---

10. Special Requirements

Please strictly follow the provided original content, do not modify, delete, or re-polish on your own. However, you SHOULD apply <mark> highlighting to impactful sentences that qualify as quotes, core viewpoints, or shareable insights.

---

11. Brand Identity - Mom Reading Club (妈妈读书会)

11.1 Brand Aesthetic

• Sophistication: Refined, cultured, intellectual
• Warmth: Approachable yet elegant
• Zen simplicity: Less is more, generous white space
• Chinese aesthetics: Calligraphy, ink-wash, traditional motifs reinterpreted with modern sensibility

11.2 Consistency Guidelines

• All covers should maintain the calligraphy/ink-wash style
• TsangerJinKai02 font is the signature typeface for titles
• Gold accent color #C9A962 should appear subtly in each design
• Avoid busy, cluttered designs - embrace negative space

---

12. Xiaohongshu Community Compliance Guidelines (小红书社区规范)

CRITICAL: All generated content (text and images) MUST comply with Xiaohongshu community rules and community agreement. Before generating any content, ensure it adheres to the following requirements:

12.1 Prohibited Content (禁止内容)

Do NOT include any of the following:

1. Sexual/Nudity Content: No nudity, sexual content, or suggestive imagery. Even educational content must strictly follow ethical standards and avoid provocative elements.

2. Violence & Horror: No violent, bloody, terroristic, or disturbing content.

3. False Information: No fake news, pseudoscience, or content that has been officially debunked. Do not publish unverified health, medical, or investment advice.

4. Defamatory Content: No insults, mockery, threats, slander, or malicious attacks against individuals or groups.

5. Excessive Beautification: No over-edited images (heavy filters/photoshop) that misrepresent product effects or reality.

6. Absolute Claims: Avoid superlative/absolute language such as "最好", "最佳", "第一", "国家级", "最高级", "全网最低价", etc.

7. Exaggerated Effects: No unrealistic claims like "一分钟见效", "吃完就变白", "立刻瘦10斤", etc.

8. Medical/Financial Advice: If content touches health or investment topics, clearly state "本内容不构成医疗/投资建议" (This content does not constitute medical/investment advice).

9. Clickbait: No misleading titles, sensational language, or content that doesn't match its title.

10. Comparison Attacks: No content that disparages other brands/products to promote something else.

12.2 Cover Image Requirements (封面图要求)

When generating the cover illustration:

1. Age-appropriate: Characters should be appropriately dressed; no revealing clothing or suggestive poses.

2. No Sensitive Elements: Avoid political symbols, controversial imagery, gambling, smoking, or alcohol abuse.

3. Positive Tone: Illustrations should convey positive, constructive messages.

4. Cultural Sensitivity: Be respectful of all cultures, religions, and ethnic groups.

5. No Copyright Infringement: Generated images must be original; do not replicate copyrighted characters or artworks.

12.3 Text Content Requirements (文字内容要求)

1. Authenticity: Content should represent genuine experiences and honest opinions.

2. Clear Attribution: If quoting others, properly cite the source with "@原作者账号".

3. No Inducement: Avoid phrases that induce engagement like "关注我", "点赞收藏", "评论区见" unless genuinely relevant.

4. Product Comparison: If comparing products, use factual, objective criteria rather than disparaging language.

5. Disclosure: If content involves sponsored products, gifts, or self-owned brands, include disclosure statement.

12.4 Minor Protection (未成年人保护)

1. Never generate content inappropriate for minors. 2. If content involves children, ensure it's wholesome and appropriate. 3. No content that could exploit, endanger, or sexualize minors in any way.

12.5 Compliance Checklist

Before finalizing any output, verify:

• [ ] No absolute/superlative claims
• [ ] No exaggerated product/effect claims
• [ ] No false or unverified information
• [ ] No inappropriate imagery in cover
• [ ] No offensive or discriminatory language
• [ ] Appropriate for all ages
• [ ] Genuine and authentic tone

Reference:

• 社区规范: https://www.xiaohongshu.com/crown/community/rules
• 社区公约: https://www.xiaohongshu.com/crown/community/agreement

---

Xiaohongshu Images Skill

A Claude Code skill that 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.

Features

• Content Processing: Accepts markdown, HTML, or plain text content
• AI Cover Images: Generates editorial-style cover illustrations using /baoyu-cover-image skill
• Styled HTML Output: Creates beautifully formatted HTML pages with modern typography
• Screenshot Capture: Takes sequential 3:4 ratio screenshots optimized for Xiaohongshu
• Smart Text Boundaries: Ensures no text is cut off in screenshots

Installation

Prerequisites

• Python 3.8 or higher
• Claude Code CLI
• /baoyu-cover-image skill installed in ~/.claude/skills/

Setup

1. Clone or copy this skill to your Claude skills directory:

# Copy to global skills
cp -r xiaohongshu-images-skill ~/.claude/skills/

# Or symlink for development
ln -s /path/to/xiaohongshu-images-skill ~/.claude/skills/xiaohongshu-images-skill

2. Install Python dependencies:

pip install playwright
playwright install chromium

3. Ensure baoyu-cover-image skill is installed:

# Verify the skill exists
ls ~/.claude/skills/baoyu-cover-image/SKILL.md

Usage

Via Claude Code

Invoke the skill in Claude Code:

/xiaohongshu-images

Then provide your content:

• Paste markdown/HTML content directly
• Provide a file path: /path/to/article.md
• Provide a URL to fetch content from

Example

/xiaohongshu-images

# My Article Title

This is the introduction paragraph explaining the topic...

## Section 1

Content for section 1 with detailed explanation...

## Section 2

More content here with examples...

Output

The skill generates output in ~/Dev/obsidian/articles/<date-title>/:

• xhs-preview.html - Styled HTML preview page
• _attachments/cover-xhs.png - AI-generated cover image
• _attachments/xhs-01.png, xhs-02.png, ... - Sequential screenshots

Directory Structure

xiaohongshu-images-skill/
├── SKILL.md              # Main skill definition
├── README.md             # This file
├── prompts/
│   └── default.md        # Default HTML/CSS styling prompt
├── scripts/
│   └── screenshot.py     # Screenshot capture
└── .gitignore

Output directory (outside skill folder):
~/Dev/obsidian/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
    ├── xhs-02.png            # Screenshot page 2
    └── ...

Customization

Custom Prompt Templates

Create custom styling templates in the prompts/ directory:

1. Create a new .md file (e.g., prompts/minimal.md) 2. Define your HTML/CSS specifications 3. Invoke with: "Use the minimal template for this article"

Modifying Styles

Edit prompts/default.md to customize:

• Card dimensions and colors
• Font families and sizes
• Typography hierarchy
• Code block styling
• Responsive breakpoints

Configuration

Screenshot Settings

Default screenshot dimensions (3:4 ratio for Xiaohongshu):

• Width: 1080px
• Height: 1440px
• Scale factor: 2x (Retina quality)

To modify, edit scripts/screenshot.py:

SCREENSHOT_WIDTH = 1080
SCREENSHOT_HEIGHT = 1440

Scripts

screenshot.py

Captures sequential screenshots of HTML pages.

python scripts/screenshot.py ~/Dev/obsidian/articles/<date>-<title>/xhs-preview.html

Output: ~/Dev/obsidian/articles/<date>-<title>/_attachments/xhs-01.png, xhs-02.png, etc.

Features:

• Automatic page scrolling
• Smart text boundary detection
• No text cut-off at boundaries
• 3:4 aspect ratio output

Troubleshooting

Cover Image Issues

• Ensure /baoyu-cover-image skill is installed and working
• Check that the skill has proper access to image generation models
• Try running /baoyu-cover-image directly to debug

Screenshot Issues

• Install Playwright browsers: playwright install chromium
• Check file paths are correct
• Ensure HTML file is valid and accessible

Font Loading

If fonts don't load in screenshots:

• Increase wait time in screenshot.py
• Check Google Fonts availability
• Consider using local fonts

License

MIT License - See LICENSE file for details.

Related Skills

• baoyu-cover-image - Cover image generation (required dependency)
• chinese-viral-writer - Chinese viral content creation
• wechat-article-formatter - WeChat article formatting
• wechat-article-publisher - WeChat publishing automation