baoyu-xhs-images — baoyu-xhs-images install baoyu-xhs-images, baoyu-skills, community, baoyu-xhs-images install, ide skills, Xiaohongshu infographic series generator, baoyu-xhs-images command line options, generating infographics with baoyu-xhs-images, Claude Code, Cursor, Windsurf

v1.0.0
GitHub

About this Skill

Perfect for Visual Content Agents needing advanced infographic generation capabilities for Xiaohongshu baoyu-xhs-images is a Xiaohongshu Infographic Series Generator that breaks down complex content into eye-catching infographic series with multiple style options.

Features

Auto-selects style and layout based on content using the /baoyu-xhs-images command
Supports specification of style using the --style option, such as --style notion
Allows specification of layout using the --layout option, such as --layout dense
Combines style and layout options for customized infographic generation
Generates infographic series for Xiaohongshu platform

# Core Topics

JimLiu JimLiu
[0]
[0]
Updated: 3/8/2026

Agent Capability Analysis

The baoyu-xhs-images skill by JimLiu is an open-source community AI agent skill for Claude Code and other IDE workflows, helping agents execute tasks with better context, repeatability, and domain-specific guidance. Optimized for baoyu-xhs-images install, Xiaohongshu infographic series generator, baoyu-xhs-images command line options.

Ideal Agent Persona

Perfect for Visual Content Agents needing advanced infographic generation capabilities for Xiaohongshu

Core Value

Empowers agents to generate visually appealing infographic series with multiple style options, utilizing markdown files like article.md and providing customizable layouts and styles, such as notion and dense

Capabilities Granted for baoyu-xhs-images

Automating infographic series creation for Xiaohongshu posts
Generating customizable visual content with multiple style options
Enhancing visual storytelling for developers and content creators

! Prerequisites & Limits

  • Requires markdown file input
  • Xiaohongshu platform specific
  • Limited to infographic series generation
Labs Demo

Browser Sandbox Environment

⚡️ Ready to unleash?

Experience this Agent in a zero-setup browser environment powered by WebContainers. No installation required.

Boot Container Sandbox

baoyu-xhs-images

Install baoyu-xhs-images, an AI agent skill for AI agent workflows and automation. Works with Claude Code, Cursor, and Windsurf with one-command setup.

SKILL.md
Readonly

Xiaohongshu Infographic Series Generator

Break down complex content into eye-catching infographic series for Xiaohongshu with multiple style options.

Usage

bash
1# Auto-select style and layout based on content 2/baoyu-xhs-images posts/ai-future/article.md 3 4# Specify style 5/baoyu-xhs-images posts/ai-future/article.md --style notion 6 7# Specify layout 8/baoyu-xhs-images posts/ai-future/article.md --layout dense 9 10# Combine style and layout 11/baoyu-xhs-images posts/ai-future/article.md --style notion --layout list 12 13# Direct content input 14/baoyu-xhs-images 15[paste content] 16 17# Direct input with options 18/baoyu-xhs-images --style bold --layout comparison 19[paste content]

Options

OptionDescription
--style <name>Visual style (see Style Gallery)
--layout <name>Information layout (see Layout Gallery)

Two Dimensions

DimensionControlsOptions
StyleVisual aesthetics: colors, lines, decorationscute, fresh, warm, bold, minimal, retro, pop, notion, chalkboard, study-notes
LayoutInformation structure: density, arrangementsparse, balanced, dense, list, comparison, flow, mindmap, quadrant

Style × Layout can be freely combined. Example: --style notion --layout dense creates an intellectual-looking knowledge card with high information density.

StyleDescription
cute (Default)Sweet, adorable, girly - classic Xiaohongshu aesthetic
freshClean, refreshing, natural
warmCozy, friendly, approachable
boldHigh impact, attention-grabbing
minimalUltra-clean, sophisticated
retroVintage, nostalgic, trendy
popVibrant, energetic, eye-catching
notionMinimalist hand-drawn line art, intellectual
chalkboardColorful chalk on black board, educational
study-notesRealistic handwritten photo style, blue pen + red annotations + yellow highlighter

