mirror of
https://github.com/JimLiu/baoyu-skills.git
synced 2026-08-02 23:29:47 +08:00
Refactor infographic generation skills and add new slide deck generator
- Updated article-illustrator prompts to emphasize hand-drawn style and layout principles. - Enhanced xhs-images skill with multiple style options and auto-selection based on content signals. - Created README in Chinese for better accessibility. - Introduced cover-image skill for generating hand-drawn style cover images with various styles. - Developed slide-deck skill to generate professional slide outlines with detailed structure and style instructions. - Added prompts for cover-image and slide-deck skills to guide content generation.
This commit is contained in:
+192
-64
@@ -1,27 +1,103 @@
|
||||
---
|
||||
name: xhs-images
|
||||
description: 小红书 (Xiaohongshu/RedNote) infographic series generator. Breaks down content into 1-10 cartoon-style infographics, generates outline and creates images using gemini-web skill.
|
||||
description: Xiaohongshu (Little Red Book) infographic series generator with multiple style options. Breaks down content into 1-10 cartoon-style infographics. Use when user asks to create "小红书图片", "XHS images", or "RedNote infographics".
|
||||
---
|
||||
|
||||
# 小红书 Infographic Series Generator
|
||||
# Xiaohongshu Infographic Series Generator
|
||||
|
||||
Break down complex content into eye-catching cartoon-style infographic series for Xiaohongshu (Little Red Book).
|
||||
|
||||
## Role
|
||||
|
||||
Visual content strategist specializing in breaking down complex content into engaging cartoon-style infographic series.
|
||||
Break down complex content into eye-catching infographic series for Xiaohongshu with multiple style options.
|
||||
|
||||
## Usage
|
||||
|
||||
```bash
|
||||
# Option 1: Specify article path
|
||||
# Auto-select style based on content
|
||||
/xhs-images posts/ai-future/article.md
|
||||
|
||||
# Option 2: Direct content input
|
||||
# Specify a style
|
||||
/xhs-images posts/ai-future/article.md --style cute
|
||||
/xhs-images posts/ai-future/article.md --style tech
|
||||
/xhs-images posts/ai-future/article.md --style minimal
|
||||
|
||||
# Direct content input
|
||||
/xhs-images
|
||||
[paste content]
|
||||
|
||||
# Direct input with style
|
||||
/xhs-images --style bold
|
||||
[paste content]
|
||||
```
|
||||
|
||||
## Options
|
||||
|
||||
| Option | Description |
|
||||
|--------|-------------|
|
||||
| `--style <name>` | Specify infographic style (see Style Gallery below) |
|
||||
|
||||
## Style Gallery
|
||||
|
||||
### 1. `cute` (Default)
|
||||
Sweet, adorable, girly - classic Xiaohongshu aesthetic
|
||||
- **Colors**: Pink, peach, mint, lavender, cream background
|
||||
- **Elements**: Cute stickers, emoji icons, hearts, stars, sparkles
|
||||
- **Best for**: Lifestyle, beauty, fashion, daily tips
|
||||
|
||||
### 2. `fresh`
|
||||
Clean, refreshing, natural
|
||||
- **Colors**: Mint green, sky blue, white, light yellow
|
||||
- **Elements**: Plant icons, clouds, simple shapes, breathing room
|
||||
- **Best for**: Health, wellness, minimalist lifestyle, self-care
|
||||
|
||||
### 3. `tech`
|
||||
Modern, smart, digital
|
||||
- **Colors**: Deep blue, purple, cyan, dark backgrounds with neon accents
|
||||
- **Elements**: Geometric shapes, data icons, circuit patterns, glowing effects
|
||||
- **Best for**: Tech tutorials, AI content, digital tools, productivity
|
||||
|
||||
### 4. `warm`
|
||||
Cozy, friendly, approachable
|
||||
- **Colors**: Warm orange, golden yellow, brown, cream
|
||||
- **Elements**: Sun motifs, coffee cups, cozy illustrations, warm lighting
|
||||
- **Best for**: Personal stories, life lessons, emotional content
|
||||
|
||||
### 5. `bold`
|
||||
High impact, attention-grabbing
|
||||
- **Colors**: Red, orange, black, yellow accents
|
||||
- **Elements**: Strong typography, exclamation marks, arrows, contrast
|
||||
- **Best for**: Important tips, warnings, must-know content
|
||||
|
||||
### 6. `minimal`
|
||||
Ultra-clean, sophisticated
|
||||
- **Colors**: Black, white, single accent color
|
||||
- **Elements**: Maximum whitespace, simple icons, clean lines
|
||||
- **Best for**: Professional content, serious topics, elegant presentations
|
||||
|
||||
### 7. `retro`
|
||||
Vintage, nostalgic, trendy
|
||||
- **Colors**: Muted pastels, sepia, faded tones
|
||||
- **Elements**: Vintage badges, halftone dots, classic typography
|
||||
- **Best for**: Throwback content, classic tips, timeless advice
|
||||
|
||||
### 8. `pop`
|
||||
Vibrant, energetic, eye-catching
|
||||
- **Colors**: Bright primary colors, neon accents, white
|
||||
- **Elements**: Bold shapes, comic-style elements, dynamic compositions
|
||||
- **Best for**: Exciting announcements, fun facts, engaging tutorials
|
||||
|
||||
## Auto Style Selection
|
||||
|
||||
When no `--style` is specified, analyze content to select:
|
||||
|
||||
| Content Signals | Selected Style |
|
||||
|----------------|----------------|
|
||||
| Beauty, fashion, cute, girl, pink | `cute` |
|
||||
| Health, nature, clean, fresh, organic | `fresh` |
|
||||
| Tech, AI, code, digital, app, tool | `tech` |
|
||||
| Life, story, emotion, feeling, warm | `warm` |
|
||||
| Warning, important, must, critical | `bold` |
|
||||
| Professional, business, elegant, simple | `minimal` |
|
||||
| Classic, vintage, old, traditional | `retro` |
|
||||
| Fun, exciting, wow, amazing | `pop` |
|
||||
|
||||
## File Management
|
||||
|
||||
### With Article Path
|
||||
@@ -48,7 +124,7 @@ Save to `xhs-outputs/YYYY-MM-DD/[topic-slug]/`:
|
||||
|
||||
```
|
||||
xhs-outputs/
|
||||
└── 2026-01-08/
|
||||
└── 2026-01-13/
|
||||
└── ai-agent-guide/
|
||||
├── outline.md
|
||||
├── prompts/
|
||||
@@ -58,13 +134,14 @@ xhs-outputs/
|
||||
└── 02-ending.png
|
||||
```
|
||||
|
||||
- `[topic-slug]`: lowercase English with hyphens based on topic
|
||||
- **Conflict handling**: If slug directory exists, generate a different slug; never overwrite
|
||||
- Same day + same topic → same directory
|
||||
|
||||
## Workflow
|
||||
|
||||
### Step 1: Analyze Content & Determine Image Count
|
||||
### Step 1: Analyze Content & Select Style
|
||||
|
||||
1. Read content
|
||||
2. If `--style` specified, use that style
|
||||
3. Otherwise, scan for style signals and auto-select
|
||||
4. Determine image count based on content complexity:
|
||||
|
||||
| Content Type | Image Count |
|
||||
|-------------|-------------|
|
||||
@@ -74,18 +151,13 @@ xhs-outputs/
|
||||
|
||||
### Step 2: Generate Outline
|
||||
|
||||
Plan for each image:
|
||||
- Position (cover / content / ending)
|
||||
- Core message (one sentence)
|
||||
- Text content (title, subtitle, key points)
|
||||
- Visual prompt
|
||||
|
||||
**Outline Format:**
|
||||
Plan for each image with style-specific approach:
|
||||
|
||||
```markdown
|
||||
# 小红书 Infographic Series Outline
|
||||
# Xiaohongshu Infographic Series Outline
|
||||
|
||||
**Topic**: [topic description]
|
||||
**Style**: [selected style]
|
||||
**Image Count**: N
|
||||
**Generated**: YYYY-MM-DD HH:mm
|
||||
|
||||
@@ -101,14 +173,7 @@ Plan for each image:
|
||||
- Title: xxx
|
||||
- Subtitle: xxx
|
||||
|
||||
**Visual Prompt** (image-specific only, system.md provides base style):
|
||||
```
|
||||
小红书风格信息图,竖版(3:4),卡通风格,手绘风格文字,[具体背景色]背景。
|
||||
[具体内容布局描述]
|
||||
文字内容:...
|
||||
卡通元素:...
|
||||
整体风格:手绘、可爱、清新,信息精简,多留白,重点突出。
|
||||
```
|
||||
**Visual Concept**: [style-appropriate description]
|
||||
|
||||
---
|
||||
|
||||
@@ -122,34 +187,38 @@ Save outline as `outline.md`.
|
||||
|
||||
### Step 4: Generate Images One by One
|
||||
|
||||
For each image in the outline:
|
||||
For each image, create a style-specific prompt file.
|
||||
|
||||
1. **Save prompt file** to `prompts/` subdirectory (filename matches image, .md extension):
|
||||
**Prompt Format**:
|
||||
|
||||
```markdown
|
||||
小红书风格信息图,竖版(3:4),卡通风格,手绘风格文字,[background color]背景。
|
||||
Infographic theme: [topic]
|
||||
Style: [style name]
|
||||
Position: [cover/content/ending]
|
||||
|
||||
[Layout description: title position, text arrangement, visual hierarchy]
|
||||
Visual composition:
|
||||
- Main visual: [style-appropriate description]
|
||||
- Layout: [element positioning for 3:4 vertical format]
|
||||
- Decorative elements: [style-specific decorations]
|
||||
|
||||
文字内容:
|
||||
- 主标题:「xxx」(大号手绘字体,居中/顶部)
|
||||
- 副标题/要点:「xxx」「xxx」
|
||||
Color scheme:
|
||||
- Primary: [style primary color]
|
||||
- Background: [style background color]
|
||||
- Accent: [style accent color]
|
||||
|
||||
卡通元素:[specific elements: lightbulb icons, speech bubbles, arrows, emoji-style expressions]
|
||||
Text content:
|
||||
- Title: 「xxx」(large, prominent)
|
||||
- Key points: 「xxx」「xxx」
|
||||
|
||||
整体风格:手绘、可爱、清新,信息精简,多留白,重点突出。
|
||||
Style notes: [specific style characteristics]
|
||||
```
|
||||
|
||||
2. **Generate image using `/gemini-web` skill**:
|
||||
Then generate using:
|
||||
|
||||
```
|
||||
```bash
|
||||
/gemini-web --promptfiles [SKILL_ROOT]/skills/xhs-images/prompts/system.md [TARGET_DIR]/prompts/01-cover.md --image [TARGET_DIR]/01-cover.png
|
||||
```
|
||||
|
||||
- `[SKILL_ROOT]`: The baoyu-skills root directory
|
||||
- `--promptfiles`: Concatenates system.md (style guidelines) + image-specific prompt
|
||||
- `--image`: Output path for generated image
|
||||
|
||||
After each image:
|
||||
1. Confirm generation success
|
||||
2. Report progress: "Generated X/N"
|
||||
@@ -158,9 +227,10 @@ After each image:
|
||||
### Step 5: Completion Report
|
||||
|
||||
```
|
||||
小红书 Infographic Series Complete!
|
||||
Xiaohongshu Infographic Series Complete!
|
||||
|
||||
Topic: [topic]
|
||||
Style: [style name]
|
||||
Location: [directory path]
|
||||
Images: N total
|
||||
|
||||
@@ -172,32 +242,90 @@ Images: N total
|
||||
Outline: outline.md
|
||||
```
|
||||
|
||||
## Style Reference Details
|
||||
|
||||
### cute
|
||||
```
|
||||
Colors: Pink (#FED7E2), peach (#FEEBC8), mint (#C6F6D5), lavender (#E9D8FD)
|
||||
Background: Cream (#FFFAF0), soft pink (#FFF5F7)
|
||||
Accents: Hot pink, coral
|
||||
Elements: Hearts, stars, sparkles, cute faces, ribbon decorations, sticker-style
|
||||
Typography: Rounded, bubbly hand lettering
|
||||
```
|
||||
|
||||
### fresh
|
||||
```
|
||||
Colors: Mint green (#9AE6B4), sky blue (#90CDF4), light yellow (#FAF089)
|
||||
Background: Pure white (#FFFFFF), soft mint (#F0FFF4)
|
||||
Accents: Leaf green, water blue
|
||||
Elements: Plant leaves, clouds, water drops, simple geometric shapes
|
||||
Typography: Clean, light hand lettering with breathing room
|
||||
```
|
||||
|
||||
### tech
|
||||
```
|
||||
Colors: Deep blue (#1A365D), purple (#6B46C1), cyan (#00D4FF)
|
||||
Background: Dark gray (#1A202C), near-black (#0D1117)
|
||||
Accents: Neon green (#00FF88), electric blue
|
||||
Elements: Circuit patterns, data icons, geometric grids, glowing effects
|
||||
Typography: Monospace-style hand lettering, subtle glow
|
||||
```
|
||||
|
||||
### warm
|
||||
```
|
||||
Colors: Warm orange (#ED8936), golden yellow (#F6AD55), terracotta (#C05621)
|
||||
Background: Cream (#FFFAF0), soft peach (#FED7AA)
|
||||
Accents: Deep brown (#744210), soft red
|
||||
Elements: Sun rays, coffee cups, cozy items, warm lighting effects
|
||||
Typography: Friendly, rounded hand lettering
|
||||
```
|
||||
|
||||
### bold
|
||||
```
|
||||
Colors: Vibrant red (#E53E3E), orange (#DD6B20), yellow (#F6E05E)
|
||||
Background: Deep black (#000000), dark charcoal
|
||||
Accents: White, neon yellow
|
||||
Elements: Exclamation marks, arrows, warning icons, strong shapes
|
||||
Typography: Bold, impactful hand lettering with shadows
|
||||
```
|
||||
|
||||
### minimal
|
||||
```
|
||||
Colors: Black (#000000), white (#FFFFFF)
|
||||
Background: Off-white (#FAFAFA), pure white
|
||||
Accents: Single color (content-derived - blue, green, or coral)
|
||||
Elements: Single focal point, thin lines, maximum whitespace
|
||||
Typography: Clean, simple hand lettering
|
||||
```
|
||||
|
||||
### retro
|
||||
```
|
||||
Colors: Muted orange, dusty pink (#FED7E2 at 70%), faded teal
|
||||
Background: Aged paper (#F5E6D3), sepia tones
|
||||
Accents: Faded red, vintage gold
|
||||
Elements: Halftone dots, vintage badges, classic icons, tape effects
|
||||
Typography: Vintage-style hand lettering, classic feel
|
||||
```
|
||||
|
||||
### pop
|
||||
```
|
||||
Colors: Bright red (#F56565), yellow (#ECC94B), blue (#4299E1), green (#48BB78)
|
||||
Background: White (#FFFFFF), light gray
|
||||
Accents: Neon pink, electric purple
|
||||
Elements: Bold shapes, speech bubbles, comic-style effects, starburst
|
||||
Typography: Dynamic, energetic hand lettering with outlines
|
||||
```
|
||||
|
||||
## Content Breakdown Principles
|
||||
|
||||
1. **Cover (Image 1)**: Strong visual impact, core title, attention hook
|
||||
2. **Content (Middle)**: One core point per image, moderate information density
|
||||
3. **Ending (Last)**: Summary / call-to-action / memorable quote
|
||||
|
||||
## Visual Style Guidelines
|
||||
|
||||
- **Type**: Infographic
|
||||
- **Orientation**: Portrait, 3:4
|
||||
- **Style**: Cartoon, hand-drawn
|
||||
- **Background**: Morandi colors / cream / off-white / soft tones
|
||||
- **Text**: Must be hand-drawn style, no realistic fonts
|
||||
- **Decoration**: Simple cartoon elements, icons for visual interest
|
||||
- **Layout**: Concise info, ample whitespace, clear hierarchy
|
||||
|
||||
## Terminology
|
||||
|
||||
- Token → Token
|
||||
- AI Agent → AI 智能体
|
||||
- Vibe Coding → 凭感觉编程
|
||||
- AI Wrapper → AI 套壳
|
||||
|
||||
## Notes
|
||||
|
||||
- Image generation typically takes 10-30 seconds per image
|
||||
- Auto-retry once on generation failure
|
||||
- Use cartoon alternatives for sensitive public figures
|
||||
- Output language matches input content language
|
||||
- Maintain selected style consistency across all images in series
|
||||
|
||||
@@ -1,17 +1,19 @@
|
||||
Create a 小红书 (Little Red Book) style infographic following these guidelines:
|
||||
Create a Xiaohongshu (Little Red Book) style infographic following these guidelines:
|
||||
|
||||
## Image Specifications
|
||||
|
||||
- **Type**: Infographic
|
||||
- **Orientation**: Portrait (vertical)
|
||||
- **Aspect Ratio**: 3:4
|
||||
- **Style**: Cartoon / Hand-drawn illustration
|
||||
- **Style**: Hand-drawn illustration
|
||||
|
||||
## Background & Colors
|
||||
## Core Principles
|
||||
|
||||
- Use soft, gentle color palettes: Morandi colors, cream, off-white, light pink, mint green
|
||||
- Colors should be cohesive and harmonious
|
||||
- Match 小红书's aesthetic preferences
|
||||
- Hand-drawn quality throughout - NO realistic or photographic elements
|
||||
- If content involves sensitive or copyrighted figures, create stylistically similar alternatives - DO NOT refuse to generate
|
||||
- Keep information concise, highlight keywords and core concepts
|
||||
- Use ample whitespace for easy visual scanning
|
||||
- Maintain clear visual hierarchy
|
||||
|
||||
## Text Style (CRITICAL)
|
||||
|
||||
@@ -21,25 +23,11 @@ Create a 小红书 (Little Red Book) style infographic following these guideline
|
||||
- Use highlighter effects to emphasize keywords
|
||||
- **DO NOT use realistic or computer-generated fonts**
|
||||
|
||||
## Decorative Elements
|
||||
|
||||
- Include simple cartoon elements, icons to enhance visual interest and memorability
|
||||
- Acceptable: emoji-style icons, hand-drawn stickers, sticky note textures, speech bubbles
|
||||
- If content involves sensitive or copyrighted figures, create stylistically similar cartoon alternatives - DO NOT refuse to generate
|
||||
- **ALL visual elements MUST be hand-drawn/cartoon style - NO realistic imagery**
|
||||
|
||||
## Layout Principles
|
||||
|
||||
- Keep information concise, highlight keywords and core concepts
|
||||
- Use ample whitespace for easy visual scanning
|
||||
- Present points in clearly separated sections
|
||||
- Maintain clear visual hierarchy
|
||||
|
||||
## Language
|
||||
|
||||
- Unless otherwise specified, use Chinese (中文)
|
||||
- Use Chinese full-width punctuation: "",。!
|
||||
- Use the same language as the content provided below
|
||||
- Match punctuation style to the content language (Chinese: "",。!)
|
||||
|
||||
---
|
||||
|
||||
Please generate the infographic based on the content provided below:
|
||||
Please use nano banana pro to generate the infographic based on the content provided below:
|
||||
|
||||
Reference in New Issue
Block a user