zhens
/
JimLiu-baoyu-skills
mirror of https://github.com/JimLiu/baoyu-skills.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

chore: release v1.17.0

This commit is contained in:
Jim Liu 宝玉 2026-01-23 12:19:26 -06:00
parent 658c5dee71
commit 7500a3b106
9 changed files with 821 additions and 208 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.claude-plugin/marketplace.json
View File

@ -6,7 +6,7 @@
}, },
"metadata": { "metadata": {
"description": "Skills shared by Baoyu for improving daily work efficiency", "description": "Skills shared by Baoyu for improving daily work efficiency",
"version": "1.16.0" "version": "1.17.0"
}, },
"plugins": [ "plugins": [
{ {

12
CHANGELOG.md
View File

@ -2,6 +2,18 @@
English | [中文](./CHANGELOG.zh.md) English | [中文](./CHANGELOG.zh.md)
## 1.17.0 - 2026-01-23
### Features
- `baoyu-cover-image`: adds user preferences support via EXTEND.md—configure watermark (content, position, opacity), preferred type/style, default aspect ratio, and custom styles. New Step 0 checks for preferences at project (`.baoyu-skills/`) or user (`~/.baoyu-skills/`) level with first-time setup flow.
### Refactor
- `baoyu-cover-image`: restructures to Type × Style two-dimension system—adds 6 types (`hero`, `conceptual`, `typography`, `metaphor`, `scene`, `minimal`) that control visual composition, while 20 styles control aesthetics. New `--type` and `--aspect` options, Type × Style compatibility matrix, and structured workflow with progress checklist.
### Documentation
- `baoyu-cover-image`: adds three reference documents—`references/config/preferences-schema.md` (EXTEND.md YAML schema), `references/config/first-time-setup.md` (setup flow), `references/config/watermark-guide.md` (watermark configuration).
- `README.md`, `README.zh.md`: updates baoyu-cover-image documentation to reflect new Type × Style system with `--type` and `--aspect` options.
## 1.16.0 - 2026-01-23 ## 1.16.0 - 2026-01-23
### Features ### Features

12
CHANGELOG.zh.md
View File

@ -2,6 +2,18 @@
[English](./CHANGELOG.md) | 中文 [English](./CHANGELOG.md) | 中文
## 1.17.0 - 2026-01-23
### 新功能
- `baoyu-cover-image`：新增用户偏好设置支持（通过 EXTEND.md 配置）——可设置水印（内容、位置、透明度）、首选类型/风格、默认宽高比和自定义风格。新增 Step 0 检查项目级（`.baoyu-skills/`）或用户级（`~/.baoyu-skills/`）偏好设置，首次使用时引导设置。
### 重构
- `baoyu-cover-image`：重构为类型 × 风格二维系统——新增 6 种类型（`hero` 主视觉、`conceptual` 概念、`typography` 文字、`metaphor` 隐喻、`scene` 场景、`minimal` 极简）控制视觉构图，20 种风格控制美学表现。新增 `--type` 和 `--aspect` 选项、类型 × 风格兼容性矩阵，以及带进度清单的结构化工作流。
### 文档
- `baoyu-cover-image`：新增三个参考文档——`references/config/preferences-schema.md`（EXTEND.md YAML 配置模式）、`references/config/first-time-setup.md`（首次设置流程）、`references/config/watermark-guide.md`（水印配置指南）。
- `README.md`、`README.zh.md`：更新 baoyu-cover-image 文档，反映新的类型 × 风格系统及 `--type` 和 `--aspect` 选项。
## 1.16.0 - 2026-01-23 ## 1.16.0 - 2026-01-23
### 新功能 ### 新功能

13
README.md
View File

@ -245,20 +245,25 @@ Generate professional infographics with 20 layout types and 17 visual styles. An
#### baoyu-cover-image #### baoyu-cover-image
Generate hand-drawn style cover images for articles with multiple style options. Generate cover images for articles with Type × Style two-dimension system.
```bash ```bash
# From markdown file (auto-select style) # Auto-select type and style based on content
/baoyu-cover-image path/to/article.md /baoyu-cover-image path/to/article.md
# Specify a style # Specify type and/or style
/baoyu-cover-image path/to/article.md --style tech /baoyu-cover-image path/to/article.md --type conceptual --style blueprint
/baoyu-cover-image path/to/article.md --style warm /baoyu-cover-image path/to/article.md --style warm
# Specify aspect ratio (default: 2.35:1)
/baoyu-cover-image path/to/article.md --aspect 16:9
# Without title text # Without title text
/baoyu-cover-image path/to/article.md --no-title /baoyu-cover-image path/to/article.md --no-title
``` ```
Available types: `hero`, `conceptual`, `typography`, `metaphor`, `scene`, `minimal`
Available styles: `elegant` (default), `blueprint`, `bold-editorial`, `chalkboard`, `dark-atmospheric`, `editorial-infographic`, `fantasy-animation`, `flat-doodle`, `intuition-machine`, `minimal`, `nature`, `notion`, `pixel-art`, `playful`, `retro`, `sketch-notes`, `vector-illustration`, `vintage`, `warm`, `watercolor` Available styles: `elegant` (default), `blueprint`, `bold-editorial`, `chalkboard`, `dark-atmospheric`, `editorial-infographic`, `fantasy-animation`, `flat-doodle`, `intuition-machine`, `minimal`, `nature`, `notion`, `pixel-art`, `playful`, `retro`, `sketch-notes`, `vector-illustration`, `vintage`, `warm`, `watercolor`
**Style Previews**: **Style Previews**:

13
README.zh.md
View File

@ -245,20 +245,25 @@ npx skills add jimliu/baoyu-skills
#### baoyu-cover-image #### baoyu-cover-image
为文章生成手绘风格封面图，支持多种风格选项。 为文章生成封面图，支持类型 × 风格二维系统。
```bash ```bash
# 从 markdown 文件生成（自动选择风格） # 根据内容自动选择类型和风格
/baoyu-cover-image path/to/article.md /baoyu-cover-image path/to/article.md
# 指定风格 # 指定类型和/或风格
/baoyu-cover-image path/to/article.md --style tech /baoyu-cover-image path/to/article.md --type conceptual --style blueprint
/baoyu-cover-image path/to/article.md --style warm /baoyu-cover-image path/to/article.md --style warm
# 指定宽高比（默认：2.35:1）
/baoyu-cover-image path/to/article.md --aspect 16:9
# 不包含标题文字 # 不包含标题文字
/baoyu-cover-image path/to/article.md --no-title /baoyu-cover-image path/to/article.md --no-title
``` ```
可用类型：`hero`、`conceptual`、`typography`、`metaphor`、`scene`、`minimal`
可用风格：`elegant`（默认）、`blueprint`、`bold-editorial`、`chalkboard`、`dark-atmospheric`、`editorial-infographic`、`fantasy-animation`、`flat-doodle`、`intuition-machine`、`minimal`、`nature`、`notion`、`pixel-art`、`playful`、`retro`、`sketch-notes`、`vector-illustration`、`vintage`、`warm`、`watercolor` 可用风格：`elegant`（默认）、`blueprint`、`bold-editorial`、`chalkboard`、`dark-atmospheric`、`editorial-infographic`、`fantasy-animation`、`flat-doodle`、`intuition-machine`、`minimal`、`nature`、`notion`、`pixel-art`、`playful`、`retro`、`sketch-notes`、`vector-illustration`、`vintage`、`warm`、`watercolor`
**风格预览**： **风格预览**：

611
skills/baoyu-cover-image/SKILL.md
View File

@ -1,35 +1,33 @@
--- ---
name: baoyu-cover-image name: baoyu-cover-image
description: Generate elegant cover images for articles. Analyzes content and creates eye-catching hand-drawn style cover images with multiple style options. Use when user asks to "generate cover image", "create article cover", or "make a cover for article". description: Generates article cover images with 20 hand-drawn styles and auto-style selection. Supports cinematic (2.35:1), widescreen (16:9), and square (1:1) aspects. Use when user asks to "generate cover image", "create article cover", "make cover", or mentions "封面图".
--- ---
# Cover Image Generator # Cover Image Generator
Generate hand-drawn style cover images for articles with multiple style options. Generate elegant cover images for articles with multiple style options.
## Usage ## Usage
```bash ```bash
# From markdown file (auto-select style based on content) # Auto-select style and aspect based on content
/baoyu-cover-image path/to/article.md /baoyu-cover-image path/to/article.md
# Specify a style # Specify style
/baoyu-cover-image path/to/article.md --style blueprint /baoyu-cover-image article.md --style blueprint
/baoyu-cover-image path/to/article.md --style warm
/baoyu-cover-image path/to/article.md --style dark-atmospheric
# Without title text # Specify aspect ratio
/baoyu-cover-image path/to/article.md --no-title /baoyu-cover-image article.md --aspect 16:9
# Combine options # Visual only (no title text)
/baoyu-cover-image path/to/article.md --style minimal --no-title /baoyu-cover-image article.md --no-title
# From direct text input # Direct content input
/baoyu-cover-image /baoyu-cover-image
[paste content or describe the topic] [paste content]
# Direct input with style # Direct input with options
/baoyu-cover-image --style playful /baoyu-cover-image --style notion --aspect 1:1
[paste content] [paste content]
``` ```
@ -37,249 +35,464 @@ Generate hand-drawn style cover images for articles with multiple style options.
| Option | Description | | Option | Description |
|--------|-------------| |--------|-------------|
| `--style <name>` | Specify cover style (see Style Gallery below) | | `--type <name>` | Cover type (see Type Gallery) |
| `--aspect <ratio>` | Aspect ratio: 2.35:1 (cinematic, default), 16:9 (widescreen), 1:1 (social) | | `--style <name>` | Cover style (see Style Gallery) |
| `--lang <code>` | Output language for title text (en, zh, ja, etc.) | | `--aspect <ratio>` | 2.35:1 (default), 16:9, 1:1 |
| `--no-title` | Generate cover without title text (visual only) | | `--lang <code>` | Title language (en, zh, ja, etc.) |
| `--no-title` | Visual only, no title text |
## Two Dimensions
| Dimension | Controls | Examples |
|-----------|----------|----------|
| **Type** | Visual composition, information structure | hero, conceptual, typography, metaphor, scene, minimal |
| **Style** | Visual aesthetics, colors, mood | elegant, blueprint, notion, warm, minimal, watercolor |
Type × Style can be freely combined. Example: `--type conceptual --style blueprint` creates technical concept visualization with schematic aesthetics.
## Type Gallery
| Type | Description | Best For |
|------|-------------|----------|
| `hero` | Large visual impact, title overlay | Product launch, brand promotion, major announcements |
| `conceptual` | Concept visualization, abstract core ideas | Technical articles, methodology, architecture design |
| `typography` | Text-focused layout, prominent title | Opinion pieces, quotes, insights |
| `metaphor` | Visual metaphor, concrete expressing abstract | Philosophy, growth, personal development |
| `scene` | Atmospheric scene, narrative feel | Stories, travel, lifestyle |
| `minimal` | Minimalist composition, generous whitespace | Zen, focus, core concepts |
## Auto Type Selection
When `--type` is omitted, select based on content signals:
| Signals | Type |
|---------|------|
| Product, launch, announcement, release, reveal | `hero` |
| Architecture, framework, system, API, technical, model | `conceptual` |
| Quote, opinion, insight, thought, headline, statement | `typography` |
| Philosophy, growth, abstract, meaning, reflection | `metaphor` |
| Story, journey, travel, lifestyle, experience, narrative | `scene` |
| Zen, focus, essential, core, simple, pure | `minimal` |
## Style Gallery ## Style Gallery
| Style | Description | | Style | Description |
|-------|-------------| |-------|-------------|
| `elegant` (Default) | Refined, sophisticated, understated | | `elegant` (default) | Refined, sophisticated |
| `flat-doodle` | Bold outlines, pastel colors, cute rounded shapes | | `blueprint` | Technical schematics |
| `blueprint` | Technical schematics, engineering precision | | `bold-editorial` | Magazine impact |
| `bold-editorial` | Magazine cover impact, dramatic typography | | `chalkboard` | Chalk on blackboard |
| `chalkboard` | Black chalkboard, colorful chalk drawings | | `dark-atmospheric` | Cinematic dark mode |
| `dark-atmospheric` | Cinematic dark mode, glowing accents | | `editorial-infographic` | Visual storytelling |
| `editorial-infographic` | Magazine explainer, visual storytelling | | `fantasy-animation` | Ghibli/Disney inspired |
| `fantasy-animation` | Ghibli/Disney inspired, whimsical charm | | `flat-doodle` | Pastel, cute shapes |
| `intuition-machine` | Technical briefing, bilingual labels | | `intuition-machine` | Technical, bilingual |
| `minimal` | Ultra-clean, zen-like, focused | | `minimal` | Ultra-clean, zen |
| `nature` | Organic, calm, earthy | | `nature` | Organic, earthy |
| `notion` | Clean SaaS dashboard, productivity styling | | `notion` | SaaS dashboard |
| `pixel-art` | Retro 8-bit, nostalgic gaming aesthetic | | `pixel-art` | Retro 8-bit |
| `playful` | Fun, creative, whimsical | | `playful` | Fun, whimsical |
| `retro` | Halftone dots, vintage badges, classic | | `retro` | Halftone, vintage |
| `sketch-notes` | Hand-drawn, educational, warm | | `sketch-notes` | Hand-drawn, warm |
| `vector-illustration` | Flat vector, black outlines, retro colors | | `vector-illustration` | Flat vector |
| `vintage` | Aged paper, historical, expedition style | | `vintage` | Aged, expedition |
| `warm` | Friendly, approachable, human-centered | | `warm` | Friendly, human |
| `watercolor` | Soft hand-painted, natural warmth | | `watercolor` | Soft hand-painted |
Detailed style definitions: `references/styles/<style>.md` Style definitions: [references/styles/](references/styles/)
## Type × Style Compatibility
| | elegant | blueprint | notion | warm | minimal | watercolor | bold-editorial | dark-atmospheric |
|---|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|
| hero | ✓✓ | ✓ | ✓ | ✓✓ | ✓ | ✓✓ | ✓✓ | ✓✓ |
| conceptual | ✓✓ | ✓✓ | ✓✓ | ✓ | ✓✓ | ✗ | ✓ | ✓ |
| typography | ✓✓ | ✓ | ✓✓ | ✓ | ✓✓ | ✓ | ✓✓ | ✓✓ |
| metaphor | ✓✓ | ✗ | ✓ | ✓✓ | ✓ | ✓✓ | ✓ | ✓ |
| scene | ✓ | ✗ | ✗ | ✓✓ | ✓ | ✓✓ | ✓ | ✓✓ |
| minimal | ✓✓ | ✓ | ✓✓ | ✓ | ✓✓ | ✓ | ✗ | ✓ |
✓✓ = highly recommended | ✓ = compatible | ✗ = not recommended
## Auto Style Selection ## Auto Style Selection
When no `--style` is specified, the system analyzes content to select the best style: When `--style` is omitted, select based on content signals:
| Content Signals | Selected Style | | Signals | Style |
|----------------|----------------| |---------|-------|
| Architecture, system design, engineering | `blueprint` | | Architecture, system design | `blueprint` |
| Product launch, keynote, marketing, brand | `bold-editorial` | | Product launch, marketing | `bold-editorial` |
| Education, classroom, tutorial, teaching | `chalkboard` | | Education, tutorial | `chalkboard` |
| Entertainment, creative, premium, cinematic | `dark-atmospheric` | | Entertainment, premium | `dark-atmospheric` |
| Technology explainer, science, research | `editorial-infographic` | | Tech explainer, research | `editorial-infographic` |
| Storytelling, children, fantasy, magical | `fantasy-animation` | | Fantasy, children | `fantasy-animation` |
| Technical docs, academic, bilingual | `intuition-machine` | | Technical docs, bilingual | `intuition-machine` |
| Personal story, emotion, growth, life | `warm` | | Personal story, emotion | `warm` |
| Simple, zen, focus, essential | `minimal` | | Zen, focus, essential | `minimal` |
| Fun, easy, beginner, casual | `playful` | | Fun, beginner, casual | `playful` |
| Nature, eco, wellness, health, organic | `nature` | | Nature, wellness, eco | `nature` |
| Pop culture, 80s/90s nostalgia, badges | `retro` | | SaaS, dashboard | `notion` |
| Product, SaaS, dashboard, productivity | `notion` | | Workflow, productivity | `flat-doodle` |
| Productivity, workflow, app, tools, cute | `flat-doodle` | | Gaming, retro tech | `pixel-art` |
| Gaming, retro tech, developer, 8-bit | `pixel-art` | | Knowledge sharing | `sketch-notes` |
| Educational, tutorial, knowledge sharing | `sketch-notes` | | Creative proposals | `vector-illustration` |
| Creative proposals, brand, toy-like | `vector-illustration` | | History, exploration | `vintage` |
| History, exploration, heritage, biography | `vintage` | | Lifestyle, travel | `watercolor` |
| Lifestyle, travel, food, personal | `watercolor` | | Business, professional | `elegant` |
| Business, professional, strategy, analysis | `elegant` |
## File Management ## File Structure
### Output Directory
Each session creates an independent directory named by content slug: Each session creates an independent directory named by content slug:
``` ```
cover-image/{topic-slug}/ cover-image/{topic-slug}/
├── source-{slug}.{ext} # Source files (text, images, etc.) ├── source-{slug}.{ext} # Source files (text, images, etc.)
├── prompts/ ├── prompts/cover.md # Generation prompt
│ └── cover.md └── cover.png # Output image
└── cover.png
``` ```
**Slug Generation**: **Slug Generation**:
1. Extract main topic from content (2-4 words, kebab-case) 1. Extract main topic from content (2-4 words, kebab-case)
2. Example: "The Future of AI" → `future-of-ai` 2. Example: "The Future of AI" → `future-of-ai`
### Conflict Resolution **Conflict Resolution**:
If `cover-image/{topic-slug}/` already exists: If `cover-image/{topic-slug}/` already exists:
- Append timestamp: `{topic-slug}-YYYYMMDD-HHMMSS` - Append timestamp: `{topic-slug}-YYYYMMDD-HHMMSS`
- Example: `ai-future` exists → `ai-future-20260118-143052` - Example: `ai-future` exists → `ai-future-20260118-143052`
### Source Files **Source Files**:
Copy all sources with naming `source-{slug}.{ext}`: Copy all sources with naming `source-{slug}.{ext}`:
- `source-article.md` (main text content) - `source-article.md`, `source-reference.png`, etc.
- `source-logo.png` (image from conversation) - Multiple sources supported: text, images, files from conversation
Multiple sources supported: text, images, files from conversation.
## Workflow ## Workflow
### Progress Checklist
Copy and track progress:
```
Cover Image Progress:
- [ ] Step 0: Check preferences (EXTEND.md) ⚠️ REQUIRED if not found
- [ ] Step 1: Analyze content
- [ ] Step 2: Confirm options (type + style + aspect) ⚠️ REQUIRED
- [ ] Step 3: Create prompt
- [ ] Step 4: Generate image
- [ ] Step 5: Completion report
```
### Flow
```
Input → [Step 0: Preferences/Setup] → Analyze → [Confirm: Type + Style + Aspect] → Prompt → Generate → Complete
```
### Step 0: Load Preferences (EXTEND.md) ⚠️
**Purpose**: Load user preferences or run first-time setup. **Do NOT skip setup if EXTEND.md not found.**
Use Bash to check EXTEND.md existence (priority order):
```bash
# Check project-level first
test -f .baoyu-skills/baoyu-cover-image/EXTEND.md && echo "project"
# Then user-level (cross-platform: $HOME works on macOS/Linux/WSL)
test -f "$HOME/.baoyu-skills/baoyu-cover-image/EXTEND.md" && echo "user"
```
┌──────────────────────────────────────────────────┬───────────────────┐
│ Path │ Location │
├──────────────────────────────────────────────────┼───────────────────┤
│ .baoyu-skills/baoyu-cover-image/EXTEND.md │ Project directory │
├──────────────────────────────────────────────────┼───────────────────┤
│ $HOME/.baoyu-skills/baoyu-cover-image/EXTEND.md │ User home │
└──────────────────────────────────────────────────┴───────────────────┘
┌───────────┬───────────────────────────────────────────────────────────────────────────┐
│ Result │ Action │
├───────────┼───────────────────────────────────────────────────────────────────────────┤
│ Found │ Read, parse, display preferences summary (see below) → Continue to Step 1 │
├───────────┼───────────────────────────────────────────────────────────────────────────┤
│ Not found │ ⚠️ MUST run first-time setup (see below) → Then continue to Step 1 │
└───────────┴───────────────────────────────────────────────────────────────────────────┘
**Preferences Summary** (when EXTEND.md found):
Display loaded preferences:
```
Preferences loaded from [project/user]:
• Watermark: [enabled/disabled] [content if enabled]
• Type: [preferred_type or "auto"]
• Style: [preferred_style or "auto"]
• Aspect: [default_aspect]
• Language: [language or "auto"]
```
**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:
**Q1: Watermark**
```yaml
header: "Watermark"
question: "Watermark text for generated cover images?"
options:
- label: "No watermark (Recommended)"
description: "Clean covers, can enable later in EXTEND.md"
```
**Q2: Preferred Type**
```yaml
header: "Type"
question: "Default cover type preference?"
options:
- label: "Auto-select (Recommended)"
description: "Choose based on content analysis each time"
- label: "hero"
description: "Large visual impact - product launch, announcements"
- label: "conceptual"
description: "Concept visualization - technical, architecture"
```
**Q3: Preferred Style**
```yaml
header: "Style"
question: "Default cover style preference?"
options:
- label: "Auto-select (Recommended)"
description: "Choose based on content analysis each time"
- label: "elegant"
description: "Refined, sophisticated - professional business"
- label: "notion"
description: "SaaS dashboard - productivity/tech content"
```
**Q4: Default Aspect Ratio**
```yaml
header: "Aspect"
question: "Default aspect ratio for cover images?"
options:
- label: "2.35:1 (Recommended)"
description: "Cinematic widescreen, best for article headers"
- label: "16:9"
description: "Standard widescreen, versatile"
- label: "1:1"
description: "Square, social media friendly"
```
**Q5: Save Location**
```yaml
header: "Save"
question: "Where to save preferences?"
options:
- label: "Project (Recommended)"
description: ".baoyu-skills/ (this project only)"
- label: "User"
description: "~/.baoyu-skills/ (all projects)"
```
**After setup**: Create EXTEND.md with user choices, then continue to Step 1.
Full setup details: `references/config/first-time-setup.md`
**EXTEND.md Supports**: Watermark | Preferred type | Preferred style | Default aspect ratio | Custom style definitions | Language preference
Schema: `references/config/preferences-schema.md`
### Step 1: Analyze Content ### Step 1: Analyze Content
Read source content, save it if needed, and perform analysis.
**Actions**:
1. **Save source content** (if not already a file): 1. **Save source content** (if not already a file):
- If user provides a file path: use as-is - If user provides a file path: use as-is
- If user pastes content: save to `source.md` in target directory - If user pastes content: save to `source.md` in target directory
2. Read source content
3. **Content analysis**:
- Extract: topic, core message, tone, keywords
- Identify visual metaphor opportunities
- Detect content type (technical/personal/business/creative)
4. **Language detection**:
- Detect source content language
- Note user's input language (from conversation)
- Compare with language preference in EXTEND.md
2. **Extract key information**: ### Step 2: Confirm Options ⚠️
- **Main topic**: What is the article about?
- **Core message**: What's the key takeaway?
- **Tone**: Serious, playful, inspiring, educational?
- **Keywords**: Identify style-signaling words
3. **Language detection**: **Purpose**: Validate type, style and aspect ratio. **Do NOT skip.**
- Detect **source language** from content
- Detect **user language** from conversation context
- Note if source_language ≠ user_language (will ask in Step 3)
### Step 2: Determine Options **Language**: Auto-determined (user's input language > saved preference > source language). No need to ask.
1. **Style selection**: Present options using AskUserQuestion:
- If `--style` specified, use that style
- Otherwise, scan content for style signals and auto-select 3 candidates
- Default to `elegant` if no clear signals
2. **Aspect ratio**: **Question 1: Type** (if not specified via `--type`)
- If `--aspect` specified, use that ratio - Show recommended type based on content analysis + preferred type from EXTEND.md
- Otherwise, prepare options: 2.35:1 (cinematic), 16:9 (widescreen), 1:1 (social)
### Step 3: Confirm Options ```yaml
header: "Type"
**Purpose**: Let user confirm all options in a single step before generation. question: "Which cover type?"
multiSelect: false
**IMPORTANT**: Present ALL options in a single confirmation step using AskUserQuestion. Do NOT interrupt workflow with multiple separate confirmations. options:
- label: "[auto-recommended type] (Recommended)"
**Determine which questions to ask**: description: "[reason based on content signals]"
- label: "hero"
| Question | When to Ask | description: "Large visual impact, title overlay - product launch, announcements"
|----------|-------------| - label: "conceptual"
| Style | Always (required) | description: "Concept visualization - technical, architecture"
| Aspect ratio | Always (offer common options) | - label: "typography"
| Language | Only if `source_language ≠ user_language` | description: "Text-focused layout - opinions, quotes"
**Present options** (use AskUserQuestion with all applicable questions):
**Question 1 (Style)** - always:
- Style A (recommended): [style name] - [brief description]
- Style B: [style name] - [brief description]
- Style C: [style name] - [brief description]
- Custom: Provide custom style reference
**Question 2 (Aspect)** - always:
- 2.35:1 Cinematic (Recommended) - ultra-wide, dramatic
- 16:9 Widescreen - standard video/presentation
- 1:1 Square - social media optimized
**Question 3 (Language)** - only if source ≠ user language:
- [Source language] (matches content)
- [User language] (your preference)
**Language handling**:
- If source language = user language: Just inform user (e.g., "Title will be in Chinese")
- If different: Ask which language to use for title text
### Step 4: Generate Cover Concept
Create a cover image concept based on selected style:
**Title** (if included, max 8 characters):
- Distill the core message into a punchy headline
- Use hooks: numbers, questions, contrasts, pain points
- Skip if `--no-title` flag is used
**Visual Elements**:
- Style-appropriate imagery and icons
- 1-2 symbolic elements representing the topic
- Metaphors or analogies that fit the style
### Step 5: Create Prompt File
Save prompt to `prompts/cover.md` with confirmed options.
**All prompts are written in the user's confirmed language preference.**
**Prompt Format**:
```markdown
Cover theme: [topic in 2-3 words]
Style: [selected style name]
Aspect ratio: [confirmed aspect ratio]
[If title included:]
Title text: [8 characters or less, in confirmed language]
Subtitle: [optional, in confirmed language]
Visual composition:
- Main visual: [description matching style]
- Layout: [positioning based on title inclusion and aspect ratio]
- Decorative elements: [style-appropriate elements]
Color scheme:
- Primary: [style primary color]
- Background: [style background color]
- Accent: [style accent color]
Style notes: [specific style characteristics to emphasize]
[If no title:]
Note: No title text, pure visual illustration only.
``` ```
### Step 6: Generate Image **Question 2: Style** (if not specified via `--style`)
- Based on selected Type, show compatible styles (✓✓ first from compatibility matrix)
- Format: `[style name] - [why it fits this content]`
```yaml
header: "Style"
question: "Which cover style?"
multiSelect: false
options:
- label: "[best compatible style] (Recommended)"
description: "[reason based on type + content]"
- label: "[style2]"
description: "[reason]"
- label: "[style3]"
description: "[reason]"
```
**Question 3: Aspect Ratio** (if not specified via `--aspect`)
```yaml
header: "Aspect"
question: "Cover aspect ratio?"
multiSelect: false
options:
- label: "2.35:1 (Recommended)"
description: "Cinematic widescreen, best for article headers"
- label: "16:9"
description: "Standard widescreen, versatile"
- label: "1:1"
description: "Square, social media friendly"
```
**After response**: Proceed to Step 3 with confirmed type + style + aspect ratio.
### Step 3: Create Prompt
Save to `prompts/cover.md`:
```markdown
Cover theme: [2-3 words]
Type: [confirmed type]
Style: [confirmed style]
Aspect ratio: [confirmed ratio]
Title text: [max 8 chars, or "none" if --no-title]
Language: [confirmed language]
Type composition:
- [Type-specific layout and structure]
Visual composition:
- Main visual: [type + style appropriate metaphor]
- Layout: [positioning based on type and aspect ratio]
- Decorative: [style elements]
Color scheme: [primary, background, accent from style]
Type notes: [key characteristics from type definition]
Style notes: [key characteristics from style definition]
[Watermark section if enabled]
```
**Type-Specific Composition**:
| Type | Composition Guidelines |
|------|------------------------|
| `hero` | Large focal visual (60-70% area), title overlay on visual, dramatic composition |
| `conceptual` | Abstract shapes representing core concepts, information hierarchy, clean zones |
| `typography` | Title as primary element (40%+ area), minimal supporting visuals, strong hierarchy |
| `metaphor` | Concrete object/scene representing abstract idea, symbolic elements, emotional resonance |
| `scene` | Atmospheric environment, narrative elements, mood-setting lighting and colors |
| `minimal` | Single focal element, generous whitespace (60%+), essential shapes only |
**Title guidelines** (if included):
- Max 8 characters, punchy headline
- Use hooks: numbers, questions, contrasts
- Match confirmed language
**Watermark Application** (if enabled in preferences):
Add to prompt:
```
Include a subtle watermark "[content]" positioned at [position]
with approximately [opacity*100]% visibility. The watermark should
be legible but not distracting from the main content.
```
Reference: `references/config/watermark-guide.md`
### Step 4: Generate Image
**Image Generation Skill Selection**: **Image Generation Skill Selection**:
1. Check available image generation skills 1. Check available image generation skills
2. If multiple skills available, ask user to choose 2. If multiple skills available, ask user preference
3. Call selected skill with:
- Prompt file path
- Output image path: `cover.png`
- Aspect ratio parameter
**Generation**: **On failure**: Auto-retry once before reporting error.
Call selected image generation skill with prompt file, output path, and confirmed aspect ratio.
### Step 7: Output Summary ### Step 5: Completion Report
``` ```
Cover Image Generated! Cover Generated!
Topic: [topic] Topic: [topic]
Type: [type name]
Style: [style name] Style: [style name]
Aspect: [aspect ratio] Aspect: [ratio]
Title: [cover title] (or "No title - visual only") Title: [title or "visual only"]
Language: [confirmed language] Language: [lang]
Location: [output path] Watermark: [enabled/disabled]
Location: [directory path]
Preview the image to verify it matches your expectations. Files:
✓ source-{slug}.{ext}
✓ prompts/cover.md
✓ cover.png
``` ```
## Image Modification
| Action | Steps |
|--------|-------|
| **Regenerate** | Update prompt → Regenerate with same settings |
| **Change type** | Confirm new type → Update prompt → Regenerate |
| **Change style** | Confirm new style → Update prompt → Regenerate |
| **Change aspect** | Confirm new aspect → Update prompt → Regenerate |
## Notes ## Notes
- Cover should be instantly understandable at small preview sizes - Cover must be readable at small preview sizes
- Title (if included) must be readable and impactful - Visual metaphors > literal representations
- Visual metaphors work better than literal representations - Title: max 8 chars, readable, impactful
- Maintain style consistency throughout the cover - **Two confirmation points**: Step 0 (first-time setup if no EXTEND.md) + Step 2 (options) - do NOT skip
- Image generation typically takes 10-30 seconds - Use confirmed language for title text
- Title text uses user's confirmed language preference - Maintain watermark consistency if enabled
- Aspect ratio: 2.35:1 for cinematic/dramatic, 16:9 for widescreen, 1:1 for social media - Check Type × Style compatibility matrix when selecting combinations
## References
**Styles**: `references/styles/<name>.md` - Style definitions
**Config**:
- `references/config/preferences-schema.md` - EXTEND.md schema
- `references/config/first-time-setup.md` - First-time setup flow
- `references/config/watermark-guide.md` - Watermark configuration
## Extension Support ## Extension Support
Custom styles and configurations via EXTEND.md. Custom configurations via EXTEND.md. See **Step 0** for paths and supported options.
**Check paths** (priority order):
1. `.baoyu-skills/baoyu-cover-image/EXTEND.md` (project)
2. `~/.baoyu-skills/baoyu-cover-image/EXTEND.md` (user)
If found, load before Step 1. Extension content overrides defaults.

145
skills/baoyu-cover-image/references/config/first-time-setup.md Normal file
View File

@ -0,0 +1,145 @@
---
name: first-time-setup
description: First-time setup flow for baoyu-cover-image preferences
---
# First-Time Setup
## Overview
When no EXTEND.md is found, guide user through preference setup.
## 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 cover 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 Type
```
header: "Type"
question: "Default cover type preference?"
options:
- label: "None (Recommended)"
description: "Auto-select based on content analysis"
- label: "hero"
description: "Large visual impact - product launch, announcements"
- label: "conceptual"
description: "Concept visualization - technical, architecture"
- label: "typography"
description: "Text-focused layout - opinions, quotes"
```
### Question 3: Preferred Style
```
header: "Style"
question: "Default cover style preference? Or type another style name"
options:
- label: "None (Recommended)"
description: "Auto-select based on content analysis"
- label: "elegant"
description: "Refined, sophisticated - professional business"
- label: "blueprint"
description: "Technical schematics - architecture/system design"
- label: "notion"
description: "SaaS dashboard - productivity/tech content"
```
### Question 4: Default Aspect Ratio
```
header: "Aspect"
question: "Default aspect ratio for cover images?"
options:
- label: "2.35:1 (Recommended)"
description: "Cinematic widescreen, best for article headers"
- label: "16:9"
description: "Standard widescreen, versatile"
- label: "1:1"
description: "Square, social media friendly"
```
### Question 5: 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-cover-image/EXTEND.md` | Current project |
| User | `~/.baoyu-skills/baoyu-cover-image/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_type: [selected type or null]
preferred_style: [selected style or null]
default_aspect: [2.35:1/16:9/1:1]
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`

140
skills/baoyu-cover-image/references/config/preferences-schema.md Normal file
View File

@ -0,0 +1,140 @@
---
name: preferences-schema
description: EXTEND.md YAML schema for baoyu-cover-image user preferences
---
# Preferences Schema
## Full Schema
```yaml
---
version: 1
watermark:
enabled: false
content: ""
position: bottom-right # bottom-right|bottom-left|bottom-center|top-right
opacity: 0.7 # 0.1-1.0
preferred_type: null # hero|conceptual|typography|metaphor|scene|minimal or null for auto-select
preferred_style: null # Built-in style name or null for auto-select
default_aspect: "2.35:1" # 2.35:1|16:9|1:1
language: null # zh|en|ja|ko|auto (null = auto-detect)
custom_styles:
- name: my-style
description: "Style description"
color_palette:
primary: ["#1E3A5F", "#4A90D9"]
background: "#F5F7FA"
accents: ["#00B4D8"]
visual_elements: "Clean lines, geometric shapes"
typography: "Modern sans-serif"
best_for: "Business, tech content"
---
```
## 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 |
| `watermark.opacity` | float | 0.7 | Transparency (0.1-1.0) |
| `preferred_type` | string | null | Type name or null for auto |
| `preferred_style` | string | null | Style name or null for auto |
| `default_aspect` | string | "2.35:1" | Default aspect ratio |
| `language` | string | null | Output language (null = auto-detect) |
| `custom_styles` | array | [] | User-defined styles |
## Type Options
| Value | Description |
|-------|-------------|
| `hero` | Large visual impact, title overlay |
| `conceptual` | Concept visualization, abstract core ideas |
| `typography` | Text-focused layout, prominent title |
| `metaphor` | Visual metaphor, concrete expressing abstract |
| `scene` | Atmospheric scene, narrative feel |
| `minimal` | Minimalist composition, generous whitespace |
## 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 |
## Aspect Ratio Options
| Value | Description | Best For |
|-------|-------------|----------|
| `2.35:1` | Cinematic widescreen | Article headers, blog covers |
| `16:9` | Standard widescreen | Presentations, video thumbnails |
| `1:1` | Square | Social media, profile images |
## 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: "@myhandle"
preferred_type: null
preferred_style: elegant
---
```
## Example: Full Preferences
```yaml
---
version: 1
watermark:
enabled: true
content: "myblog.com"
position: bottom-right
opacity: 0.5
preferred_type: conceptual
preferred_style: blueprint
default_aspect: "16:9"
language: en
custom_styles:
- name: corporate-tech
description: "Professional B2B tech style"
color_palette:
primary: ["#1E3A5F", "#4A90D9"]
background: "#F5F7FA"
accents: ["#00B4D8", "#48CAE4"]
visual_elements: "Clean lines, subtle gradients, circuit patterns"
typography: "Modern sans-serif, professional"
best_for: "SaaS, enterprise, technical"
---
```

81
skills/baoyu-cover-image/references/config/watermark-guide.md Normal file
View File

@ -0,0 +1,81 @@
---
name: watermark-guide
description: Watermark configuration guide for baoyu-cover-image
---
# Watermark Guide
## Position Diagram
```
┌─────────────────────────────┐
│ [top-right]│
│ │
│ │
│ COVER IMAGE │
│ │
│ │
│[bottom-left][bottom-center][bottom-right]│
└─────────────────────────────┘
```
## Position Recommendations
| Position | Best For | Avoid When |
|----------|----------|------------|
| `bottom-right` | Default choice, most common | Title in bottom-right |
| `bottom-left` | Right-heavy layouts | Key visual in bottom-left |
| `bottom-center` | Centered designs | Text-heavy bottom area |
| `top-right` | Bottom-heavy content | Title/header in top-right |
## Opacity Examples
| Opacity | Visual Effect | Use Case |
|---------|---------------|----------|
| 0.3 | Very subtle, barely visible | Clean aesthetic priority |
| 0.5 | Balanced, noticeable but not distracting | Default recommendation |
| 0.7 | Clearly visible | Brand recognition priority |
| 0.9 | Strong presence | Anti-copy protection |
## Content Format
| Format | Example | Style |
|--------|---------|-------|
| Handle | `@username` | Social media |
| Domain | `myblog.com` | Cross-platform |
| Brand | `MyBrand` | Simple branding |
| Chinese | `博客名` | Chinese platforms |
## Best Practices
1. **Consistency**: Use same watermark across all covers
2. **Legibility**: Ensure watermark readable on both light/dark areas
3. **Size**: Keep subtle - should not distract from content
4. **Contrast**: Adjust opacity based on cover background
## Prompt Integration
When watermark is enabled, add to image generation prompt:
```
Include a subtle watermark "[content]" positioned at [position]
with approximately [opacity*100]% visibility. The watermark should
be legible but not distracting from the main content.
```
## Cover-Specific Considerations
| Aspect Ratio | Recommended Position | Notes |
|--------------|---------------------|-------|
| 2.35:1 | bottom-right | Cinematic - keep corners clean |
| 16:9 | bottom-right | Standard - flexible placement |
| 1:1 | bottom-center | Square - centered often works better |
## Common Issues
| Issue | Solution |
|-------|----------|
| Watermark invisible | Increase opacity or adjust position |
| Watermark too prominent | Decrease opacity (0.3-0.5) |
| Watermark overlaps title | Change position or reduce title area |
| Inconsistent appearance | Use fixed opacity/position in preferences |