Detailed style definitions: references/presets/<style>.md

LayoutDescription
sparse (Default)Minimal information, maximum impact (1-2 points)
balancedStandard content layout (3-4 points)
denseHigh information density, knowledge card style (5-8 points)
listEnumeration and ranking format (4-7 items)
comparisonSide-by-side contrast layout
flowProcess and timeline layout (3-6 steps)
mindmapCenter radial mind map layout (4-8 branches)
quadrantFour-quadrant / circular section layout

Detailed layout definitions: references/elements/canvas.md

Auto Selection

Content SignalsStyleLayout
Beauty, fashion, cute, girl, pinkcutesparse/balanced
Health, nature, clean, fresh, organicfreshbalanced/flow
Life, story, emotion, feeling, warmwarmbalanced
Warning, important, must, criticalboldlist/comparison
Professional, business, elegant, simpleminimalsparse/balanced
Classic, vintage, old, traditionalretrobalanced
Fun, exciting, wow, amazingpopsparse/list
Knowledge, concept, productivity, SaaSnotiondense/list
Education, tutorial, learning, teaching, classroomchalkboardbalanced/dense
Notes, handwritten, study guide, knowledge, realistic, photostudy-notesdense/list/mindmap

Outline Strategies

Three differentiated outline strategies for different content goals:

Strategy A: Story-Driven (故事驱动型)

AspectDescription
ConceptPersonal experience as main thread, emotional resonance first
FeaturesStart from pain point, show before/after change, strong authenticity
Best forReviews, personal shares, transformation stories
StructureHook → Problem → Discovery → Experience → Conclusion

Strategy B: Information-Dense (信息密集型)

AspectDescription
ConceptValue-first, efficient information delivery
FeaturesClear structure, explicit points, professional credibility
Best forTutorials, comparisons, product reviews, checklists
StructureCore conclusion → Info card → Pros/Cons → Recommendation

Strategy C: Visual-First (视觉优先型)

AspectDescription
ConceptVisual impact as core, minimal text
FeaturesLarge images, atmospheric, instant appeal
Best forHigh-aesthetic products, lifestyle, mood-based content
StructureHero image → Detail shots → Lifestyle scene → CTA

File Structure

Each session creates an independent directory named by content slug:

xhs-images/{topic-slug}/
├── source-{slug}.{ext}             # Source files (text, images, etc.)
├── analysis.md                     # Deep analysis + questions asked
├── outline-strategy-a.md           # Strategy A: Story-driven
├── outline-strategy-b.md           # Strategy B: Information-dense
├── outline-strategy-c.md           # Strategy C: Visual-first
├── outline.md                      # Final selected/merged outline
├── prompts/
│   ├── 01-cover-[slug].md
│   ├── 02-content-[slug].md
│   └── ...
├── 01-cover-[slug].png
├── 02-content-[slug].png
└── NN-ending-[slug].png

Slug Generation:

  1. Extract main topic from content (2-4 words, kebab-case)
  2. Example: "AI工具推荐" → ai-tools-recommend

Conflict Resolution: If xhs-images/{topic-slug}/ already exists:

  • Append timestamp: {topic-slug}-YYYYMMDD-HHMMSS
  • Example: ai-tools exists → ai-tools-20260118-143052

Source Files: Copy all sources with naming source-{slug}.{ext}:

  • source-article.md, source-photo.jpg, etc.
  • Multiple sources supported: text, images, files from conversation

Workflow

Progress Checklist

Copy and track progress:

XHS Infographic Progress:
- [ ] Step 0: Check preferences (EXTEND.md) ⛔ BLOCKING
  - [ ] Found → load preferences → continue
  - [ ] Not found → run first-time setup → MUST complete before Step 1
