Transform markdown/HTML into styled 3:4 ratio images for Xiaohongshu
Transform markdown and HTML into beautifully styled 3:4 ratio images optimized for Xiaohongshu posting.
Accepts markdown, HTML, or text input and generates AI-powered cover images via the baoyu-cover-image skill
Produces styled HTML pages with dark gradient backgrounds, cream-colored cards, and responsive typography using Google Fonts
Captures sequential 3:4 aspect ratio screenshots (1200×1600px at 2x scale) with intelligent text boundary detection to prevent content cutoff
Supports multiple account folders (james-cn, james-en, mom-reading-club) with automatic account resolution via explicit parameters, file path inference, or template mapping
Includes built-in Xiaohongshu community compliance checks for prohibited claims, imagery, and content types
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:
Accept Content: Receives markdown, HTML, or txt format content from the user
Load Prompt Template: Reads the prompt template from prompts/default.md in this skill's directory
Determine Output Account: Determines which account folder to use (see Account Folder Resolution below)
Generate Cover Image: Uses /baoyu-cover-image skill to generate a cover image based on the article content
Generate HTML: Creates a beautifully styled HTML page following the prompt template specifications
Save Output: Saves the HTML to ~/Dev/obsidian/{account_folder}/articles/<date-title>/xhs-preview.html
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:don't have the plugin yet? install it then click "run inline in claude" again.