Xiaohongshu Images

1---2name: xiaohongshu-images3description: Transform markdown/HTML into styled 3:4 ratio images for Xiaohongshu4---5 6# Xiaohongshu Images Skill7 8This 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.9 10## Overview11 12The skill performs the following workflow:13 141. **Accept Content**: Receives markdown, HTML, or txt format content from the user152. **Load Prompt Template**: Reads the prompt template from `prompts/default.md` in this skill's directory163. **Determine Output Account**: Determines which account folder to use (see Account Folder Resolution below)174. **Generate Cover Image**: Uses `/baoyu-cover-image` skill to generate a cover image based on the article content185. **Generate HTML**: Creates a beautifully styled HTML page following the prompt template specifications196. **Save Output**: Saves the HTML to `~/Dev/obsidian/{account_folder}/articles/<date-title>/xhs-preview.html`207. **Capture Screenshots**: Takes sequential 3:4 ratio screenshots of the entire page without cutting text21 22## Account Folder Resolution23 24The skill determines the output account folder using the following priority:25 26### Priority 1: Explicit `--account` Parameter27 28If the user specifies `--account`, use the corresponding folder:29 30```bash31/xiaohongshu-images <article> --account james-cn      # → 10_在悉尼和稀泥32/xiaohongshu-images <article> --account james-en      # → 11_BuildWithJames33/xiaohongshu-images <article> --account mom-reading-club  # → 12_妈妈在读34```35 36### Priority 2: Infer from Input File Path37 38If no `--account` is specified, try to infer from the input file path:39 40```41Input: ~/Dev/obsidian/12_妈妈在读/articles/2026-01-20-xxx/index.md42       → Output to: ~/Dev/obsidian/12_妈妈在读/articles/2026-01-20-xxx/43 44Input: ~/Dev/obsidian/10_在悉尼和稀泥/articles/2026-01-20-xxx/index.md45       → Output to: ~/Dev/obsidian/10_在悉尼和稀泥/articles/2026-01-20-xxx/46```47 48### Priority 3: Fallback to Template Mapping49 50If the account cannot be determined from the path (e.g., raw content input), use template-based mapping:51 52| Template | Account Folder |53|----------|----------------|54| `default` | `10_在悉尼和稀泥` |55| `mom-reading-club` | `12_妈妈在读` |56 57### Account Folder Mapping Reference58 59| Account | Folder |60|---------|--------|61| `james-cn` | `10_在悉尼和稀泥` |62| `james-en` | `11_BuildWithJames` |63| `mom-reading-club` | `12_妈妈在读` |64 65## Usage66 67When the user invokes this skill, follow these steps:68 69### Step 1: Identify the Input70 71The user will provide one of the following:72- A file path to a markdown, HTML, or txt file (e.g., `/path/to/article.md`)73- Raw content directly in the conversation74- A URL to fetch content from75 76If the input is unclear, ask the user to provide either a file path, URL, or paste the content directly.77 78### Step 2: Read the Prompt Template79 80Read the prompt template from this skill's directory:81 82```83{{SKILL_DIR}}/prompts/default.md84```85 86Use the Read tool to get the prompt template content. This template defines the HTML/CSS styling specifications.87 88### Step 3: Extract Article Title, Date, and Determine Account89 90From the content, extract:91- **Title**: The main heading (h1) or first significant title in the content92- **Date**: Current date in YYYY-MM-DD format93- **Account Folder**: Determine using the priority rules above (--account → path inference → template mapping)94 95Create the output folder path as: `~/Dev/obsidian/{account_folder}/articles/<date>-<sanitized-title>/`96- Replace spaces with hyphens97- Remove special characters98- Keep the title reasonably short (max 50 characters)99- All images go in `_attachments/` subfolder100 101### Step 4: Generate Cover Image with baoyu-cover-image Skill102 103**⚠️ COMPLIANCE CHECK**: Before generating, ensure the image concept complies with Xiaohongshu community guidelines (Section 11 of the prompt template). The image must:104- Be age-appropriate with no revealing clothing or suggestive poses105- Avoid political symbols, violence, gambling, smoking, or alcohol abuse106- Convey positive, constructive messages107- Be culturally sensitive and original108 109Use the `/baoyu-cover-image` skill to generate the cover image:110 1111. **Invoke the skill** with the article content:112 113```bash114/baoyu-cover-image ~/Dev/obsidian/{account_folder}/articles/<date>-<title>/index.md --style <auto-or-specified> --no-title115```116 117Or if the content is not yet saved, pass the content directly to the skill.118 1192. **Style Selection**:120   - Let baoyu-cover-image auto-select based on content signals, OR121   - Specify a style that matches the article tone:122     - `tech` - AI, coding, digital topics123     - `warm` - Personal stories, emotional content124     - `bold` - Controversial, attention-grabbing topics125     - `minimal` - Simple, zen-like content126     - `playful` - Fun, casual, beginner-friendly content127     - `nature` - Wellness, health, organic topics128     - `retro` - History, vintage, traditional topics129     - `elegant` - Business, professional content (default)130 131   **Special: Mom Reading Club Template**132 133   When using the `mom-reading-club` template, override the default cover style with **calligraphy & ink-wash illustration (书法水墨风)**:134 135   ```bash136   /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."137   ```138 1393. **Use `--no-title` flag** since Xiaohongshu covers typically use visual-only images without embedded text.140 1414. **Move the generated image** to the correct location:142   - baoyu-cover-image saves to `imgs/cover.png` relative to the article143   - Move/copy to `~/Dev/obsidian/{account_folder}/articles/<date>-<title>/_attachments/cover-xhs.png`144 145```bash146mv ~/Dev/obsidian/{account_folder}/articles/<date>-<title>/imgs/cover.png ~/Dev/obsidian/{account_folder}/articles/<date>-<title>/_attachments/cover-xhs.png147```148 149### Step 5: Generate HTML150 151**⚠️ COMPLIANCE CHECK**: Before generating HTML, review the text content for compliance:152- No absolute/superlative claims (最好、第一、国家级、最高级、全网最低价)153- No exaggerated effect claims (一分钟见效、吃完就变白)154- No false or unverified medical/financial advice155- No defamatory or offensive language156- If health/investment topics are involved, add disclaimer text157 158Using the prompt template and the user's content:159 1601. **Parse the content** to identify:161   - Title (h1)162   - Subtitles (h2-h6)163   - Paragraphs164   - Lists165   - Code blocks166   - Links167   - Emphasis/bold text168   - Blockquotes169 1702. **Generate complete HTML** following the template specifications:171   - Dark gradient background172   - 600px × 800px cream-colored card173   - Proper typography with Google Fonts (Noto Serif SC, Inter, JetBrains Mono)174   - Cover image at the top175   - All specified styling for text, links, lists, code blocks, etc.176   - Responsive design for mobile177 1783. **Important HTML Structure**:179 180```html181<!DOCTYPE html>182<html lang="zh-CN">183<head>184    <meta charset="UTF-8">185    <meta name="viewport" content="width=device-width, initial-scale=1.0">186    <title>Article Title</title>187    <!-- Google Fonts -->188    <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">189    <style>190        /* All CSS styles inline */191    </style>192</head>193<body>194    <div class="container">195        <img src="_attachments/cover-xhs.png" class="cover-image" alt="Cover">196        <div class="content">197            <!-- Article content -->198        </div>199    </div>200</body>201</html>202```203 2044. **Save the HTML** to `~/Dev/obsidian/{account_folder}/articles/<date>-<title>/xhs-preview.html`205 206### Step 6: Take Screenshots207 208After generating the HTML, capture sequential screenshots of the `.container` element at **exact 3:4 aspect ratio**:209 210**Screenshot Specifications:**211- Container viewport: 600px × 800px (3:4 ratio)212- Output resolution: 1200px × 1600px (2x device scale factor)213- Each screenshot captures exactly the `.container` element, not the full page214 215**Capture Process:**216 2171. **Open the HTML page** using Playwright browser with viewport larger than container2182. **Configure browser context**:219   - Viewport: 800px × 1000px (larger than container to ensure full visibility)220   - Device scale factor: 2x for high-resolution output2213. **Scroll within the container**:222   - The `.container` element has `overflow-y: auto`, making it internally scrollable223   - Start from `scrollTop = 0` and increment through the content224   - Each scroll position captures one 3:4 ratio screenshot2254. **Smart text boundary detection**:226   - Before each screenshot, analyze visible block elements (p, h1-h6, li, blockquote, pre, img)227   - If an element would be cut at the bottom boundary, end the current screenshot before that element228   - Add whitespace mask to cover partial content, maintaining clean 3:4 frame229   - Next screenshot starts with the cut element at the top2305. **Capture the complete `.container` content**:231   - Use `container.screenshot()` to capture only the container element (excludes page background)232   - Continue until all content is captured (scrollTop reaches scrollHeight - clientHeight)2336. **Save screenshots** to `~/Dev/obsidian/{account_folder}/articles/<date>-<title>/_attachments/`:234   - Sequential naming: `xhs-01.png`, `xhs-02.png`, `xhs-03.png`, etc.235 236**Use the screenshot script:**237 238```bash239cd {{SKILL_DIR}} && python scripts/screenshot.py ~/Dev/obsidian/{account_folder}/articles/<date>-<title>/xhs-preview.html240```241 242**Script Output:**243- Each screenshot: exactly 1200×1600 pixels (3:4 ratio at 2x scale)244- Only the cream-colored card content is captured245- No text is cut off between screenshots246 247### Step 7: Report Results248 249After completion, report to the user:250- HTML file location251- Number of screenshots generated252- Screenshots folder location253- Preview of the first screenshot (if possible)254 255## Directory Structure256 257```258{{SKILL_DIR}}/259├── SKILL.md              # This file260├── prompts/261│   └── default.md        # Default HTML/CSS styling prompt262│   └── mom-reading-club.md  # Mom Reading Club styling prompt263├── scripts/264│   └── screenshot.py     # Screenshot capture script265└── .gitignore266 267Output directory (outside skill folder):268~/Dev/obsidian/{account_folder}/articles/<date>-<title>/269├── xhs-preview.html          # Styled HTML preview page270├── imgs/                     # Created by baoyu-cover-image271│   ├── prompts/272│   │   └── cover.md          # Cover image prompt273│   └── cover.png             # Generated cover (moved to _attachments/)274└── _attachments/             # Obsidian-style attachments folder275    ├── cover-xhs.png         # Cover image (moved from imgs/cover.png)276    ├── xhs-01.png            # Screenshot page 1 (1200×1600)277    ├── xhs-02.png            # Screenshot page 2278    └── ...279 280Account folder mapping:281- james-cn → 10_在悉尼和稀泥282- james-en → 11_BuildWithJames283- mom-reading-club → 12_妈妈在读284```285 286## Dependencies287 288This skill depends on:289- `/baoyu-cover-image` skill for cover image generation (must be installed in `~/.claude/skills/`)290 291## Example Workflow292 293**User:** Create a styled article page from this markdown:294 295```markdown296# My Article Title297 298This is the introduction paragraph...299 300## Section 1301 302Content for section 1...303```304 305**Assistant Actions:**3061. Read prompt template from `prompts/default.md`3072. Extract title: "My Article Title"3083. Determine account folder (no --account specified, no path to infer from, using default template → `10_在悉尼和稀泥`)3094. Create output folder: `~/Dev/obsidian/10_在悉尼和稀泥/articles/2024-01-14-my-article-title/`3105. Invoke `/baoyu-cover-image` skill with `--no-title` flag to generate cover image3116. Move generated cover from `imgs/cover.png` to `_attachments/cover-xhs.png`3127. Generate styled HTML following template specifications3138. Save to `~/Dev/obsidian/10_在悉尼和稀泥/articles/2024-01-14-my-article-title/xhs-preview.html`3149. Open in browser and take 3:4 ratio screenshots31510. Save screenshots to `~/Dev/obsidian/10_在悉尼和稀泥/articles/2024-01-14-my-article-title/_attachments/xhs-01.png`, etc.31611. Report completion with file locations317 318**Example with --account parameter:**319 320```bash321/xiaohongshu-images ~/path/to/article.md --account mom-reading-club --template mom-reading-club322```323 324**Assistant Actions:**3251. `--account mom-reading-club` specified → use `12_妈妈在读`3262. Output to: `~/Dev/obsidian/12_妈妈在读/articles/2024-01-14-article-title/`327 328**Example with path inference:**329 330```bash331/xiaohongshu-images ~/Dev/obsidian/12_妈妈在读/articles/2024-01-14-xxx/index.md332```333 334**Assistant Actions:**3351. No --account specified3362. Input path contains `12_妈妈在读` → infer account folder3373. Output to same folder: `~/Dev/obsidian/12_妈妈在读/articles/2024-01-14-xxx/`338 339## Custom Prompt Templates340 341Users can provide custom prompt templates by:3421. Placing a `.md` file in the `prompts/` directory3432. Specifying the template name when invoking the skill344 345Example: "Use the `xiaohongshu-style` template for this article"346 347### Available Templates348 349| Template | Description | Best For |350|----------|-------------|----------|351| `default` | Standard style with New Yorker-style illustrations | General articles |352| `mom-reading-club` | Calligraphy & ink-wash style with TsangerJinKai02 font | Mom Reading Club (妈妈读书会) brand content |353 354### Mom Reading Club Template355 356Use this template for all "Mom Reading Club" branded content:357 358```359/xiaohongshu-images <article> --template mom-reading-club360```361 362**Features:**363- **Font**: TsangerJinKai02 (仓耳今楷02) for titles - requires local installation364- **Cover style**: Chinese calligraphy & ink-wash illustration (书法水墨风)365- **Aesthetic**: Zen simplicity, elegant restraint, generous white space366- **Color accent**: Subtle gold (#C9A962)367- **Target audience**: Cultured mothers aged 30-45368 369## Error Handling370 371If the `/baoyu-cover-image` skill fails:3721. Display the error message to the user3732. Offer to retry or proceed without cover image3743. If proceeding without image, use a placeholder or omit the cover375 376If screenshot capture fails:3771. Verify the HTML file exists and is valid3782. Check browser dependencies3793. Report the specific error to the user380 381## System Requirements382 383This skill requires:384- Python 3.8+385- Playwright for screenshot capture (installed via pip: `pip install playwright && playwright install chromium`)386- `/baoyu-cover-image` skill installed in `~/.claude/skills/`387 388Install dependencies:389 390```bash391pip install playwright392playwright install chromium393```394 395## Notes396 397- The skill preserves all original content exactly as provided398- No modifications, simplifications, or deletions to the content399- The cover image is generated based on the article's main theme400- Screenshots are optimized for Xiaohongshu's 3:4 aspect ratio401- Text is never cut off in screenshots - boundaries are adjusted intelligently402 403## Community Compliance (社区规范合规)404 405**IMPORTANT**: All generated content must comply with Xiaohongshu community guidelines.406 407### Quick Reference - Prohibited Content:408 409| Category | Examples | Action |410|----------|----------|--------|411| Absolute claims | 最好、最佳、第一、国家级 | Remove or rephrase |412| Exaggerated effects | 一分钟见效、立刻瘦10斤 | Remove or add disclaimers |413| Medical/Financial advice | Health tips, investment suggestions | Add disclaimer: "本内容不构成医疗/投资建议" |414| Inappropriate imagery | Nudity, violence, political symbols | Regenerate with appropriate content |415| False information | Pseudoscience, unverified claims | Verify or remove |416| Defamatory content | Attacks on brands/individuals | Remove entirely |417 418### Official Guidelines:419 420- 社区规范: https://www.xiaohongshu.com/crown/community/rules421- 社区公约: https://www.xiaohongshu.com/crown/community/agreement422 423### Compliance Workflow:424 4251. **Before image generation**: Review theme for appropriateness4262. **Before HTML generation**: Scan text for prohibited phrases4273. **Before final output**: Run through compliance checklist in prompt template (Section 11.5)