content-pipeline/baoyu-xhs-images/SKILL.md
Generates Xiaohongshu (Little Red Book) infographic series with 9 visual styles and 6 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.
npx skillsauth add Jst-Well-Dan/Skill-Box baoyu-xhs-imagesInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
Break down complex content into eye-catching infographic series for Xiaohongshu with multiple style options.
# 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
# Direct content input
/baoyu-xhs-images
[paste content]
# Direct input with options
/baoyu-xhs-images --style bold --layout comparison
[paste content]
| Option | Description |
|--------|-------------|
| --style <name> | Visual style (see Style Gallery) |
| --layout <name> | Information layout (see Layout Gallery) |
| Dimension | Controls | Options | |-----------|----------|---------| | Style | Visual aesthetics: colors, lines, decorations | cute, fresh, warm, bold, minimal, retro, pop, notion, chalkboard | | Layout | Information structure: density, arrangement | sparse, balanced, dense, list, comparison, flow |
Style × Layout can be freely combined. Example: --style notion --layout dense creates an intellectual-looking knowledge card with high information density.
| 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 |
Detailed style definitions: references/presets/<style>.md
| 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) |
Detailed layout definitions: references/elements/canvas.md
| Content Signals | Style | Layout |
|-----------------|-------|--------|
| Beauty, fashion, cute, girl, pink | cute | sparse/balanced |
| Health, nature, clean, fresh, organic | fresh | balanced/flow |
| Life, story, emotion, feeling, warm | warm | balanced |
| Warning, important, must, critical | bold | list/comparison |
| Professional, business, elegant, simple | minimal | sparse/balanced |
| Classic, vintage, old, traditional | retro | balanced |
| Fun, exciting, wow, amazing | pop | sparse/list |
| Knowledge, concept, productivity, SaaS | notion | dense/list |
| Education, tutorial, learning, teaching, classroom | chalkboard | balanced/dense |
Three differentiated outline strategies for different content goals:
| 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 |
| 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 |
| 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 |
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:
ai-tools-recommendConflict Resolution:
If xhs-images/{topic-slug}/ already exists:
{topic-slug}-YYYYMMDD-HHMMSSai-tools exists → ai-tools-20260118-143052Source Files:
Copy all sources with naming source-{slug}.{ext}:
source-article.md, source-photo.jpg, etc.Copy and track progress:
XHS Infographic Progress:
- [ ] Step 0: Check preferences (EXTEND.md) ⚠️ REQUIRED if not found
- [ ] 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
Input → Analyze → [Confirm 1] → 3 Outlines → [Confirm 2: Outline + Style + Elements] → Generate → Complete
Purpose: Load user preferences or run first-time setup. Do NOT skip setup if EXTEND.md not found.
Use Bash to check EXTEND.md existence (priority order):
# Check project-level first
test -f .baoyu-skills/baoyu-xhs-images/EXTEND.md && echo "project"
# Then user-level (cross-platform: $HOME works on macOS/Linux/WSL)
test -f "$HOME/.baoyu-skills/baoyu-xhs-images/EXTEND.md" && echo "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 │ ⚠️ MUST run first-time setup (see below) → Then continue to 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
analysis.mdRead source content, save it if needed, and perform deep analysis.
Actions:
source.md in target directoryreferences/workflows/analysis-framework.md:
analysis.mdPurpose: Validate understanding + collect missing info. Do NOT skip.
Display summary:
Use AskUserQuestion for:
After response: Update analysis.md → Step 3
Based on analysis + user context, create three distinct strategy variants. Each variant includes both outline structure and visual style recommendation.
For each strategy:
| 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 |
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 in Step 4
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:
style_reason explaining why this style fits the strategyReference: references/workflows/outline-template.md
Purpose: User chooses outline strategy, confirms visual style, and customizes elements. Do NOT skip.
Display each strategy:
Use AskUserQuestion with three questions:
Question 1: Outline Strategy
Question 2: Visual Style
Question 3: Visual Elements (show after style selection) Display the selected style's default elements from preset, then ask:
After response:
outline.md with confirmed styleoutline.md frontmatter with final style and elementsWith confirmed outline + style + layout:
For each image (cover + content + ending):
prompts/NN-{type}-[slug].md (in user's preferred language)Watermark Application (if enabled in preferences): Add to each image generation prompt:
Include a subtle watermark "[content]" positioned at [position]
with approximately [opacity*100]% visibility. The watermark should
be legible but not distracting from the main content.
Reference: references/config/watermark-guide.md
Image Generation Skill Selection:
Session Management:
If image generation skill supports --sessionId:
xhs-{topic-slug}-{timestamp}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)
| Action | Steps | |--------|-------| | Edit | Update prompt → 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 |
sparse layoutbalanced/dense/list/comparison/flowsparse or balancedStyle × Layout Matrix (✓✓ = highly recommended, ✓ = works well):
| | sparse | balanced | dense | list | comparison | flow | |---|:---:|:---:|:---:|:---:|:---:|:---:| | cute | ✓✓ | ✓✓ | ✓ | ✓✓ | ✓ | ✓ | | fresh | ✓✓ | ✓✓ | ✓ | ✓ | ✓ | ✓✓ | | warm | ✓✓ | ✓✓ | ✓ | ✓ | ✓✓ | ✓ | | bold | ✓✓ | ✓ | ✓ | ✓✓ | ✓✓ | ✓ | | minimal | ✓✓ | ✓✓ | ✓✓ | ✓ | ✓ | ✓ | | retro | ✓✓ | ✓✓ | ✓ | ✓✓ | ✓ | ✓ | | pop | ✓✓ | ✓✓ | ✓ | ✓✓ | ✓✓ | ✓ | | notion | ✓✓ | ✓✓ | ✓✓ | ✓✓ | ✓✓ | ✓✓ | | chalkboard | ✓✓ | ✓✓ | ✓✓ | ✓✓ | ✓ | ✓✓ |
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, framesPresets (Style presets):
presets/<name>.md - Element combination definitions (cute, notion, warm...)Workflows (Process guides):
workflows/analysis-framework.md - Content analysis frameworkworkflows/outline-template.md - Outline template with layout guideworkflows/prompt-assembly.md - Prompt assembly guideConfig (Settings):
config/preferences-schema.md - EXTEND.md schemaconfig/first-time-setup.md - First-time setup flowconfig/watermark-guide.md - Watermark configurationCustom configurations via EXTEND.md. See Step 0 for paths and supported options.
tools
Extract frames or short clips from videos using ffmpeg.
tools
Toolkit for styling artifacts with a theme. These artifacts can be slides, docs, reportings, HTML landing pages, etc. There are 10 pre-set themes with colors/fonts that you can apply to any artifact that has been creating, or can generate a new theme on-the-fly.
tools
Toolkit for creating animated GIFs optimized for Slack, with validators for size constraints and composable animation primitives. This skill applies when users request animated GIFs or emoji animations for Slack from descriptions like "make me a GIF for Slack of X doing Y".
development
Best practices for Remotion - Video creation in React