seahi/baoyu-skills
1
0
Fork 0
mirror of https://github.com/JimLiu/baoyu-skills.git synced 2026-07-31 06:09:47 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(baoyu-cover-image): add reference image support and visual elements library

Browse Source 
- Add --ref parameter for reference images (style/palette/direct usage)
- Add visual-elements.md with icon vocabulary by topic
- Enhance first-time setup as blocking operation
- Remove character limits from titles, use original source titles
- Update prompt template with reference handling
This commit is contained in:
Jim Liu 宝玉
2026-02-01 19:48:37 -06:00
parent 10e1c426a0
commit edf9030675
7 changed files with 541 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files
skills/baoyu-cover-image/SKILL.md
+225 -21
View File
@@ -1,6 +1,6 @@
--- ---
name: baoyu-cover-image name: baoyu-cover-image
description: Generates article cover images with 5 dimensions (type, palette, rendering, text, mood) combining 9 color palettes and 6 rendering styles. 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 "封面图". description: Generates article cover images with 5 dimensions (type, palette, rendering, text, mood) combining 9 color palettes and 6 rendering styles. Supports cinematic (2.35:1), widescreen (16:9), and square (1:1) aspects. Use when user asks to "generate cover image", "create article cover", or "make cover".
--- ---
# Cover Image Generator # Cover Image Generator
@@ -34,6 +34,10 @@ Generate elegant cover images for articles with 5-dimensional customization.
# Direct input with options # Direct input with options
/baoyu-cover-image --palette mono --rendering digital --aspect 1:1 --quick /baoyu-cover-image --palette mono --rendering digital --aspect 1:1 --quick
[paste content] [paste content]
# With reference images
/baoyu-cover-image article.md --ref style-ref.png
/baoyu-cover-image article.md --ref ref1.png ref2.png --quick
``` ```
## Options ## Options
@@ -50,6 +54,7 @@ Generate elegant cover images for articles with 5-dimensional customization.
| `--lang <code>` | Title language (en, zh, ja, etc.) | | `--lang <code>` | Title language (en, zh, ja, etc.) |
| `--no-title` | Alias for `--text none` | | `--no-title` | Alias for `--text none` |
| `--quick` | Skip confirmation, use auto-selection for missing dimensions | | `--quick` | Skip confirmation, use auto-selection for missing dimensions |
| `--ref <files...>` | Reference images for style/composition guidance |
## Five Dimensions ## Five Dimensions
@@ -110,8 +115,8 @@ Rendering definitions: [references/renderings/](references/renderings/)
| Text Level | Title | Subtitle | Tags | Use Case | | Text Level | Title | Subtitle | Tags | Use Case |
|------------|:-----:|:--------:|:----:|----------| |------------|:-----:|:--------:|:----:|----------|
| `none` | - | - | - | Pure visual, no text | | `none` | - | - | - | Pure visual, no text |
| `title-only` | ✓ (≤8 字) | - | - | Simple headline (default) | | `title-only` | ✓ | - | - | Simple headline (default) |
| `title-subtitle` | ✓ | ✓ (≤15 字) | - | Title + supporting context | | `title-subtitle` | ✓ | ✓ | - | Title + supporting context |
| `text-rich` | ✓ | ✓ | ✓ (2-4) | Information-dense | | `text-rich` | ✓ | ✓ | ✓ (2-4) | Information-dense |
| Mood | Contrast | Saturation | Weight | Use Case | | Mood | Contrast | Saturation | Weight | Use Case |
@@ -142,6 +147,12 @@ Output directory depends on `default_output_dir` preference:
``` ```
<output-dir>/ <output-dir>/
├── source-{slug}.{ext} # Source files (text, images, etc.) ├── source-{slug}.{ext} # Source files (text, images, etc.)
├── refs/ # Reference images (if provided)
│ ├── ref-01-{slug}.{ext}
│ ├── ref-01-{slug}.md # Description file (optional)
│ ├── ref-02-{slug}.{ext}
│ ├── ref-02-{slug}.md # Description file (optional)
│ └── extracted-style.md # Verbally extracted style (if no file path)
├── prompts/cover.md # Generation prompt ├── prompts/cover.md # Generation prompt
└── cover.png # Output image └── cover.png # Output image
``` ```
@@ -156,25 +167,45 @@ Output directory depends on `default_output_dir` preference:
``` ```
Cover Image Progress: Cover Image Progress:
- [ ] Step 0: Check preferences (EXTEND.md) ⚠️ REQUIRED if not found - [ ] Step 0: Check preferences (EXTEND.md) ⛔ BLOCKING
- [ ] Step 1: Analyze content + determine output directory ⚠️ MUST ask if not configured - [ ] Found → load preferences → continue
- [ ] Not found → run first-time setup → MUST complete before Step 1
- [ ] Step 1: Analyze content + determine output directory
- [ ] 1.1 Reference images ⚠️ (if provided)
- [ ] File path given → saved to refs/ ✓
- [ ] No path → asked user OR extracted verbally
- [ ] 1.2 Output directory determined
- [ ] Step 2: Confirm options (5 dimensions) ⚠️ REQUIRED unless --quick or all specified - [ ] Step 2: Confirm options (5 dimensions) ⚠️ REQUIRED unless --quick or all specified
- [ ] Step 3: Create prompt - [ ] Step 3: Create prompt
- [ ] References in prompt ONLY if files exist in refs/
- [ ] Extracted style/palette appended to prompt body (if no file)
- [ ] Step 4: Generate image - [ ] Step 4: Generate image
- [ ] 4.1 References verified before generation
- [ ] 4.2 Pass refs via --ref if skill supports AND files exist
- [ ] Step 5: Completion report - [ ] Step 5: Completion report
``` ```
### Flow ### Flow
``` ```
Input → [Step 0: Preferences/Setup] → Analyze → [Output Dir ⚠️] → [Confirm: 5 Dimensions] → Prompt → Generate → Complete Input → [Step 0: Preferences] ─┬─ Found → Continue
↓ │
(skip if --quick or all specified) └─ Not found → First-Time Setup ⛔ BLOCKING
│
└─ Complete setup → Save EXTEND.md → Continue
│
┌───────────────────────────────────────────────────────────────────────────┘
↓
Analyze + Save Refs → [Output Dir ⚠️] → [Confirm: 5 Dimensions] → Prompt → Generate → Complete
↓
(skip if --quick or all specified)
``` ```
### Step 0: Load Preferences (EXTEND.md) ⚠️ ### Step 0: Load Preferences (EXTEND.md) ⛔ BLOCKING
**Purpose**: Load user preferences or run first-time setup. **Do NOT skip setup if EXTEND.md not found.** **Purpose**: Load user preferences or run first-time setup.
**CRITICAL**: 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 reference images, do NOT ask about dimensions — ONLY complete the preferences setup first.
Use Bash to check EXTEND.md existence (priority order): Use Bash to check EXTEND.md existence (priority order):
@@ -189,7 +220,7 @@ test -f "$HOME/.baoyu-skills/baoyu-cover-image/EXTEND.md" && echo "user"
| Result | Action | | Result | Action |
|--------|--------| |--------|--------|
| Found | Read, parse, display preferences summary → Continue to Step 1 | | Found | Read, parse, display preferences summary → Continue to Step 1 |
| Not found | ⚠️ MUST run first-time setup ([references/config/first-time-setup.md](references/config/first-time-setup.md)) → Then continue to Step 1 | | Not found | ⛔ **BLOCKING**: Run first-time setup ONLY ([references/config/first-time-setup.md](references/config/first-time-setup.md)) → Complete and save EXTEND.md → Then continue to Step 1 |
**Preferences Summary** (when found): **Preferences Summary** (when found):
@@ -208,11 +239,90 @@ Schema: [references/config/preferences-schema.md](references/config/preferences-
### Step 1: Analyze Content ### Step 1: Analyze Content
1. **Save source content** (if pasted, save to `source.md` in target directory; if file path, use as-is) **1.0 Detect & Save Reference Images** ⚠️ REQUIRED if images provided
- **Backup rule**: If `source.md` exists, rename to `source-backup-YYYYMMDD-HHMMSS.md`
2. **Content analysis**: Extract topic, core message, tone, keywords; identify visual metaphors; detect content type Check if user provided reference images. Handle based on input type:
3. **Language detection**: Detect source language, note user's input language, compare with EXTEND.md preference
4. **Determine output directory** per File Structure rules. If no `default_output_dir` preference + file path input, include in Step 2 Q4 | Input Type | Action |
|------------|--------|
| Image file path provided | Copy to `refs/` subdirectory → can use `--ref` |
| Image in conversation (no path) | **ASK user for file path** with AskUserQuestion |
| User can't provide path | Extract style/palette verbally → append to prompt (NO frontmatter references) |
**CRITICAL**: Only add `references` to prompt frontmatter if files are ACTUALLY SAVED to `refs/` directory.
**If user provides file path**:
1. Copy to `refs/ref-NN-{slug}.{ext}` (NN = 01, 02, ...)
2. Create description: `refs/ref-NN-{slug}.md`
3. Verify files exist before proceeding
**If user can't provide path** (extracted verbally):
1. Analyze image visually, extract: colors, style, composition
2. Create `refs/extracted-style.md` with extracted info
3. DO NOT add `references` to prompt frontmatter
4. Instead, append extracted style/colors directly to prompt text
**Description File Format** (only when file saved):
```yaml
---
ref_id: NN
filename: ref-NN-{slug}.{ext}
usage: direct | style | palette
---
[User's description or auto-generated description]
```
| Usage | When to Use |
|-------|-------------|
| `direct` | Reference matches desired output closely |
| `style` | Extract visual style characteristics only |
| `palette` | Extract color scheme only |
**Verification** (only for saved files):
```
Reference Images Saved:
- ref-01-{slug}.png ✓ (can use --ref)
- ref-02-{slug}.png ✓ (can use --ref)
```
**Or for extracted style**:
```
Reference Style Extracted (no file):
- Colors: #E8756D coral, #7ECFC0 mint...
- Style: minimal flat vector, clean lines...
→ Will append to prompt text (not --ref)
```
---
**1.1 Save Source Content**
- If pasted, save to `source.md` in target directory; if file path, use as-is
- **Backup rule**: If `source.md` exists, rename to `source-backup-YYYYMMDD-HHMMSS.md`
**1.2 Content Analysis**
- Extract topic, core message, tone, keywords
- Identify visual metaphors
- Detect content type
**1.3 Reference Image Analysis** (if provided in Step 1.0)
For each reference image:
| Analysis | Description |
|----------|-------------|
| Visual characteristics | Style, colors, composition |
| Content/subject | What the reference depicts |
| Style match | Which type/palette/rendering align |
| Usage recommendation | `direct` / `style` / `palette` |
**1.4 Language Detection**
- Detect source language
- Note user's input language
- Compare with EXTEND.md preference
**1.5 Determine Output Directory**
- Per File Structure rules
- If no `default_output_dir` preference + file path input, include in Step 2 Q4
### Step 2: Confirm Options ⚠️ ### Step 2: Confirm Options ⚠️
@@ -231,12 +341,88 @@ Validate all 5 dimensions + aspect ratio. Full confirmation flow: [references/wo
Save to `prompts/cover.md`. Full template: [references/workflow/prompt-template.md](references/workflow/prompt-template.md) Save to `prompts/cover.md`. Full template: [references/workflow/prompt-template.md](references/workflow/prompt-template.md)
**CRITICAL - References in YAML Frontmatter**:
When reference files are saved to `refs/`, **MUST add `references` field in frontmatter**:
```yaml
---
type: cover
palette: warm
rendering: flat-vector
references:
- ref_id: 01
filename: refs/ref-01-podcast-thumbnail.jpg
usage: style
---
```
| Rule | Action |
|------|--------|
| Files saved to `refs/` | Add to frontmatter `references` list |
| Style extracted verbally (no file) | Omit `references` field, describe in body |
| Before writing | Verify: `test -f refs/ref-NN-{slug}.{ext}` |
**Reference Embedding**:
| Situation | Frontmatter | Body |
|-----------|-------------|------|
| Reference file saved to `refs/` | Add to `references` ✓ | Brief style note |
| Style extracted verbally (no file) | Omit `references` | Full style description |
| File in frontmatter but doesn't exist | ERROR - fix or remove | — |
### Step 4: Generate Image ### Step 4: Generate Image
1. Backup existing `cover.png` → `cover-backup-YYYYMMDD-HHMMSS.png` (if regenerating) **4.1 Backup existing** `cover.png` → `cover-backup-YYYYMMDD-HHMMSS.png` (if regenerating)
2. Check available image generation skills; if multiple, ask user preference
3. Call selected skill with prompt file path, output path (`cover.png`), aspect ratio **4.2 Check available image generation skills**; if multiple, ask user preference
4. On failure: auto-retry once before reporting error
**4.3 Process References** ⚠️ REQUIRED if references in frontmatter
**Read `references` from prompt frontmatter** and process each entry:
1. **Parse frontmatter** to get references list:
```yaml
references:
- ref_id: 01
filename: refs/ref-01-podcast-thumbnail.jpg
usage: style
```
2. **VERIFY each file exists**:
```bash
test -f refs/ref-NN-{slug}.{ext} && echo "exists" || echo "MISSING"
```
- If file MISSING → ERROR, fix prompt or remove from references
- If file exists → proceed with processing
3. Process based on `usage` type:
| Usage | Action | Example |
|-------|--------|---------|
| `direct` | Add reference path to `--ref` parameter | `--ref refs/ref-01-brand.png` |
| `style` | Analyze reference, append style traits to prompt | "Style: clean lines, gradient backgrounds..." |
| `palette` | Extract colors from reference, append to prompt | "Colors: #E8756D coral, #7ECFC0 mint..." |
3. Check image generation skill capability:
| Skill Supports `--ref` | Action |
|------------------------|--------|
| Yes (e.g., baoyu-image-gen with Google) | Pass reference images via `--ref` |
| No | Convert to text description, append to prompt |
**Verification**: Before generating, confirm reference processing:
```
Reference Processing:
- ref-01-brand.png: using as direct reference ✓
- ref-02-style.png: extracted palette ✓
```
**4.4 Generate**
1. Call selected skill with prompt file path, output path (`cover.png`), aspect ratio
2. If references with `direct` usage AND skill supports `--ref`: include `--ref` parameter
3. On failure: auto-retry once before reporting error
### Step 5: Completion Report ### Step 5: Completion Report
@@ -248,10 +434,14 @@ Type: [type] | Palette: [palette] | Rendering: [rendering]
Text: [text] | Mood: [mood] | Aspect: [ratio] Text: [text] | Mood: [mood] | Aspect: [ratio]
Title: [title text or "visual only"] Title: [title text or "visual only"]
Language: [lang] | Watermark: [enabled/disabled] Language: [lang] | Watermark: [enabled/disabled]
References: [N images (direct/style/palette) or "extracted style" or "none"]
Location: [directory path] Location: [directory path]
Files: Files:
✓ source-{slug}.{ext} ✓ source-{slug}.{ext}
[✓ refs/ref-01-{slug}.{ext} ... (if references saved)]
[✓ refs/ref-01-{slug}.md ... (description files)]
[✓ refs/extracted-style.md (if style extracted verbally)]
✓ prompts/cover.md ✓ prompts/cover.md
✓ cover.png ✓ cover.png
[✓ cover-backup-{timestamp}.png (if regenerated)] [✓ cover-backup-{timestamp}.png (if regenerated)]
@@ -272,7 +462,7 @@ All modifications automatically backup existing `cover.png` before regenerating.
- Cover must be readable at small preview sizes - Cover must be readable at small preview sizes
- Visual metaphors > literal representations - Visual metaphors > literal representations
- Title: max 8 chars, readable, impactful - Title: readable, impactful
- Two confirmation points: Step 0 (first-time setup) + Step 2 (options) - skip Step 2 with `--quick` - Two confirmation points: Step 0 (first-time setup) + Step 2 (options) - skip Step 2 with `--quick`
- Use confirmed language for title text - Use confirmed language for title text
- Maintain watermark consistency if enabled - Maintain watermark consistency if enabled
@@ -280,6 +470,19 @@ All modifications automatically backup existing `cover.png` before regenerating.
- `--no-title` is alias for `--text none` - `--no-title` is alias for `--text none`
- `--style` presets are backward-compatible; explicit `--palette`/`--rendering` override preset values - `--style` presets are backward-compatible; explicit `--palette`/`--rendering` override preset values
### Composition Principles
- **Generous whitespace**: 40-60% breathing room; avoid cluttered layouts
- **Visual anchor**: Main element centered or offset left (reserve right for title)
- **Character handling**: Simplified silhouettes or icon-style figures; NO realistic humans
- **Icon vocabulary**: Use simple, recognizable symbols (see [references/visual-elements.md](references/visual-elements.md))
### Title Handling
- **Source**: Use the exact title provided by user, or extract from source content
- **Do NOT invent titles**: Stay faithful to the original
- If no title in source and user doesn't provide one, ask user to specify
## References ## References
**Dimensions**: [text.md](references/dimensions/text.md) | [mood.md](references/dimensions/mood.md) **Dimensions**: [text.md](references/dimensions/text.md) | [mood.md](references/dimensions/mood.md)
@@ -289,5 +492,6 @@ All modifications automatically backup existing `cover.png` before regenerating.
**Style Presets**: [references/style-presets.md](references/style-presets.md) **Style Presets**: [references/style-presets.md](references/style-presets.md)
**Compatibility**: [references/compatibility.md](references/compatibility.md) **Compatibility**: [references/compatibility.md](references/compatibility.md)
**Types**: [references/types.md](references/types.md) **Types**: [references/types.md](references/types.md)
**Visual Elements**: [references/visual-elements.md](references/visual-elements.md)
**Workflow**: [confirm-options.md](references/workflow/confirm-options.md) | [prompt-template.md](references/workflow/prompt-template.md) **Workflow**: [confirm-options.md](references/workflow/confirm-options.md) | [prompt-template.md](references/workflow/prompt-template.md)
**Config**: [preferences-schema.md](references/config/preferences-schema.md) | [first-time-setup.md](references/config/first-time-setup.md) | [watermark-guide.md](references/config/watermark-guide.md) **Config**: [preferences-schema.md](references/config/preferences-schema.md) | [first-time-setup.md](references/config/first-time-setup.md) | [watermark-guide.md](references/config/watermark-guide.md)
skills/baoyu-cover-image/references/base-prompt.md
+44 -7
View File
@@ -39,8 +39,8 @@ Apply the specified rendering's characteristics:
### Text (Density Level) ### Text (Density Level)
- `none`: No text elements, full visual area - `none`: No text elements, full visual area
- `title-only`: Single headline (≤8 characters), 85% visual area - `title-only`: Single headline, 85% visual area
- `title-subtitle`: Title + context (≤15 chars), 75% visual area - `title-subtitle`: Title + context, 75% visual area
- `text-rich`: Title + subtitle + 2-4 keyword tags, 60% visual area - `text-rich`: Title + subtitle + 2-4 keyword tags, 60% visual area
### Mood (Emotional Intensity) ### Mood (Emotional Intensity)
@@ -50,17 +50,44 @@ Apply the specified rendering's characteristics:
## Text Style (When Title Included) ## Text Style (When Title Included)
- Title text: Large, eye-catching, max 8 characters - **Title source**: Use the exact title provided by user, or extract from source content. Do NOT invent or modify titles.
- Subtitle: Secondary, max 15 characters (if title-subtitle or text-rich) - Title text: Large, eye-catching, faithful to source
- Subtitle: Secondary element (if title-subtitle or text-rich)
- Tags: 2-4 keyword badges (if text-rich) - Tags: 2-4 keyword badges (if text-rich)
- Font style harmonizes with rendering style - Font style harmonizes with rendering style
- **Engagement hooks**: Use numbers ("3个关键"), questions ("Why?"), contrasts ("A vs B"), pain points ("别再X了"), or suspense ("隐藏的X") for compelling titles
## Composition Guidance ## Composition Guidance
**Icon Vocabulary**: Represent concepts with simple, recognizable icons rather than detailed illustrations. Use the rendering style to determine icon complexity (flat-vector = geometric, hand-drawn = sketchy, etc.) ### Layout Principles
**Character Handling**: When people are needed, use simplified silhouettes or abstract representations. NO realistic faces, detailed anatomy, or photographic representations. - **Generous whitespace**: Maintain 40-60% breathing room; avoid cluttered compositions
- **Visual anchor placement**: Main element centered or offset left (reserve right side for title if included)
- **Information hierarchy**: One dominant focal point, 1-2 supporting elements, decorative accents
- **Clean backgrounds**: Solid colors or subtle gradients; no complex textures or patterns
### Icon & Symbol Vocabulary
Represent concepts with simple, recognizable icons rather than detailed illustrations:
| Category | Examples |
|----------|----------|
| Tech | Code window, gear, circuit, cloud, lock, API brackets |
| Ideas | Lightbulb, rocket, target, puzzle, key, magnifier |
| Communication | Speech bubble, chat dots, megaphone, mail |
| Growth | Plant/sprout, tree, arrow, chart, mountain |
| Tools | Wrench, pencil, brush, checklist, clock |
Use the rendering style to determine icon complexity (flat-vector = geometric, hand-drawn = sketchy, etc.)
Full library: [references/visual-elements.md](visual-elements.md)
### Character Handling
When people are needed:
- Use simplified silhouettes or abstract stick figures
- Symbolic representations (head + shoulders outline)
- NO realistic faces, detailed anatomy, or photographic representations
- Cartoon/icon style consistent with rendering choice
## Mood Application ## Mood Application
@@ -77,6 +104,16 @@ Apply mood adjustments to the base palette:
- Use the same language as the content provided below for any text elements - Use the same language as the content provided below for any text elements
- Match punctuation style to the content language - Match punctuation style to the content language
## Reference Images
When reference images are provided:
- **Style extraction**: Identify rendering technique, line quality, texture, and visual vocabulary
- **Composition learning**: Note layout patterns, whitespace usage, element placement
- **Mood matching**: Capture the emotional tone and visual weight
- **Adaptation**: Apply extracted characteristics while respecting the specified Type, Palette, and Rendering dimensions
- **Priority**: If reference style conflicts with specified dimensions, dimensions take precedence for structural choices; reference influences decorative details
--- ---
Please generate the cover image based on the content provided below: Please generate the cover image based on the content provided below:
skills/baoyu-cover-image/references/config/first-time-setup.md
+8
View File
@@ -9,6 +9,14 @@ description: First-time setup flow for baoyu-cover-image preferences
When no EXTEND.md is found, guide user through preference setup. 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 reference images
- Ask about content/article
- Ask about dimensions (type, palette, rendering)
- Proceed to content analysis
ONLY ask the questions in this setup flow, save EXTEND.md, then continue.
## Setup Flow ## Setup Flow
``` ```
skills/baoyu-cover-image/references/config/preferences-schema.md
+2 -2
View File
@@ -103,8 +103,8 @@ custom_palettes:
| Value | Description | | Value | Description |
|-------|-------------| |-------|-------------|
| `none` | Pure visual, no text elements | | `none` | Pure visual, no text elements |
| `title-only` | Single headline (≤8 characters) | | `title-only` | Single headline |
| `title-subtitle` | Title + subtitle (≤15 characters) | | `title-subtitle` | Title + subtitle |
| `text-rich` | Title + subtitle + keyword tags (2-4) | | `text-rich` | Title + subtitle + keyword tags (2-4) |
## Mood Options ## Mood Options
skills/baoyu-cover-image/references/dimensions/text.md
+11 -21
View File
@@ -12,8 +12,8 @@ Controls text density and information hierarchy on cover images.
| Value | Title | Subtitle | Tags | Visual Area | | Value | Title | Subtitle | Tags | Visual Area |
|-------|:-----:|:--------:|:----:|:-----------:| |-------|:-----:|:--------:|:----:|:-----------:|
| `none` | - | - | - | 100% | | `none` | - | - | - | 100% |
| `title-only` | ✓ (≤8字) | - | - | 85% | | `title-only` | ✓ | - | - | 85% |
| `title-subtitle` | ✓ | ✓ (≤15字) | - | 75% | | `title-subtitle` | ✓ | ✓ | - | 75% |
| `text-rich` | ✓ | ✓ | ✓ (2-4) | 60% | | `text-rich` | ✓ | ✓ | ✓ (2-4) | 60% |
## Detail ## Detail
@@ -43,24 +43,14 @@ Single headline, maximum impact.
- Strong brand recognition - Strong brand recognition
**Composition**: **Composition**:
- Title: ≤8 characters, prominent - Title: prominent placement
- Reserved zone: top or bottom 15% - Reserved zone: top or bottom 15%
- Visual supports title message - Visual supports title message
**Title Guidelines**: **Title Guidelines**:
- Punchy, action-oriented - Use exact title from source content or user-provided title
- Do NOT invent or modify titles
- Match content language - Match content language
- Use engagement hooks (see below)
**Engagement Hooks**:
| Hook Type | Examples (EN) | Examples (ZH) |
|-----------|---------------|---------------|
| Numbers | "3 Traps", "5 Keys" | "3个陷阱", "5个关键" |
| Questions | "Why X?", "How?" | "为什么X?", "怎么做?" |
| Contrasts | "A vs B", "Old→New" | "A还是B", "旧→新" |
| Pain Points | "Stop X", "Never Do" | "别再X了", "千万别" |
| Suspense | "Hidden X", "Secret" | "隐藏的X", "秘密" |
### title-subtitle ### title-subtitle
@@ -72,14 +62,14 @@ Title with supporting context.
- Content with dual messages - Content with dual messages
**Composition**: **Composition**:
- Title: ≤8 characters, primary - Title: primary element
- Subtitle: ≤15 characters, secondary - Subtitle: secondary element
- Reserved zone: 25% - Reserved zone: 25%
- Clear hierarchy between title/subtitle - Clear hierarchy between title/subtitle
**Title Guidelines**: **Title Guidelines**:
- Use engagement hooks: numbers, questions, contrasts, pain points, suspense - Use exact title from source content or user-provided title
- Punchy, action-oriented - Do NOT invent or modify titles
**Subtitle Guidelines**: **Subtitle Guidelines**:
- Clarify or contextualize title - Clarify or contextualize title
@@ -104,8 +94,8 @@ Information-dense cover with multiple text elements.
- Clear visual hierarchy - Clear visual hierarchy
**Title Guidelines**: **Title Guidelines**:
- Use engagement hooks: numbers, questions, contrasts, pain points, suspense - Use exact title from source content or user-provided title
- Punchy, action-oriented - Do NOT invent or modify titles
**Tag Guidelines**: **Tag Guidelines**:
- 2-4 tags maximum - 2-4 tags maximum
skills/baoyu-cover-image/references/visual-elements.md
+101
View File
@@ -0,0 +1,101 @@
# Visual Elements Library
Icon and symbol vocabulary organized by topic. Use these as building blocks for cover compositions.
## Tech & Development
| Element | Use For |
|---------|---------|
| Code window / Terminal | Programming, development |
| Gear / Cog | Engineering, settings, process |
| Circuit board / Chip | Hardware, AI, computing |
| Binary / Data stream | Data, algorithms |
| API brackets `</>` | Web development, APIs |
| Cloud | Cloud computing, SaaS |
| Lock / Shield | Security, privacy |
| Network nodes | Distributed systems, connections |
## Ideas & Innovation
| Element | Use For |
|---------|---------|
| Lightbulb | Ideas, insights, innovation |
| Rocket | Launch, growth, startups |
| Target / Bullseye | Goals, precision, focus |
| Puzzle piece | Problem solving, integration |
| Key | Solutions, access, unlocking |
| Magnifying glass | Analysis, search, discovery |
| Chart / Graph | Data, trends, growth |
| Arrow / Path | Direction, journey, progress |
## Communication & Collaboration
| Element | Use For |
|---------|---------|
| Speech bubble | Communication, dialogue |
| Chat dots `...` | Conversation, messaging |
| Handshake | Partnership, agreement |
| Team / Figures | Collaboration, community |
| Mail / Envelope | Notifications, outreach |
| Megaphone | Announcements, marketing |
| Network / Web | Social, connections |
## Nature & Growth
| Element | Use For |
|---------|---------|
| Plant / Sprout | Growth, organic, sustainability |
| Tree | Established, structure, branching |
| Leaf | Eco, natural, fresh |
| Sun / Rays | Energy, positivity, new beginnings |
| Mountain | Challenge, achievement, scale |
| Wave | Flow, change, rhythm |
| Seed → Plant | Transformation, potential |
## Tools & Actions
| Element | Use For |
|---------|---------|
| Wrench / Hammer | Building, fixing, tools |
| Pencil / Pen | Writing, creation, editing |
| Brush | Design, creativity, art |
| Scissors | Cutting, editing, trimming |
| Clock / Timer | Time, scheduling, deadlines |
| Calendar | Planning, events, milestones |
| Checklist / Checkbox | Tasks, completion, validation |
## Abstract Concepts
| Element | Use For |
|---------|---------|
| Infinity ∞ | Continuous, endless, loops |
| Yin-yang | Balance, duality, harmony |
| Spiral | Evolution, recursion, cycles |
| Stack / Layers | Depth, hierarchy, structure |
| Bridge | Connection, transition, spanning |
| Door / Portal | Opportunity, entry, access |
| Mirror / Reflection | Self-improvement, analysis |
## Combination Patterns
Create visual metaphors by combining elements:
| Combination | Represents |
|-------------|------------|
| Lightbulb + Gear | Innovative engineering |
| Plant + Code | Organic tech growth |
| Rocket + Target | Precise acceleration |
| Key + Lock | Security solutions |
| Bridge + People | Team connections |
| Magnifier + Data | Analytics, insights |
## Rendering-Specific Treatment
| Rendering | Element Style |
|-----------|---------------|
| `flat-vector` | Geometric, simple shapes, uniform fills |
| `hand-drawn` | Sketchy, organic, doodle-like |
| `painterly` | Soft edges, brush strokes |
| `digital` | Precise, gradient hints, polished |
| `pixel` | 8-bit chunky, grid-aligned |
| `chalk` | Dusty, textured, board style |
skills/baoyu-cover-image/references/workflow/prompt-template.md
+150 -5
View File
@@ -3,6 +3,19 @@
Save to `prompts/cover.md`: Save to `prompts/cover.md`:
```markdown ```markdown
---
type: cover
palette: [confirmed palette]
rendering: [confirmed rendering]
references:
- ref_id: 01
filename: refs/ref-01-{slug}.{ext}
usage: direct | style | palette
- ref_id: 02
filename: refs/ref-02-{slug}.{ext}
usage: direct | style | palette
---
# Content Context # Content Context
Article title: [full original title from source] Article title: [full original title from source]
Content summary: [2-3 sentence summary of key points and themes] Content summary: [2-3 sentence summary of key points and themes]
@@ -21,9 +34,9 @@ Language: [confirmed language]
# Text Elements # Text Elements
[Based on text level:] [Based on text level:]
- none: "No text elements" - none: "No text elements"
- title-only: "Title: [max 8 chars headline]" - title-only: "Title: [exact title from source or user]"
- title-subtitle: "Title: [headline] / Subtitle: [max 15 chars context]" - title-subtitle: "Title: [title] / Subtitle: [context]"
- text-rich: "Title: [headline] / Subtitle: [context] / Tags: [2-4 keywords]" - text-rich: "Title: [title] / Subtitle: [context] / Tags: [2-4 keywords]"
# Mood Application # Mood Application
[Based on mood level:] [Based on mood level:]
@@ -46,6 +59,8 @@ Type notes: [key characteristics from type definition]
Palette notes: [key characteristics from palette definition] Palette notes: [key characteristics from palette definition]
[Watermark section if enabled] [Watermark section if enabled]
[Reference images section if provided — see below]
``` ```
## Content-Driven Design ## Content-Driven Design
@@ -54,6 +69,21 @@ Palette notes: [key characteristics from palette definition]
- Keywords guide decorative elements and symbols - Keywords guide decorative elements and symbols
- The skill controls visual style; the content drives meaning - The skill controls visual style; the content drives meaning
## Visual Element Selection
Match content themes to icon vocabulary:
| Content Theme | Suggested Elements |
|---------------|-------------------|
| Programming/Dev | Code window, terminal, API brackets, gear |
| AI/ML | Brain, neural network, robot, circuit |
| Growth/Business | Chart, rocket, plant, mountain, arrow |
| Security | Lock, shield, key, fingerprint |
| Communication | Speech bubble, megaphone, mail, handshake |
| Tools/Methods | Wrench, checklist, pencil, puzzle |
Full library: [../visual-elements.md](../visual-elements.md)
## Type-Specific Composition ## Type-Specific Composition
| Type | Composition Guidelines | | Type | Composition Guidelines |
@@ -68,8 +98,8 @@ Palette notes: [key characteristics from palette definition]
## Title Guidelines ## Title Guidelines
When text level includes title: When text level includes title:
- Max 8 characters, punchy headline - **Source**: Use the exact title provided by user, or extract from source content
- Use engagement hooks: numbers ("3个陷阱"), questions ("Why X?"), contrasts ("A vs B"), pain points ("别再X了") - **Do NOT invent titles**: Stay faithful to the original
- Match confirmed language - Match confirmed language
## Watermark Application ## Watermark Application
@@ -82,3 +112,118 @@ The watermark should be legible but not distracting from the main content.
``` ```
Reference: `config/watermark-guide.md` Reference: `config/watermark-guide.md`
## Reference Image Handling
When user provides reference images (`--ref` or pasted images):
### ⚠️ CRITICAL - Frontmatter References
**MUST add `references` field in YAML frontmatter** when reference files are saved to `refs/`:
```yaml
---
type: cover
palette: warm
rendering: flat-vector
references:
- ref_id: 01
filename: refs/ref-01-podcast-thumbnail.jpg
usage: style
---
```
| Field | Description |
|-------|-------------|
| `ref_id` | Sequential number (01, 02, ...) |
| `filename` | Relative path from prompt file's parent directory |
| `usage` | `direct` / `style` / `palette` |
**Omit `references` field entirely** if no reference files saved (style extracted verbally only).
### When to Include References in Frontmatter
| Situation | Frontmatter Action | Generation Action |
|-----------|-------------------|-------------------|
| Reference file saved to `refs/` | Add to `references` list ✓ | Pass via `--ref` parameter |
| Style extracted verbally (no file) | Omit `references` field | Describe in prompt body only |
| File path in frontmatter but doesn't exist | ERROR - fix or remove | Generation will fail |
**Before writing prompt with references, verify**: `test -f refs/ref-NN-{slug}.{ext}`
### Reference Usage Types
| Usage | When to Use | Generation Action |
|-------|-------------|-------------------|
| `direct` | Reference matches desired output closely | Pass to `--ref` parameter |
| `style` | Extract visual style characteristics only | Describe style in prompt text |
| `palette` | Extract color palette only | Include colors in prompt |
### Step 1: Analyze References
For each reference image, extract:
- **Style**: Rendering technique, line quality, texture
- **Composition**: Layout, visual hierarchy, focal points
- **Color mood**: Palette characteristics (without specific colors)
- **Elements**: Key visual elements and symbols used
### Step 2: Embed in Prompt
**If file saved AND skill supports `--ref`** (e.g., baoyu-image-gen with Google):
- Pass ref images directly via `--ref` parameter
- Add brief style note in prompt:
```
# Reference Style
Follow the visual style of the attached reference image(s):
- [1-2 sentence style summary from analysis]
```
**If file saved BUT skill does NOT support `--ref`**:
- Embed detailed text description in prompt:
```
# Reference Style (Text Description)
Emulate the following visual style from reference image(s):
Reference 1: [filename]
- Style: [detailed rendering technique description]
- Composition: [layout and hierarchy description]
- Elements: [key visual elements used]
- Mood: [emotional tone and visual weight]
[Repeat for additional references]
Apply these style characteristics to the cover design while maintaining the specified Type, Palette, and Rendering dimensions.
```
**If style/palette extracted verbally (NO file saved)**:
- DO NOT add references metadata to prompt
- Append extracted info directly to prompt body:
```
# Extracted Style (from reference)
COLORS (from reference):
- Primary: #E8756D coral
- Secondary: #7ECFC0 mint
...
STYLE (from reference):
- Clean lines, minimal shadows
- Gradient backgrounds
- Flat vector icons
...
```
### Reference Analysis Template
Use this format when analyzing reference images:
| Aspect | Analysis Points |
|--------|-----------------|
| **Rendering** | Line quality (clean/sketchy/painted), texture presence, depth treatment |
| **Composition** | Element placement, whitespace ratio, visual flow |
| **Typography** | Font style, text placement, hierarchy (if present) |
| **Elements** | Icon vocabulary, decorative motifs, character style |
| **Mood** | Contrast level, saturation, visual weight |