- [ ] Step 1: Analyze content → analysis.md
- [ ] Step 2: Confirmation 1 - Content understanding ⚠️ REQUIRED
- [ ] Step 3: Generate 3 outline + style variants
- [ ] Step 4: Confirmation 2 - Outline & style & elements selection ⚠️ REQUIRED
- [ ] Step 5: Generate images (sequential)
- [ ] Step 6: Completion report

Flow

Input → [Step 0: Preferences] ─┬─ Found → Continue
                               │
                               └─ Not found → First-Time Setup ⛔ BLOCKING
                                              │
                                              └─ Complete setup → Save EXTEND.md → Continue
                                                                                      │
        ┌───────────────────────────────────────────────────────────────────────────┘
        ↓
Analyze → [Confirm 1] → 3 Outlines → [Confirm 2: Outline + Style + Elements] → Generate → Complete

Step 0: Load Preferences (EXTEND.md) ⛔ BLOCKING

Purpose: Load user preferences or run first-time setup.

CRITICAL: If EXTEND.md not found, MUST complete first-time setup before ANY other questions or steps. Do NOT proceed to content analysis, do NOT ask about style, do NOT ask about layout — ONLY complete the preferences setup first.

Check EXTEND.md existence (priority order):

bash
1# macOS, Linux, WSL, Git Bash 2test -f .baoyu-skills/baoyu-xhs-images/EXTEND.md && echo "project" 3test -f "$HOME/.baoyu-skills/baoyu-xhs-images/EXTEND.md" && echo "user"
powershell
1# PowerShell (Windows) 2if (Test-Path .baoyu-skills/baoyu-xhs-images/EXTEND.md) { "project" } 3if (Test-Path "$HOME/.baoyu-skills/baoyu-xhs-images/EXTEND.md") { "user" }

┌────────────────────────────────────────────────────┬───────────────────┐ │ Path │ Location │ ├────────────────────────────────────────────────────┼───────────────────┤ │ .baoyu-skills/baoyu-xhs-images/EXTEND.md │ Project directory │ ├────────────────────────────────────────────────────┼───────────────────┤ │ $HOME/.baoyu-skills/baoyu-xhs-images/EXTEND.md │ User home │ └────────────────────────────────────────────────────┴───────────────────┘

┌───────────┬─────────────────────────────────────────────────────────────────────────────────────────────────────┐ │ Result │ Action │ ├───────────┼─────────────────────────────────────────────────────────────────────────────────────────────────────┤ │ Found │ Read, parse, display summary → Continue to Step 1 │ ├───────────┼─────────────────────────────────────────────────────────────────────────────────────────────────────┤ │ Not found │ ⛔ BLOCKING: Run first-time setup ONLY (see below) → Complete and save EXTEND.md → Then Step 1 │ └───────────┴─────────────────────────────────────────────────────────────────────────────────────────────────────┘

First-Time Setup (when EXTEND.md not found):

Language: Use user's input language or saved language preference.

Use AskUserQuestion with ALL questions in ONE call. See references/config/first-time-setup.md for question details.

EXTEND.md Supports: Watermark | Preferred style/layout | Custom style definitions | Language preference

Schema: references/config/preferences-schema.md

Step 1: Analyze Content → analysis.md

Read source content, save it if needed, and perform deep analysis.

Actions:

  1. Save source content (if not already a file):
    • If user provides a file path: use as-is
    • If user pastes content: save to source.md in target directory
    • Backup rule: If source.md exists, rename to source-backup-YYYYMMDD-HHMMSS.md
  2. Read source content
  3. Deep analysis following references/workflows/analysis-framework.md:
    • Content type classification (种草/干货/测评/教程/避坑...)
    • Hook analysis (爆款标题潜力)
    • Target audience identification
    • Engagement potential (收藏/分享/评论)
    • Visual opportunity mapping
    • Swipe flow design
  4. Detect source language
  5. Determine recommended image count (2-10)
  6. Generate clarifying questions (see Step 2)
  7. Save to analysis.md

