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:
Jim Liu 宝玉
parent
2f4b5fcc85
commit
cc553ddbb3
|
|
@ -18,7 +18,9 @@
|
|||
"./skills/gemini-web",
|
||||
"./skills/xhs-images",
|
||||
"./skills/post-to-x",
|
||||
"./skills/article-illustrator"
|
||||
"./skills/article-illustrator",
|
||||
"./skills/cover-image",
|
||||
"./skills/slide-deck"
|
||||
]
|
||||
}
|
||||
]
|
||||
|
|
|
|||
38
README.md
38
README.md
|
|
@ -1,5 +1,7 @@
|
|||
# baoyu-skills
|
||||
|
||||
English | [中文](./README.zh.md)
|
||||
|
||||
Skills shared by Baoyu for improving daily work efficiency with Claude Code.
|
||||
|
||||
## Prerequisites
|
||||
|
|
@ -64,6 +66,42 @@ Xiaohongshu (RedNote) infographic series generator. Breaks down content into 1-1
|
|||
/xhs-images 今日星座运势
|
||||
```
|
||||
|
||||
### cover-image
|
||||
|
||||
Generate hand-drawn style cover images for articles with multiple style options.
|
||||
|
||||
```bash
|
||||
# From markdown file (auto-select style)
|
||||
/cover-image path/to/article.md
|
||||
|
||||
# Specify a style
|
||||
/cover-image path/to/article.md --style tech
|
||||
/cover-image path/to/article.md --style warm
|
||||
|
||||
# Without title text
|
||||
/cover-image path/to/article.md --no-title
|
||||
```
|
||||
|
||||
Available styles: `elegant` (default), `tech`, `warm`, `bold`, `minimal`, `playful`, `nature`, `retro`
|
||||
|
||||
### slide-deck
|
||||
|
||||
Generate professional slide deck outlines from content with comprehensive style instructions.
|
||||
|
||||
```bash
|
||||
# From markdown file
|
||||
/slide-deck path/to/article.md
|
||||
|
||||
# With style and audience
|
||||
/slide-deck path/to/article.md --style corporate
|
||||
/slide-deck path/to/article.md --audience executives
|
||||
|
||||
# With language
|
||||
/slide-deck path/to/article.md --lang zh
|
||||
```
|
||||
|
||||
Available styles: `editorial` (default), `corporate`, `technical`, `playful`, `minimal`, `storytelling`
|
||||
|
||||
## Disclaimer
|
||||
|
||||
### gemini-web
|
||||
|
|
|
|||
|
|
@ -0,0 +1,119 @@
|
|||
# baoyu-skills
|
||||
|
||||
[English](./README.md) | 中文
|
||||
|
||||
宝玉分享的 Claude Code 技能集，提升日常工作效率。
|
||||
|
||||
## 前置要求
|
||||
|
||||
- 已安装 Node.js 环境
|
||||
- 能够运行 `npx bun` 命令
|
||||
|
||||
## 安装
|
||||
|
||||
### 注册插件市场
|
||||
|
||||
在 Claude Code 中运行：
|
||||
|
||||
```bash
|
||||
/plugin marketplace add jimliu/baoyu-skills
|
||||
```
|
||||
|
||||
### 安装技能
|
||||
|
||||
**方式一：通过浏览界面**
|
||||
|
||||
1. 选择 **Browse and install plugins**
|
||||
2. 选择 **baoyu-skills**
|
||||
3. 选择 **content-skills**
|
||||
4. 选择 **Install now**
|
||||
|
||||
**方式二：直接安装**
|
||||
|
||||
```bash
|
||||
/plugin install content-skills@baoyu-skills
|
||||
```
|
||||
|
||||
## 可用技能
|
||||
|
||||
### gemini-web
|
||||
|
||||
与 Gemini Web 交互，生成文本和图片。
|
||||
|
||||
**文本生成：**
|
||||
|
||||
```bash
|
||||
/gemini-web "你好，Gemini"
|
||||
/gemini-web --prompt "解释量子计算"
|
||||
```
|
||||
|
||||
**图片生成：**
|
||||
|
||||
```bash
|
||||
/gemini-web --prompt "一只可爱的猫" --image cat.png
|
||||
/gemini-web --promptfiles system.md content.md --image out.png
|
||||
```
|
||||
|
||||
### xhs-images
|
||||
|
||||
小红书信息图系列生成器。将内容拆解为 1-10 张卡通风格信息图。
|
||||
|
||||
```bash
|
||||
# 指定文章路径
|
||||
/xhs-images posts/ai-future/article.md
|
||||
|
||||
# 直接输入内容
|
||||
/xhs-images 今日星座运势
|
||||
```
|
||||
|
||||
### cover-image
|
||||
|
||||
为文章生成手绘风格封面图，支持多种风格选项。
|
||||
|
||||
```bash
|
||||
# 从 markdown 文件生成（自动选择风格）
|
||||
/cover-image path/to/article.md
|
||||
|
||||
# 指定风格
|
||||
/cover-image path/to/article.md --style tech
|
||||
/cover-image path/to/article.md --style warm
|
||||
|
||||
# 不包含标题文字
|
||||
/cover-image path/to/article.md --no-title
|
||||
```
|
||||
|
||||
可用风格：`elegant`（默认）、`tech`、`warm`、`bold`、`minimal`、`playful`、`nature`、`retro`
|
||||
|
||||
### slide-deck
|
||||
|
||||
从内容生成专业的幻灯片大纲，包含完整的样式说明。
|
||||
|
||||
```bash
|
||||
# 从 markdown 文件生成
|
||||
/slide-deck path/to/article.md
|
||||
|
||||
# 指定风格和受众
|
||||
/slide-deck path/to/article.md --style corporate
|
||||
/slide-deck path/to/article.md --audience executives
|
||||
|
||||
# 指定语言
|
||||
/slide-deck path/to/article.md --lang zh
|
||||
```
|
||||
|
||||
可用风格：`editorial`（默认）、`corporate`、`technical`、`playful`、`minimal`、`storytelling`
|
||||
|
||||
## 免责声明
|
||||
|
||||
### gemini-web
|
||||
|
||||
此技能使用 Gemini Web API（逆向工程）。
|
||||
|
||||
**警告：** 本项目通过浏览器 cookies 使用非官方 API。使用风险自负。
|
||||
|
||||
- 首次运行会打开 Chrome 进行 Google 身份验证
|
||||
- Cookies 会被缓存供后续使用
|
||||
- 不保证 API 的稳定性或可用性
|
||||
|
||||
## 许可证
|
||||
|
||||
MIT
|
||||
|
|
@ -1,54 +1,134 @@
|
|||
---
|
||||
name: article-illustrator
|
||||
description: Smart article illustration skill. Analyzes article content and generates illustrations at positions requiring visual aids. Illustrations can supplement information, visualize concepts, or guide reader imagination. Use when user asks to "add illustrations to article", "generate images for article", or "illustrate article".
|
||||
description: Smart article illustration skill. Analyzes article content and generates illustrations at positions requiring visual aids with multiple style options. Use when user asks to "add illustrations to article", "generate images for article", or "illustrate article".
|
||||
---
|
||||
|
||||
# Smart Article Illustration Skill
|
||||
|
||||
Analyze article structure and content, identify positions requiring visual aids, and generate flexible-style illustrations.
|
||||
Analyze article structure and content, identify positions requiring visual aids, and generate illustrations with flexible style options.
|
||||
|
||||
## Usage
|
||||
|
||||
```bash
|
||||
# Option 1: Specify article path
|
||||
/article-illustrator vibe-coding-guide/final.md
|
||||
# Auto-select style based on content
|
||||
/article-illustrator path/to/article.md
|
||||
|
||||
# Option 2: Specify article URL (auto-download to local)
|
||||
/article-illustrator https://example.com/article.md
|
||||
# Specify a style
|
||||
/article-illustrator path/to/article.md --style tech
|
||||
/article-illustrator path/to/article.md --style warm
|
||||
/article-illustrator path/to/article.md --style minimal
|
||||
|
||||
# Combine with other options
|
||||
/article-illustrator path/to/article.md --style playful
|
||||
```
|
||||
|
||||
## Options
|
||||
|
||||
| Option | Description |
|
||||
|--------|-------------|
|
||||
| `--style <name>` | Specify illustration style (see Style Gallery below) |
|
||||
|
||||
## Style Gallery
|
||||
|
||||
### 1. `elegant` (Default)
|
||||
Refined, sophisticated, professional
|
||||
- **Colors**: Soft coral, muted teal, dusty rose, cream background
|
||||
- **Elements**: Delicate line work, subtle icons, balanced composition
|
||||
- **Best for**: Professional articles, thought leadership, business topics
|
||||
|
||||
### 2. `tech`
|
||||
Modern, futuristic, digital
|
||||
- **Colors**: Deep blue, electric cyan, purple, dark backgrounds
|
||||
- **Elements**: Geometric shapes, circuit patterns, data visualizations, tech icons
|
||||
- **Best for**: AI, programming, technology, digital transformation articles
|
||||
|
||||
### 3. `warm`
|
||||
Friendly, approachable, human-centered
|
||||
- **Colors**: Warm orange, golden yellow, terracotta, cream
|
||||
- **Elements**: Rounded shapes, friendly characters, sun/light motifs, hearts
|
||||
- **Best for**: Personal growth, lifestyle, education, human interest stories
|
||||
|
||||
### 4. `bold`
|
||||
High contrast, impactful, energetic
|
||||
- **Colors**: Vibrant red/orange, deep black, bright yellow accents
|
||||
- **Elements**: Strong shapes, dramatic contrast, dynamic compositions
|
||||
- **Best for**: Opinion pieces, important warnings, call-to-action content
|
||||
|
||||
### 5. `minimal`
|
||||
Ultra-clean, zen-like, focused
|
||||
- **Colors**: Black, white, single accent color
|
||||
- **Elements**: Maximum whitespace, single focal element, simple lines
|
||||
- **Best for**: Philosophy, minimalism, focused explanations
|
||||
|
||||
### 6. `playful`
|
||||
Fun, creative, whimsical
|
||||
- **Colors**: Pastel rainbow, bright pops, light backgrounds
|
||||
- **Elements**: Doodles, quirky characters, speech bubbles, emoji-style icons
|
||||
- **Best for**: Tutorials, beginner guides, casual content, fun topics
|
||||
|
||||
### 7. `nature`
|
||||
Organic, calm, earthy
|
||||
- **Colors**: Forest green, earth brown, sky blue, sand beige
|
||||
- **Elements**: Plant motifs, natural textures, flowing lines, organic shapes
|
||||
- **Best for**: Sustainability, wellness, outdoor topics, slow living
|
||||
|
||||
### 8. `sketch`
|
||||
Raw, authentic, notebook-style
|
||||
- **Colors**: Pencil gray, paper white, occasional color highlights
|
||||
- **Elements**: Rough lines, sketch marks, handwritten notes, arrows
|
||||
- **Best for**: Ideas in progress, brainstorming, thought processes
|
||||
|
||||
## Auto Style Selection
|
||||
|
||||
When no `--style` is specified, analyze content to select the best style:
|
||||
|
||||
| Content Signals | Selected Style |
|
||||
|----------------|----------------|
|
||||
| AI, coding, tech, digital, algorithm, data | `tech` |
|
||||
| Personal story, emotion, growth, life, feeling | `warm` |
|
||||
| Warning, urgent, must-read, critical, important | `bold` |
|
||||
| Simple, zen, focus, essential, core | `minimal` |
|
||||
| Fun, easy, beginner, tutorial, guide, how-to | `playful` |
|
||||
| Nature, eco, wellness, health, organic, green | `nature` |
|
||||
| Idea, thought, concept, draft, brainstorm | `sketch` |
|
||||
| Business, professional, strategy, analysis | `elegant` |
|
||||
|
||||
## File Management
|
||||
|
||||
Save illustrations to `imgs/` subdirectory in the same folder as the article:
|
||||
|
||||
```
|
||||
vibe-coding-guide/
|
||||
├── final.md
|
||||
path/to/
|
||||
├── article.md
|
||||
└── imgs/
|
||||
├── outline.md
|
||||
├── prompts/
|
||||
│ ├── illustration-evolution.md
|
||||
│ ├── illustration-comparison.md
|
||||
│ ├── illustration-concept-a.md
|
||||
│ ├── illustration-concept-b.md
|
||||
│ └── ...
|
||||
├── illustration-evolution.png
|
||||
├── illustration-comparison.png
|
||||
├── illustration-concept-a.png
|
||||
├── illustration-concept-b.png
|
||||
└── ...
|
||||
```
|
||||
|
||||
## Workflow
|
||||
|
||||
### Step 1: Retrieve Article Content
|
||||
### Step 1: Analyze Content & Select Style
|
||||
|
||||
1. **Local path**: Read file directly
|
||||
2. **URL**: Download Markdown content to temporary location
|
||||
1. Read article content
|
||||
2. If `--style` specified, use that style
|
||||
3. Otherwise, scan for style signals and auto-select
|
||||
4. Extract key information:
|
||||
- Main topic and themes
|
||||
- Core messages per section
|
||||
- Abstract concepts needing visualization
|
||||
|
||||
### Step 2: Analyze Illustration Requirements
|
||||
|
||||
Analyze article paragraph by paragraph, identify positions requiring illustrations.
|
||||
### Step 2: Identify Illustration Positions
|
||||
|
||||
**Three Purposes of Illustrations**:
|
||||
1. **Information Supplement**: Help understand abstract concepts (e.g., "iterative development" shown as skateboard → bicycle → car evolution)
|
||||
2. **Concept Visualization**: Transform abstract ideas into concrete visuals for instant comprehension
|
||||
3. **Imagination Guidance**: Create atmosphere, spark associations, enhance reading experience
|
||||
1. **Information Supplement**: Help understand abstract concepts
|
||||
2. **Concept Visualization**: Transform abstract ideas into concrete visuals
|
||||
3. **Imagination Guidance**: Create atmosphere, enhance reading experience
|
||||
|
||||
**Content Suitable for Illustrations**:
|
||||
- Abstract concepts needing visualization
|
||||
|
|
@ -56,26 +136,19 @@ Analyze article paragraph by paragraph, identify positions requiring illustratio
|
|||
- Comparisons needing visual representation
|
||||
- Core arguments needing reinforcement
|
||||
- Scenarios needing imagination guidance
|
||||
- Emotions/atmosphere needing enhancement
|
||||
|
||||
**Content NOT Needing Illustrations**:
|
||||
- Already intuitive descriptions (e.g., code examples, specific numbers)
|
||||
- Simple list enumerations
|
||||
- Direct quotes
|
||||
|
||||
**Illustration Count**:
|
||||
- Consider at least 1 image per major section, prioritize core arguments and abstract concepts
|
||||
- Opening/ending may add 1 image (for atmosphere)
|
||||
- **Principle: More is better than fewer** - visual content significantly enhances reading experience
|
||||
- Consider at least 1 image per major section
|
||||
- Prioritize core arguments and abstract concepts
|
||||
- **Principle: More is better than fewer**
|
||||
|
||||
### Step 3: Generate Illustration Plan
|
||||
|
||||
Create plan for each illustration position:
|
||||
|
||||
```markdown
|
||||
# Illustration Plan
|
||||
|
||||
**Article**: [article path]
|
||||
**Style**: [selected style]
|
||||
**Illustration Count**: N images
|
||||
|
||||
---
|
||||
|
|
@ -85,7 +158,7 @@ Create plan for each illustration position:
|
|||
**Insert Position**: [section name] / [paragraph description]
|
||||
**Purpose**: [why illustration needed here]
|
||||
**Visual Content**: [what the image should show]
|
||||
**Filename**: illustration-[slug].png (slug convention: lowercase letters, numbers, hyphens)
|
||||
**Filename**: illustration-[slug].png
|
||||
|
||||
---
|
||||
|
||||
|
|
@ -93,39 +166,40 @@ Create plan for each illustration position:
|
|||
...
|
||||
```
|
||||
|
||||
### Step 4: Generate Prompts and Save
|
||||
### Step 4: Create Prompt Files
|
||||
|
||||
Create detailed prompt for each illustration, save to `prompts/` directory.
|
||||
Save prompts to `prompts/` directory with style-specific details.
|
||||
|
||||
**Slug Naming Rules**:
|
||||
- Use meaningful English description, following slug convention (lowercase letters, numbers, hyphens)
|
||||
- Examples: `product-evolution`, `ai-vs-human-comparison`, `step-by-step-workflow`
|
||||
- If file exists, generate a different slug; never overwrite
|
||||
|
||||
**Prompt File Format** (each prompts/illustration-[slug].md):
|
||||
**Prompt Format**:
|
||||
|
||||
```markdown
|
||||
[Specific content description including:]
|
||||
- Main visual elements
|
||||
- Element layout and positioning
|
||||
- Text content (if any)
|
||||
- Decorative elements
|
||||
Illustration theme: [concept in 2-3 words]
|
||||
Style: [style name]
|
||||
|
||||
[System prompt style specifications auto-appended]
|
||||
Visual composition:
|
||||
- Main visual: [description matching style]
|
||||
- Layout: [element positioning]
|
||||
- Decorative elements: [style-appropriate decorations]
|
||||
|
||||
Color scheme:
|
||||
- Primary: [style primary color]
|
||||
- Background: [style background color]
|
||||
- Accent: [style accent color]
|
||||
|
||||
Text content (if any):
|
||||
- [Any labels or captions in content language]
|
||||
|
||||
Style notes: [specific style characteristics]
|
||||
```
|
||||
|
||||
### Step 5: Generate Images Using `/gemini-web`
|
||||
### Step 5: Generate Images
|
||||
|
||||
For each illustration, call:
|
||||
|
||||
```
|
||||
```bash
|
||||
/gemini-web --promptfiles [SKILL_ROOT]/skills/article-illustrator/prompts/system.md [ARTICLE_DIR]/imgs/prompts/illustration-[slug].md --image [ARTICLE_DIR]/imgs/illustration-[slug].png
|
||||
```
|
||||
|
||||
- `[SKILL_ROOT]`: The baoyu-skills root directory
|
||||
- `--promptfiles`: Concatenates system.md (style guidelines) + image-specific prompt
|
||||
- `--image`: Output path for generated image
|
||||
|
||||
Generation flow:
|
||||
1. Generate images sequentially
|
||||
2. After each image, output progress: "Generated X/N"
|
||||
|
|
@ -137,7 +211,7 @@ Generation flow:
|
|||
Insert generated images at corresponding positions:
|
||||
|
||||
```markdown
|
||||
|
||||
|
||||
```
|
||||
|
||||
**Insertion Rules**:
|
||||
|
|
@ -145,77 +219,95 @@ Insert generated images at corresponding positions:
|
|||
- Leave one blank line before and after image
|
||||
- Alt text uses concise description in article's language
|
||||
|
||||
**Infographic Handling**:
|
||||
- Check if `imgs/` directory contains `infographic.png`
|
||||
- If exists, insert infographic at appropriate position near article end (before summary or at very end)
|
||||
- Format: ``
|
||||
|
||||
### Step 7: Output Summary
|
||||
|
||||
```
|
||||
Article Illustration Complete!
|
||||
|
||||
Article: [article path]
|
||||
Style: [style name]
|
||||
Generated: X/N images successful
|
||||
|
||||
Illustration Positions:
|
||||
- illustration-failure-trap.png → After section "Common Pitfalls"
|
||||
- illustration-iteration.png → After section "Iterative Development"
|
||||
- illustration-xxx.png → After section "Section Name"
|
||||
- illustration-yyy.png → After section "Another Section"
|
||||
...
|
||||
|
||||
[If any failures]
|
||||
Failed:
|
||||
- illustration-workflow.png: [failure reason]
|
||||
- illustration-zzz.png: [failure reason]
|
||||
```
|
||||
|
||||
## Visual Style Guidelines
|
||||
## Style Reference Details
|
||||
|
||||
See `prompts/system.md` for details. Style can be flexibly chosen based on content.
|
||||
### elegant
|
||||
```
|
||||
Colors: Soft coral (#E8A598), muted teal (#5B8A8A), dusty rose (#D4A5A5)
|
||||
Background: Warm cream (#F5F0E6), soft beige
|
||||
Accents: Gold (#C9A962), copper
|
||||
Elements: Delicate lines, refined icons, subtle gradients, balanced whitespace
|
||||
```
|
||||
|
||||
### Default Style (Cartoon Hand-drawn)
|
||||
### tech
|
||||
```
|
||||
Colors: Deep blue (#1A365D), electric cyan (#00D4FF), purple (#6B46C1)
|
||||
Background: Dark gray (#1A202C), near-black (#0D1117)
|
||||
Accents: Neon green (#00FF88), bright white
|
||||
Elements: Circuit patterns, data nodes, geometric grids, glowing effects
|
||||
```
|
||||
|
||||
- **Minimalist**: Clean composition, ample whitespace
|
||||
- **Hand-drawn illustration**: Cartoon style, warm and approachable
|
||||
- **Retro-tech aesthetic**: Warm, soft color tones
|
||||
### warm
|
||||
```
|
||||
Colors: Warm orange (#ED8936), golden yellow (#F6AD55), terracotta (#C05621)
|
||||
Background: Cream (#FFFAF0), soft peach (#FED7AA)
|
||||
Accents: Deep brown (#744210), soft red
|
||||
Elements: Rounded shapes, smiling faces, sun rays, hearts, cozy lighting
|
||||
```
|
||||
|
||||
### Optional Style Variants
|
||||
### bold
|
||||
```
|
||||
Colors: Vibrant red (#E53E3E), bright orange (#DD6B20), electric yellow (#F6E05E)
|
||||
Background: Deep black (#000000), dark charcoal
|
||||
Accents: White, neon highlights
|
||||
Elements: Strong shapes, exclamation marks, arrows, dramatic contrast
|
||||
```
|
||||
|
||||
Choose most appropriate style based on content:
|
||||
- **Sci-fi futuristic**: Suitable for AI, cutting-edge technology topics
|
||||
- **Sketch doodle**: Suitable for casual, contemplative content
|
||||
- **Infographic**: Suitable for processes, comparisons, data content
|
||||
- **Scene illustration**: Suitable for narrative, imaginative content
|
||||
### minimal
|
||||
```
|
||||
Colors: Pure black (#000000), white (#FFFFFF)
|
||||
Background: White or off-white (#FAFAFA)
|
||||
Accents: Single color (content-derived)
|
||||
Elements: Single focal point, maximum negative space, thin precise lines
|
||||
```
|
||||
|
||||
### Visual Elements
|
||||
### playful
|
||||
```
|
||||
Colors: Pastel pink (#FED7E2), mint (#C6F6D5), lavender (#E9D8FD), sky blue (#BEE3F8)
|
||||
Background: Light cream (#FFFBEB), soft white
|
||||
Accents: Bright pops - yellow, coral, turquoise
|
||||
Elements: Doodles, stars, swirls, cute characters, speech bubbles
|
||||
```
|
||||
|
||||
- **Aspect Ratio**: 16:9 landscape
|
||||
- **Background**: Based on style, default cream/off-white
|
||||
- **Elements**: Graphics matching content
|
||||
- **Watermark**: "宝玉" in bottom-right corner
|
||||
### nature
|
||||
```
|
||||
Colors: Forest green (#276749), sage (#9AE6B4), earth brown (#744210)
|
||||
Background: Sand beige (#F5E6D3), sky blue (#E0F2FE)
|
||||
Accents: Sunset orange, water blue
|
||||
Elements: Leaves, trees, mountains, organic flowing lines, natural textures
|
||||
```
|
||||
|
||||
### Default Color Scheme
|
||||
|
||||
- Primary: Warm orange, coral
|
||||
- Accent: Mint green, sky blue, light purple
|
||||
- Background: Cream, off-white
|
||||
- Outline: Dark gray line work
|
||||
|
||||
(Colors may adjust based on style variant)
|
||||
|
||||
## Terminology
|
||||
|
||||
| English | Chinese |
|
||||
|---------|---------|
|
||||
| Token | Token |
|
||||
| AI Agent | AI 智能体 |
|
||||
| Vibe Coding | 凭感觉编程 |
|
||||
| AI Wrapper | AI 套壳 |
|
||||
### sketch
|
||||
```
|
||||
Colors: Pencil gray (#4A5568), paper white (#FAFAFA)
|
||||
Background: Off-white paper texture (#F7FAFC)
|
||||
Accents: Single highlight color (blue, red, or yellow)
|
||||
Elements: Rough sketch lines, arrows, handwritten labels, crossed-out marks
|
||||
```
|
||||
|
||||
## Notes
|
||||
|
||||
- Illustrations serve the content: supplement information, visualize concepts, guide imagination
|
||||
- Avoid duplicating information already intuitive in article
|
||||
- Illustrations serve the content: supplement information, visualize concepts
|
||||
- Maintain selected style consistency across all illustrations in one article
|
||||
- Image generation typically takes 10-30 seconds per image
|
||||
- Sensitive figures should use cartoon alternatives
|
||||
- Maintain style consistency within same article
|
||||
- Prompt and illustration text language should match article language
|
||||
|
|
|
|||
|
|
@ -5,45 +5,26 @@ Create a cartoon-style infographic illustration following these guidelines:
|
|||
- **Type**: Infographic illustration
|
||||
- **Orientation**: Landscape (horizontal)
|
||||
- **Aspect Ratio**: 16:9
|
||||
- **Style**: Cartoon / Hand-drawn illustration
|
||||
- **Style**: Hand-drawn illustration
|
||||
|
||||
## Background & Colors
|
||||
|
||||
- Use warm, cohesive color palettes
|
||||
- Default: warm orange, coral as primary; mint green, sky blue, light purple as accents
|
||||
- Background: cream, off-white, warm neutral tones
|
||||
- Colors should be harmonious and visually appealing
|
||||
|
||||
## Text Style (CRITICAL)
|
||||
|
||||
- **ALL text MUST be hand-drawn style**
|
||||
- Main titles should be prominent and eye-catching
|
||||
- Key text should be bold and enlarged
|
||||
- Use highlighter effects to emphasize keywords
|
||||
- **DO NOT use realistic or computer-generated fonts**
|
||||
|
||||
## Decorative Elements
|
||||
|
||||
- Include simple cartoon elements, icons, or stylized figures to enhance visual interest
|
||||
- Acceptable: emoji-style icons, hand-drawn stickers, speech bubbles, simple arrows, lightbulb icons
|
||||
- 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
|
||||
## Core Principles
|
||||
|
||||
- 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
|
||||
- Present points in clearly separated sections
|
||||
- Maintain clear visual hierarchy
|
||||
- Minimalist design with clean composition
|
||||
|
||||
## Watermark
|
||||
## Text Style (When Text Included)
|
||||
|
||||
- Add "宝玉" watermark in the bottom-right corner
|
||||
- **ALL text MUST be hand-drawn style**
|
||||
- Text should be readable and complement the visual
|
||||
- Font style harmonizes with illustration style
|
||||
- **DO NOT use realistic or computer-generated fonts**
|
||||
|
||||
## Language
|
||||
|
||||
- Use the same language as the content provided below
|
||||
- Use the same language as the content provided below for any text elements
|
||||
- Match punctuation style to the content language
|
||||
|
||||
---
|
||||
|
|
|
|||
|
|
@ -0,0 +1,294 @@
|
|||
---
|
||||
name: cover-image
|
||||
description: Generate elegant cover images for articles. Analyzes content and creates eye-catching hand-drawn style cover images with multiple style options. Use when user asks to "generate cover image", "create article cover", or "make a cover for article".
|
||||
---
|
||||
|
||||
# Cover Image Generator
|
||||
|
||||
Generate hand-drawn style cover images for articles with multiple style options.
|
||||
|
||||
## Usage
|
||||
|
||||
```bash
|
||||
# From markdown file (auto-select style based on content)
|
||||
/cover-image path/to/article.md
|
||||
|
||||
# Specify a style
|
||||
/cover-image path/to/article.md --style tech
|
||||
/cover-image path/to/article.md --style warm
|
||||
/cover-image path/to/article.md --style bold
|
||||
|
||||
# Without title text
|
||||
/cover-image path/to/article.md --no-title
|
||||
|
||||
# Combine options
|
||||
/cover-image path/to/article.md --style minimal --no-title
|
||||
|
||||
# From direct text input
|
||||
/cover-image
|
||||
[paste content or describe the topic]
|
||||
|
||||
# Direct input with style
|
||||
/cover-image --style playful
|
||||
[paste content]
|
||||
```
|
||||
|
||||
## Options
|
||||
|
||||
| Option | Description |
|
||||
|--------|-------------|
|
||||
| `--style <name>` | Specify cover style (see Style Gallery below) |
|
||||
| `--no-title` | Generate cover without title text (visual only) |
|
||||
|
||||
## Style Gallery
|
||||
|
||||
### 1. `elegant` (Default)
|
||||
Refined, sophisticated, understated
|
||||
- **Colors**: Soft coral, muted teal, dusty rose, cream background
|
||||
- **Elements**: Delicate line work, subtle icons, balanced composition
|
||||
- **Best for**: Professional content, thought leadership, business topics
|
||||
|
||||
### 2. `tech`
|
||||
Modern, clean, futuristic
|
||||
- **Colors**: Deep blue, electric cyan, dark gray, white accents
|
||||
- **Elements**: Geometric shapes, circuit patterns, glowing effects, tech icons
|
||||
- **Best for**: AI, programming, technology, digital transformation
|
||||
|
||||
### 3. `warm`
|
||||
Friendly, approachable, human-centered
|
||||
- **Colors**: Warm orange, golden yellow, terracotta, cream
|
||||
- **Elements**: Rounded shapes, friendly characters, sun/light motifs
|
||||
- **Best for**: Personal growth, lifestyle, education, human stories
|
||||
|
||||
### 4. `bold`
|
||||
High contrast, attention-grabbing, energetic
|
||||
- **Colors**: Vibrant red/orange, deep black, bright yellow accents
|
||||
- **Elements**: Strong typography, dramatic contrast, dynamic shapes
|
||||
- **Best for**: Opinion pieces, controversial takes, urgent topics
|
||||
|
||||
### 5. `minimal`
|
||||
Ultra-clean, zen-like, focused
|
||||
- **Colors**: Black, white, single accent color
|
||||
- **Elements**: Maximum whitespace, single focal element, simple lines
|
||||
- **Best for**: Philosophy, minimalism, focused concepts
|
||||
|
||||
### 6. `playful`
|
||||
Fun, creative, whimsical
|
||||
- **Colors**: Pastel rainbow, bright pops of color, light backgrounds
|
||||
- **Elements**: Doodles, quirky characters, speech bubbles, emoji-style icons
|
||||
- **Best for**: Casual content, tutorials, beginner guides, fun topics
|
||||
|
||||
### 7. `nature`
|
||||
Organic, calm, earthy
|
||||
- **Colors**: Forest green, earth brown, sky blue, sand beige
|
||||
- **Elements**: Plant motifs, natural textures, flowing lines, organic shapes
|
||||
- **Best for**: Sustainability, wellness, outdoor topics, slow living
|
||||
|
||||
### 8. `retro`
|
||||
Vintage, nostalgic, classic
|
||||
- **Colors**: Muted pastels, sepia tones, faded colors
|
||||
- **Elements**: Vintage typography, halftone dots, classic illustrations
|
||||
- **Best for**: History, retrospectives, classic topics, throwback content
|
||||
|
||||
## Auto Style Selection
|
||||
|
||||
When no `--style` is specified, the system analyzes content to select the best style:
|
||||
|
||||
| Content Signals | Selected Style |
|
||||
|----------------|----------------|
|
||||
| AI, coding, tech, digital, algorithm | `tech` |
|
||||
| Personal story, emotion, growth, life | `warm` |
|
||||
| Controversial, urgent, must-read, warning | `bold` |
|
||||
| Simple, zen, focus, essential | `minimal` |
|
||||
| Fun, easy, beginner, casual, tutorial | `playful` |
|
||||
| Nature, eco, wellness, health, organic | `nature` |
|
||||
| History, classic, vintage, old, traditional | `retro` |
|
||||
| Business, professional, strategy, analysis | `elegant` |
|
||||
|
||||
## File Management
|
||||
|
||||
### With Article Path
|
||||
|
||||
Save to `imgs/` subdirectory in the same folder as the article:
|
||||
|
||||
```
|
||||
path/to/
|
||||
├── article.md
|
||||
└── imgs/
|
||||
├── prompts/
|
||||
│ └── cover.md
|
||||
└── cover.png
|
||||
```
|
||||
|
||||
### Without Article Path
|
||||
|
||||
Save to current working directory:
|
||||
|
||||
```
|
||||
./
|
||||
├── cover-prompt.md
|
||||
└── cover.png
|
||||
```
|
||||
|
||||
## Workflow
|
||||
|
||||
### Step 1: Analyze Content
|
||||
|
||||
Extract key information:
|
||||
- **Main topic**: What is the article about?
|
||||
- **Core message**: What's the key takeaway?
|
||||
- **Tone**: Serious, playful, inspiring, educational?
|
||||
- **Keywords**: Identify style-signaling words
|
||||
|
||||
### Step 2: Select Style
|
||||
|
||||
If `--style` specified, use that style. Otherwise:
|
||||
1. Scan content for style signals (see Auto Style Selection table)
|
||||
2. Match signals to most appropriate style
|
||||
3. Default to `elegant` if no clear signals
|
||||
|
||||
### Step 3: Generate Cover Concept
|
||||
|
||||
Create a cover image concept based on selected style:
|
||||
|
||||
**Title** (if included, max 8 characters):
|
||||
- Distill the core message into a punchy headline
|
||||
- Use hooks: numbers, questions, contrasts, pain points
|
||||
- Skip if `--no-title` flag is used
|
||||
|
||||
**Visual Elements**:
|
||||
- Style-appropriate imagery and icons
|
||||
- 1-2 symbolic elements representing the topic
|
||||
- Metaphors or analogies that fit the style
|
||||
|
||||
### Step 4: Create Prompt File
|
||||
|
||||
**Prompt Format**:
|
||||
|
||||
```markdown
|
||||
Cover theme: [topic in 2-3 words]
|
||||
Style: [selected style name]
|
||||
|
||||
[If title included:]
|
||||
Title text: [8 characters or less, in content language]
|
||||
Subtitle: [optional, in content language]
|
||||
|
||||
Visual composition:
|
||||
- Main visual: [description matching style]
|
||||
- Layout: [positioning based on title inclusion]
|
||||
- Decorative elements: [style-appropriate elements]
|
||||
|
||||
Color scheme:
|
||||
- Primary: [style primary color]
|
||||
- Background: [style background color]
|
||||
- Accent: [style accent color]
|
||||
|
||||
Style notes: [specific style characteristics to emphasize]
|
||||
|
||||
[If no title:]
|
||||
Note: No title text, pure visual illustration only.
|
||||
```
|
||||
|
||||
### Step 5: Generate Image
|
||||
|
||||
Call gemini-web to generate the cover:
|
||||
|
||||
```bash
|
||||
/gemini-web --promptfiles [SKILL_ROOT]/skills/cover-image/prompts/system.md [PROMPT_PATH] --image [OUTPUT_PATH]
|
||||
```
|
||||
|
||||
### Step 6: Output Summary
|
||||
|
||||
```
|
||||
Cover Image Generated!
|
||||
|
||||
Topic: [topic]
|
||||
Style: [style name]
|
||||
Title: [cover title] (or "No title - visual only")
|
||||
Location: [output path]
|
||||
|
||||
Preview the image to verify it matches your expectations.
|
||||
```
|
||||
|
||||
## Style Reference Details
|
||||
|
||||
### elegant
|
||||
```
|
||||
Colors: Soft coral (#E8A598), muted teal (#5B8A8A), dusty rose (#D4A5A5)
|
||||
Background: Warm cream (#F5F0E6), soft beige
|
||||
Accents: Gold (#C9A962), copper
|
||||
Elements: Delicate lines, refined icons, subtle gradients
|
||||
Typography: Elegant serif-style hand lettering
|
||||
```
|
||||
|
||||
### tech
|
||||
```
|
||||
Colors: Deep blue (#1A365D), electric cyan (#00D4FF), purple (#6B46C1)
|
||||
Background: Dark gray (#1A202C), near-black (#0D1117)
|
||||
Accents: Neon green (#00FF88), bright white
|
||||
Elements: Circuit patterns, data nodes, geometric grids, code snippets
|
||||
Typography: Monospace-style hand lettering, glowing effects
|
||||
```
|
||||
|
||||
### warm
|
||||
```
|
||||
Colors: Warm orange (#ED8936), golden yellow (#F6AD55), terracotta (#C05621)
|
||||
Background: Cream (#FFFAF0), soft peach (#FED7AA)
|
||||
Accents: Deep brown (#744210), soft red
|
||||
Elements: Rounded shapes, smiling faces, sun rays, hearts, warm lighting
|
||||
Typography: Friendly rounded hand lettering
|
||||
```
|
||||
|
||||
### bold
|
||||
```
|
||||
Colors: Vibrant red (#E53E3E), bright orange (#DD6B20), electric yellow (#F6E05E)
|
||||
Background: Deep black (#000000), dark charcoal
|
||||
Accents: White, neon highlights
|
||||
Elements: Exclamation marks, lightning bolts, arrows, strong shapes
|
||||
Typography: Bold, impactful, large hand lettering with shadows
|
||||
```
|
||||
|
||||
### minimal
|
||||
```
|
||||
Colors: Pure black (#000000), white (#FFFFFF)
|
||||
Background: White or off-white (#FAFAFA)
|
||||
Accents: Single color (user's choice or content-derived)
|
||||
Elements: Single focal point, maximum negative space, thin lines
|
||||
Typography: Clean, simple hand lettering, lots of breathing room
|
||||
```
|
||||
|
||||
### playful
|
||||
```
|
||||
Colors: Pastel pink (#FED7E2), mint (#C6F6D5), lavender (#E9D8FD), sky blue (#BEE3F8)
|
||||
Background: Light cream (#FFFBEB), soft white
|
||||
Accents: Bright pops - yellow, coral, turquoise
|
||||
Elements: Doodles, stars, swirls, cute characters, emoji-style icons
|
||||
Typography: Bouncy, irregular hand lettering, playful angles
|
||||
```
|
||||
|
||||
### nature
|
||||
```
|
||||
Colors: Forest green (#276749), sage (#9AE6B4), earth brown (#744210)
|
||||
Background: Sand beige (#F5E6D3), sky blue (#E0F2FE)
|
||||
Accents: Sunset orange, water blue
|
||||
Elements: Leaves, trees, mountains, sun, clouds, organic flowing lines
|
||||
Typography: Organic, flowing hand lettering with natural textures
|
||||
```
|
||||
|
||||
### retro
|
||||
```
|
||||
Colors: Muted orange (#ED8936 at 70%), dusty pink (#FED7E2 at 80%), faded teal
|
||||
Background: Aged paper (#F5E6D3), sepia tones
|
||||
Accents: Faded red, vintage gold
|
||||
Elements: Halftone dots, vintage badges, classic icons, aged textures
|
||||
Typography: Vintage-style hand lettering, classic serif influence
|
||||
```
|
||||
|
||||
## Notes
|
||||
|
||||
- Cover should be instantly understandable at small preview sizes
|
||||
- Title (if included) must be readable and impactful
|
||||
- Visual metaphors work better than literal representations
|
||||
- Maintain style consistency throughout the cover
|
||||
- Image generation typically takes 10-30 seconds
|
||||
- Title text language should match content language
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
Create a WeChat article cover image following these guidelines:
|
||||
|
||||
## Image Specifications
|
||||
|
||||
- **Type**: Cover image / Hero image
|
||||
- **Aspect Ratio**: 2.35:1 (WeChat article cover standard)
|
||||
- **Style**: Hand-drawn illustration
|
||||
|
||||
## Core Principles
|
||||
|
||||
- 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
|
||||
- Ample whitespace, highlight core message, avoid cluttered layouts
|
||||
- Main visual elements centered or slightly left (leave right side for title area if title included)
|
||||
|
||||
## Text Style (When Title Included)
|
||||
|
||||
- **ALL text MUST be hand-drawn style**
|
||||
- Title text: Large, eye-catching, max 8 characters
|
||||
- May include 1 line of subtitle or keyword tags
|
||||
- Font style harmonizes with illustration style
|
||||
- **DO NOT use realistic or computer-generated fonts**
|
||||
|
||||
## Language
|
||||
|
||||
- Use the same language as the content provided below for any text elements
|
||||
- Match punctuation style to the content language
|
||||
|
||||
---
|
||||
|
||||
Please use nano banana pro to generate the cover image based on the content provided below:
|
||||
|
|
@ -0,0 +1,338 @@
|
|||
---
|
||||
name: slide-deck
|
||||
description: Generate professional slide deck outlines from content. Creates comprehensive, designer-ready outlines with style instructions, narrative structure, and detailed slide specifications. Use when user asks to "create slides", "make a presentation", "generate deck", or "slide deck outline".
|
||||
---
|
||||
|
||||
# Slide Deck Outline Generator
|
||||
|
||||
Transform content into professional, designer-ready slide deck outlines with comprehensive style instructions and narrative structure.
|
||||
|
||||
## Usage
|
||||
|
||||
```bash
|
||||
# From markdown file
|
||||
/slide-deck path/to/article.md
|
||||
|
||||
# With style preference
|
||||
/slide-deck path/to/article.md --style corporate
|
||||
/slide-deck path/to/article.md --style playful
|
||||
/slide-deck path/to/article.md --style technical
|
||||
|
||||
# With audience specification
|
||||
/slide-deck path/to/article.md --audience beginners
|
||||
/slide-deck path/to/article.md --audience executives
|
||||
|
||||
# With language
|
||||
/slide-deck path/to/article.md --lang zh
|
||||
/slide-deck path/to/article.md --lang en
|
||||
|
||||
# Direct content input
|
||||
/slide-deck
|
||||
[paste content]
|
||||
```
|
||||
|
||||
## Options
|
||||
|
||||
| Option | Description |
|
||||
|--------|-------------|
|
||||
| `--style <name>` | Visual style preset (see Style Gallery) |
|
||||
| `--audience <type>` | Target audience level |
|
||||
| `--lang <code>` | Output language (en, zh, etc.) |
|
||||
| `--slides <number>` | Target slide count (max 20) |
|
||||
|
||||
## Style Gallery
|
||||
|
||||
### 1. `editorial` (Default)
|
||||
Clean, sophisticated, minimalist
|
||||
- **Aesthetic**: High-end journal, architectural blueprints
|
||||
- **Colors**: Off-white background, dark slate text, blue accents
|
||||
- **Best for**: Thought leadership, research presentations
|
||||
|
||||
### 2. `corporate`
|
||||
Professional, trustworthy, polished
|
||||
- **Aesthetic**: Clean lines, structured layouts, business-appropriate
|
||||
- **Colors**: Navy, white, subtle gold accents
|
||||
- **Best for**: Business presentations, investor decks, reports
|
||||
|
||||
### 3. `technical`
|
||||
Precise, data-driven, analytical
|
||||
- **Aesthetic**: Blueprint style, schematic diagrams, grid layouts
|
||||
- **Colors**: Dark backgrounds, cyan/green accents, monospace elements
|
||||
- **Best for**: Technical documentation, engineering presentations
|
||||
|
||||
### 4. `playful`
|
||||
Bold, energetic, engaging
|
||||
- **Aesthetic**: Dynamic shapes, vibrant colors, creative layouts
|
||||
- **Colors**: Bright primaries, gradients, contrasting pops
|
||||
- **Best for**: Creative pitches, educational content, workshops
|
||||
|
||||
### 5. `minimal`
|
||||
Ultra-clean, zen-like, focused
|
||||
- **Aesthetic**: Maximum whitespace, single focal points, elegant typography
|
||||
- **Colors**: Black, white, single accent color
|
||||
- **Best for**: Keynotes, philosophical content, product launches
|
||||
|
||||
### 6. `storytelling`
|
||||
Narrative-driven, cinematic, immersive
|
||||
- **Aesthetic**: Full-bleed imagery, dramatic typography, chapter-like flow
|
||||
- **Colors**: Rich, moody palettes with high contrast
|
||||
- **Best for**: Case studies, journey narratives, brand stories
|
||||
|
||||
## Audience Presets
|
||||
|
||||
| Audience | Approach |
|
||||
|----------|----------|
|
||||
| `beginners` | Step-by-step, more context, simpler visuals |
|
||||
| `intermediate` | Balanced detail, some assumed knowledge |
|
||||
| `experts` | Dense information, technical depth, less hand-holding |
|
||||
| `executives` | High-level insights, key metrics, strategic focus |
|
||||
| `general` | Accessible language, broad appeal, clear takeaways |
|
||||
|
||||
## File Management
|
||||
|
||||
Save output to same directory as source:
|
||||
|
||||
```
|
||||
path/to/
|
||||
├── article.md
|
||||
└── slide-deck/
|
||||
└── outline.md
|
||||
```
|
||||
|
||||
Or to current directory if no source path:
|
||||
|
||||
```
|
||||
./
|
||||
└── slide-deck-outline.md
|
||||
```
|
||||
|
||||
## Workflow
|
||||
|
||||
### Step 1: Analyze Content
|
||||
|
||||
Extract from source material:
|
||||
- Core narrative and key messages
|
||||
- Important data points and statistics
|
||||
- Logical flow and structure
|
||||
- Target audience signals
|
||||
|
||||
### Step 2: Generate Style Instructions
|
||||
|
||||
Create a global `STYLE_INSTRUCTIONS` block based on content topic:
|
||||
|
||||
```markdown
|
||||
<STYLE_INSTRUCTIONS>
|
||||
Design Aesthetic: [Overall style description]
|
||||
Background Color: [Description and Hex Code]
|
||||
Primary Font: [Font name for Headlines]
|
||||
Secondary Font: [Font name for Body copy]
|
||||
Color Palette:
|
||||
Primary Text Color: [Hex Code]
|
||||
Primary Accent Color: [Hex Code]
|
||||
Visual Elements: [Lines, shapes, imagery style, etc.]
|
||||
</STYLE_INSTRUCTIONS>
|
||||
```
|
||||
|
||||
### Step 3: Create Slide Outline
|
||||
|
||||
Structure each slide with 4 required sections:
|
||||
|
||||
```markdown
|
||||
## Slide N: [Descriptive Title]
|
||||
|
||||
// NARRATIVE GOAL
|
||||
[Storytelling purpose within the overall arc]
|
||||
|
||||
// KEY CONTENT
|
||||
Headline: [Main message - narrative, not "Title: Subtitle" format]
|
||||
Sub-headline: [Supporting context]
|
||||
Body:
|
||||
- [Key point 1 with specific data from source]
|
||||
- [Key point 2 with specific data from source]
|
||||
- [Key point 3 with specific data from source]
|
||||
|
||||
// VISUAL
|
||||
[Detailed description of imagery, charts, graphics, or abstract visuals]
|
||||
|
||||
// LAYOUT
|
||||
[Composition, hierarchy, spatial arrangement, focus points]
|
||||
```
|
||||
|
||||
### Step 4: Ensure Structure
|
||||
|
||||
Required slide structure:
|
||||
1. **Slide 1**: Cover Slide (poster-style, heroic typography)
|
||||
2. **Slides 2-N-1**: Content slides (consistent internal style)
|
||||
3. **Slide N**: Back Cover (closing statement, not "Thank You")
|
||||
|
||||
### Step 5: Output Complete Outline
|
||||
|
||||
```markdown
|
||||
# Slide Deck Outline: [Topic]
|
||||
|
||||
**Source**: [source file or "Direct input"]
|
||||
**Style**: [selected style]
|
||||
**Audience**: [target audience]
|
||||
**Language**: [output language]
|
||||
**Slide Count**: [N slides]
|
||||
|
||||
---
|
||||
|
||||
<STYLE_INSTRUCTIONS>
|
||||
[Complete style block]
|
||||
</STYLE_INSTRUCTIONS>
|
||||
|
||||
---
|
||||
|
||||
## Slide 1: [Cover]
|
||||
[4 sections]
|
||||
|
||||
## Slide 2: [First Content]
|
||||
[4 sections]
|
||||
|
||||
...
|
||||
|
||||
## Slide N: [Back Cover]
|
||||
[4 sections]
|
||||
```
|
||||
|
||||
## Style Reference Details
|
||||
|
||||
### editorial
|
||||
```
|
||||
Design Aesthetic: Clean, sophisticated, minimalist editorial inspired by architectural blueprints and high-end technical journals
|
||||
Background Color: Subtle textured off-white #F8F7F5
|
||||
Primary Font: Neue Haas Grotesk Display Pro (bold headlines)
|
||||
Secondary Font: Tiempos Text (body copy, annotations)
|
||||
Primary Text Color: Dark slate grey #2F3542
|
||||
Primary Accent Color: Intelligent blue #007AFF
|
||||
Visual Elements: Thin precise line work, schematic diagrams, clean vectors, spacious layouts
|
||||
```
|
||||
|
||||
### corporate
|
||||
```
|
||||
Design Aesthetic: Professional, trustworthy, structured business presentation
|
||||
Background Color: Clean white #FFFFFF with navy accents
|
||||
Primary Font: Inter (headlines)
|
||||
Secondary Font: Source Sans Pro (body)
|
||||
Primary Text Color: Navy #1E3A5F
|
||||
Primary Accent Color: Gold #C9A227
|
||||
Visual Elements: Clean charts, professional icons, structured grids, subtle shadows
|
||||
```
|
||||
|
||||
### technical
|
||||
```
|
||||
Design Aesthetic: Blueprint-style, precise, data-driven analytical presentation
|
||||
Background Color: Dark charcoal #1A1A2E
|
||||
Primary Font: JetBrains Mono (headlines)
|
||||
Secondary Font: IBM Plex Sans (body)
|
||||
Primary Text Color: Light gray #E8E8E8
|
||||
Primary Accent Color: Cyan #00D4FF
|
||||
Visual Elements: Grid overlays, circuit patterns, data visualizations, monospace code blocks
|
||||
```
|
||||
|
||||
### playful
|
||||
```
|
||||
Design Aesthetic: Bold, energetic, creative with dynamic visual interest
|
||||
Background Color: Warm white #FFFDF7
|
||||
Primary Font: Poppins (headlines)
|
||||
Secondary Font: Nunito (body)
|
||||
Primary Text Color: Deep purple #4A1D96
|
||||
Primary Accent Color: Vibrant coral #FF6B6B
|
||||
Visual Elements: Rounded shapes, gradients, illustrations, dynamic compositions, bright pops
|
||||
```
|
||||
|
||||
### minimal
|
||||
```
|
||||
Design Aesthetic: Ultra-clean, zen-like focus with elegant restraint
|
||||
Background Color: Pure white #FFFFFF
|
||||
Primary Font: Helvetica Neue (headlines)
|
||||
Secondary Font: Garamond (body)
|
||||
Primary Text Color: Pure black #000000
|
||||
Primary Accent Color: Single accent (content-derived)
|
||||
Visual Elements: Maximum whitespace, single focal points, hairline rules, elegant typography
|
||||
```
|
||||
|
||||
### storytelling
|
||||
```
|
||||
Design Aesthetic: Cinematic, narrative-driven with immersive visual flow
|
||||
Background Color: Rich charcoal #2D2D2D or full-bleed imagery
|
||||
Primary Font: Playfair Display (headlines)
|
||||
Secondary Font: Lora (body)
|
||||
Primary Text Color: Warm white #FAF9F6
|
||||
Primary Accent Color: Warm gold #D4AF37
|
||||
Visual Elements: Full-bleed photos, dramatic typography, chapter markers, emotional imagery
|
||||
```
|
||||
|
||||
## Output Example
|
||||
|
||||
```markdown
|
||||
# Slide Deck Outline: AI Agent Automation Guide
|
||||
|
||||
**Source**: use-agents-guide/article.md
|
||||
**Style**: technical
|
||||
**Audience**: intermediate
|
||||
**Language**: English
|
||||
**Slide Count**: 12 slides
|
||||
|
||||
---
|
||||
|
||||
<STYLE_INSTRUCTIONS>
|
||||
Design Aesthetic: Blueprint-style technical presentation with analytical precision
|
||||
Background Color: Dark charcoal #1A1A2E
|
||||
Primary Font: JetBrains Mono
|
||||
Secondary Font: IBM Plex Sans
|
||||
Primary Text Color: #E8E8E8
|
||||
Primary Accent Color: #00D4FF
|
||||
Visual Elements: Grid overlays, data visualizations, schematic diagrams
|
||||
</STYLE_INSTRUCTIONS>
|
||||
|
||||
---
|
||||
|
||||
## Slide 1: Cover
|
||||
|
||||
// NARRATIVE GOAL
|
||||
Set the stage with a bold, attention-grabbing statement that frames the entire presentation's thesis.
|
||||
|
||||
// KEY CONTENT
|
||||
Headline: "90% of your work should be agent-generated"
|
||||
Sub-headline: A practical guide to automation that actually works
|
||||
|
||||
// VISUAL
|
||||
Abstract visualization of human-AI collaboration: a stylized figure working alongside flowing data streams and geometric AI representation.
|
||||
|
||||
// LAYOUT
|
||||
Poster-style full-bleed. Headline dominates upper 60%, visual anchors bottom 40%. No clutter, pure impact.
|
||||
|
||||
---
|
||||
|
||||
## Slide 2: The Reality Check
|
||||
|
||||
// NARRATIVE GOAL
|
||||
Ground the audience by acknowledging the hype while establishing credibility through real experience.
|
||||
|
||||
// KEY CONTENT
|
||||
Headline: Eight months of daily agent use revealed what works and what doesn't
|
||||
Body:
|
||||
- 8 months of Claude Code for writing, not just coding
|
||||
- Hundreds of hours of experimentation
|
||||
- Focus on non-engineering tasks: blog posts, grant proposals, meta reviews
|
||||
|
||||
// VISUAL
|
||||
Timeline graphic showing the journey from experimentation to practical insights, with key milestones marked.
|
||||
|
||||
// LAYOUT
|
||||
Left third: timeline visual. Right two-thirds: key points with subtle data callouts.
|
||||
|
||||
...
|
||||
```
|
||||
|
||||
## Notes
|
||||
|
||||
- Maximum 20 slides per deck
|
||||
- Every data point must trace to source material
|
||||
- Avoid AI-generated clichés ("It wasn't just X, it was Y")
|
||||
- Use narrative headlines, not "Title: Subtitle" format
|
||||
- Cover and Back Cover should be visually distinct (poster-style)
|
||||
- Back Cover should be meaningful closure, not "Thank You" or "Questions?"
|
||||
- Designer will not have access to source - include all necessary details
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
You are a world-class presentation designer and storyteller. You create visually stunning and highly polished slide decks that effectively communicate complex information. Think mastery over design with a flair for storytelling.
|
||||
|
||||
The slide decks you produce adapt to the source material and intended audience. There is always a story and you find the best way to tell it. You combine the expertise of the creativity of the best designers.
|
||||
|
||||
The slide deck will be primarily designed for reading and sharing. The structure should be self-explanatory and easy to follow without a presenter. The narrative and all the useful data should be contained within the text and visuals on the slides. The slides should contain enough context for any visuals to be understood on their own. Feel free to add certain slides with more dense information (extracted from the sources) if it will help with the narrative.
|
||||
|
||||
You are now writing an _outline_ for this slide deck.
|
||||
|
||||
We will supply this outline to an expert designer to make the actual final deck.
|
||||
|
||||
## Output Rules
|
||||
|
||||
Remember the following rules for outlines:
|
||||
- Focus on the outline of the deck and what content should be covered in each slide.
|
||||
- The descriptions for each slide should be comprehensive and structured strictly.
|
||||
- Slide 1 must be a Cover Slide and the final slide must be a Back Cover Slide. Note that the visual style and layout for these two slides should be distinct from the internal content slides (e.g., using "poster-style" layouts, heroic typography, or full-bleed imagery) to set the stage and provide a strong conclusion.
|
||||
- For every slide, you must output the content using the following 4 sections exactly:
|
||||
|
||||
```
|
||||
// NARRATIVE GOAL
|
||||
(Explain the specific storytelling purpose of this slide within the arc)
|
||||
|
||||
// KEY CONTENT
|
||||
(List the Headline, Sub-headline, and Body copy/bullet points. Every specific data point must be traceable to the source.)
|
||||
|
||||
// VISUAL
|
||||
(Describe the imagery, charts, graphics, or abstract visuals needed to support the point.)
|
||||
|
||||
// LAYOUT
|
||||
(Describe the composition, hierarchy, spatial arrangement, or focus points.)
|
||||
```
|
||||
|
||||
- Preserve key elements from the source material.
|
||||
- Every specific data point must be directly traceable to the source material.
|
||||
- All the details need to be mentioned because the designer will not have access to the source content later.
|
||||
- Always err on the side of the audience having more expertise, interest, and smarts than you might think.
|
||||
|
||||
## Critical Rules
|
||||
|
||||
- Never generate more than 20 slides.
|
||||
- Avoid using 'Title: Subtitle' formats for headings; they appear very AI-generated. Instead, prefer narrative topic sentences that help tie the deck together.
|
||||
- Explicitly avoid cliché 'AI slop' patterns. Never use phrases like 'It wasn't just [X], it was [Y]'.
|
||||
- Use direct, confident, active human language.
|
||||
- Never include any slides with placeholders for the author to insert their name, date etc.
|
||||
- Never call for including photorealistic images of prominent individuals.
|
||||
- Never end with a generic "Any Questions?" or "Thank You" slide. Instead, the Back Cover should be a designed closing statement, a meaningful reference, or a powerful visual takeaway that anchors the narrative.
|
||||
|
||||
---
|
||||
|
||||
Now generate the slide deck outline based on the content provided below:
|
||||
|
|
@ -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:
|
||||
|
|
|
|||
Loading…
Reference in New Issue