feat(baoyu-image-cards): add image card series skill migrated from baoyu-xhs-images
Rename baoyu-xhs-images to baoyu-image-cards to decouple from Xiaohongshu platform. Deprecate baoyu-xhs-images with migration notice pointing to baoyu-image-cards.
This commit is contained in:
Jim Liu 宝玉
parent
3017bfe423
commit
a596c653d3
|
|
@ -31,7 +31,7 @@
|
|||
"./skills/baoyu-slide-deck",
|
||||
"./skills/baoyu-translate",
|
||||
"./skills/baoyu-url-to-markdown",
|
||||
"./skills/baoyu-xhs-images",
|
||||
"./skills/baoyu-image-cards",
|
||||
"./skills/baoyu-youtube-transcript"
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -55,6 +55,7 @@ Priority: project `skills/` → `$HOME/.baoyu-skills/` → system-level.
|
|||
| Skill | Note |
|
||||
|-------|------|
|
||||
| `baoyu-image-gen` | Migrated to `baoyu-imagine`. Do NOT add to `.claude-plugin/marketplace.json`. Do NOT update README for this skill. |
|
||||
| `baoyu-xhs-images` | Migrated to `baoyu-image-cards`. Do NOT add to `.claude-plugin/marketplace.json`. Do NOT update README for this skill. |
|
||||
|
||||
## Release Process
|
||||
|
||||
|
|
|
|||
18
README.md
18
README.md
|
|
@ -97,29 +97,29 @@ Skills are organized into three categories:
|
|||
|
||||
Content generation and publishing skills.
|
||||
|
||||
#### baoyu-xhs-images
|
||||
#### baoyu-image-cards
|
||||
|
||||
Xiaohongshu (RedNote) infographic series generator. Breaks down content into 1-10 cartoon-style infographics with **Style × Layout** two-dimensional system.
|
||||
Image card series generator. Breaks down content into 1-10 cartoon-style image cards with **Style × Layout** two-dimensional system.
|
||||
|
||||
```bash
|
||||
# Auto-select style and layout
|
||||
/baoyu-xhs-images posts/ai-future/article.md
|
||||
/baoyu-image-cards posts/ai-future/article.md
|
||||
|
||||
# Specify style
|
||||
/baoyu-xhs-images posts/ai-future/article.md --style notion
|
||||
/baoyu-image-cards posts/ai-future/article.md --style notion
|
||||
|
||||
# Specify layout
|
||||
/baoyu-xhs-images posts/ai-future/article.md --layout dense
|
||||
/baoyu-image-cards posts/ai-future/article.md --layout dense
|
||||
|
||||
# Combine style and layout
|
||||
/baoyu-xhs-images posts/ai-future/article.md --style tech --layout list
|
||||
/baoyu-image-cards posts/ai-future/article.md --style notion --layout list
|
||||
|
||||
# Direct content input
|
||||
/baoyu-xhs-images 今日星座运势
|
||||
/baoyu-image-cards 今日星座运势
|
||||
|
||||
# Non-interactive (skip all confirmations, for scheduled tasks)
|
||||
/baoyu-xhs-images posts/ai-future/article.md --yes
|
||||
/baoyu-xhs-images posts/ai-future/article.md --yes --preset knowledge-card
|
||||
/baoyu-image-cards posts/ai-future/article.md --yes
|
||||
/baoyu-image-cards posts/ai-future/article.md --yes --preset knowledge-card
|
||||
```
|
||||
|
||||
**Styles** (visual aesthetics): `cute` (default), `fresh`, `warm`, `bold`, `minimal`, `retro`, `pop`, `notion`, `chalkboard`
|
||||
|
|
|
|||
18
README.zh.md
18
README.zh.md
|
|
@ -97,29 +97,29 @@ clawhub install baoyu-markdown-to-html
|
|||
|
||||
内容生成和发布技能。
|
||||
|
||||
#### baoyu-xhs-images
|
||||
#### baoyu-image-cards
|
||||
|
||||
小红书信息图系列生成器。将内容拆解为 1-10 张卡通风格信息图，支持 **风格 × 布局** 二维系统。
|
||||
图片卡片系列生成器。将内容拆解为 1-10 张卡通风格图片卡片，支持 **风格 × 布局** 二维系统。
|
||||
|
||||
```bash
|
||||
# 自动选择风格和布局
|
||||
/baoyu-xhs-images posts/ai-future/article.md
|
||||
/baoyu-image-cards posts/ai-future/article.md
|
||||
|
||||
# 指定风格
|
||||
/baoyu-xhs-images posts/ai-future/article.md --style notion
|
||||
/baoyu-image-cards posts/ai-future/article.md --style notion
|
||||
|
||||
# 指定布局
|
||||
/baoyu-xhs-images posts/ai-future/article.md --layout dense
|
||||
/baoyu-image-cards posts/ai-future/article.md --layout dense
|
||||
|
||||
# 组合风格和布局
|
||||
/baoyu-xhs-images posts/ai-future/article.md --style tech --layout list
|
||||
/baoyu-image-cards posts/ai-future/article.md --style notion --layout list
|
||||
|
||||
# 直接输入内容
|
||||
/baoyu-xhs-images 今日星座运势
|
||||
/baoyu-image-cards 今日星座运势
|
||||
|
||||
# 非交互模式（跳过所有确认，适用于定时任务）
|
||||
/baoyu-xhs-images posts/ai-future/article.md --yes
|
||||
/baoyu-xhs-images posts/ai-future/article.md --yes --preset knowledge-card
|
||||
/baoyu-image-cards posts/ai-future/article.md --yes
|
||||
/baoyu-image-cards posts/ai-future/article.md --yes --preset knowledge-card
|
||||
```
|
||||
|
||||
**风格**（视觉美学）：`cute`（默认）、`fresh`、`warm`、`bold`、`minimal`、`retro`、`pop`、`notion`、`chalkboard`
|
||||
|
|
|
|||
|
|
@ -0,0 +1,603 @@
|
|||
---
|
||||
name: baoyu-image-cards
|
||||
description: Generates infographic image card series with 11 visual styles and 8 layouts. Breaks content into 1-10 cartoon-style image cards optimized for social media engagement. Use when user mentions "小红书图片", "小红书种草", "小绿书", "微信图文", "微信贴图", "image cards", "图片卡片", or wants social media infographic series.
|
||||
version: 1.56.1
|
||||
metadata:
|
||||
openclaw:
|
||||
homepage: https://github.com/JimLiu/baoyu-skills#baoyu-image-cards
|
||||
---
|
||||
|
||||
# Image Card Series Generator
|
||||
|
||||
Break down complex content into eye-catching image card series with multiple style options.
|
||||
|
||||
## Usage
|
||||
|
||||
```bash
|
||||
# Auto-select style and layout based on content
|
||||
/baoyu-image-cards posts/ai-future/article.md
|
||||
|
||||
# Specify style
|
||||
/baoyu-image-cards posts/ai-future/article.md --style notion
|
||||
|
||||
# Specify layout
|
||||
/baoyu-image-cards posts/ai-future/article.md --layout dense
|
||||
|
||||
# Combine style and layout
|
||||
/baoyu-image-cards posts/ai-future/article.md --style notion --layout list
|
||||
|
||||
# Use preset (style + layout shorthand)
|
||||
/baoyu-image-cards posts/ai-future/article.md --preset knowledge-card
|
||||
|
||||
# Preset with override
|
||||
/baoyu-image-cards posts/ai-future/article.md --preset poster --layout quadrant
|
||||
|
||||
# Direct content input
|
||||
/baoyu-image-cards
|
||||
[paste content]
|
||||
|
||||
# Direct input with options
|
||||
/baoyu-image-cards --style bold --layout comparison
|
||||
[paste content]
|
||||
|
||||
# Non-interactive (for scheduled tasks / automation)
|
||||
/baoyu-image-cards posts/ai-future/article.md --yes
|
||||
/baoyu-image-cards posts/ai-future/article.md --yes --preset knowledge-card
|
||||
```
|
||||
|
||||
## Options
|
||||
|
||||
| Option | Description |
|
||||
|--------|-------------|
|
||||
| `--style <name>` | Visual style (see Style Gallery) |
|
||||
| `--layout <name>` | Information layout (see Layout Gallery) |
|
||||
| `--preset <name>` | Style + layout shorthand (see [Style Presets](references/style-presets.md)) |
|
||||
| `--yes` | Non-interactive mode: skip all confirmations. Uses EXTEND.md preferences if found, otherwise uses defaults (no watermark, auto style/layout). Auto-confirms recommended plan (Path A). Suitable for scheduled tasks and automation. |
|
||||
|
||||
## Two Dimensions
|
||||
|
||||
| Dimension | Controls | Options |
|
||||
|-----------|----------|---------|
|
||||
| **Style** | Visual aesthetics: colors, lines, decorations | cute, fresh, warm, bold, minimal, retro, pop, notion, chalkboard, study-notes, screen-print |
|
||||
| **Layout** | Information structure: density, arrangement | sparse, balanced, dense, list, comparison, flow, mindmap, quadrant |
|
||||
|
||||
Style × Layout can be freely combined. Example: `--style notion --layout dense` creates an intellectual-looking knowledge card with high information density.
|
||||
|
||||
Or use presets: `--preset knowledge-card` → style + layout in one flag. See [Style Presets](references/style-presets.md).
|
||||
|
||||
## Style Gallery
|
||||
|
||||
| Style | Description |
|
||||
|-------|-------------|
|
||||
| `cute` (Default) | Sweet, adorable, girly aesthetic |
|
||||
| `fresh` | Clean, refreshing, natural |
|
||||
| `warm` | Cozy, friendly, approachable |
|
||||
| `bold` | High impact, attention-grabbing |
|
||||
| `minimal` | Ultra-clean, sophisticated |
|
||||
| `retro` | Vintage, nostalgic, trendy |
|
||||
| `pop` | Vibrant, energetic, eye-catching |
|
||||
| `notion` | Minimalist hand-drawn line art, intellectual |
|
||||
| `chalkboard` | Colorful chalk on black board, educational |
|
||||
| `study-notes` | Realistic handwritten photo style, blue pen + red annotations + yellow highlighter |
|
||||
| `screen-print` | Bold poster art, halftone textures, limited colors, symbolic storytelling |
|
||||
|
||||
Detailed style definitions: `references/presets/<style>.md`
|
||||
|
||||
## Preset Gallery
|
||||
|
||||
Quick-start presets by content scenario. Use `--preset <name>` or recommend during Step 2.
|
||||
|
||||
**Knowledge & Learning**:
|
||||
|
||||
| Preset | Style | Layout | Best For |
|
||||
|--------|-------|--------|----------|
|
||||
| `knowledge-card` | notion | dense | 干货知识卡、概念科普 |
|
||||
| `checklist` | notion | list | 清单、排行榜、必备清单 |
|
||||
| `concept-map` | notion | mindmap | 概念图、知识脉络 |
|
||||
| `swot` | notion | quadrant | SWOT分析、四象限分类 |
|
||||
| `tutorial` | chalkboard | flow | 教程步骤、操作流程 |
|
||||
| `classroom` | chalkboard | balanced | 课堂笔记、知识讲解 |
|
||||
| `study-guide` | study-notes | dense | 学习笔记、考试重点 |
|
||||
|
||||
**Lifestyle & Sharing**:
|
||||
|
||||
| Preset | Style | Layout | Best For |
|
||||
|--------|-------|--------|----------|
|
||||
| `cute-share` | cute | balanced | 少女风分享、日常种草 |
|
||||
| `girly` | cute | sparse | 甜美封面、氛围感 |
|
||||
| `cozy-story` | warm | balanced | 生活故事、情感分享 |
|
||||
| `product-review` | fresh | comparison | 产品对比、测评 |
|
||||
| `nature-flow` | fresh | flow | 健康流程、自然主题 |
|
||||
|
||||
**Impact & Opinion**:
|
||||
|
||||
| Preset | Style | Layout | Best For |
|
||||
|--------|-------|--------|----------|
|
||||
| `warning` | bold | list | 避坑指南、重要提醒 |
|
||||
| `versus` | bold | comparison | 正反对比、强烈对照 |
|
||||
| `clean-quote` | minimal | sparse | 金句、极简封面 |
|
||||
| `pro-summary` | minimal | balanced | 专业总结、商务内容 |
|
||||
|
||||
**Trend & Entertainment**:
|
||||
|
||||
| Preset | Style | Layout | Best For |
|
||||
|--------|-------|--------|----------|
|
||||
| `retro-ranking` | retro | list | 复古排行、经典盘点 |
|
||||
| `throwback` | retro | balanced | 怀旧分享、老物件 |
|
||||
| `pop-facts` | pop | list | 趣味冷知识、好玩的事 |
|
||||
| `hype` | pop | sparse | 炸裂封面、惊叹分享 |
|
||||
|
||||
**Poster & Editorial**:
|
||||
|
||||
| Preset | Style | Layout | Best For |
|
||||
|--------|-------|--------|----------|
|
||||
| `poster` | screen-print | sparse | 海报风封面、影评书评 |
|
||||
| `editorial` | screen-print | balanced | 观点文章、文化评论 |
|
||||
| `cinematic` | screen-print | comparison | 电影对比、戏剧张力 |
|
||||
|
||||
Full preset definitions: [references/style-presets.md](references/style-presets.md)
|
||||
|
||||
## Layout Gallery
|
||||
|
||||
| Layout | Description |
|
||||
|--------|-------------|
|
||||
| `sparse` (Default) | Minimal information, maximum impact (1-2 points) |
|
||||
| `balanced` | Standard content layout (3-4 points) |
|
||||
| `dense` | High information density, knowledge card style (5-8 points) |
|
||||
| `list` | Enumeration and ranking format (4-7 items) |
|
||||
| `comparison` | Side-by-side contrast layout |
|
||||
| `flow` | Process and timeline layout (3-6 steps) |
|
||||
| `mindmap` | Center radial mind map layout (4-8 branches) |
|
||||
| `quadrant` | Four-quadrant / circular section layout |
|
||||
|
||||
Detailed layout definitions: `references/elements/canvas.md`
|
||||
|
||||
## Auto Selection
|
||||
|
||||
| Content Signals | Style | Layout | Recommended Preset |
|
||||
|-----------------|-------|--------|--------------------|
|
||||
| Beauty, fashion, cute, girl, pink | `cute` | sparse/balanced | `cute-share`, `girly` |
|
||||
| Health, nature, clean, fresh, organic | `fresh` | balanced/flow | `product-review`, `nature-flow` |
|
||||
| Life, story, emotion, feeling, warm | `warm` | balanced | `cozy-story` |
|
||||
| Warning, important, must, critical | `bold` | list/comparison | `warning`, `versus` |
|
||||
| Professional, business, elegant, simple | `minimal` | sparse/balanced | `clean-quote`, `pro-summary` |
|
||||
| Classic, vintage, old, traditional | `retro` | balanced | `throwback`, `retro-ranking` |
|
||||
| Fun, exciting, wow, amazing | `pop` | sparse/list | `hype`, `pop-facts` |
|
||||
| Knowledge, concept, productivity, SaaS | `notion` | dense/list | `knowledge-card`, `checklist` |
|
||||
| Education, tutorial, learning, teaching, classroom | `chalkboard` | balanced/dense | `tutorial`, `classroom` |
|
||||
| Notes, handwritten, study guide, knowledge, realistic, photo | `study-notes` | dense/list/mindmap | `study-guide` |
|
||||
| Movie, album, concert, poster, opinion, editorial, dramatic, cinematic | `screen-print` | sparse/comparison | `poster`, `editorial`, `cinematic` |
|
||||
|
||||
## Outline Strategies
|
||||
|
||||
Three differentiated outline strategies for different content goals:
|
||||
|
||||
### Strategy A: Story-Driven (故事驱动型)
|
||||
|
||||
| Aspect | Description |
|
||||
|--------|-------------|
|
||||
| **Concept** | Personal experience as main thread, emotional resonance first |
|
||||
| **Features** | Start from pain point, show before/after change, strong authenticity |
|
||||
| **Best for** | Reviews, personal shares, transformation stories |
|
||||
| **Structure** | Hook → Problem → Discovery → Experience → Conclusion |
|
||||
|
||||
### Strategy B: Information-Dense (信息密集型)
|
||||
|
||||
| Aspect | Description |
|
||||
|--------|-------------|
|
||||
| **Concept** | Value-first, efficient information delivery |
|
||||
| **Features** | Clear structure, explicit points, professional credibility |
|
||||
| **Best for** | Tutorials, comparisons, product reviews, checklists |
|
||||
| **Structure** | Core conclusion → Info card → Pros/Cons → Recommendation |
|
||||
|
||||
### Strategy C: Visual-First (视觉优先型)
|
||||
|
||||
| Aspect | Description |
|
||||
|--------|-------------|
|
||||
| **Concept** | Visual impact as core, minimal text |
|
||||
| **Features** | Large images, atmospheric, instant appeal |
|
||||
| **Best for** | High-aesthetic products, lifestyle, mood-based content |
|
||||
| **Structure** | Hero image → Detail shots → Lifestyle scene → CTA |
|
||||
|
||||
## File Structure
|
||||
|
||||
Each session creates an independent directory named by content slug:
|
||||
|
||||
```
|
||||
image-cards/{topic-slug}/
|
||||
├── source-{slug}.{ext} # Source files (text, images, etc.)
|
||||
├── analysis.md # Deep analysis + questions asked
|
||||
├── outline-strategy-a.md # Strategy A: Story-driven
|
||||
├── outline-strategy-b.md # Strategy B: Information-dense
|
||||
├── outline-strategy-c.md # Strategy C: Visual-first
|
||||
├── outline.md # Final selected/merged outline
|
||||
├── prompts/
|
||||
│ ├── 01-cover-[slug].md
|
||||
│ ├── 02-content-[slug].md
|
||||
│ └── ...
|
||||
├── 01-cover-[slug].png
|
||||
├── 02-content-[slug].png
|
||||
└── NN-ending-[slug].png
|
||||
```
|
||||
|
||||
**Slug Generation**:
|
||||
1. Extract main topic from content (2-4 words, kebab-case)
|
||||
2. Example: "AI工具推荐" → `ai-tools-recommend`
|
||||
|
||||
**Conflict Resolution**:
|
||||
If `image-cards/{topic-slug}/` already exists:
|
||||
- Append timestamp: `{topic-slug}-YYYYMMDD-HHMMSS`
|
||||
- Example: `ai-tools` exists → `ai-tools-20260118-143052`
|
||||
|
||||
**Source Files**:
|
||||
Copy all sources with naming `source-{slug}.{ext}`:
|
||||
- `source-article.md`, `source-photo.jpg`, etc.
|
||||
- Multiple sources supported: text, images, files from conversation
|
||||
|
||||
## Workflow
|
||||
|
||||
### Progress Checklist
|
||||
|
||||
Copy and track progress:
|
||||
|
||||
```
|
||||
Image Card Series Progress:
|
||||
- [ ] Step 0: Check preferences (EXTEND.md) ⛔ BLOCKING (--yes: use defaults if not found)
|
||||
- [ ] Found → load preferences → continue
|
||||
- [ ] Not found → run first-time setup → MUST complete before Step 1 (--yes: skip setup, use defaults)
|
||||
- [ ] Step 1: Analyze content → analysis.md
|
||||
- [ ] Step 2: Smart Confirm ⚠️ REQUIRED (--yes: auto-confirm Path A)
|
||||
- [ ] Path A: Quick confirm → generate recommended outline
|
||||
- [ ] Path B: Customize → adjust then generate outline
|
||||
- [ ] Path C: Detailed → 3 outlines → second confirm → generate outline
|
||||
- [ ] Step 3: Generate images (sequential)
|
||||
- [ ] Step 4: Completion report
|
||||
```
|
||||
|
||||
### Flow
|
||||
|
||||
```
|
||||
Input → [--yes?] ─┬─ Yes → [Step 0: Load or defaults] → Analyze → Auto-confirm → Generate → Complete
|
||||
│
|
||||
└─ No → [Step 0: Preferences] ─┬─ Found → Continue
|
||||
│
|
||||
└─ Not found → First-Time Setup ⛔ BLOCKING
|
||||
│
|
||||
└─ Complete setup → Save EXTEND.md → Continue
|
||||
│
|
||||
┌─────────────────────────────────────────────────────────────────────────────────────┘
|
||||
↓
|
||||
Analyze → [Smart Confirm] ─┬─ Quick: confirm recommended → outline.md → Generate → Complete
|
||||
│
|
||||
├─ Customize: adjust options → outline.md → Generate → Complete
|
||||
│
|
||||
└─ Detailed: 3 outlines → [Confirm 2] → outline.md → Generate → Complete
|
||||
```
|
||||
|
||||
### Step 0: Load Preferences (EXTEND.md) ⛔ BLOCKING
|
||||
|
||||
**Purpose**: Load user preferences or run first-time setup.
|
||||
|
||||
**`--yes` mode**: If EXTEND.md found → load it. If not found → use built-in defaults (no watermark, style/layout auto-select, language from content). Do NOT run first-time setup, do NOT create EXTEND.md, do NOT ask any questions. Proceed directly to Step 1.
|
||||
|
||||
**CRITICAL** (interactive mode only): If EXTEND.md not found, MUST complete first-time setup before ANY other questions or steps. Do NOT proceed to content analysis, do NOT ask about style, do NOT ask about layout — ONLY complete the preferences setup first.
|
||||
|
||||
Check EXTEND.md existence (priority order):
|
||||
|
||||
```bash
|
||||
# macOS, Linux, WSL, Git Bash
|
||||
test -f .baoyu-skills/baoyu-image-cards/EXTEND.md && echo "project"
|
||||
test -f "${XDG_CONFIG_HOME:-$HOME/.config}/baoyu-skills/baoyu-image-cards/EXTEND.md" && echo "xdg"
|
||||
test -f "$HOME/.baoyu-skills/baoyu-image-cards/EXTEND.md" && echo "user"
|
||||
```
|
||||
|
||||
```powershell
|
||||
# PowerShell (Windows)
|
||||
if (Test-Path .baoyu-skills/baoyu-image-cards/EXTEND.md) { "project" }
|
||||
$xdg = if ($env:XDG_CONFIG_HOME) { $env:XDG_CONFIG_HOME } else { "$HOME/.config" }
|
||||
if (Test-Path "$xdg/baoyu-skills/baoyu-image-cards/EXTEND.md") { "xdg" }
|
||||
if (Test-Path "$HOME/.baoyu-skills/baoyu-image-cards/EXTEND.md") { "user" }
|
||||
```
|
||||
|
||||
┌────────────────────────────────────────────────────┬───────────────────┐
|
||||
│ Path │ Location │
|
||||
├────────────────────────────────────────────────────┼───────────────────┤
|
||||
│ .baoyu-skills/baoyu-image-cards/EXTEND.md │ Project directory │
|
||||
├────────────────────────────────────────────────────┼───────────────────┤
|
||||
│ $HOME/.baoyu-skills/baoyu-image-cards/EXTEND.md │ User home │
|
||||
└────────────────────────────────────────────────────┴───────────────────┘
|
||||
|
||||
┌───────────┬─────────────────────────────────────────────────────────────────────────────────────────────────────┐
|
||||
│ Result │ Action │
|
||||
├───────────┼─────────────────────────────────────────────────────────────────────────────────────────────────────┤
|
||||
│ Found │ Read, parse, display summary → Continue to Step 1 │
|
||||
├───────────┼─────────────────────────────────────────────────────────────────────────────────────────────────────┤
|
||||
│ Not found │ ⛔ BLOCKING: Run first-time setup ONLY (see below) → Complete and save EXTEND.md → Then Step 1 │
|
||||
└───────────┴─────────────────────────────────────────────────────────────────────────────────────────────────────┘
|
||||
|
||||
**First-Time Setup** (when EXTEND.md not found):
|
||||
|
||||
**Language**: Use user's input language or saved language preference.
|
||||
|
||||
Use AskUserQuestion with ALL questions in ONE call. See `references/config/first-time-setup.md` for question details.
|
||||
|
||||
**EXTEND.md Supports**: Watermark | Preferred style/layout | Custom style definitions | Language preference
|
||||
|
||||
Schema: `references/config/preferences-schema.md`
|
||||
|
||||
### Step 1: Analyze Content → `analysis.md`
|
||||
|
||||
Read source content, save it if needed, and perform deep analysis.
|
||||
|
||||
**Actions**:
|
||||
1. **Save source content** (if not already a file):
|
||||
- If user provides a file path: use as-is
|
||||
- If user pastes content: save to `source.md` in target directory
|
||||
- **Backup rule**: If `source.md` exists, rename to `source-backup-YYYYMMDD-HHMMSS.md`
|
||||
2. Read source content
|
||||
3. **Deep analysis** following `references/workflows/analysis-framework.md`:
|
||||
- Content type classification (种草/干货/测评/教程/避坑...)
|
||||
- Hook analysis (爆款标题潜力)
|
||||
- Target audience identification
|
||||
- Engagement potential (收藏/分享/评论)
|
||||
- Visual opportunity mapping
|
||||
- Swipe flow design
|
||||
4. Detect source language
|
||||
5. Determine recommended image count (2-10)
|
||||
6. **Auto-recommend** best strategy + style + layout based on content signals
|
||||
7. **Save to `analysis.md`**
|
||||
|
||||
### Step 2: Smart Confirm ⚠️
|
||||
|
||||
**Purpose**: Present auto-recommended plan, let user confirm or adjust.
|
||||
|
||||
**`--yes` mode**: Skip this entire step. Use auto-recommended strategy + style + layout from Step 1 analysis (or `--style`/`--layout`/`--preset` if provided). Generate outline directly using Path A logic → save to `outline.md` → proceed to Step 3. No AskUserQuestion calls.
|
||||
|
||||
**Interactive mode**: Do NOT skip.
|
||||
|
||||
**Auto-Recommendation Logic**:
|
||||
1. Use Auto Selection table to match content signals → best strategy + style + layout
|
||||
2. Infer optimal image count from content density
|
||||
3. Load style's default elements from preset
|
||||
|
||||
**Display** (analysis summary + recommended plan):
|
||||
|
||||
```
|
||||
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||||
📋 内容分析
|
||||
主题：[topic] | 类型：[content_type]
|
||||
要点：[key points summary]
|
||||
受众：[target audience]
|
||||
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||||
🎨 推荐方案（自动匹配）
|
||||
策略：[A/B/C] [strategy name]（[reason]）
|
||||
风格：[style] · 布局：[layout] · 预设：[preset]
|
||||
图片：[N]张（封面+[N-2]内容+结尾）
|
||||
元素：[background] / [decorations] / [emphasis]
|
||||
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||||
```
|
||||
|
||||
**Use AskUserQuestion** with single question:
|
||||
|
||||
| Option | Description |
|
||||
|--------|-------------|
|
||||
| 1. ✅ 确认，直接生成（推荐） | Trust auto-recommendation, proceed immediately |
|
||||
| 2. 🎛️ 自定义调整 | Modify strategy/style/layout/count in one step |
|
||||
| 3. 📋 详细模式 | Generate 3 outlines, then choose (two confirmations) |
|
||||
|
||||
#### Path A: Quick Confirm (Option 1)
|
||||
|
||||
Generate single outline using recommended strategy + style → save to `outline.md` → Step 3.
|
||||
|
||||
#### Path B: Customize (Option 2)
|
||||
|
||||
**Use AskUserQuestion** with adjustable options (leave blank = keep recommended):
|
||||
|
||||
1. **策略风格**: Current: [strategy + style]. Options: A Story-Driven(warm) | B Information-Dense(notion) | C Visual-First(screen-print). Or specify style directly: cute/fresh/warm/bold/minimal/retro/pop/notion/chalkboard/study-notes/screen-print. Or use preset: knowledge-card / checklist / tutorial / poster / cinematic / etc.
|
||||
2. **布局**: Current: [layout]. Options: sparse | balanced | dense | list | comparison | flow | mindmap | quadrant
|
||||
3. **图片数量**: Current: [N]. Range: 2-10
|
||||
4. **补充说明**（可选）: Selling point emphasis, audience adjustment, color preference, etc.
|
||||
|
||||
**After response**: Generate single outline with user's choices → save to `outline.md` → Step 3.
|
||||
|
||||
#### Path C: Detailed Mode (Option 3)
|
||||
|
||||
Full two-confirmation flow for maximum control:
|
||||
|
||||
**Step 2a: Content Understanding**
|
||||
|
||||
**Use AskUserQuestion** for:
|
||||
1. Core selling point (multiSelect: true)
|
||||
2. Target audience
|
||||
3. Style preference: Authentic sharing / Professional review / Aesthetic mood / Auto
|
||||
4. Additional context (optional)
|
||||
|
||||
**After response**: Update `analysis.md`.
|
||||
|
||||
**Step 2b: Generate 3 Outline Variants**
|
||||
|
||||
| Strategy | Filename | Outline | Recommended Style |
|
||||
|----------|----------|---------|-------------------|
|
||||
| A | `outline-strategy-a.md` | Story-driven: emotional, before/after | warm, cute, fresh |
|
||||
| B | `outline-strategy-b.md` | Information-dense: structured, factual | notion, minimal, chalkboard |
|
||||
| C | `outline-strategy-c.md` | Visual-first: atmospheric, minimal text | bold, pop, retro, screen-print |
|
||||
|
||||
**Outline format** (YAML front matter + content):
|
||||
```yaml
|
||||
---
|
||||
strategy: a # a, b, or c
|
||||
name: Story-Driven
|
||||
style: warm # recommended style for this strategy
|
||||
style_reason: "Warm tones enhance emotional storytelling and personal connection"
|
||||
elements: # from style preset, can be customized
|
||||
background: solid-pastel
|
||||
decorations: [clouds, stars-sparkles]
|
||||
emphasis: star-burst
|
||||
typography: highlight
|
||||
layout: balanced # primary layout
|
||||
image_count: 5
|
||||
---
|
||||
|
||||
## P1 Cover
|
||||
**Type**: cover
|
||||
**Hook**: "入冬后脸不干了🥹终于找到对的面霜"
|
||||
**Visual**: Product hero shot with cozy winter atmosphere
|
||||
**Layout**: sparse
|
||||
|
||||
## P2 Problem
|
||||
**Type**: pain-point
|
||||
**Message**: Previous struggles with dry skin
|
||||
**Visual**: Before state, relatable scenario
|
||||
**Layout**: balanced
|
||||
|
||||
...
|
||||
```
|
||||
|
||||
**Differentiation requirements**:
|
||||
- Each strategy MUST have different outline structure AND different recommended style
|
||||
- Adapt page count: A typically 4-6, B typically 3-5, C typically 3-4
|
||||
- Include `style_reason` explaining why this style fits the strategy
|
||||
|
||||
Reference: `references/workflows/outline-template.md`
|
||||
|
||||
**Step 2c: Outline & Style Selection**
|
||||
|
||||
**Use AskUserQuestion** with three questions:
|
||||
|
||||
**Q1: Outline Strategy**: A / B / C / Combine (specify pages from each)
|
||||
|
||||
**Q2: Visual Style**: Use recommended | Select preset | Select style | Custom description
|
||||
|
||||
**Q3: Visual Elements**: Use defaults (Recommended) | Adjust background | Adjust decorations | Custom
|
||||
|
||||
**After response**: Save selected/merged outline to `outline.md` with confirmed style and elements → Step 3.
|
||||
|
||||
### Step 3: Generate Images
|
||||
|
||||
With confirmed outline + style + layout:
|
||||
|
||||
**Visual Consistency — Reference Image Chain**:
|
||||
To ensure character/style consistency across all images in a series:
|
||||
1. **Generate image 1 (cover) FIRST** — without `--ref`
|
||||
2. **Use image 1 as `--ref` for ALL remaining images** (2, 3, ..., N)
|
||||
- This anchors the character design, color rendering, and illustration style
|
||||
- Command pattern: `--ref <path-to-image-01.png>` added to every subsequent generation
|
||||
|
||||
This is critical for styles that use recurring characters, mascots, or illustration elements. Image 1 becomes the visual anchor for the entire series.
|
||||
|
||||
**For each image (cover + content + ending)**:
|
||||
1. Save prompt to `prompts/NN-{type}-[slug].md` (in user's preferred language)
|
||||
- **Backup rule**: If prompt file exists, rename to `prompts/NN-{type}-[slug]-backup-YYYYMMDD-HHMMSS.md`
|
||||
2. Generate image:
|
||||
- **Image 1**: Generate without `--ref` (this establishes the visual anchor)
|
||||
- **Images 2+**: Generate with `--ref <image-01-path>` for consistency
|
||||
- **Backup rule**: If image file exists, rename to `NN-{type}-[slug]-backup-YYYYMMDD-HHMMSS.png`
|
||||
3. Report progress after each generation
|
||||
|
||||
**Watermark Application** (if enabled in preferences):
|
||||
Add to each image generation prompt:
|
||||
```
|
||||
Include a subtle watermark "[content]" positioned at [position].
|
||||
The watermark should be legible but not distracting from the main content.
|
||||
```
|
||||
Reference: `references/config/watermark-guide.md`
|
||||
|
||||
**Image Generation Skill Selection**:
|
||||
- Check available image generation skills
|
||||
- If multiple skills available: ask user preference (interactive) or use first available skill (`--yes` mode)
|
||||
|
||||
**Session Management**:
|
||||
If image generation skill supports `--sessionId`:
|
||||
1. Generate unique session ID: `cards-{topic-slug}-{timestamp}`
|
||||
2. Use same session ID for all images
|
||||
3. Combined with reference image chain, ensures maximum visual consistency
|
||||
|
||||
### Step 4: Completion Report
|
||||
|
||||
```
|
||||
Image Card Series Complete!
|
||||
|
||||
Topic: [topic]
|
||||
Mode: [Quick / Custom / Detailed]
|
||||
Strategy: [A/B/C/Combined]
|
||||
Style: [style name]
|
||||
Layout: [layout name or "varies"]
|
||||
Location: [directory path]
|
||||
Images: N total
|
||||
|
||||
✓ analysis.md
|
||||
✓ outline.md
|
||||
✓ outline-strategy-a/b/c.md (detailed mode only)
|
||||
|
||||
Files:
|
||||
- 01-cover-[slug].png ✓ Cover (sparse)
|
||||
- 02-content-[slug].png ✓ Content (balanced)
|
||||
- 03-content-[slug].png ✓ Content (dense)
|
||||
- 04-ending-[slug].png ✓ Ending (sparse)
|
||||
```
|
||||
|
||||
## Image Modification
|
||||
|
||||
| Action | Steps |
|
||||
|--------|-------|
|
||||
| **Edit** | **Update prompt file FIRST** → Regenerate with same session ID |
|
||||
| **Add** | Specify position → Create prompt → Generate → Renumber subsequent files (NN+1) → Update outline |
|
||||
| **Delete** | Remove files → Renumber subsequent (NN-1) → Update outline |
|
||||
|
||||
**IMPORTANT**: When updating images, ALWAYS update the prompt file (`prompts/NN-{type}-[slug].md`) FIRST before regenerating. This ensures changes are documented and reproducible.
|
||||
|
||||
## Content Breakdown Principles
|
||||
|
||||
1. **Cover (Image 1)**: Hook + visual impact → `sparse` layout
|
||||
2. **Content (Middle)**: Core value per image → `balanced`/`dense`/`list`/`comparison`/`flow`
|
||||
3. **Ending (Last)**: CTA / summary → `sparse` or `balanced`
|
||||
|
||||
**Style × Layout Matrix** (✓✓ = highly recommended, ✓ = works well):
|
||||
|
||||
| | sparse | balanced | dense | list | comparison | flow | mindmap | quadrant |
|
||||
|---|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|
|
||||
| cute | ✓✓ | ✓✓ | ✓ | ✓✓ | ✓ | ✓ | ✓ | ✓ |
|
||||
| fresh | ✓✓ | ✓✓ | ✓ | ✓ | ✓ | ✓✓ | ✓ | ✓ |
|
||||
| warm | ✓✓ | ✓✓ | ✓ | ✓ | ✓✓ | ✓ | ✓ | ✓ |
|
||||
| bold | ✓✓ | ✓ | ✓ | ✓✓ | ✓✓ | ✓ | ✓ | ✓✓ |
|
||||
| minimal | ✓✓ | ✓✓ | ✓✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
|
||||
| retro | ✓✓ | ✓✓ | ✓ | ✓✓ | ✓ | ✓ | ✓ | ✓ |
|
||||
| pop | ✓✓ | ✓✓ | ✓ | ✓✓ | ✓✓ | ✓ | ✓ | ✓ |
|
||||
| notion | ✓✓ | ✓✓ | ✓✓ | ✓✓ | ✓✓ | ✓✓ | ✓✓ | ✓✓ |
|
||||
| chalkboard | ✓✓ | ✓✓ | ✓✓ | ✓✓ | ✓ | ✓✓ | ✓✓ | ✓ |
|
||||
| study-notes | ✗ | ✓ | ✓✓ | ✓✓ | ✓ | ✓ | ✓✓ | ✓ |
|
||||
| screen-print | ✓✓ | ✓✓ | ✗ | ✓ | ✓✓ | ✓ | ✗ | ✓✓ |
|
||||
|
||||
## References
|
||||
|
||||
Detailed templates in `references/` directory:
|
||||
|
||||
**Elements** (Visual building blocks):
|
||||
- `elements/canvas.md` - Aspect ratios, safe zones, grid layouts
|
||||
- `elements/image-effects.md` - Cutout, stroke, filters
|
||||
- `elements/typography.md` - Decorated text (花字), tags, text direction
|
||||
- `elements/decorations.md` - Emphasis marks, backgrounds, doodles, frames
|
||||
|
||||
**Presets** (Style presets):
|
||||
- `presets/<name>.md` - Element combination definitions (cute, notion, warm...)
|
||||
- `style-presets.md` - Preset shortcuts (style + layout combos)
|
||||
|
||||
**Workflows** (Process guides):
|
||||
- `workflows/analysis-framework.md` - Content analysis framework
|
||||
- `workflows/outline-template.md` - Outline template with layout guide
|
||||
- `workflows/prompt-assembly.md` - Prompt assembly guide
|
||||
|
||||
**Config** (Settings):
|
||||
- `config/preferences-schema.md` - EXTEND.md schema
|
||||
- `config/first-time-setup.md` - First-time setup flow
|
||||
- `config/watermark-guide.md` - Watermark configuration
|
||||
|
||||
## Notes
|
||||
|
||||
- Auto-retry once on failure | Cartoon alternatives for sensitive figures
|
||||
- Use confirmed language preference | Maintain style consistency
|
||||
- **Smart Confirm required** (Step 2) - do not skip; detailed mode uses two sub-confirmations
|
||||
|
||||
## Extension Support
|
||||
|
||||
Custom configurations via EXTEND.md. See **Step 0** for paths and supported options.
|
||||
|
|
@ -0,0 +1,122 @@
|
|||
---
|
||||
name: first-time-setup
|
||||
description: First-time setup flow for baoyu-xhs-images preferences
|
||||
---
|
||||
|
||||
# First-Time Setup
|
||||
|
||||
## Overview
|
||||
|
||||
When no EXTEND.md is found, guide user through preference setup.
|
||||
|
||||
**⛔ BLOCKING OPERATION**: This setup MUST complete before ANY other workflow steps. Do NOT:
|
||||
- Ask about content/article
|
||||
- Ask about style or layout
|
||||
- Ask about target audience
|
||||
- Proceed to content analysis
|
||||
|
||||
ONLY ask the questions in this setup flow, save EXTEND.md, then continue.
|
||||
|
||||
## Setup Flow
|
||||
|
||||
```
|
||||
No EXTEND.md found
|
||||
│
|
||||
▼
|
||||
┌─────────────────────┐
|
||||
│ AskUserQuestion │
|
||||
│ (all questions) │
|
||||
└─────────────────────┘
|
||||
│
|
||||
▼
|
||||
┌─────────────────────┐
|
||||
│ Create EXTEND.md │
|
||||
└─────────────────────┘
|
||||
│
|
||||
▼
|
||||
Continue to Step 1
|
||||
```
|
||||
|
||||
## Questions
|
||||
|
||||
**Language**: Use user's input language or saved language preference.
|
||||
|
||||
Use single AskUserQuestion with multiple questions (AskUserQuestion auto-adds "Other" option):
|
||||
|
||||
### Question 1: Watermark
|
||||
|
||||
```
|
||||
header: "Watermark"
|
||||
question: "Watermark text for generated images? Type your watermark content (e.g., name, @handle)"
|
||||
options:
|
||||
- label: "No watermark (Recommended)"
|
||||
description: "No watermark, can enable later in EXTEND.md"
|
||||
```
|
||||
|
||||
Position defaults to bottom-right.
|
||||
|
||||
### Question 2: Preferred Style
|
||||
|
||||
```
|
||||
header: "Style"
|
||||
question: "Default visual style preference? Or type another style name or your custom style"
|
||||
options:
|
||||
- label: "None (Recommended)"
|
||||
description: "Auto-select based on content analysis"
|
||||
- label: "cute"
|
||||
description: "Sweet, adorable - classic XHS aesthetic"
|
||||
- label: "notion"
|
||||
description: "Minimalist hand-drawn, intellectual"
|
||||
```
|
||||
|
||||
### Question 3: Save Location
|
||||
|
||||
```
|
||||
header: "Save"
|
||||
question: "Where to save preferences?"
|
||||
options:
|
||||
- label: "Project"
|
||||
description: ".baoyu-skills/ (this project only)"
|
||||
- label: "User"
|
||||
description: "~/.baoyu-skills/ (all projects)"
|
||||
```
|
||||
|
||||
## Save Locations
|
||||
|
||||
| Choice | Path | Scope |
|
||||
|--------|------|-------|
|
||||
| Project | `.baoyu-skills/baoyu-xhs-images/EXTEND.md` | Current project |
|
||||
| User | `~/.baoyu-skills/baoyu-xhs-images/EXTEND.md` | All projects |
|
||||
|
||||
## After Setup
|
||||
|
||||
1. Create directory if needed
|
||||
2. Write EXTEND.md with frontmatter
|
||||
3. Confirm: "Preferences saved to [path]"
|
||||
4. Continue to Step 1
|
||||
|
||||
## EXTEND.md Template
|
||||
|
||||
```yaml
|
||||
---
|
||||
version: 1
|
||||
watermark:
|
||||
enabled: [true/false]
|
||||
content: "[user input or empty]"
|
||||
position: bottom-right
|
||||
opacity: 0.7
|
||||
preferred_style:
|
||||
name: [selected style or null]
|
||||
description: ""
|
||||
preferred_layout: null
|
||||
language: null
|
||||
custom_styles: []
|
||||
---
|
||||
```
|
||||
|
||||
## Modifying Preferences Later
|
||||
|
||||
Users can edit EXTEND.md directly or run setup again:
|
||||
- Delete EXTEND.md to trigger setup
|
||||
- Edit YAML frontmatter for quick changes
|
||||
- Full schema: `config/preferences-schema.md`
|
||||
|
|
@ -0,0 +1,118 @@
|
|||
---
|
||||
name: preferences-schema
|
||||
description: EXTEND.md YAML schema for baoyu-xhs-images user preferences
|
||||
---
|
||||
|
||||
# Preferences Schema
|
||||
|
||||
## Full Schema
|
||||
|
||||
```yaml
|
||||
---
|
||||
version: 1
|
||||
|
||||
watermark:
|
||||
enabled: false
|
||||
content: ""
|
||||
position: bottom-right # bottom-right|bottom-left|bottom-center|top-right
|
||||
|
||||
preferred_style:
|
||||
name: null # Built-in or custom style name
|
||||
description: "" # Override/notes
|
||||
|
||||
preferred_layout: null # sparse|balanced|dense|list|comparison|flow
|
||||
|
||||
language: null # zh|en|ja|ko|auto
|
||||
|
||||
custom_styles:
|
||||
- name: my-style
|
||||
description: "Style description"
|
||||
color_palette:
|
||||
primary: ["#FED7E2", "#FEEBC8"]
|
||||
background: "#FFFAF0"
|
||||
accents: ["#FF69B4", "#FF6B6B"]
|
||||
visual_elements: "Hearts, stars, sparkles"
|
||||
typography: "Rounded, bubbly hand lettering"
|
||||
best_for: "Lifestyle, beauty"
|
||||
---
|
||||
```
|
||||
|
||||
## Field Reference
|
||||
|
||||
| Field | Type | Default | Description |
|
||||
|-------|------|---------|-------------|
|
||||
| `version` | int | 1 | Schema version |
|
||||
| `watermark.enabled` | bool | false | Enable watermark |
|
||||
| `watermark.content` | string | "" | Watermark text (@username or custom) |
|
||||
| `watermark.position` | enum | bottom-right | Position on image |
|
||||
| `preferred_style.name` | string | null | Style name or null |
|
||||
| `preferred_style.description` | string | "" | Custom notes/override |
|
||||
| `preferred_layout` | string | null | Layout preference or null |
|
||||
| `language` | string | null | Output language (null = auto-detect) |
|
||||
| `custom_styles` | array | [] | User-defined styles |
|
||||
|
||||
## Position Options
|
||||
|
||||
| Value | Description |
|
||||
|-------|-------------|
|
||||
| `bottom-right` | Lower right corner (default, most common) |
|
||||
| `bottom-left` | Lower left corner |
|
||||
| `bottom-center` | Bottom center |
|
||||
| `top-right` | Upper right corner |
|
||||
|
||||
## Custom Style Fields
|
||||
|
||||
| Field | Required | Description |
|
||||
|-------|----------|-------------|
|
||||
| `name` | Yes | Unique style identifier (kebab-case) |
|
||||
| `description` | Yes | What the style conveys |
|
||||
| `color_palette.primary` | No | Main colors (array) |
|
||||
| `color_palette.background` | No | Background color |
|
||||
| `color_palette.accents` | No | Accent colors (array) |
|
||||
| `visual_elements` | No | Decorative elements |
|
||||
| `typography` | No | Font/lettering style |
|
||||
| `best_for` | No | Recommended content types |
|
||||
|
||||
## Example: Minimal Preferences
|
||||
|
||||
```yaml
|
||||
---
|
||||
version: 1
|
||||
watermark:
|
||||
enabled: true
|
||||
content: "@myusername"
|
||||
preferred_style:
|
||||
name: notion
|
||||
---
|
||||
```
|
||||
|
||||
## Example: Full Preferences
|
||||
|
||||
```yaml
|
||||
---
|
||||
version: 1
|
||||
watermark:
|
||||
enabled: true
|
||||
content: "@myxhsaccount"
|
||||
position: bottom-right
|
||||
|
||||
preferred_style:
|
||||
name: notion
|
||||
description: "Clean knowledge cards for tech content"
|
||||
|
||||
preferred_layout: dense
|
||||
|
||||
language: zh
|
||||
|
||||
custom_styles:
|
||||
- name: corporate
|
||||
description: "Professional B2B style"
|
||||
color_palette:
|
||||
primary: ["#1E3A5F", "#4A90D9"]
|
||||
background: "#F5F7FA"
|
||||
accents: ["#00B4D8", "#48CAE4"]
|
||||
visual_elements: "Clean lines, subtle gradients, geometric shapes"
|
||||
typography: "Modern sans-serif, professional"
|
||||
best_for: "Business, SaaS, enterprise"
|
||||
---
|
||||
```
|
||||
|
|
@ -0,0 +1,62 @@
|
|||
---
|
||||
name: watermark-guide
|
||||
description: Watermark configuration guide for baoyu-xhs-images
|
||||
---
|
||||
|
||||
# Watermark Guide
|
||||
|
||||
## Position Diagram
|
||||
|
||||
```
|
||||
┌─────────────────────────────┐
|
||||
│ [top-right]│
|
||||
│ │
|
||||
│ │
|
||||
│ IMAGE CONTENT │
|
||||
│ │
|
||||
│ │
|
||||
│[bottom-left][bottom-center][bottom-right]│
|
||||
└─────────────────────────────┘
|
||||
```
|
||||
|
||||
## Position Recommendations
|
||||
|
||||
| Position | Best For | Avoid When |
|
||||
|----------|----------|------------|
|
||||
| `bottom-right` | Default choice, most common | Key info in bottom-right |
|
||||
| `bottom-left` | Right-heavy layouts | Key info in bottom-left |
|
||||
| `bottom-center` | Centered designs | Text-heavy bottom area |
|
||||
| `top-right` | Bottom-heavy content | Title/header in top-right |
|
||||
|
||||
## Content Format
|
||||
|
||||
| Format | Example | Style |
|
||||
|--------|---------|-------|
|
||||
| Handle | `@username` | Most common for XHS |
|
||||
| Text | `MyBrand` | Simple branding |
|
||||
| Chinese | `小红书:用户名` | Platform specific |
|
||||
| URL | `myblog.com` | Cross-platform |
|
||||
|
||||
## Best Practices
|
||||
|
||||
1. **Consistency**: Use same watermark across all images in series
|
||||
2. **Legibility**: Ensure watermark readable on both light/dark areas
|
||||
3. **Size**: Keep subtle - should not distract from content
|
||||
|
||||
## Prompt Integration
|
||||
|
||||
When watermark is enabled, add to image generation prompt:
|
||||
|
||||
```
|
||||
Include a subtle watermark "[content]" positioned at [position].
|
||||
The watermark should be legible but not distracting from the main content.
|
||||
```
|
||||
|
||||
## Common Issues
|
||||
|
||||
| Issue | Solution |
|
||||
|-------|----------|
|
||||
| Watermark invisible | Adjust position or check contrast |
|
||||
| Watermark too prominent | Change position or reduce size |
|
||||
| Watermark overlaps content | Change position |
|
||||
| Inconsistent across images | Use session ID for consistency |
|
||||
|
|
@ -0,0 +1,122 @@
|
|||
# Canvas & Layout
|
||||
|
||||
Core canvas specifications and layout grids for Xiaohongshu infographics.
|
||||
|
||||
## Aspect Ratios
|
||||
|
||||
| Name | Ratio | Pixels | Note |
|
||||
|------|-------|--------|------|
|
||||
| portrait-3-4 | 3:4 | 1242×1660 | Highest traffic on XHS (recommended) |
|
||||
| square | 1:1 | 1242×1242 | Second recommended |
|
||||
| portrait-2-3 | 2:3 | 1242×1863 | Taller format |
|
||||
|
||||
**Default**: portrait-3-4 for maximum engagement.
|
||||
|
||||
## Safe Zones
|
||||
|
||||
Avoid placing critical content in these areas:
|
||||
|
||||
| Zone | Position | Reason |
|
||||
|------|----------|--------|
|
||||
| bottom-overlay | Bottom 10% | Title bar overlay on mobile |
|
||||
| top-right | Top-right corner | Like/share button overlay |
|
||||
| bottom-right | Bottom-right corner | Watermark position |
|
||||
|
||||
```
|
||||
┌─────────────────────────────┐
|
||||
│ [like/share]│ ← top-right: avoid
|
||||
│ │
|
||||
│ │
|
||||
│ ✓ SAFE CONTENT AREA │
|
||||
│ │
|
||||
│ │
|
||||
│ [title bar overlay area] │ ← bottom 10%: avoid key info
|
||||
└─────────────────────────────┘
|
||||
```
|
||||
|
||||
## Grid Layouts
|
||||
|
||||
### Density-Based Layouts
|
||||
|
||||
| Layout | Info Density | Whitespace | Points/Image | Best For |
|
||||
|--------|--------------|------------|--------------|----------|
|
||||
| sparse | Low | 60-70% | 1-2 | Covers, quotes, impactful statements |
|
||||
| balanced | Medium | 40-50% | 3-4 | Standard content, tutorials |
|
||||
| dense | High | 20-30% | 5-8 | Knowledge cards, cheat sheets |
|
||||
|
||||
### Structure-Based Layouts
|
||||
|
||||
| Layout | Structure | Items | Best For |
|
||||
|--------|-----------|-------|----------|
|
||||
| list | Vertical enumeration | 4-7 | Rankings, checklists, step guides |
|
||||
| comparison | Left vs Right | 2 sections | Before/after, pros/cons |
|
||||
| flow | Connected nodes | 3-6 steps | Processes, timelines, workflows |
|
||||
| mindmap | Center radial | 4-8 branches | Concept maps, brainstorming, topic overview |
|
||||
| quadrant | 4-section grid | 4 sections | SWOT analysis, priority matrix, classification |
|
||||
|
||||
## Layout by Position
|
||||
|
||||
| Position | Recommended Layout | Why |
|
||||
|----------|-------------------|-----|
|
||||
| Cover | sparse | Maximum visual impact, clear title |
|
||||
| Setup | balanced | Context without overwhelming |
|
||||
| Core | balanced/dense/list | Based on content density |
|
||||
| Payoff | balanced/list | Clear takeaways |
|
||||
| Ending | sparse | Clean CTA, memorable close |
|
||||
|
||||
## Grid Cells
|
||||
|
||||
For multi-element compositions:
|
||||
|
||||
| Name | Cells | Use Case |
|
||||
|------|-------|----------|
|
||||
| single | 1 | Hero image, maximum impact |
|
||||
| dual | 2 | Before/after, comparison |
|
||||
| triptych | 3 | Steps, process flow |
|
||||
| quad | 4 | Product showcase |
|
||||
| six-grid | 6 | Checklist, collection |
|
||||
| nine-grid | 9 | Multi-image gallery |
|
||||
|
||||
## Visual Balance
|
||||
|
||||
### Sparse Layout
|
||||
- Single focal point centered
|
||||
- Breathing room on all sides
|
||||
- Symmetrical composition
|
||||
|
||||
### Balanced Layout
|
||||
- Top-weighted title
|
||||
- Evenly distributed content below
|
||||
- Clear visual hierarchy
|
||||
|
||||
### Dense Layout
|
||||
- Organized grid structure
|
||||
- Clear section boundaries
|
||||
- Compact but readable spacing
|
||||
|
||||
### List Layout
|
||||
- Left-aligned items
|
||||
- Clear number/bullet hierarchy
|
||||
- Consistent item format
|
||||
|
||||
### Comparison Layout
|
||||
- Symmetrical left/right
|
||||
- Clear visual contrast
|
||||
- Divider between sections
|
||||
|
||||
### Flow Layout
|
||||
- Directional flow (top→bottom or left→right)
|
||||
- Connected nodes with arrows
|
||||
- Clear progression indicators
|
||||
|
||||
### Mindmap Layout
|
||||
- Central topic node
|
||||
- Radial branches outward
|
||||
- Hierarchical sub-branches
|
||||
- Organic curved connections
|
||||
|
||||
### Quadrant Layout
|
||||
- 4-section grid (2×2)
|
||||
- Clear axis labels
|
||||
- Each quadrant with distinct content
|
||||
- Optional circular variant for cycles
|
||||
|
|
@ -0,0 +1,152 @@
|
|||
# Decorative Assets
|
||||
|
||||
Visual embellishments and decorative elements for Xiaohongshu infographics.
|
||||
|
||||
## Emphasis Marks (强调标记)
|
||||
|
||||
Elements to draw attention to specific content.
|
||||
|
||||
| Name | Description | Use Case |
|
||||
|------|-------------|----------|
|
||||
| red-arrow | Red arrow pointing to target | Product features, key points |
|
||||
| circle-mark | Circle highlight annotation | Highlighting details |
|
||||
| underline | Straight or wavy underline | Text emphasis |
|
||||
| star-burst | Starburst explosion effect | Special offers, wow factor |
|
||||
| checkmark | Checkmark/tick symbol | Completed items, pros |
|
||||
| cross-mark | X mark symbol | Cons, things to avoid |
|
||||
| exclamation | Exclamation point decoration | Important warnings |
|
||||
| question | Question mark decoration | FAQ, curiosity |
|
||||
| numbering | Circled numbers | Steps, rankings |
|
||||
| bracket | Bracket highlighting | Grouping, emphasis |
|
||||
|
||||
## Backgrounds (背景)
|
||||
|
||||
Base layer treatments.
|
||||
|
||||
| Name | Description | Use Case |
|
||||
|------|-------------|----------|
|
||||
| solid-saturated | High-saturation solid color | Bold, energetic |
|
||||
| solid-pastel | Soft pastel solid color | Cute, gentle |
|
||||
| gradient-linear | Linear color gradient | Modern, dynamic |
|
||||
| gradient-radial | Radial color gradient | Spotlight effect |
|
||||
| frosted-glass | Frosted glass blur effect | Layered compositions |
|
||||
| paper-texture | Paper or craft texture | Handmade aesthetic |
|
||||
| fabric-texture | Fabric/cloth texture | Cozy, tactile |
|
||||
| chalkboard | Blackboard texture | Educational content |
|
||||
| grid | Subtle grid pattern | Structured, organized |
|
||||
| dots | Polka dot pattern | Playful, retro |
|
||||
|
||||
## Doodles & Emoji (涂鸦)
|
||||
|
||||
Hand-drawn decorative elements.
|
||||
|
||||
| Name | Description | Use Case |
|
||||
|------|-------------|----------|
|
||||
| hand-drawn-lines | Sketchy hand-drawn lines | Connections, borders |
|
||||
| stars-sparkles | Stars and sparkle effects | Magic, excellence |
|
||||
| flowers | Floral decorations | Beauty, feminine |
|
||||
| hearts | Heart symbols | Love, favorites |
|
||||
| clouds | Cloud shapes | Dreamy, thoughts |
|
||||
| arrows-curvy | Curved directional arrows | Flow, direction |
|
||||
| squiggles | Wavy squiggle lines | Energy, movement |
|
||||
| confetti | Scattered confetti | Celebration |
|
||||
| leaves | Leaf decorations | Nature, fresh |
|
||||
| bubbles | Circular bubble shapes | Playful, light |
|
||||
|
||||
## Emoji Integration
|
||||
|
||||
| Category | Examples | Use Case |
|
||||
|----------|----------|----------|
|
||||
| Reactions | 🥹 😍 🤯 | Emotional emphasis |
|
||||
| Objects | ✨ 💡 🎯 | Visual markers |
|
||||
| Actions | 👇 👆 ➡️ | Directional cues |
|
||||
| Nature | 🌸 🌿 ☀️ | Thematic decoration |
|
||||
|
||||
## Frames (边框)
|
||||
|
||||
Container and border treatments.
|
||||
|
||||
| Name | Description | Use Case |
|
||||
|------|-------------|----------|
|
||||
| polaroid | Instant photo frame | Photo showcase |
|
||||
| film-strip | Film negative border | Cinematic, retro |
|
||||
| phone-screenshot | Mobile device mockup | App/screen content |
|
||||
| torn-paper | Torn paper edge effect | Scrapbook aesthetic |
|
||||
| rounded-rect | Rounded rectangle border | Clean containers |
|
||||
| decorative | Ornate decorative border | Premium, elegant |
|
||||
| tape-corners | Washi tape corners | Crafty, casual |
|
||||
| stamp-border | Stamp perforated edge | Vintage, postal |
|
||||
|
||||
## Dividers (分隔线)
|
||||
|
||||
Section separators.
|
||||
|
||||
| Name | Description | Use Case |
|
||||
|------|-------------|----------|
|
||||
| line-simple | Simple horizontal line | Clean separation |
|
||||
| line-dashed | Dashed line | Subtle division |
|
||||
| line-wavy | Wavy line | Playful separation |
|
||||
| dots-row | Row of dots | Decorative division |
|
||||
| ornamental | Decorative flourish | Elegant separation |
|
||||
|
||||
## Stickers (贴纸)
|
||||
|
||||
Pre-composed decorative elements.
|
||||
|
||||
| Name | Description | Use Case |
|
||||
|------|-------------|----------|
|
||||
| badge-new | "NEW" badge | New products |
|
||||
| badge-hot | "HOT" badge | Trending items |
|
||||
| badge-sale | Sale/discount badge | Promotions |
|
||||
| seal-quality | Quality seal | Recommendations |
|
||||
| ribbon-award | Award ribbon | Best picks |
|
||||
| tag-price | Price tag shape | Pricing info |
|
||||
|
||||
## Style-Specific Decorations
|
||||
|
||||
### Cute Style
|
||||
- Hearts, stars, sparkles
|
||||
- Ribbon decorations, sticker-style
|
||||
- Cute character elements
|
||||
|
||||
### Notion Style
|
||||
- Simple line doodles
|
||||
- Geometric shapes, stick figures
|
||||
- Maximum whitespace, minimal decoration
|
||||
|
||||
### Warm Style
|
||||
- Sun rays, coffee cups, cozy items
|
||||
- Warm lighting effects
|
||||
- Friendly, inviting decorations
|
||||
|
||||
### Fresh Style
|
||||
- Plant leaves, clouds, water drops
|
||||
- Simple geometric shapes
|
||||
- Open, breathing composition
|
||||
|
||||
### Bold Style
|
||||
- Exclamation marks, arrows
|
||||
- Warning icons, strong shapes
|
||||
- High contrast elements
|
||||
|
||||
### Pop Style
|
||||
- Bold shapes, speech bubbles
|
||||
- Comic-style effects, starburst
|
||||
- Dynamic, energetic decorations
|
||||
|
||||
### Retro Style
|
||||
- Halftone dots, vintage badges
|
||||
- Classic icons, tape effects
|
||||
- Aged texture overlays
|
||||
|
||||
### Chalkboard Style
|
||||
- Chalk dust effects
|
||||
- Hand-drawn doodles
|
||||
- Mathematical formulas, simple icons
|
||||
|
||||
### Screen-Print Style
|
||||
- Bold silhouettes, geometric shapes
|
||||
- Halftone dot patterns, print grain
|
||||
- No doodles — negative space does the work
|
||||
- Stencil-cut edges, color block boundaries
|
||||
- Vintage poster border treatments
|
||||
|
|
@ -0,0 +1,92 @@
|
|||
# Image Processing Layer
|
||||
|
||||
Visual effects applied to image elements in Xiaohongshu infographics.
|
||||
|
||||
## AI Cutout (抠图)
|
||||
|
||||
Subject extraction styles for product/figure isolation.
|
||||
|
||||
| Name | Description | Use Case |
|
||||
|------|-------------|----------|
|
||||
| clean | Sharp edges, precise boundaries | Product photography, tech items |
|
||||
| soft | Soft transition, feathered edges | Portrait cutout, organic subjects |
|
||||
| stylized | Hand-drawn edge treatment | Artistic compositions |
|
||||
|
||||
## Stroke Effects (描边)
|
||||
|
||||
Border treatments for cutout elements.
|
||||
|
||||
| Name | Description | Use Case |
|
||||
|------|-------------|----------|
|
||||
| white-solid | White solid line border | Classic sticker feel, high contrast |
|
||||
| colored-solid | Colored solid line border | Playful vibe, brand colors |
|
||||
| dashed | Dashed/dotted border | Handmade aesthetic, casual |
|
||||
| double | Double-layer stroke | Emphasis effect, premium feel |
|
||||
| glow | Soft outer glow | Dreamy, soft aesthetic |
|
||||
| shadow | Drop shadow effect | Depth, floating element |
|
||||
|
||||
**Stroke Width Guidelines**:
|
||||
- Thin: 2-4px - Subtle, elegant
|
||||
- Medium: 5-8px - Standard visibility
|
||||
- Thick: 10-15px - Bold emphasis
|
||||
|
||||
## Filters (滤镜)
|
||||
|
||||
Color grading and mood presets popular on XHS.
|
||||
|
||||
| Name | Chinese | Description | Mood |
|
||||
|------|---------|-------------|------|
|
||||
| clear-glow | 清透感 | Transparent, radiant, luminous | Fresh, youthful |
|
||||
| film-grain | 胶片感 | Vintage film aesthetic, grain texture | Nostalgic, artistic |
|
||||
| cream-skin | 奶油肌 | Smooth, creamy complexion tones | Soft, flattering |
|
||||
| japanese-magazine | 日杂感 | Lifestyle magazine aesthetic | Curated, aspirational |
|
||||
| high-saturation | 高饱和 | Vibrant, punchy colors | Energetic, eye-catching |
|
||||
| muted-tones | 莫兰迪 | Morandi-style desaturated palette | Sophisticated, calm |
|
||||
| warm-tone | 暖色调 | Golden hour warmth | Cozy, inviting |
|
||||
| cool-tone | 冷色调 | Blue-shifted coolness | Modern, clean |
|
||||
|
||||
## Texture Overlays
|
||||
|
||||
Additional texture effects.
|
||||
|
||||
| Name | Description | Use Case |
|
||||
|------|-------------|----------|
|
||||
| paper | Paper or fabric texture | Handmade feel |
|
||||
| noise | Fine grain noise | Analog aesthetic |
|
||||
| halftone | Dot pattern | Retro print style |
|
||||
| scratch | Light scratch marks | Vintage wear |
|
||||
|
||||
## Blending Modes
|
||||
|
||||
For layered compositions.
|
||||
|
||||
| Mode | Effect | Use Case |
|
||||
|------|--------|----------|
|
||||
| multiply | Darken, merge | Shadow effects |
|
||||
| screen | Lighten, glow | Light effects |
|
||||
| overlay | Contrast boost | Vibrant compositions |
|
||||
| soft-light | Subtle blending | Natural layering |
|
||||
|
||||
## Effect Combinations
|
||||
|
||||
Common effect stacks for different styles:
|
||||
|
||||
### Cute Style
|
||||
- Filter: clear-glow or cream-skin
|
||||
- Stroke: white-solid (medium)
|
||||
- Texture: none
|
||||
|
||||
### Notion Style
|
||||
- Filter: none or muted-tones
|
||||
- Stroke: white-solid (thin) or none
|
||||
- Texture: paper (subtle)
|
||||
|
||||
### Retro Style
|
||||
- Filter: film-grain
|
||||
- Stroke: double or dashed
|
||||
- Texture: halftone, scratch
|
||||
|
||||
### Bold Style
|
||||
- Filter: high-saturation
|
||||
- Stroke: colored-solid (thick)
|
||||
- Texture: none
|
||||
|
|
@ -0,0 +1,96 @@
|
|||
# Typography System
|
||||
|
||||
Text styling elements for Xiaohongshu infographics.
|
||||
|
||||
## Decorated Text (花字)
|
||||
|
||||
Stylized text treatments for emphasis and visual appeal.
|
||||
|
||||
| Name | Description | Use Case |
|
||||
|------|-------------|----------|
|
||||
| gradient | Gradient color fill | Title emphasis, modern feel |
|
||||
| stroke-text | Outlined text with stroke | Cover headlines, high visibility |
|
||||
| shadow-3d | 3D shadow/extrusion effect | Key terms, depth |
|
||||
| highlight | Highlighter marker effect | Critical information, key points |
|
||||
| neon | Neon glow effect | Tech content, night aesthetic |
|
||||
| handwritten | Authentic handwritten style | Personal touch, casual |
|
||||
| bubble | Rounded, inflated letterforms | Cute, playful content |
|
||||
| brush | Brush stroke texture | Artistic, dynamic |
|
||||
|
||||
## Tags & Labels (标签)
|
||||
|
||||
Structured text containers.
|
||||
|
||||
| Name | Description | Use Case |
|
||||
|------|-------------|----------|
|
||||
| black-white | Black background, white text | Brand names, prices, categories |
|
||||
| white-black | White background, black text | Clean labels, minimal style |
|
||||
| bubble | Speech bubble style | Dialogue, annotations, callouts |
|
||||
| pointer | Arrow pointer with label | Product callouts, pointing to features |
|
||||
| ribbon | Ribbon/banner shape | Special offers, highlights |
|
||||
| stamp | Stamp/seal style | Authenticity, recommendations |
|
||||
| pill | Rounded pill shape | Tags, categories, keywords |
|
||||
|
||||
## Text Hierarchy
|
||||
|
||||
Recommended text sizing for visual hierarchy.
|
||||
|
||||
| Level | Role | Relative Size | Style |
|
||||
|-------|------|---------------|-------|
|
||||
| H1 | Main title | 100% | Bold, decorated |
|
||||
| H2 | Section header | 70-80% | Semi-bold |
|
||||
| H3 | Subsection | 50-60% | Medium weight |
|
||||
| Body | Content text | 40-50% | Regular |
|
||||
| Caption | Small notes | 30-35% | Light |
|
||||
|
||||
## Text Direction
|
||||
|
||||
| Direction | Description | Use Case |
|
||||
|-----------|-------------|----------|
|
||||
| horizontal | Standard left-to-right | Default for most content |
|
||||
| vertical | Top-to-bottom columns | Magazine style, traditional Chinese |
|
||||
| curved | Text following a curve | Decorative, around shapes |
|
||||
| diagonal | Angled text | Dynamic compositions |
|
||||
|
||||
## Text Effects
|
||||
|
||||
| Effect | Description | Use Case |
|
||||
|--------|-------------|----------|
|
||||
| shadow | Drop shadow behind text | Readability on busy backgrounds |
|
||||
| outline | Outline around letterforms | High contrast visibility |
|
||||
| glow | Soft glow around text | Dreamy, emphasis |
|
||||
| underline-wavy | Wavy underline decoration | Playful emphasis |
|
||||
| strikethrough | Crossed out text | Before/after, corrections |
|
||||
|
||||
## Language Considerations
|
||||
|
||||
### Chinese Text (中文)
|
||||
- Punctuation: 「」（）、。！？
|
||||
- Spacing: No spaces between characters
|
||||
- Line height: 1.5-1.8x for readability
|
||||
|
||||
### Mixed Text
|
||||
- English in Chinese context: Maintain consistent baseline
|
||||
- Numbers: Use consistent number style (lining vs old-style)
|
||||
|
||||
## Style-Specific Typography
|
||||
|
||||
### Cute Style
|
||||
- Rounded, bubbly hand lettering
|
||||
- Soft shadows, playful decorations
|
||||
- Pink/pastel color accents
|
||||
|
||||
### Notion Style
|
||||
- Clean hand-drawn lettering
|
||||
- Simple sans-serif labels
|
||||
- Minimal decoration
|
||||
|
||||
### Bold Style
|
||||
- Impactful hand lettering with shadows
|
||||
- High contrast colors
|
||||
- Strong outlines
|
||||
|
||||
### Chalkboard Style
|
||||
- Chalk texture on all text
|
||||
- Visible imperfections
|
||||
- Multi-color chalk variety
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
---
|
||||
name: bold
|
||||
category: impact
|
||||
---
|
||||
|
||||
# Bold Style
|
||||
|
||||
High impact, attention-grabbing aesthetic.
|
||||
|
||||
## Element Combination
|
||||
|
||||
```yaml
|
||||
canvas:
|
||||
ratio: portrait-3-4
|
||||
grid: single | dual
|
||||
|
||||
image_effects:
|
||||
cutout: clean
|
||||
stroke: colored-solid | double
|
||||
filter: high-saturation
|
||||
|
||||
typography:
|
||||
decorated: shadow-3d | stroke-text
|
||||
tags: black-white | ribbon
|
||||
direction: horizontal | diagonal
|
||||
|
||||
decorations:
|
||||
emphasis: exclamation | star-burst | red-arrow
|
||||
background: solid-saturated | gradient-linear
|
||||
doodles: arrows-curvy | squiggles
|
||||
frames: none
|
||||
```
|
||||
|
||||
## Color Palette
|
||||
|
||||
| Role | Colors | Hex |
|
||||
|------|--------|-----|
|
||||
| Primary | Vibrant red, orange, yellow | #E53E3E, #DD6B20, #F6E05E |
|
||||
| Background | Deep black, dark charcoal | #000000, #1A1A1A |
|
||||
| Accents | White, neon yellow | #FFFFFF, #F7FF00 |
|
||||
|
||||
## Visual Elements
|
||||
|
||||
- Exclamation marks, arrows, warning icons
|
||||
- Strong shapes, high contrast elements
|
||||
- Dramatic compositions
|
||||
- Bold geometric forms
|
||||
|
||||
## Typography
|
||||
|
||||
- Bold, impactful hand lettering with shadows
|
||||
- High contrast text treatments
|
||||
- Large, commanding headlines
|
||||
|
||||
## Best Layout Pairings
|
||||
|
||||
| Layout | Compatibility | Use Case |
|
||||
|--------|---------------|----------|
|
||||
| sparse | ✓✓ | Impactful statements |
|
||||
| balanced | ✓ | Warning content |
|
||||
| dense | ✓ | Critical information cards |
|
||||
| list | ✓✓ | Must-know lists, rankings |
|
||||
| comparison | ✓✓ | Dramatic contrasts |
|
||||
| flow | ✓ | Critical process steps |
|
||||
|
||||
## Best For
|
||||
|
||||
- Important tips and warnings
|
||||
- Must-know content
|
||||
- Critical announcements
|
||||
- Rankings and comparisons
|
||||
- Attention-grabbing hooks
|
||||
|
|
@ -0,0 +1,97 @@
|
|||
---
|
||||
name: chalkboard
|
||||
category: educational
|
||||
---
|
||||
|
||||
# Chalkboard Style
|
||||
|
||||
Black chalkboard background with colorful chalk drawing aesthetic.
|
||||
|
||||
## Element Combination
|
||||
|
||||
```yaml
|
||||
canvas:
|
||||
ratio: portrait-3-4
|
||||
grid: single | dual | triptych
|
||||
|
||||
image_effects:
|
||||
cutout: stylized
|
||||
stroke: none
|
||||
filter: none
|
||||
|
||||
typography:
|
||||
decorated: handwritten
|
||||
tags: none
|
||||
direction: horizontal | vertical
|
||||
|
||||
decorations:
|
||||
emphasis: underline | circle-mark | arrows-curvy
|
||||
background: chalkboard
|
||||
doodles: hand-drawn-lines | stars-sparkles
|
||||
frames: none
|
||||
```
|
||||
|
||||
## Color Palette
|
||||
|
||||
| Role | Colors | Hex |
|
||||
|------|--------|-----|
|
||||
| Background | Chalkboard black, green-black | #1A1A1A, #1C2B1C |
|
||||
| Primary Text | Chalk white | #F5F5F5 |
|
||||
| Accent 1 | Chalk yellow | #FFE566 |
|
||||
| Accent 2 | Chalk pink | #FF9999 |
|
||||
| Accent 3 | Chalk blue | #66B3FF |
|
||||
| Accent 4 | Chalk green | #90EE90 |
|
||||
| Accent 5 | Chalk orange | #FFB366 |
|
||||
|
||||
## Visual Elements
|
||||
|
||||
- Hand-drawn chalk illustrations with sketchy, imperfect lines
|
||||
- Chalk dust effects around text and key elements
|
||||
- Doodles: stars, arrows, underlines, circles, checkmarks
|
||||
- Mathematical formulas and simple diagrams
|
||||
- Eraser smudges and chalk residue textures
|
||||
- Stick figures and simple icons
|
||||
- Connection lines with hand-drawn feel
|
||||
|
||||
## Typography
|
||||
|
||||
- Hand-drawn chalk lettering style
|
||||
- Visible chalk texture on all text
|
||||
- Imperfect baseline adds authenticity
|
||||
- White or bright colored chalk for emphasis
|
||||
|
||||
## Style Rules
|
||||
|
||||
### Do
|
||||
- Maintain authentic chalk texture on all elements
|
||||
- Use imperfect, hand-drawn quality throughout
|
||||
- Add subtle chalk dust and smudge effects
|
||||
- Create visual hierarchy with color variety
|
||||
- Include playful doodles and annotations
|
||||
|
||||
### Don't
|
||||
- Use perfect geometric shapes
|
||||
- Create clean digital-looking lines
|
||||
- Add photorealistic elements
|
||||
- Use gradients or glossy effects
|
||||
|
||||
## Best Layout Pairings
|
||||
|
||||
| Layout | Compatibility | Use Case |
|
||||
|--------|---------------|----------|
|
||||
| sparse | ✓✓ | Educational covers |
|
||||
| balanced | ✓✓ | Standard lessons |
|
||||
| dense | ✓✓ | Detailed tutorials |
|
||||
| list | ✓✓ | Learning checklists |
|
||||
| comparison | ✓ | Concept comparisons |
|
||||
| flow | ✓✓ | Process explanations |
|
||||
|
||||
## Best For
|
||||
|
||||
- Educational content
|
||||
- Tutorials and how-to's
|
||||
- Classroom themes
|
||||
- Teaching materials
|
||||
- Workshops
|
||||
- Informal learning sessions
|
||||
- Knowledge sharing
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
---
|
||||
name: cute
|
||||
category: sweet
|
||||
---
|
||||
|
||||
# Cute Style
|
||||
|
||||
Sweet, adorable, girly - classic Xiaohongshu aesthetic.
|
||||
|
||||
## Element Combination
|
||||
|
||||
```yaml
|
||||
canvas:
|
||||
ratio: portrait-3-4
|
||||
grid: single | dual | quad
|
||||
|
||||
image_effects:
|
||||
cutout: soft
|
||||
stroke: white-solid | colored-solid
|
||||
filter: clear-glow | cream-skin
|
||||
|
||||
typography:
|
||||
decorated: bubble | highlight
|
||||
tags: pill | bubble
|
||||
direction: horizontal
|
||||
|
||||
decorations:
|
||||
emphasis: star-burst | hearts
|
||||
background: solid-pastel | gradient-linear
|
||||
doodles: hearts | stars-sparkles | flowers
|
||||
frames: polaroid | tape-corners
|
||||
```
|
||||
|
||||
## Color Palette
|
||||
|
||||
| Role | Colors | Hex |
|
||||
|------|--------|-----|
|
||||
| Primary | Pink, peach, mint, lavender | #FED7E2, #FEEBC8, #C6F6D5, #E9D8FD |
|
||||
| Background | Cream, soft pink | #FFFAF0, #FFF5F7 |
|
||||
| Accents | Hot pink, coral | #FF69B4, #FF6B6B |
|
||||
|
||||
## Visual Elements
|
||||
|
||||
- Hearts, stars, sparkles, cute faces
|
||||
- Ribbon decorations, sticker-style
|
||||
- Cute stickers, emoji icons
|
||||
- Soft, rounded shapes
|
||||
|
||||
## Typography
|
||||
|
||||
- Rounded, bubbly hand lettering
|
||||
- Soft shadows, playful decorations
|
||||
- Pink/pastel color accents on text
|
||||
|
||||
## Best Layout Pairings
|
||||
|
||||
| Layout | Compatibility | Use Case |
|
||||
|--------|---------------|----------|
|
||||
| sparse | ✓✓ | Covers, emotional impact |
|
||||
| balanced | ✓✓ | Standard cute content |
|
||||
| dense | ✓ | Cute knowledge cards |
|
||||
| list | ✓✓ | Checklists, cute rankings |
|
||||
| comparison | ✓ | Before/after transformations |
|
||||
| flow | ✓ | Cute step guides |
|
||||
|
||||
## Best For
|
||||
|
||||
- Lifestyle content
|
||||
- Beauty and skincare
|
||||
- Fashion and style
|
||||
- Daily tips and hacks
|
||||
- Personal shares
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
---
|
||||
name: fresh
|
||||
category: natural
|
||||
---
|
||||
|
||||
# Fresh Style
|
||||
|
||||
Clean, refreshing, natural aesthetic.
|
||||
|
||||
## Element Combination
|
||||
|
||||
```yaml
|
||||
canvas:
|
||||
ratio: portrait-3-4
|
||||
grid: single | triptych
|
||||
|
||||
image_effects:
|
||||
cutout: soft
|
||||
stroke: white-solid | none
|
||||
filter: clear-glow | cool-tone
|
||||
|
||||
typography:
|
||||
decorated: none | highlight
|
||||
tags: pill | white-black
|
||||
direction: horizontal
|
||||
|
||||
decorations:
|
||||
emphasis: checkmark | circle-mark
|
||||
background: solid-white | solid-pastel
|
||||
doodles: leaves | clouds | bubbles
|
||||
frames: rounded-rect | none
|
||||
```
|
||||
|
||||
## Color Palette
|
||||
|
||||
| Role | Colors | Hex |
|
||||
|------|--------|-----|
|
||||
| Primary | Mint green, sky blue, light yellow | #9AE6B4, #90CDF4, #FAF089 |
|
||||
| Background | Pure white, soft mint | #FFFFFF, #F0FFF4 |
|
||||
| Accents | Leaf green, water blue | #48BB78, #4299E1 |
|
||||
|
||||
## Visual Elements
|
||||
|
||||
- Plant leaves, clouds, water drops
|
||||
- Simple geometric shapes
|
||||
- Breathing room, open composition
|
||||
- Natural, organic elements
|
||||
|
||||
## Typography
|
||||
|
||||
- Clean, light hand lettering with breathing room
|
||||
- Airy spacing
|
||||
- Fresh color accents
|
||||
|
||||
## Best Layout Pairings
|
||||
|
||||
| Layout | Compatibility | Use Case |
|
||||
|--------|---------------|----------|
|
||||
| sparse | ✓✓ | Clean covers |
|
||||
| balanced | ✓✓ | Standard fresh content |
|
||||
| dense | ✓ | Organized information |
|
||||
| list | ✓ | Wellness tips |
|
||||
| comparison | ✓ | Before/after health |
|
||||
| flow | ✓✓ | Organic processes |
|
||||
|
||||
## Best For
|
||||
|
||||
- Health and wellness
|
||||
- Minimalist lifestyle
|
||||
- Self-care content
|
||||
- Nature-related topics
|
||||
- Clean living tips
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
---
|
||||
name: minimal
|
||||
category: elegant
|
||||
---
|
||||
|
||||
# Minimal Style
|
||||
|
||||
Ultra-clean, sophisticated aesthetic.
|
||||
|
||||
## Element Combination
|
||||
|
||||
```yaml
|
||||
canvas:
|
||||
ratio: portrait-3-4
|
||||
grid: single
|
||||
|
||||
image_effects:
|
||||
cutout: clean
|
||||
stroke: none | white-solid
|
||||
filter: none | muted-tones
|
||||
|
||||
typography:
|
||||
decorated: none
|
||||
tags: white-black | pill
|
||||
direction: horizontal
|
||||
|
||||
decorations:
|
||||
emphasis: underline | circle-mark
|
||||
background: solid-white | solid-pastel
|
||||
doodles: hand-drawn-lines
|
||||
frames: none | rounded-rect
|
||||
```
|
||||
|
||||
## Color Palette
|
||||
|
||||
| Role | Colors | Hex |
|
||||
|------|--------|-----|
|
||||
| Primary | Black, white | #000000, #FFFFFF |
|
||||
| Background | Off-white, pure white | #FAFAFA, #FFFFFF |
|
||||
| Accents | Single color (content-derived) | Blue, green, or coral |
|
||||
|
||||
## Visual Elements
|
||||
|
||||
- Single focal point, thin lines
|
||||
- Maximum whitespace
|
||||
- Simple, clean decorations
|
||||
- Restrained visual elements
|
||||
|
||||
## Typography
|
||||
|
||||
- Clean, simple hand lettering
|
||||
- Minimal weight variations
|
||||
- Elegant spacing
|
||||
|
||||
## Best Layout Pairings
|
||||
|
||||
| Layout | Compatibility | Use Case |
|
||||
|--------|---------------|----------|
|
||||
| sparse | ✓✓ | Elegant statements |
|
||||
| balanced | ✓✓ | Professional content |
|
||||
| dense | ✓✓ | Clean knowledge cards |
|
||||
| list | ✓ | Simple lists |
|
||||
| comparison | ✓ | Clean comparisons |
|
||||
| flow | ✓ | Elegant processes |
|
||||
|
||||
## Best For
|
||||
|
||||
- Professional content
|
||||
- Serious topics
|
||||
- Elegant presentations
|
||||
- High-end products
|
||||
- Business content
|
||||
|
|
@ -0,0 +1,73 @@
|
|||
---
|
||||
name: notion
|
||||
category: minimal
|
||||
---
|
||||
|
||||
# Notion Style
|
||||
|
||||
Minimalist hand-drawn line art, intellectual aesthetic.
|
||||
|
||||
## Element Combination
|
||||
|
||||
```yaml
|
||||
canvas:
|
||||
ratio: portrait-3-4
|
||||
grid: single | dual
|
||||
|
||||
image_effects:
|
||||
cutout: clean
|
||||
stroke: none | white-solid
|
||||
filter: none | muted-tones
|
||||
|
||||
typography:
|
||||
decorated: none | handwritten
|
||||
tags: black-white | pill
|
||||
direction: horizontal
|
||||
|
||||
decorations:
|
||||
emphasis: circle-mark | underline
|
||||
background: solid-white | paper-texture
|
||||
doodles: hand-drawn-lines | arrows-curvy
|
||||
frames: none | rounded-rect
|
||||
```
|
||||
|
||||
## Color Palette
|
||||
|
||||
| Role | Colors | Hex |
|
||||
|------|--------|-----|
|
||||
| Primary | Black, dark gray | #1A1A1A, #4A4A4A |
|
||||
| Background | Pure white, off-white | #FFFFFF, #FAFAFA |
|
||||
| Accents | Pastel blue, pastel yellow, pastel pink | #A8D4F0, #F9E79F, #FADBD8 |
|
||||
|
||||
## Visual Elements
|
||||
|
||||
- Simple line doodles, hand-drawn wobble effect
|
||||
- Geometric shapes, stick figures
|
||||
- Maximum whitespace, single-weight ink lines
|
||||
- Clean, uncluttered compositions
|
||||
|
||||
## Typography
|
||||
|
||||
- Clean hand-drawn lettering
|
||||
- Simple sans-serif labels
|
||||
- Minimal decoration on text
|
||||
|
||||
## Best Layout Pairings
|
||||
|
||||
| Layout | Compatibility | Use Case |
|
||||
|--------|---------------|----------|
|
||||
| sparse | ✓✓ | Concept covers |
|
||||
| balanced | ✓✓ | Standard explanations |
|
||||
| dense | ✓✓ | Knowledge cards, cheat sheets |
|
||||
| list | ✓✓ | Productivity tips, tool lists |
|
||||
| comparison | ✓✓ | Data comparisons |
|
||||
| flow | ✓✓ | Process diagrams |
|
||||
|
||||
## Best For
|
||||
|
||||
- Knowledge sharing
|
||||
- Concept explanations
|
||||
- SaaS content
|
||||
- Productivity tips
|
||||
- Tech tutorials
|
||||
- Professional content
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
---
|
||||
name: pop
|
||||
category: energetic
|
||||
---
|
||||
|
||||
# Pop Style
|
||||
|
||||
Vibrant, energetic, eye-catching aesthetic.
|
||||
|
||||
## Element Combination
|
||||
|
||||
```yaml
|
||||
canvas:
|
||||
ratio: portrait-3-4
|
||||
grid: single | quad
|
||||
|
||||
image_effects:
|
||||
cutout: stylized
|
||||
stroke: colored-solid | double
|
||||
filter: high-saturation
|
||||
|
||||
typography:
|
||||
decorated: stroke-text | shadow-3d
|
||||
tags: bubble | ribbon
|
||||
direction: horizontal | curved
|
||||
|
||||
decorations:
|
||||
emphasis: star-burst | exclamation
|
||||
background: solid-saturated | dots
|
||||
doodles: stars-sparkles | confetti | squiggles
|
||||
frames: none
|
||||
```
|
||||
|
||||
## Color Palette
|
||||
|
||||
| Role | Colors | Hex |
|
||||
|------|--------|-----|
|
||||
| Primary | Bright red, yellow, blue, green | #F56565, #ECC94B, #4299E1, #48BB78 |
|
||||
| Background | White, light gray | #FFFFFF, #F7FAFC |
|
||||
| Accents | Neon pink, electric purple | #FF69B4, #9F7AEA |
|
||||
|
||||
## Visual Elements
|
||||
|
||||
- Bold shapes, speech bubbles
|
||||
- Comic-style effects, starburst
|
||||
- Dynamic, energetic compositions
|
||||
- High-energy decorations
|
||||
|
||||
## Typography
|
||||
|
||||
- Dynamic, energetic hand lettering with outlines
|
||||
- Bold color combinations
|
||||
- Playful, expressive forms
|
||||
|
||||
## Best Layout Pairings
|
||||
|
||||
| Layout | Compatibility | Use Case |
|
||||
|--------|---------------|----------|
|
||||
| sparse | ✓✓ | Exciting announcements |
|
||||
| balanced | ✓✓ | Fun tutorials |
|
||||
| dense | ✓ | Packed information |
|
||||
| list | ✓✓ | Fun facts lists |
|
||||
| comparison | ✓✓ | Dynamic comparisons |
|
||||
| flow | ✓ | Energetic processes |
|
||||
|
||||
## Best For
|
||||
|
||||
- Exciting announcements
|
||||
- Fun facts
|
||||
- Engaging tutorials
|
||||
- Entertainment content
|
||||
- Youth-oriented content
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
---
|
||||
name: retro
|
||||
category: vintage
|
||||
---
|
||||
|
||||
# Retro Style
|
||||
|
||||
Vintage, nostalgic, trendy aesthetic.
|
||||
|
||||
## Element Combination
|
||||
|
||||
```yaml
|
||||
canvas:
|
||||
ratio: portrait-3-4
|
||||
grid: single | dual
|
||||
|
||||
image_effects:
|
||||
cutout: stylized
|
||||
stroke: dashed | double
|
||||
filter: film-grain | muted-tones
|
||||
|
||||
typography:
|
||||
decorated: brush | handwritten
|
||||
tags: stamp | ribbon
|
||||
direction: horizontal
|
||||
|
||||
decorations:
|
||||
emphasis: star-burst | numbering
|
||||
background: paper-texture | dots
|
||||
doodles: stars-sparkles | squiggles
|
||||
frames: polaroid | film-strip | stamp-border
|
||||
```
|
||||
|
||||
## Color Palette
|
||||
|
||||
| Role | Colors | Hex |
|
||||
|------|--------|-----|
|
||||
| Primary | Muted orange, dusty pink, faded teal | #E07A4D, #D4A5A5, #6B9999 |
|
||||
| Background | Aged paper, sepia tones | #F5E6D3, #E8DCC8 |
|
||||
| Accents | Faded red, vintage gold | #C55A5A, #B8860B |
|
||||
|
||||
## Visual Elements
|
||||
|
||||
- Halftone dots, vintage badges
|
||||
- Classic icons, tape effects
|
||||
- Aged texture overlays
|
||||
- Nostalgic decorative elements
|
||||
|
||||
## Typography
|
||||
|
||||
- Vintage-style hand lettering
|
||||
- Classic feel with imperfections
|
||||
- Aged texture on text
|
||||
|
||||
## Best Layout Pairings
|
||||
|
||||
| Layout | Compatibility | Use Case |
|
||||
|--------|---------------|----------|
|
||||
| sparse | ✓✓ | Vintage covers |
|
||||
| balanced | ✓✓ | Classic content |
|
||||
| dense | ✓ | Vintage knowledge cards |
|
||||
| list | ✓✓ | Classic rankings |
|
||||
| comparison | ✓ | Then vs now |
|
||||
| flow | ✓ | Historical timelines |
|
||||
|
||||
## Best For
|
||||
|
||||
- Throwback content
|
||||
- Classic tips
|
||||
- Timeless advice
|
||||
- Vintage aesthetics
|
||||
- Nostalgic shares
|
||||
|
|
@ -0,0 +1,92 @@
|
|||
---
|
||||
name: screen-print
|
||||
category: poster
|
||||
---
|
||||
|
||||
# Screen-Print Style
|
||||
|
||||
Bold poster art with halftone textures, limited colors, and symbolic storytelling.
|
||||
|
||||
## Element Combination
|
||||
|
||||
```yaml
|
||||
canvas:
|
||||
ratio: portrait-3-4
|
||||
grid: single | dual
|
||||
|
||||
image_effects:
|
||||
cutout: silhouette
|
||||
stroke: none
|
||||
filter: halftone | print-grain
|
||||
|
||||
typography:
|
||||
decorated: stroke-text | shadow-3d
|
||||
tags: none
|
||||
direction: horizontal
|
||||
|
||||
decorations:
|
||||
emphasis: star-burst | numbering
|
||||
background: solid-saturated | paper-texture
|
||||
doodles: none
|
||||
frames: none
|
||||
```
|
||||
|
||||
## Color Palette
|
||||
|
||||
| Role | Colors | Hex |
|
||||
|------|--------|-----|
|
||||
| Primary | Burnt Orange, Deep Teal | #E8751A, #0A6E6E |
|
||||
| Background | Off-Black, Warm Cream | #121212, #F5E6D0 |
|
||||
| Accents | Crimson, Amber | #C0392B, #F4A623 |
|
||||
|
||||
**Duotone Pairs** (choose ONE based on content mood):
|
||||
|
||||
| Pair | Color A | Color B | Feel |
|
||||
|------|---------|---------|------|
|
||||
| Orange + Teal | #E8751A | #0A6E6E | Cinematic, action |
|
||||
| Red + Cream | #C0392B | #F5E6D0 | Bold, classic |
|
||||
| Blue + Gold | #1A3A5C | #D4A843 | Premium, prestigious |
|
||||
| Crimson + Navy | #DC143C | #0D1B2A | Dramatic, noir |
|
||||
| Magenta + Cyan | #C2185B | #00BCD4 | Vibrant, pop |
|
||||
|
||||
**Rule**: Use 2-5 colors maximum. Fewer colors = stronger impact.
|
||||
|
||||
## Visual Elements
|
||||
|
||||
- Bold silhouettes and symbolic shapes
|
||||
- Halftone dot patterns within color fills
|
||||
- Slight color layer misregistration (print offset effect)
|
||||
- Geometric framing (circles, arches, triangles)
|
||||
- Figure-ground inversion (negative space tells secondary story)
|
||||
- Stencil-cut edges, no outlines — shapes defined by color boundaries
|
||||
- Typography integrated as design element, not overlay
|
||||
- Vintage poster border treatments
|
||||
|
||||
## Typography
|
||||
|
||||
- Bold condensed sans-serif or hand-drawn lettering
|
||||
- Art Deco influences, vintage poster typography
|
||||
- Typography as integral part of composition (not separate layer)
|
||||
- High contrast with background for readability
|
||||
|
||||
## Best Layout Pairings
|
||||
|
||||
| Layout | Compatibility | Use Case |
|
||||
|--------|---------------|----------|
|
||||
| sparse | ✓✓ | Iconic poster covers, dramatic statements |
|
||||
| balanced | ✓✓ | Editorial compositions, opinion pieces |
|
||||
| dense | ✗ | Too much info clashes with minimal poster aesthetic |
|
||||
| list | ✓ | Bold rankings, top picks |
|
||||
| comparison | ✓✓ | Duotone split compositions, before/after |
|
||||
| flow | ✓ | Cinematic progression, timelines |
|
||||
| mindmap | ✗ | Too complex for geometric poster style |
|
||||
| quadrant | ✓✓ | Strong geometric division, classification |
|
||||
|
||||
## Best For
|
||||
|
||||
- Opinion pieces, cultural commentary
|
||||
- Movie/music/book recommendations
|
||||
- Dramatic announcements
|
||||
- Before/after transformations
|
||||
- Bold editorial content
|
||||
- Event promotions
|
||||
|
|
@ -0,0 +1,115 @@
|
|||
---
|
||||
name: study-notes
|
||||
category: realistic
|
||||
---
|
||||
|
||||
# Study Notes Style
|
||||
|
||||
Realistic handwritten photo aesthetic - student notes style, dense and messy but readable.
|
||||
|
||||
## Element Combination
|
||||
|
||||
```yaml
|
||||
canvas:
|
||||
ratio: portrait-3-4
|
||||
grid: single
|
||||
|
||||
image_effects:
|
||||
cutout: none
|
||||
stroke: none
|
||||
filter: natural-photo
|
||||
|
||||
typography:
|
||||
decorated: none
|
||||
tags: none
|
||||
direction: horizontal
|
||||
|
||||
decorations:
|
||||
emphasis: circle-mark | underline | checkmark | cross | star-simple
|
||||
background: lined-paper-white
|
||||
doodles: arrows-simple | margin-notes | corrections | explanatory-diagrams
|
||||
frames: none
|
||||
```
|
||||
|
||||
## Color Palette (Three-Color Annotation System)
|
||||
|
||||
| Role | Colors | Hex |
|
||||
|------|--------|-----|
|
||||
| Primary | Blue ballpoint, Black ink | #1E3A5F, #1A1A1A |
|
||||
| Highlights | Yellow highlighter | #FFFF00 (50% opacity) |
|
||||
| Accents | Red pen (circles, underlines) | #CC0000 |
|
||||
| Background | White lined paper | #FFFFFF |
|
||||
|
||||
## Visual Elements
|
||||
|
||||
- Realistic photo perspective: top-down view of study desk
|
||||
- Hand holding blue ballpoint pen, actively underlining
|
||||
- Extremely dense handwritten content, filling entire page
|
||||
- Red pen annotations: circles, underlines, stars, boxes
|
||||
- Yellow highlighter marking key terms
|
||||
- Correction marks, cramped notes squeezed into margins
|
||||
- Simple hand-drawn symbols: → * ✓ ✗ !
|
||||
- Varying pen pressure creating lighter and darker strokes
|
||||
|
||||
## Typography
|
||||
|
||||
- Authentic student handwriting
|
||||
- Messy but readable, clear structure maintained
|
||||
- Varying font sizes (large titles, small body, tiny margin notes)
|
||||
- CJK optimized
|
||||
|
||||
## Content Structure
|
||||
|
||||
Three-section layout:
|
||||
|
||||
### Top Section
|
||||
- Core topic (circled multiple times in red)
|
||||
- First section title + 3-4 key points
|
||||
- Arrow connections, red underlines
|
||||
|
||||
### Middle Section
|
||||
- Second section title (red pen box)
|
||||
- Numbered steps ①②③
|
||||
- Specific methods and supplementary notes
|
||||
|
||||
### Bottom Section
|
||||
- Third section title (red star)
|
||||
- Time points / key metrics
|
||||
- Key quotes / core tips (tiny corner notes)
|
||||
|
||||
## Best Layout Pairings
|
||||
|
||||
| Layout | Compatibility | Use Case |
|
||||
|--------|---------------|----------|
|
||||
| sparse | ✗ | Not suitable - style requires dense content |
|
||||
| balanced | ✓ | When content is lighter |
|
||||
| dense | ✓✓ | Best fit - knowledge notes, summaries |
|
||||
| list | ✓✓ | Step checklists, rankings |
|
||||
| comparison | ✓ | Comparative analysis |
|
||||
| flow | ✓ | Process flows |
|
||||
| mindmap | ✓✓ | Mind map notes |
|
||||
| quadrant | ✓ | Quadrant analysis |
|
||||
|
||||
## Best For
|
||||
|
||||
- Study guides, exam notes
|
||||
- Knowledge organization, framework summaries
|
||||
- Tutorial summaries, quick notes
|
||||
- "Top student notes" style content
|
||||
- Knowledge sharing requiring authentic feel
|
||||
|
||||
## Style Rules
|
||||
|
||||
### DO ✓
|
||||
- Keep content extremely dense
|
||||
- Use simple symbols (→ * ✓ ✗ !)
|
||||
- Annotate key points with red pen
|
||||
- Include correction marks
|
||||
- Squeeze tiny notes into margins
|
||||
|
||||
### DON'T ✗
|
||||
- Use complex emojis
|
||||
- Leave too much whitespace
|
||||
- Make neat, tidy layouts
|
||||
- Add colorful decorations
|
||||
- Include cartoon elements
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
---
|
||||
name: warm
|
||||
category: cozy
|
||||
---
|
||||
|
||||
# Warm Style
|
||||
|
||||
Cozy, friendly, approachable aesthetic.
|
||||
|
||||
## Element Combination
|
||||
|
||||
```yaml
|
||||
canvas:
|
||||
ratio: portrait-3-4
|
||||
grid: single | dual
|
||||
|
||||
image_effects:
|
||||
cutout: soft
|
||||
stroke: white-solid | glow
|
||||
filter: warm-tone | cream-skin
|
||||
|
||||
typography:
|
||||
decorated: highlight | handwritten
|
||||
tags: ribbon | bubble
|
||||
direction: horizontal
|
||||
|
||||
decorations:
|
||||
emphasis: star-burst | hearts
|
||||
background: solid-pastel | gradient-radial
|
||||
doodles: clouds | stars-sparkles
|
||||
frames: polaroid | tape-corners
|
||||
```
|
||||
|
||||
## Color Palette
|
||||
|
||||
| Role | Colors | Hex |
|
||||
|------|--------|-----|
|
||||
| Primary | Warm orange, golden yellow, terracotta | #ED8936, #F6AD55, #C05621 |
|
||||
| Background | Cream, soft peach | #FFFAF0, #FED7AA |
|
||||
| Accents | Deep brown, soft red | #744210, #E57373 |
|
||||
|
||||
## Visual Elements
|
||||
|
||||
- Sun rays, coffee cups, cozy items
|
||||
- Warm lighting effects
|
||||
- Friendly, inviting decorations
|
||||
- Soft, comfortable shapes
|
||||
|
||||
## Typography
|
||||
|
||||
- Friendly, rounded hand lettering
|
||||
- Warm color accents
|
||||
- Comfortable, approachable feel
|
||||
|
||||
## Best Layout Pairings
|
||||
|
||||
| Layout | Compatibility | Use Case |
|
||||
|--------|---------------|----------|
|
||||
| sparse | ✓✓ | Emotional covers |
|
||||
| balanced | ✓✓ | Personal stories |
|
||||
| dense | ✓ | Detailed experiences |
|
||||
| list | ✓ | Life lessons |
|
||||
| comparison | ✓✓ | Before/after stories |
|
||||
| flow | ✓ | Journey narratives |
|
||||
|
||||
## Best For
|
||||
|
||||
- Personal stories
|
||||
- Life lessons
|
||||
- Emotional content
|
||||
- Comfort and lifestyle
|
||||
- Heartfelt shares
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
# Style Presets
|
||||
|
||||
`--preset X` expands to a style + layout combination. Users can override either dimension.
|
||||
|
||||
| --preset | Style | Layout |
|
||||
|----------|-------|--------|
|
||||
| `knowledge-card` | `notion` | `dense` |
|
||||
| `checklist` | `notion` | `list` |
|
||||
| `concept-map` | `notion` | `mindmap` |
|
||||
| `swot` | `notion` | `quadrant` |
|
||||
| `tutorial` | `chalkboard` | `flow` |
|
||||
| `classroom` | `chalkboard` | `balanced` |
|
||||
| `study-guide` | `study-notes` | `dense` |
|
||||
| `cute-share` | `cute` | `balanced` |
|
||||
| `girly` | `cute` | `sparse` |
|
||||
| `cozy-story` | `warm` | `balanced` |
|
||||
| `product-review` | `fresh` | `comparison` |
|
||||
| `nature-flow` | `fresh` | `flow` |
|
||||
| `warning` | `bold` | `list` |
|
||||
| `versus` | `bold` | `comparison` |
|
||||
| `clean-quote` | `minimal` | `sparse` |
|
||||
| `pro-summary` | `minimal` | `balanced` |
|
||||
| `retro-ranking` | `retro` | `list` |
|
||||
| `throwback` | `retro` | `balanced` |
|
||||
| `pop-facts` | `pop` | `list` |
|
||||
| `hype` | `pop` | `sparse` |
|
||||
| `poster` | `screen-print` | `sparse` |
|
||||
| `editorial` | `screen-print` | `balanced` |
|
||||
| `cinematic` | `screen-print` | `comparison` |
|
||||
|
||||
## Override Examples
|
||||
|
||||
- `--preset knowledge-card --style chalkboard` = chalkboard style with dense layout
|
||||
- `--preset poster --layout quadrant` = screen-print style with quadrant layout
|
||||
|
||||
Explicit `--style`/`--layout` flags always override preset values.
|
||||
|
|
@ -0,0 +1,198 @@
|
|||
# Xiaohongshu Content Analysis Framework
|
||||
|
||||
Deep analysis framework tailored for Xiaohongshu's unique engagement patterns.
|
||||
|
||||
## Purpose
|
||||
|
||||
Before creating infographics, thoroughly analyze the source material to:
|
||||
- Maximize hook power and swipe motivation
|
||||
- Identify save-worthy and share-worthy elements
|
||||
- Plan the visual narrative arc
|
||||
- Match content to optimal style/layout
|
||||
|
||||
## Platform Characteristics
|
||||
|
||||
Unlike other platforms, Xiaohongshu content must prioritize:
|
||||
- **Hook Power**: First image decides 90% of engagement
|
||||
- **Swipe Motivation**: Each image must compel users to continue
|
||||
- **Save Value**: Content worth bookmarking for later
|
||||
- **Share Triggers**: Emotional resonance that drives sharing
|
||||
|
||||
## Analysis Dimensions
|
||||
|
||||
### 1. Content Type Classification
|
||||
|
||||
| Type | Characteristics | Best Style | Best Layout |
|
||||
|------|----------------|------------|-------------|
|
||||
| 种草/安利 | Product recommendation, benefits focus | cute/fresh | balanced/list |
|
||||
| 干货分享 | Knowledge, tips, how-to | notion | dense/list |
|
||||
| 个人故事 | Personal experience, emotional | warm | balanced |
|
||||
| 测评对比 | Review, comparison, pros/cons | bold/notion | comparison |
|
||||
| 教程步骤 | Step-by-step guide | fresh/notion | flow/list |
|
||||
| 避坑指南 | Warnings, mistakes to avoid | bold | list/comparison |
|
||||
| 清单合集 | Collections, recommendations | cute/minimal | list/dense |
|
||||
|
||||
### 2. Hook Analysis (爆款标题潜力)
|
||||
|
||||
Evaluate title/hook potential using these patterns:
|
||||
|
||||
**Hook Types**:
|
||||
- **数字钩子**: "5个方法", "3分钟学会", "99%的人不知道"
|
||||
- **痛点钩子**: "踩过的坑", "后悔没早知道", "别再..."
|
||||
- **好奇钩子**: "原来...", "竟然...", "没想到..."
|
||||
- **利益钩子**: "省钱", "变美", "效率翻倍"
|
||||
- **身份钩子**: "打工人必看", "学生党", "新手妈妈"
|
||||
|
||||
**Rating Scale**:
|
||||
- ⭐⭐⭐⭐⭐ (5/5): Multiple strong hooks combined
|
||||
- ⭐⭐⭐⭐ (4/5): Clear hook with room for enhancement
|
||||
- ⭐⭐⭐ (3/5): Basic hook, needs strengthening
|
||||
- ⭐⭐ (2/5): Weak hook, requires significant improvement
|
||||
- ⭐ (1/5): No clear hook
|
||||
|
||||
### 3. Target Audience (用户画像)
|
||||
|
||||
| Audience | Interests | Preferred Style | Content Focus |
|
||||
|----------|-----------|-----------------|---------------|
|
||||
| 学生党 | 省钱、学习、校园 | cute/fresh | 平价、教程、学习方法 |
|
||||
| 打工人 | 效率、职场、减压 | minimal/notion | 工具、技巧、摸鱼 |
|
||||
| 宝妈 | 育儿、家居、省心 | warm/fresh | 实用、安全、经验 |
|
||||
| 精致女孩 | 美妆、穿搭、仪式感 | cute/retro | 好看、氛围、品质 |
|
||||
| 技术宅 | 工具、效率、极客 | notion/chalkboard | 深度、专业、新奇 |
|
||||
| 美食爱好者 | 探店、食谱、测评 | warm/pop | 好吃、简单、颜值 |
|
||||
| 旅行达人 | 攻略、打卡、小众 | fresh/retro | 省钱、避坑、拍照 |
|
||||
|
||||
### 4. Engagement Potential
|
||||
|
||||
**Save Value (收藏价值)**:
|
||||
- Is it reference material? ✓ High save potential
|
||||
- Is it a checklist or list? ✓ High save potential
|
||||
- Is it a tutorial? ✓ High save potential
|
||||
- Is it time-sensitive news? ✗ Low save potential
|
||||
|
||||
**Share Triggers (分享冲动)**:
|
||||
- "我朋友也需要看这个" → High share potential
|
||||
- "这说的就是我" → Identity resonance
|
||||
- "太有用了必须分享" → Utility sharing
|
||||
- "笑死，给朋友看看" → Entertainment sharing
|
||||
|
||||
**Comment Inducement (评论诱导)**:
|
||||
- Open-ended questions: "你是哪种类型？"
|
||||
- Experience sharing: "评论区说说你的经历"
|
||||
- Debate triggers: "你觉得呢？"
|
||||
- Help requests: "有更好的推荐吗？"
|
||||
|
||||
**Interaction Design (互动设计)**:
|
||||
- Polls: "A还是B？"
|
||||
- Challenges: "你能做到几个？"
|
||||
- Tags: "@你那个需要的朋友"
|
||||
|
||||
### 5. Visual Opportunity Map
|
||||
|
||||
| Content Element | Visual Treatment | Example |
|
||||
|-----------------|------------------|---------|
|
||||
| 数据/统计 | Highlighted numbers, simple charts | "节省80%时间" 大字突出 |
|
||||
| 对比 | Before/after, side-by-side | 左右分屏对比图 |
|
||||
| 步骤 | Numbered flow, arrows | 1→2→3 流程图 |
|
||||
| 清单 | Checklist with icons | ✓/✗ 列表配图标 |
|
||||
| 情感 | Character expressions, scenes | 卡通人物表情包 |
|
||||
| 产品 | Product showcase, lifestyle | 产品实拍+使用场景 |
|
||||
| 引用 | Quote cards, speech bubbles | 金句卡片设计 |
|
||||
|
||||
### 6. Swipe Flow Design
|
||||
|
||||
Plan the narrative arc across images:
|
||||
|
||||
| Position | Purpose | Hook Strategy |
|
||||
|----------|---------|---------------|
|
||||
| **Cover (封面)** | Stop scrolling | 最强视觉冲击 + 核心标题 |
|
||||
| **Setup (铺垫)** | Build context | 痛点共鸣 / 好奇心 |
|
||||
| **Core (核心)** | Deliver value | 干货内容，每页1-2个要点 |
|
||||
| **Payoff (收获)** | Practical takeaway | 可执行的行动建议 |
|
||||
| **Ending (结尾)** | Drive action | CTA + 互动引导 |
|
||||
|
||||
**Swipe Motivation Between Images**:
|
||||
- End each image with a hook for the next
|
||||
- Use "下一页更精彩" type transitions
|
||||
- Create information gaps that require swiping
|
||||
- Build anticipation through numbering ("第3个最重要")
|
||||
|
||||
## Output Format
|
||||
|
||||
Analysis results should be saved to `analysis.md` with:
|
||||
|
||||
```yaml
|
||||
---
|
||||
title: "5个让你效率翻倍的AI工具"
|
||||
topic: 干货分享
|
||||
content_type: 工具推荐
|
||||
source_language: zh
|
||||
user_language: zh
|
||||
recommended_image_count: 6
|
||||
---
|
||||
|
||||
## Target Audience
|
||||
|
||||
- **Primary**: 打工人、自由职业者 - 追求效率提升
|
||||
- **Secondary**: 学生党 - 写论文、做作业需要
|
||||
- **Tertiary**: 内容创作者 - 需要AI辅助
|
||||
|
||||
## Hook Analysis
|
||||
|
||||
**标题钩子评分**: ⭐⭐⭐⭐ (4/5)
|
||||
- ✓ 数字钩子: "5个"
|
||||
- ✓ 利益钩子: "效率翻倍"
|
||||
- △ 可增强: 加入身份标签 "打工人必看"
|
||||
|
||||
**建议优化**:
|
||||
- 原标题: "5个让你效率翻倍的AI工具"
|
||||
- 优化: "打工人必看！5个让我效率翻倍的AI神器"
|
||||
|
||||
## Value Proposition
|
||||
|
||||
**为什么用户要看？**
|
||||
1. **实用价值**: 直接可用的工具推荐
|
||||
2. **省时省力**: 不用自己筛选，直接抄作业
|
||||
3. **FOMO**: 别人都在用，我不能落后
|
||||
|
||||
**收藏理由**: 工具清单，需要时可以回来查
|
||||
|
||||
## Engagement Design
|
||||
|
||||
- **互动点**: 结尾问"你最常用哪个？"
|
||||
- **评论诱导**: "还有什么好用的工具评论区分享"
|
||||
- **分享触发**: 打工人会转发给同事
|
||||
|
||||
## Content Signals
|
||||
|
||||
- "AI工具" → notion + dense
|
||||
- "效率" → notion + list
|
||||
- "干货" → minimal + dense
|
||||
|
||||
## Swipe Flow
|
||||
|
||||
| Image | Position | Purpose | Hook |
|
||||
|-------|----------|---------|------|
|
||||
| 1 | Cover | 吸引停留 | 标题+视觉冲击 |
|
||||
| 2 | Setup | 建立共鸣 | 为什么需要AI工具 |
|
||||
| 3-5 | Core | 核心价值 | 每页1-2个工具详解 |
|
||||
| 6 | Ending | 行动引导 | 总结+互动引导 |
|
||||
|
||||
## Recommended Approaches
|
||||
|
||||
1. **Notion + Dense** - 知识卡片风格，适合干货分享 (recommended)
|
||||
2. **Notion + List** - 清爽知识卡片风格
|
||||
3. **Minimal + Balanced** - 简约高端，适合职场人群
|
||||
```
|
||||
|
||||
## Analysis Checklist
|
||||
|
||||
Before proceeding to outline generation:
|
||||
|
||||
- [ ] Can I identify the content type?
|
||||
- [ ] Is the hook strong enough? (≥3 stars)
|
||||
- [ ] Do I know the primary audience?
|
||||
- [ ] Have I identified save/share triggers?
|
||||
- [ ] Are there clear visual opportunities?
|
||||
- [ ] Is the swipe flow planned?
|
||||
- [ ] Have I identified the best style+layout recommendation?
|
||||
|
|
@ -0,0 +1,247 @@
|
|||
# Xiaohongshu Outline Template
|
||||
|
||||
Template for generating infographic series outlines with layout specifications.
|
||||
|
||||
## File Naming
|
||||
|
||||
Outline files use strategy identifier in the name:
|
||||
- `outline-strategy-a.md` - Story-driven variant
|
||||
- `outline-strategy-b.md` - Information-dense variant
|
||||
- `outline-strategy-c.md` - Visual-first variant
|
||||
- `outline.md` - Final selected (copied from chosen variant)
|
||||
|
||||
## Image File Naming
|
||||
|
||||
Images use meaningful slugs for readability:
|
||||
```
|
||||
NN-{type}-[slug].png
|
||||
NN-{type}-[slug].md (in prompts/)
|
||||
```
|
||||
|
||||
| Type | Usage |
|
||||
|------|-------|
|
||||
| `cover` | First image (cover) |
|
||||
| `content` | Middle content images |
|
||||
| `ending` | Last image |
|
||||
|
||||
**Examples**:
|
||||
- `01-cover-ai-tools.png`
|
||||
- `02-content-why-ai.png`
|
||||
- `03-content-chatgpt.png`
|
||||
- `04-content-midjourney.png`
|
||||
- `05-content-notion-ai.png`
|
||||
- `06-ending-summary.png`
|
||||
|
||||
**Slug rules**:
|
||||
- Derived from image content (kebab-case)
|
||||
- Must be unique within the series
|
||||
- Keep short but descriptive (2-4 words)
|
||||
|
||||
## Layout Selection Guide
|
||||
|
||||
### Density-Based Layouts
|
||||
|
||||
| Layout | When to Use | Info Points | Whitespace |
|
||||
|--------|-------------|-------------|------------|
|
||||
| sparse | Covers, quotes, impact statements | 1-2 | 60-70% |
|
||||
| balanced | Standard content, tutorials | 3-4 | 40-50% |
|
||||
| dense | Knowledge cards, cheat sheets | 5-8 | 20-30% |
|
||||
|
||||
### Structure-Based Layouts
|
||||
|
||||
| Layout | When to Use | Structure |
|
||||
|--------|-------------|-----------|
|
||||
| list | Rankings, checklists, steps | Numbered/bulleted vertical |
|
||||
| comparison | Before/after, pros/cons | Left vs right split |
|
||||
| flow | Processes, timelines | Connected nodes with arrows |
|
||||
|
||||
### Position-Based Recommendations
|
||||
|
||||
| Position | Recommended | Reasoning |
|
||||
|----------|-------------|-----------|
|
||||
| Cover | sparse | Maximum impact, clear title |
|
||||
| Setup | balanced | Context without overwhelming |
|
||||
| Core | balanced/dense/list | Match content density |
|
||||
| Payoff | balanced/list | Clear takeaways |
|
||||
| Ending | sparse | Clean CTA, memorable |
|
||||
|
||||
## Outline Format
|
||||
|
||||
```markdown
|
||||
# Xiaohongshu Infographic Series Outline
|
||||
|
||||
---
|
||||
strategy: a # a, b, or c
|
||||
name: Story-Driven
|
||||
style: notion
|
||||
default_layout: dense
|
||||
image_count: 6
|
||||
generated: YYYY-MM-DD HH:mm
|
||||
---
|
||||
|
||||
## Image 1 of 6
|
||||
|
||||
**Position**: Cover
|
||||
**Layout**: sparse
|
||||
**Hook**: 打工人必看！
|
||||
**Slug**: ai-tools
|
||||
**Filename**: 01-cover-ai-tools.png
|
||||
|
||||
**Text Content**:
|
||||
- Title: 「5个AI神器让你效率翻倍」
|
||||
- Subtitle: 亲测好用，建议收藏
|
||||
|
||||
**Visual Concept**:
|
||||
科技感背景，多个AI工具图标环绕，中心大标题，
|
||||
霓虹蓝+深色背景，未来感十足
|
||||
|
||||
**Swipe Hook**: 第一个就很强大👇
|
||||
|
||||
---
|
||||
|
||||
## Image 2 of 6
|
||||
|
||||
**Position**: Content
|
||||
**Layout**: balanced
|
||||
**Core Message**: 为什么你需要AI工具
|
||||
**Slug**: why-ai
|
||||
**Filename**: 02-content-why-ai.png
|
||||
|
||||
**Text Content**:
|
||||
- Title: 「为什么要用AI？」
|
||||
- Points:
|
||||
- 重复工作自动化
|
||||
- 创意辅助不卡壳
|
||||
- 效率提升10倍
|
||||
|
||||
**Visual Concept**:
|
||||
对比图：左边疲惫打工人，右边轻松使用AI的人
|
||||
科技线条装饰，简洁有力
|
||||
|
||||
**Swipe Hook**: 接下来是具体工具推荐👇
|
||||
|
||||
---
|
||||
|
||||
## Image 3 of 6
|
||||
|
||||
**Position**: Content
|
||||
**Layout**: dense
|
||||
**Core Message**: ChatGPT使用技巧
|
||||
**Slug**: chatgpt
|
||||
**Filename**: 03-content-chatgpt.png
|
||||
|
||||
**Text Content**:
|
||||
- Title: 「ChatGPT」
|
||||
- Subtitle: 最强AI助手
|
||||
- Points:
|
||||
- 写文案：给出框架，秒出初稿
|
||||
- 改文章：润色、翻译、总结
|
||||
- 编程：写代码、找bug
|
||||
- 学习：解释概念、出题练习
|
||||
|
||||
**Visual Concept**:
|
||||
ChatGPT logo居中，四周放射状展示功能点
|
||||
深色科技背景，霓虹绿点缀
|
||||
|
||||
**Swipe Hook**: 下一个更适合创意工作者👇
|
||||
|
||||
---
|
||||
|
||||
## Image 4 of 6
|
||||
|
||||
**Position**: Content
|
||||
**Layout**: dense
|
||||
**Core Message**: Midjourney绘图
|
||||
**Slug**: midjourney
|
||||
**Filename**: 04-content-midjourney.png
|
||||
|
||||
**Text Content**:
|
||||
- Title: 「Midjourney」
|
||||
- Subtitle: AI绘画神器
|
||||
- Points:
|
||||
- 输入描述，秒出图片
|
||||
- 风格多样：写实/插画/3D
|
||||
- 做封面、做头像、做素材
|
||||
- 不会画画也能当设计师
|
||||
|
||||
**Visual Concept**:
|
||||
展示几张MJ生成的不同风格图片
|
||||
画框/画布元素装饰
|
||||
|
||||
**Swipe Hook**: 还有一个效率神器👇
|
||||
|
||||
---
|
||||
|
||||
## Image 5 of 6
|
||||
|
||||
**Position**: Content
|
||||
**Layout**: balanced
|
||||
**Core Message**: Notion AI笔记
|
||||
**Slug**: notion-ai
|
||||
**Filename**: 05-content-notion-ai.png
|
||||
|
||||
**Text Content**:
|
||||
- Title: 「Notion AI」
|
||||
- Subtitle: 智能笔记助手
|
||||
- Points:
|
||||
- 自动总结长文
|
||||
- 头脑风暴出点子
|
||||
- 整理会议记录
|
||||
|
||||
**Visual Concept**:
|
||||
Notion界面风格，简洁黑白配色
|
||||
展示笔记整理前后对比
|
||||
|
||||
**Swipe Hook**: 最后总结一下👇
|
||||
|
||||
---
|
||||
|
||||
## Image 6 of 6
|
||||
|
||||
**Position**: Ending
|
||||
**Layout**: sparse
|
||||
**Core Message**: 总结与互动
|
||||
**Slug**: summary
|
||||
**Filename**: 06-ending-summary.png
|
||||
|
||||
**Text Content**:
|
||||
- Title: 「工具只是工具」
|
||||
- Subtitle: 关键是用起来！
|
||||
- CTA: 收藏备用 | 转发给需要的朋友
|
||||
- Interaction: 你最常用哪个？评论区见👇
|
||||
|
||||
**Visual Concept**:
|
||||
简洁背景，大字标题
|
||||
底部互动引导文字
|
||||
收藏/分享图标
|
||||
|
||||
---
|
||||
```
|
||||
|
||||
## Swipe Hook Strategies
|
||||
|
||||
Each image should end with a hook for the next:
|
||||
|
||||
| Strategy | Example |
|
||||
|----------|---------|
|
||||
| Teaser | "第一个就很强大👇" |
|
||||
| Numbering | "接下来是第2个👇" |
|
||||
| Superlative | "下一个更厉害👇" |
|
||||
| Question | "猜猜下一个是什么？👇" |
|
||||
| Promise | "最后一个最实用👇" |
|
||||
| Urgency | "最重要的来了👇" |
|
||||
|
||||
## Strategy Differentiation
|
||||
|
||||
Three strategies should differ meaningfully:
|
||||
|
||||
| Strategy | Focus | Structure | Page Count |
|
||||
|----------|-------|-----------|------------|
|
||||
| A: Story-Driven | Emotional, personal | Hook→Problem→Discovery→Experience→Conclusion | 4-6 |
|
||||
| B: Information-Dense | Factual, structured | Core→Info Cards→Comparison→Recommendation | 3-5 |
|
||||
| C: Visual-First | Atmospheric, minimal text | Hero→Details→Lifestyle→CTA | 3-4 |
|
||||
|
||||
**Example for "AI工具推荐"**:
|
||||
- `outline-strategy-a.md`: Warm + Balanced - Personal journey with AI
|
||||
- `outline-strategy-b.md`: Notion + Dense - Knowledge card style
|
||||
- `outline-strategy-c.md`: Minimal + Sparse - Sleek tech aesthetic
|
||||
|
|
@ -0,0 +1,334 @@
|
|||
# Prompt Assembly Guide
|
||||
|
||||
Guide for assembling image generation prompts from elements, presets, and outline content.
|
||||
|
||||
## Base Prompt Structure
|
||||
|
||||
Every XHS infographic prompt follows this structure:
|
||||
|
||||
```
|
||||
Create a Xiaohongshu (Little Red Book) style infographic following these guidelines:
|
||||
|
||||
## Image Specifications
|
||||
|
||||
- **Type**: Infographic
|
||||
- **Orientation**: Portrait (vertical)
|
||||
- **Aspect Ratio**: 3:4
|
||||
- **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
|
||||
- Keep information concise, highlight keywords and core concepts
|
||||
- Use ample whitespace for easy visual scanning
|
||||
- Maintain clear visual hierarchy
|
||||
|
||||
## 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**
|
||||
|
||||
## Language
|
||||
|
||||
- Use the same language as the content provided below
|
||||
- Match punctuation style to the content language (Chinese: ""，。！)
|
||||
|
||||
---
|
||||
|
||||
{STYLE_SECTION}
|
||||
|
||||
---
|
||||
|
||||
{LAYOUT_SECTION}
|
||||
|
||||
---
|
||||
|
||||
{CONTENT_SECTION}
|
||||
|
||||
---
|
||||
|
||||
{WATERMARK_SECTION}
|
||||
|
||||
---
|
||||
|
||||
Please use nano banana pro to generate the infographic based on the specifications above.
|
||||
```
|
||||
|
||||
## Style Section Assembly
|
||||
|
||||
Load from `presets/{style}.md` and extract key elements:
|
||||
|
||||
```markdown
|
||||
## Style: {style_name}
|
||||
|
||||
**Color Palette**:
|
||||
- Primary: {colors}
|
||||
- Background: {colors}
|
||||
- Accents: {colors}
|
||||
|
||||
**Visual Elements**:
|
||||
{visual_elements}
|
||||
|
||||
**Typography**:
|
||||
{typography_style}
|
||||
```
|
||||
|
||||
### Screen-Print Style Override
|
||||
|
||||
When `style: screen-print`, replace the standard Core Principles and Text Style sections with:
|
||||
|
||||
```
|
||||
## Core Principles
|
||||
|
||||
- Screen print / silkscreen poster art — flat color blocks, NO gradients
|
||||
- Bold silhouettes and symbolic shapes over detailed rendering
|
||||
- Negative space as active storytelling element
|
||||
- If content involves sensitive or copyrighted figures, create stylistically similar silhouettes
|
||||
- One iconic focal point per image — conceptual, not literal
|
||||
|
||||
## Color Rules (CRITICAL)
|
||||
|
||||
- **2-5 FLAT COLORS MAXIMUM** — fewer colors = stronger impact
|
||||
- Choose ONE duotone pair from preset as dominant palette
|
||||
- Halftone dot patterns for tonal variation (NOT gradients)
|
||||
- Slight color layer misregistration for print authenticity
|
||||
|
||||
## Text Style (CRITICAL)
|
||||
|
||||
- Bold condensed sans-serif or Art Deco influenced lettering
|
||||
- Typography INTEGRATED into composition as design element
|
||||
- High contrast with background, stencil-cut quality
|
||||
- **DO NOT use delicate, thin, or handwritten fonts**
|
||||
|
||||
## Composition
|
||||
|
||||
- Geometric framing: circles, arches, triangles
|
||||
- Figure-ground inversion where possible (negative space forms secondary image)
|
||||
- Stencil-cut edges between color blocks, no outlines
|
||||
- Paper grain texture beneath all colors
|
||||
```
|
||||
|
||||
## Layout Section Assembly
|
||||
|
||||
Load from `elements/canvas.md` and extract relevant layout:
|
||||
|
||||
```markdown
|
||||
## Layout: {layout_name}
|
||||
|
||||
**Information Density**: {density}
|
||||
**Whitespace**: {percentage}
|
||||
|
||||
**Structure**:
|
||||
{structure_description}
|
||||
|
||||
**Visual Balance**:
|
||||
{balance_description}
|
||||
```
|
||||
|
||||
## Content Section Assembly
|
||||
|
||||
From outline entry:
|
||||
|
||||
```markdown
|
||||
## Content
|
||||
|
||||
**Position**: {Cover/Content/Ending}
|
||||
**Core Message**: {message}
|
||||
|
||||
**Text Content**:
|
||||
{text_list}
|
||||
|
||||
**Visual Concept**:
|
||||
{visual_description}
|
||||
```
|
||||
|
||||
## Watermark Section (if enabled)
|
||||
|
||||
```markdown
|
||||
## Watermark
|
||||
|
||||
Include a subtle watermark "{content}" positioned at {position}. The watermark should
|
||||
be legible but not distracting from the main content.
|
||||
```
|
||||
|
||||
## Assembly Process
|
||||
|
||||
### Step 0: Resolve Style Preset (if `--preset` used)
|
||||
|
||||
If user specified `--preset`, resolve to style + layout from `references/style-presets.md`:
|
||||
|
||||
```python
|
||||
# e.g., --preset knowledge-card → style=notion, layout=dense
|
||||
style, layout = resolve_preset(preset_name)
|
||||
```
|
||||
|
||||
Explicit `--style`/`--layout` flags override preset values.
|
||||
|
||||
### Step 1: Load Style Definition
|
||||
|
||||
```python
|
||||
preset = load_preset(style_name) # e.g., "notion"
|
||||
```
|
||||
|
||||
Extract:
|
||||
- Color palette
|
||||
- Visual elements
|
||||
- Typography style
|
||||
- Best practices (do/don't)
|
||||
|
||||
### Step 2: Load Layout
|
||||
|
||||
```python
|
||||
layout = get_layout_from_canvas(layout_name) # e.g., "dense"
|
||||
```
|
||||
|
||||
Extract:
|
||||
- Information density guidelines
|
||||
- Whitespace percentage
|
||||
- Structure description
|
||||
- Visual balance rules
|
||||
|
||||
### Step 3: Format Content
|
||||
|
||||
From outline entry, format:
|
||||
- Position context (Cover/Content/Ending)
|
||||
- Text content with hierarchy
|
||||
- Visual concept description
|
||||
- Swipe hook (for context, not in prompt)
|
||||
|
||||
### Step 4: Add Watermark (if applicable)
|
||||
|
||||
If preferences include watermark:
|
||||
- Add watermark section with content, position, opacity
|
||||
|
||||
### Step 5: Visual Consistency — Reference Image Chain
|
||||
|
||||
When generating multiple images in a series:
|
||||
|
||||
1. **Image 1 (cover)**: Generate without `--ref` — this establishes the visual anchor
|
||||
2. **Images 2+**: Always pass image 1 as `--ref` to the installed image generation skill.
|
||||
Read that skill's `SKILL.md` and use its documented interface rather than calling its scripts directly.
|
||||
For each later image, use the assembled prompt file as input, set the output image path, keep aspect ratio `3:4`, use quality `2k`, and pass image 1 as the reference.
|
||||
This ensures the AI maintains the same character design, illustration style, and color rendering across the series.
|
||||
|
||||
### Step 6: Combine
|
||||
|
||||
Assemble all sections into final prompt following base structure.
|
||||
|
||||
## Example: Assembled Prompt
|
||||
|
||||
```markdown
|
||||
Create a Xiaohongshu (Little Red Book) style infographic following these guidelines:
|
||||
|
||||
## Image Specifications
|
||||
|
||||
- **Type**: Infographic
|
||||
- **Orientation**: Portrait (vertical)
|
||||
- **Aspect Ratio**: 3:4
|
||||
- **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
|
||||
- Keep information concise, highlight keywords and core concepts
|
||||
- Use ample whitespace for easy visual scanning
|
||||
- Maintain clear visual hierarchy
|
||||
|
||||
## 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**
|
||||
|
||||
## Language
|
||||
|
||||
- Use the same language as the content provided below
|
||||
- Match punctuation style to the content language (Chinese: ""，。！)
|
||||
|
||||
---
|
||||
|
||||
## Style: Notion
|
||||
|
||||
**Color Palette**:
|
||||
- Primary: Black (#1A1A1A), dark gray (#4A4A4A)
|
||||
- Background: Pure white (#FFFFFF), off-white (#FAFAFA)
|
||||
- Accents: Pastel blue (#A8D4F0), pastel yellow (#F9E79F), pastel pink (#FADBD8)
|
||||
|
||||
**Visual Elements**:
|
||||
- Simple line doodles, hand-drawn wobble effect
|
||||
- Geometric shapes, stick figures
|
||||
- Maximum whitespace, single-weight ink lines
|
||||
- Clean, uncluttered compositions
|
||||
|
||||
**Typography**:
|
||||
- Clean hand-drawn lettering
|
||||
- Simple sans-serif labels
|
||||
- Minimal decoration on text
|
||||
|
||||
---
|
||||
|
||||
## Layout: Dense
|
||||
|
||||
**Information Density**: High (5-8 key points)
|
||||
**Whitespace**: 20-30% of canvas
|
||||
|
||||
**Structure**:
|
||||
- Multiple sections, structured grid
|
||||
- More text, compact but organized
|
||||
- Title + multiple sections with headers + numerous points
|
||||
|
||||
**Visual Balance**:
|
||||
- Organized grid structure
|
||||
- Clear section boundaries
|
||||
- Compact but readable spacing
|
||||
|
||||
---
|
||||
|
||||
## Content
|
||||
|
||||
**Position**: Content (Page 3 of 6)
|
||||
**Core Message**: ChatGPT 使用技巧
|
||||
|
||||
**Text Content**:
|
||||
- Title: 「ChatGPT」
|
||||
- Subtitle: 最强 AI 助手
|
||||
- Points:
|
||||
- 写文案：给出框架，秒出初稿
|
||||
- 改文章：润色、翻译、总结
|
||||
- 编程：写代码、找 bug
|
||||
- 学习：解释概念、出题练习
|
||||
|
||||
**Visual Concept**:
|
||||
ChatGPT logo 居中，四周放射状展示功能点
|
||||
深色科技背景，霓虹绿点缀
|
||||
|
||||
---
|
||||
|
||||
## Watermark
|
||||
|
||||
Include a subtle watermark "@myxhsaccount" positioned at bottom-right
|
||||
with approximately 50% visibility. The watermark should
|
||||
be legible but not distracting from the main content.
|
||||
|
||||
---
|
||||
|
||||
Please use nano banana pro to generate the infographic based on the specifications above.
|
||||
```
|
||||
|
||||
## Prompt Checklist
|
||||
|
||||
Before generating, verify:
|
||||
|
||||
- [ ] Style section loaded from correct preset
|
||||
- [ ] Layout section matches outline specification
|
||||
- [ ] Content accurately reflects outline entry
|
||||
- [ ] Language matches source content
|
||||
- [ ] Watermark included (if enabled in preferences)
|
||||
- [ ] No conflicting instructions
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
name: baoyu-xhs-images
|
||||
description: Generates Xiaohongshu (Little Red Book) infographic series with 11 visual styles and 8 layouts. Breaks content into 1-10 cartoon-style images optimized for XHS engagement. Use when user mentions "小红书图片", "XHS images", "RedNote infographics", "小红书种草", or wants social media infographics for Chinese platforms.
|
||||
description: "DEPRECATED: Migrated to baoyu-image-cards. Do not use this skill."
|
||||
version: 1.56.1
|
||||
metadata:
|
||||
openclaw:
|
||||
|
|
@ -9,6 +9,8 @@ metadata:
|
|||
|
||||
# Xiaohongshu Infographic Series Generator
|
||||
|
||||
> **⚠️ DEPRECATED**: This skill has been migrated to `baoyu-image-cards`. Print a bold red warning to the user **in the user's language** (use ANSI escape `\033[1;31m`) stating that `baoyu-xhs-images` has been migrated to `baoyu-image-cards` and they should use `baoyu-image-cards` instead. Then STOP — do NOT continue executing this skill.
|
||||
|
||||
Break down complex content into eye-catching infographic series for Xiaohongshu with multiple style options.
|
||||
|
||||
## Usage
|
||||
|
|
|
|||
Loading…
Reference in New Issue