Step 2: Confirmation 1 - Content Understanding ⚠️

Purpose: Validate understanding + collect missing info. Do NOT skip.

Display summary:

  • Content type + topic identified
  • Key points extracted
  • Tone detected
  • Source images count

Use AskUserQuestion for:

  1. Core selling point (multiSelect: true)
  2. Target audience
  3. Style preference: Authentic sharing / Professional review / Aesthetic mood / Auto
  4. Additional context (optional)

After response: Update analysis.md → Step 3

Step 3: Generate 3 Outline + Style Variants

Based on analysis + user context, create three distinct strategy variants. Each variant includes both outline structure and visual style recommendation.

For each strategy:

StrategyFilenameOutlineRecommended Style
Aoutline-strategy-a.mdStory-driven: emotional, before/afterwarm, cute, fresh
Boutline-strategy-b.mdInformation-dense: structured, factualnotion, minimal, chalkboard
Coutline-strategy-c.mdVisual-first: atmospheric, minimal textbold, pop, retro

Outline format (YAML front matter + content):

yaml
1--- 2strategy: a # a, b, or c 3name: Story-Driven 4style: warm # recommended style for this strategy 5style_reason: "Warm tones enhance emotional storytelling and personal connection" 6elements: # from style preset, can be customized in Step 4 7 background: solid-pastel 8 decorations: [clouds, stars-sparkles] 9 emphasis: star-burst 10 typography: highlight 11layout: balanced # primary layout 12image_count: 5 13--- 14 15## P1 Cover 16**Type**: cover 17**Hook**: "入冬后脸不干了🥹终于找到对的面霜" 18**Visual**: Product hero shot with cozy winter atmosphere 19**Layout**: sparse 20 21## P2 Problem 22**Type**: pain-point 23**Message**: Previous struggles with dry skin 24**Visual**: Before state, relatable scenario 25**Layout**: balanced 26 27...

Differentiation requirements:

  • Each strategy MUST have different outline structure AND different recommended style
  • Adapt page count: A typically 4-6, B typically 3-5, C typically 3-4
  • Include style_reason explaining why this style fits the strategy
  • Consider user's style preference from Step 2

Reference: references/workflows/outline-template.md

Step 4: Confirmation 2 - Outline & Style & Elements Selection ⚠️

Purpose: User chooses outline strategy, confirms visual style, and customizes elements. Do NOT skip.

Display each strategy:

  • Strategy name + page count + recommended style
  • Page-by-page summary (P1 → P2 → P3...)

Use AskUserQuestion with three questions:

Question 1: Outline Strategy

  • Strategy A (Recommended if "authentic sharing")
  • Strategy B (Recommended if "professional review")
  • Strategy C (Recommended if "aesthetic mood")
  • Combine: specify pages from each

Question 2: Visual Style

  • Use strategy's recommended style (show which style)
  • Or select from: cute / fresh / warm / bold / minimal / retro / pop / notion / chalkboard
  • Or type custom style description

Question 3: Visual Elements (show after style selection) Display the selected style's default elements from preset, then ask:

  • Use style defaults (Recommended) - show preview: background, decorations, emphasis
  • Adjust background - options: solid-pastel / solid-saturated / gradient-linear / gradient-radial / paper-texture / grid
  • Adjust decorations - options: hearts / stars-sparkles / flowers / clouds / leaves / confetti
  • Type custom element preferences

After response:

  • Single strategy → copy to outline.md with confirmed style
  • Combination → merge specified pages with confirmed style
  • Custom request → regenerate based on feedback
  • Style defaults → use preset's Element Combination as-is
  • Background adjustment → update elements.background with user choice
  • Decorations adjustment → update elements.decorations with user choice
  • Custom elements → parse user's preferences into elements fields
  • Update outline.md frontmatter with final style and elements

