npx claudepluginhub jimliu/baoyu-skills --plugin utility-skillsWant just this skill?
Then install: npx claudepluginhub u/[userId]/[slug]
Generates Xiaohongshu (Little Red Book) infographic series with 11 visual styles and 8 layouts. Breaks content into 1-10 cartoon-style images optimized for XHS engagement. Use when user mentions "小红书图片", "XHS images", "RedNote infographics", "小红书种草", or wants social media infographics for Chinese platforms.
This skill uses the workspace's default tool permissions.
references/config/first-time-setup.mdreferences/config/preferences-schema.mdreferences/config/watermark-guide.mdreferences/elements/canvas.mdreferences/elements/decorations.mdreferences/elements/image-effects.mdreferences/elements/typography.mdreferences/presets/bold.mdreferences/presets/chalkboard.mdreferences/presets/cute.mdreferences/presets/fresh.mdreferences/presets/minimal.mdreferences/presets/notion.mdreferences/presets/pop.mdreferences/presets/retro.mdreferences/presets/screen-print.mdreferences/presets/study-notes.mdreferences/presets/warm.mdreferences/style-presets.mdreferences/workflows/analysis-framework.mdXiaohongshu Infographic Series Generator
Break down complex content into eye-catching infographic series for Xiaohongshu with multiple style options.
Usage
# Auto-select style and layout based on content
/baoyu-xhs-images posts/ai-future/article.md
# Specify style
/baoyu-xhs-images posts/ai-future/article.md --style notion
# Specify layout
/baoyu-xhs-images posts/ai-future/article.md --layout dense
# Combine style and layout
/baoyu-xhs-images posts/ai-future/article.md --style notion --layout list
# Use preset (style + layout shorthand)
/baoyu-xhs-images posts/ai-future/article.md --preset knowledge-card
# Preset with override
/baoyu-xhs-images posts/ai-future/article.md --preset poster --layout quadrant
# Direct content input
/baoyu-xhs-images
[paste content]
# Direct input with options
/baoyu-xhs-images --style bold --layout comparison
[paste content]
Options
| Option | Description |
|---|---|
--style <name> | Visual style (see Style Gallery) |
--layout <name> | Information layout (see Layout Gallery) |
--preset <name> | Style + layout shorthand (see Style Presets) |
Two Dimensions
| Dimension | Controls | Options |
|---|---|---|
| Style | Visual aesthetics: colors, lines, decorations | cute, fresh, warm, bold, minimal, retro, pop, notion, chalkboard, study-notes, screen-print |
| Layout | Information structure: density, arrangement | sparse, 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.
Or use presets: --preset knowledge-card → style + layout in one flag. See Style Presets.
Style Gallery
| Style | Description |
|---|---|
cute (Default) | Sweet, adorable, girly - classic Xiaohongshu aesthetic |
fresh | Clean, refreshing, natural |
warm | Cozy, friendly, approachable |
bold | High impact, attention-grabbing |
minimal | Ultra-clean, sophisticated |
retro | Vintage, nostalgic, trendy |
pop | Vibrant, energetic, eye-catching |
notion | Minimalist hand-drawn line art, intellectual |
chalkboard | Colorful chalk on black board, educational |
study-notes | Realistic handwritten photo style, blue pen + red annotations + yellow highlighter |
screen-print | Bold poster art, halftone textures, limited colors, symbolic storytelling |
Detailed style definitions: references/presets/<style>.md
Preset Gallery
Quick-start presets by content scenario. Use --preset <name> or recommend during Step 2.
Knowledge & Learning:
| Preset | Style | Layout | Best For |
|---|---|---|---|
knowledge-card | notion | dense | 干货知识卡、概念科普 |
checklist | notion | list | 清单、排行榜、必备清单 |
concept-map | notion | mindmap | 概念图、知识脉络 |
swot | notion | quadrant | SWOT分析、四象限分类 |
tutorial | chalkboard | flow | 教程步骤、操作流程 |
classroom | chalkboard | balanced | 课堂笔记、知识讲解 |
study-guide | study-notes | dense | 学习笔记、考试重点 |
Lifestyle & Sharing:
| Preset | Style | Layout | Best For |
|---|---|---|---|
cute-share | cute | balanced | 少女风分享、日常种草 |
girly | cute | sparse | 甜美封面、氛围感 |
cozy-story | warm | balanced | 生活故事、情感分享 |
product-review | fresh | comparison | 产品对比、测评 |
nature-flow | fresh | flow | 健康流程、自然主题 |
Impact & Opinion:
| Preset | Style | Layout | Best For |
|---|---|---|---|
warning | bold | list | 避坑指南、重要提醒 |
versus | bold | comparison | 正反对比、强烈对照 |
clean-quote | minimal | sparse | 金句、极简封面 |
pro-summary | minimal | balanced | 专业总结、商务内容 |
Trend & Entertainment:
| Preset | Style | Layout | Best For |
|---|---|---|---|
retro-ranking | retro | list | 复古排行、经典盘点 |
throwback | retro | balanced | 怀旧分享、老物件 |
pop-facts | pop | list | 趣味冷知识、好玩的事 |
hype | pop | sparse | 炸裂封面、惊叹分享 |
Poster & Editorial:
| Preset | Style | Layout | Best For |
|---|---|---|---|
poster | screen-print | sparse | 海报风封面、影评书评 |
editorial | screen-print | balanced | 观点文章、文化评论 |
cinematic | screen-print | comparison | 电影对比、戏剧张力 |
Full preset definitions: references/style-presets.md
Layout Gallery
| Layout | Description |
|---|---|
sparse (Default) | Minimal information, maximum impact (1-2 points) |
balanced | Standard content layout (3-4 points) |
dense | High information density, knowledge card style (5-8 points) |
list | Enumeration and ranking format (4-7 items) |
comparison | Side-by-side contrast layout |
flow | Process and timeline layout (3-6 steps) |
mindmap | Center radial mind map layout (4-8 branches) |
quadrant | Four-quadrant / circular section layout |
Detailed layout definitions: references/elements/canvas.md
Auto Selection
| Content Signals | Style | Layout | Recommended Preset |
|---|---|---|---|
| Beauty, fashion, cute, girl, pink | cute | sparse/balanced | cute-share, girly |
| Health, nature, clean, fresh, organic | fresh | balanced/flow | product-review, nature-flow |
| Life, story, emotion, feeling, warm | warm | balanced | cozy-story |
| Warning, important, must, critical | bold | list/comparison | warning, versus |
| Professional, business, elegant, simple | minimal | sparse/balanced | clean-quote, pro-summary |
| Classic, vintage, old, traditional | retro | balanced | throwback, retro-ranking |
| Fun, exciting, wow, amazing | pop | sparse/list | hype, pop-facts |
| Knowledge, concept, productivity, SaaS | notion | dense/list | knowledge-card, checklist |
| Education, tutorial, learning, teaching, classroom | chalkboard | balanced/dense | tutorial, classroom |
| Notes, handwritten, study guide, knowledge, realistic, photo | study-notes | dense/list/mindmap | study-guide |
| Movie, album, concert, poster, opinion, editorial, dramatic, cinematic | screen-print | sparse/comparison | poster, editorial, cinematic |
Outline Strategies
Three differentiated outline strategies for different content goals:
Strategy A: Story-Driven (故事驱动型)
| Aspect | Description |
|---|---|
| Concept | Personal experience as main thread, emotional resonance first |
| Features | Start from pain point, show before/after change, strong authenticity |
| Best for | Reviews, personal shares, transformation stories |
| Structure | Hook → Problem → Discovery → Experience → Conclusion |
Strategy B: Information-Dense (信息密集型)
| Aspect | Description |
|---|---|
| Concept | Value-first, efficient information delivery |
| Features | Clear structure, explicit points, professional credibility |
| Best for | Tutorials, comparisons, product reviews, checklists |
| Structure | Core conclusion → Info card → Pros/Cons → Recommendation |
Strategy C: Visual-First (视觉优先型)
| Aspect | Description |
|---|---|
| Concept | Visual impact as core, minimal text |
| Features | Large images, atmospheric, instant appeal |
| Best for | High-aesthetic products, lifestyle, mood-based content |
| Structure | Hero 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:
- Extract main topic from content (2-4 words, kebab-case)
- Example: "AI工具推荐" →
ai-tools-recommend
Conflict Resolution:
If xhs-images/{topic-slug}/ already exists:
- Append timestamp:
{topic-slug}-YYYYMMDD-HHMMSS - Example:
ai-toolsexists →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: Smart Confirm ⚠️ REQUIRED
- [ ] Path A: Quick confirm → generate recommended outline
- [ ] Path B: Customize → adjust then generate outline
- [ ] Path C: Detailed → 3 outlines → second confirm → generate outline
- [ ] Step 3: Generate images (sequential)
- [ ] Step 4: Completion report
Flow
Input → [Step 0: Preferences] ─┬─ Found → Continue
│
└─ Not found → First-Time Setup ⛔ BLOCKING
│
└─ Complete setup → Save EXTEND.md → Continue
│
┌───────────────────────────────────────────────────────────────────────────┘
↓
Analyze → [Smart Confirm] ─┬─ Quick: confirm recommended → outline.md → Generate → Complete
│
├─ Customize: adjust options → outline.md → Generate → Complete
│
└─ Detailed: 3 outlines → [Confirm 2] → outline.md → 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):
# macOS, Linux, WSL, Git Bash
test -f .baoyu-skills/baoyu-xhs-images/EXTEND.md && echo "project"
test -f "${XDG_CONFIG_HOME:-$HOME/.config}/baoyu-skills/baoyu-xhs-images/EXTEND.md" && echo "xdg"
test -f "$HOME/.baoyu-skills/baoyu-xhs-images/EXTEND.md" && echo "user"
# PowerShell (Windows)
if (Test-Path .baoyu-skills/baoyu-xhs-images/EXTEND.md) { "project" }
$xdg = if ($env:XDG_CONFIG_HOME) { $env:XDG_CONFIG_HOME } else { "$HOME/.config" }
if (Test-Path "$xdg/baoyu-skills/baoyu-xhs-images/EXTEND.md") { "xdg" }
if (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:
- Save source content (if not already a file):
- If user provides a file path: use as-is
- If user pastes content: save to
source.mdin target directory - Backup rule: If
source.mdexists, rename tosource-backup-YYYYMMDD-HHMMSS.md
- Read source content
- Deep analysis following
references/workflows/analysis-framework.md:- Content type classification (种草/干货/测评/教程/避坑...)
- Hook analysis (爆款标题潜力)
- Target audience identification
- Engagement potential (收藏/分享/评论)
- Visual opportunity mapping
- Swipe flow design
- Detect source language
- Determine recommended image count (2-10)
- Auto-recommend best strategy + style + layout based on content signals
- Save to
analysis.md
Step 2: Smart Confirm ⚠️
Purpose: Present auto-recommended plan, let user confirm or adjust. Do NOT skip.
Auto-Recommendation Logic:
- Use Auto Selection table to match content signals → best strategy + style + layout
- Infer optimal image count from content density
- Load style's default elements from preset
Display (analysis summary + recommended plan):
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
📋 内容分析
主题:[topic] | 类型:[content_type]
要点:[key points summary]
受众:[target audience]
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
🎨 推荐方案(自动匹配)
策略:[A/B/C] [strategy name]([reason])
风格:[style] · 布局:[layout] · 预设:[preset]
图片:[N]张(封面+[N-2]内容+结尾)
元素:[background] / [decorations] / [emphasis]
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Use AskUserQuestion with single question:
| Option | Description |
|---|---|
| 1. ✅ 确认,直接生成(推荐) | Trust auto-recommendation, proceed immediately |
| 2. 🎛️ 自定义调整 | Modify strategy/style/layout/count in one step |
| 3. 📋 详细模式 | Generate 3 outlines, then choose (two confirmations) |
Path A: Quick Confirm (Option 1)
Generate single outline using recommended strategy + style → save to outline.md → Step 3.
Path B: Customize (Option 2)
Use AskUserQuestion with adjustable options (leave blank = keep recommended):
- 策略风格: Current: [strategy + style]. Options: A Story-Driven(warm) | B Information-Dense(notion) | C Visual-First(screen-print). Or specify style directly: cute/fresh/warm/bold/minimal/retro/pop/notion/chalkboard/study-notes/screen-print. Or use preset: knowledge-card / checklist / tutorial / poster / cinematic / etc.
- 布局: Current: [layout]. Options: sparse | balanced | dense | list | comparison | flow | mindmap | quadrant
- 图片数量: Current: [N]. Range: 2-10
- 补充说明(可选): Selling point emphasis, audience adjustment, color preference, etc.
After response: Generate single outline with user's choices → save to outline.md → Step 3.
Path C: Detailed Mode (Option 3)
Full two-confirmation flow for maximum control:
Step 2a: Content Understanding
Use AskUserQuestion for:
- Core selling point (multiSelect: true)
- Target audience
- Style preference: Authentic sharing / Professional review / Aesthetic mood / Auto
- Additional context (optional)
After response: Update analysis.md.
Step 2b: Generate 3 Outline Variants
| Strategy | Filename | Outline | Recommended Style |
|---|---|---|---|
| A | outline-strategy-a.md | Story-driven: emotional, before/after | warm, cute, fresh |
| B | outline-strategy-b.md | Information-dense: structured, factual | notion, minimal, chalkboard |
| C | outline-strategy-c.md | Visual-first: atmospheric, minimal text | bold, pop, retro, screen-print |
Outline format (YAML front matter + content):
---
strategy: a # a, b, or c
name: Story-Driven
style: warm # recommended style for this strategy
style_reason: "Warm tones enhance emotional storytelling and personal connection"
elements: # from style preset, can be customized
background: solid-pastel
decorations: [clouds, stars-sparkles]
emphasis: star-burst
typography: highlight
layout: balanced # primary layout
image_count: 5
---
## P1 Cover
**Type**: cover
**Hook**: "入冬后脸不干了🥹终于找到对的面霜"
**Visual**: Product hero shot with cozy winter atmosphere
**Layout**: sparse
## P2 Problem
**Type**: pain-point
**Message**: Previous struggles with dry skin
**Visual**: Before state, relatable scenario
**Layout**: balanced
...
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_reasonexplaining why this style fits the strategy
Reference: references/workflows/outline-template.md
Step 2c: Outline & Style Selection
Use AskUserQuestion with three questions:
Q1: Outline Strategy: A / B / C / Combine (specify pages from each)
Q2: Visual Style: Use recommended | Select preset | Select style | Custom description
Q3: Visual Elements: Use defaults (Recommended) | Adjust background | Adjust decorations | Custom
After response: Save selected/merged outline to outline.md with confirmed style and elements → Step 3.
Step 3: Generate Images
With confirmed outline + style + layout:
Visual Consistency — Reference Image Chain: To ensure character/style consistency across all images in a series:
- Generate image 1 (cover) FIRST — without
--ref - Use image 1 as
--reffor 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):
- 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
- Backup rule: If prompt file exists, rename to
- 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
- Image 1: Generate without
- 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:
- Generate unique session ID:
xhs-{topic-slug}-{timestamp} - Use same session ID for all images
- Combined with reference image chain, ensures maximum visual consistency
Step 4: Completion Report
Xiaohongshu Infographic Series Complete!
Topic: [topic]
Mode: [Quick / Custom / Detailed]
Strategy: [A/B/C/Combined]
Style: [style name]
Layout: [layout name or "varies"]
Location: [directory path]
Images: N total
✓ analysis.md
✓ outline.md
✓ outline-strategy-a/b/c.md (detailed mode only)
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
| Action | Steps |
|---|---|
| Edit | Update prompt file FIRST → Regenerate with same session ID |
| Add | Specify position → Create prompt → Generate → Renumber subsequent files (NN+1) → Update outline |
| Delete | Remove 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
- Cover (Image 1): Hook + visual impact →
sparselayout - Content (Middle): Core value per image →
balanced/dense/list/comparison/flow - Ending (Last): CTA / summary →
sparseorbalanced
Style × Layout Matrix (✓✓ = highly recommended, ✓ = works well):
| sparse | balanced | dense | list | comparison | flow | mindmap | quadrant | |
|---|---|---|---|---|---|---|---|---|
| cute | ✓✓ | ✓✓ | ✓ | ✓✓ | ✓ | ✓ | ✓ | ✓ |
| fresh | ✓✓ | ✓✓ | ✓ | ✓ | ✓ | ✓✓ | ✓ | ✓ |
| warm | ✓✓ | ✓✓ | ✓ | ✓ | ✓✓ | ✓ | ✓ | ✓ |
| bold | ✓✓ | ✓ | ✓ | ✓✓ | ✓✓ | ✓ | ✓ | ✓✓ |
| minimal | ✓✓ | ✓✓ | ✓✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| retro | ✓✓ | ✓✓ | ✓ | ✓✓ | ✓ | ✓ | ✓ | ✓ |
| pop | ✓✓ | ✓✓ | ✓ | ✓✓ | ✓✓ | ✓ | ✓ | ✓ |
| notion | ✓✓ | ✓✓ | ✓✓ | ✓✓ | ✓✓ | ✓✓ | ✓✓ | ✓✓ |
| chalkboard | ✓✓ | ✓✓ | ✓✓ | ✓✓ | ✓ | ✓✓ | ✓✓ | ✓ |
| study-notes | ✗ | ✓ | ✓✓ | ✓✓ | ✓ | ✓ | ✓✓ | ✓ |
| screen-print | ✓✓ | ✓✓ | ✗ | ✓ | ✓✓ | ✓ | ✗ | ✓✓ |
References
Detailed templates in references/ directory:
Elements (Visual building blocks):
elements/canvas.md- Aspect ratios, safe zones, grid layoutselements/image-effects.md- Cutout, stroke, filterselements/typography.md- Decorated text (花字), tags, text directionelements/decorations.md- Emphasis marks, backgrounds, doodles, frames
Presets (Style presets):
presets/<name>.md- Element combination definitions (cute, notion, warm...)style-presets.md- Preset shortcuts (style + layout combos)
Workflows (Process guides):
workflows/analysis-framework.md- Content analysis frameworkworkflows/outline-template.md- Outline template with layout guideworkflows/prompt-assembly.md- Prompt assembly guide
Config (Settings):
config/preferences-schema.md- EXTEND.md schemaconfig/first-time-setup.md- First-time setup flowconfig/watermark-guide.md- Watermark configuration
Notes
- Auto-retry once on failure | Cartoon alternatives for sensitive figures
- Use confirmed language preference | Maintain style consistency
- Smart Confirm required (Step 2) - do not skip; detailed mode uses two sub-confirmations
Extension Support
Custom configurations via EXTEND.md. See Step 0 for paths and supported options.
Similar Skills
Expert guidance for Next.js Cache Components and Partial Prerendering (PPR). **PROACTIVE ACTIVATION**: Use this skill automatically when working in Next.js projects that have `cacheComponents: true` in their next.config.ts/next.config.js. When this config is detected, proactively apply Cache Components patterns and best practices to all React Server Component implementations. **DETECTION**: At the start of a session in a Next.js project, check for `cacheComponents: true` in next.config. If enabled, this skill's patterns should guide all component authoring, data fetching, and caching decisions. **USE CASES**: Implementing 'use cache' directive, configuring cache lifetimes with cacheLife(), tagging cached data with cacheTag(), invalidating caches with updateTag()/revalidateTag(), optimizing static vs dynamic content boundaries, debugging cache issues, and reviewing Cache Component implementations.