Step 5: Generate Images

With confirmed outline + style + layout:

Visual Consistency — Reference Image Chain: To ensure character/style consistency across all images in a series:

  1. Generate image 1 (cover) FIRST — without --ref
  2. Use image 1 as --ref for ALL remaining images (2, 3, ..., N)
    • This anchors the character design, color rendering, and illustration style
    • Command pattern: --ref <path-to-image-01.png> added to every subsequent generation

This is critical for styles that use recurring characters, mascots, or illustration elements. Image 1 becomes the visual anchor for the entire series.

For each image (cover + content + ending):

  1. Save prompt to prompts/NN-{type}-[slug].md (in user's preferred language)
    • Backup rule: If prompt file exists, rename to prompts/NN-{type}-[slug]-backup-YYYYMMDD-HHMMSS.md
  2. Generate image:
    • Image 1: Generate without --ref (this establishes the visual anchor)
    • Images 2+: Generate with --ref <image-01-path> for consistency
    • Backup rule: If image file exists, rename to NN-{type}-[slug]-backup-YYYYMMDD-HHMMSS.png
  3. Report progress after each generation

Watermark Application (if enabled in preferences): Add to each image generation prompt:

Include a subtle watermark "[content]" positioned at [position].
The watermark should be legible but not distracting from the main content.

Reference: references/config/watermark-guide.md

Image Generation Skill Selection:

  • Check available image generation skills
  • If multiple skills available, ask user preference

Session Management: If image generation skill supports --sessionId:

  1. Generate unique session ID: xhs-{topic-slug}-{timestamp}
  2. Use same session ID for all images
  3. Combined with reference image chain, ensures maximum visual consistency

Step 6: Completion Report

Xiaohongshu Infographic Series Complete!

Topic: [topic]
Strategy: [A/B/C/Combined]
Style: [style name]
Layout: [layout name or "varies"]
Location: [directory path]
Images: N total

✓ analysis.md
✓ outline-strategy-a.md
✓ outline-strategy-b.md
✓ outline-strategy-c.md
✓ outline.md (selected: [strategy])

Files:
- 01-cover-[slug].png ✓ Cover (sparse)
- 02-content-[slug].png ✓ Content (balanced)
- 03-content-[slug].png ✓ Content (dense)
- 04-ending-[slug].png ✓ Ending (sparse)

Image Modification

ActionSteps
EditUpdate prompt file FIRST → Regenerate with same session ID
AddSpecify position → Create prompt → Generate → Renumber subsequent files (NN+1) → Update outline
DeleteRemove files → Renumber subsequent (NN-1) → Update outline

IMPORTANT: When updating images, ALWAYS update the prompt file (prompts/NN-{type}-[slug].md) FIRST before regenerating. This ensures changes are documented and reproducible.

Content Breakdown Principles

  1. Cover (Image 1): Hook + visual impact → sparse layout
  2. Content (Middle): Core value per image → balanced/dense/list/comparison/flow
  3. Ending (Last): CTA / summary → sparse or balanced

Style × Layout Matrix (✓✓ = highly recommended, ✓ = works well):

sparsebalanceddenselistcomparisonflowmindmapquadrant
cute✓✓✓✓✓✓
fresh✓✓✓✓✓✓
warm✓✓✓✓✓✓
bold✓✓✓✓✓✓✓✓
minimal✓✓✓✓✓✓
retro✓✓✓✓✓✓
pop✓✓✓✓✓✓✓✓
notion✓✓✓✓✓✓✓✓✓✓✓✓✓✓✓✓
chalkboard✓✓✓✓✓✓✓✓✓✓✓✓
study-notes✓✓✓✓✓✓

References

Detailed templates in references/ directory:

Elements (Visual building blocks):

  • elements/canvas.md - Aspect ratios, safe zones, grid layouts
  • elements/image-effects.md - Cutout, stroke, filters
  • elements/typography.md - Decorated text (花字), tags, text direction
  • elements/decorations.md - Emphasis marks, backgrounds, doodles, frames

Presets (Style presets):

  • presets/<name>.md - Element combination definitions (cute, notion, warm...)

Workflows (Process guides):

  • workflows/analysis-framework.md - Content analysis framework
  • workflows/outline-template.md - Outline template with layout guide
  • workflows/prompt-assembly.md - Prompt assembly guide

Config (Settings):

  • config/preferences-schema.md - EXTEND.md schema
  • config/first-time-setup.md - First-time setup flow
  • config/watermark-guide.md - Watermark configuration

Notes

  • Auto-retry once on failure | Cartoon alternatives for sensitive figures
  • Use confirmed language preference | Maintain style consistency
  • Two confirmation points required (Steps 2 & 4) - do not skip

Extension Support

Custom configurations via EXTEND.md. See Step 0 for paths and supported options.

FAQ & Installation Steps

These questions and steps mirror the structured data on this page for better search understanding.

? Frequently Asked Questions

What is baoyu-xhs-images?

Perfect for Visual Content Agents needing advanced infographic generation capabilities for Xiaohongshu baoyu-xhs-images is a Xiaohongshu Infographic Series Generator that breaks down complex content into eye-catching infographic series with multiple style options.

How do I install baoyu-xhs-images?

Run the command: npx killer-skills add JimLiu/baoyu-skills/baoyu-xhs-images. It works with Cursor, Windsurf, VS Code, Claude Code, and 19+ other IDEs.

What are the use cases for baoyu-xhs-images?

Key use cases include: Automating infographic series creation for Xiaohongshu posts, Generating customizable visual content with multiple style options, Enhancing visual storytelling for developers and content creators.

Which IDEs are compatible with baoyu-xhs-images?

This skill is compatible with Cursor, Windsurf, VS Code, Trae, Claude Code, OpenClaw, Aider, Codex, OpenCode, Goose, Cline, Roo Code, Kiro, Augment Code, Continue, GitHub Copilot, Sourcegraph Cody, and Amazon Q Developer. Use the Killer-Skills CLI for universal one-command installation.

Are there any limitations for baoyu-xhs-images?

Requires markdown file input. Xiaohongshu platform specific. Limited to infographic series generation.

How To Install

  1. 1. Open your terminal

    Open the terminal or command line in your project directory.

  2. 2. Run the install command

    Run: npx killer-skills add JimLiu/baoyu-skills/baoyu-xhs-images. The CLI will automatically detect your IDE or AI agent and configure the skill.

  3. 3. Start using the skill

    The skill is now active. Your AI agent can use baoyu-xhs-images immediately in the current project.

Related Skills

Looking for an alternative to baoyu-xhs-images or another community skill for your workflow? Explore these related open-source skills.

View All

widget-generator

Logo of f
f

f.k.a. Awesome ChatGPT Prompts. Share, discover, and collect prompts from the community. Free and open source — self-host for your organization with complete privacy.

149.6k
0
AI

flags

Logo of vercel
vercel

flags is a Next.js feature management skill that enables developers to efficiently add or modify framework feature flags, streamlining React application development.

138.4k
0
Browser

zustand

Logo of lobehub
lobehub

The ultimate space for work and life — to find, build, and collaborate with agent teammates that grow with you. We are taking agent harness to the next level — enabling multi-agent collaboration, effortless agent team design, and introducing agents as the unit of work interaction.

72.8k
0
AI

data-fetching

Logo of lobehub
lobehub

The ultimate space for work and life — to find, build, and collaborate with agent teammates that grow with you. We are taking agent harness to the next level — enabling multi-agent collaboration, effortless agent team design, and introducing agents as the unit of work interaction.

72.8k
0
AI