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

- 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
2026-02-01 19:48:37 -06:00 · 2026-02-01 19:48:37 -06:00 · edf9030675
parent 10e1c426a0
commit edf9030675
7 changed files with 541 additions and 56 deletions
--- a/skills/baoyu-cover-image/SKILL.md
+++ b/skills/baoyu-cover-image/SKILL.md
@ -1,6 +1,6 @@
 ---
 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
@ -34,6 +34,10 @@ Generate elegant cover images for articles with 5-dimensional customization.
 # Direct input with options
 /baoyu-cover-image --palette mono --rendering digital --aspect 1:1 --quick
 [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
@ -50,6 +54,7 @@ Generate elegant cover images for articles with 5-dimensional customization.
 | `--lang <code>` | Title language (en, zh, ja, etc.) |
 | `--no-title` | Alias for `--text none` |
 | `--quick` | Skip confirmation, use auto-selection for missing dimensions |
+| `--ref <files...>` | Reference images for style/composition guidance |

 ## Five Dimensions

@ -110,8 +115,8 @@ Rendering definitions: [references/renderings/](references/renderings/)
 | Text Level | Title | Subtitle | Tags | Use Case |
 |------------|:-----:|:--------:|:----:|----------|
 | `none` | - | - | - | Pure visual, no text |
-| `title-only` | ✓ (≤8 字) | - | - | Simple headline (default) |
-| `title-subtitle` | ✓ | ✓ (≤15 字) | - | Title + supporting context |
+| `title-only` | ✓ | - | - | Simple headline (default) |
+| `title-subtitle` | ✓ | ✓ | - | Title + supporting context |
 | `text-rich` | ✓ | ✓ | ✓ (2-4) | Information-dense |

 | Mood | Contrast | Saturation | Weight | Use Case |
@ -142,6 +147,12 @@ Output directory depends on `default_output_dir` preference:
 ```
 <output-dir>/
 ├── 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
 └── cover.png              # Output image
 ```
@ -156,25 +167,45 @@ Output directory depends on `default_output_dir` preference:

 ```
 Cover Image Progress:
- [ ] Step 0: Check preferences (EXTEND.md) ⚠️ REQUIRED if not found
- [ ] Step 1: Analyze content + determine output directory ⚠️ MUST ask if not configured
+- [ ] Step 0: Check preferences (EXTEND.md) ⛔ BLOCKING
+  - [ ] 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 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
+  - [ ] 4.1 References verified before generation
+  - [ ] 4.2 Pass refs via --ref if skill supports AND files exist
 - [ ] Step 5: Completion report
 ```

 ### Flow

 ```
-Input → [Step 0: Preferences/Setup] → Analyze → [Output Dir ⚠️] → [Confirm: 5 Dimensions] → Prompt → Generate → Complete
-                                                                          ↓
-                                                                  (skip if --quick or all specified)
+Input → [Step 0: Preferences] ─┬─ Found → Continue
+                               │
+                               └─ 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):

@ -189,7 +220,7 @@ test -f "$HOME/.baoyu-skills/baoyu-cover-image/EXTEND.md" && echo "user"
 | Result | Action |
 |--------|--------|
 | 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):

@ -208,11 +239,90 @@ Schema: [references/config/preferences-schema.md](references/config/preferences-

 ### Step 1: Analyze Content

-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`
-2. **Content analysis**: Extract topic, core message, tone, keywords; identify visual metaphors; detect content 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
+**1.0 Detect & Save Reference Images** ⚠️ REQUIRED if images provided
+
+Check if user provided reference images. Handle based on input type:
+
+| 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 ⚠️

@ -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)

+**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

-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. On failure: auto-retry once before reporting error
+**4.1 Backup existing** `cover.png` → `cover-backup-YYYYMMDD-HHMMSS.png` (if regenerating)
+
+**4.2 Check available image generation skills**; if multiple, ask user preference
+
+**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

@ -248,10 +434,14 @@ Type: [type] | Palette: [palette] | Rendering: [rendering]
 Text: [text] | Mood: [mood] | Aspect: [ratio]
 Title: [title text or "visual only"]
 Language: [lang] | Watermark: [enabled/disabled]
+References: [N images (direct/style/palette) or "extracted style" or "none"]
 Location: [directory path]

 Files:
 ✓ 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
 ✓ cover.png
 [✓ 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
 - 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`
 - Use confirmed language for title text
 - 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`
 - `--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

 **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)
 **Compatibility**: [references/compatibility.md](references/compatibility.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)
 **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)
--- a/skills/baoyu-cover-image/references/base-prompt.md
+++ b/skills/baoyu-cover-image/references/base-prompt.md
@ -39,8 +39,8 @@ Apply the specified rendering's characteristics:

 ### Text (Density Level)
 - `none`: No text elements, full visual area
- `title-only`: Single headline (≤8 characters), 85% visual area
- `title-subtitle`: Title + context (≤15 chars), 75% visual area
+- `title-only`: Single headline, 85% visual area
+- `title-subtitle`: Title + context, 75% visual area
 - `text-rich`: Title + subtitle + 2-4 keyword tags, 60% visual area

 ### Mood (Emotional Intensity)
@ -50,17 +50,44 @@ Apply the specified rendering's characteristics:

 ## Text Style (When Title Included)

- Title text: Large, eye-catching, max 8 characters
- Subtitle: Secondary, max 15 characters (if title-subtitle or text-rich)
+- **Title source**: Use the exact title provided by user, or extract from source content. Do NOT invent or modify titles.
+- 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)
 - 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

-**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

@ -77,6 +104,16 @@ Apply mood adjustments to the base palette:
 - Use the same language as the content provided below for any text elements
 - 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:
--- a/skills/baoyu-cover-image/references/config/first-time-setup.md
+++ b/skills/baoyu-cover-image/references/config/first-time-setup.md
@ -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.

+**⛔ 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

 ```
--- a/skills/baoyu-cover-image/references/config/preferences-schema.md
+++ b/skills/baoyu-cover-image/references/config/preferences-schema.md
@ -103,8 +103,8 @@ custom_palettes:
 | Value | Description |
 |-------|-------------|
 | `none` | Pure visual, no text elements |
-| `title-only` | Single headline (≤8 characters) |
-| `title-subtitle` | Title + subtitle (≤15 characters) |
+| `title-only` | Single headline |
+| `title-subtitle` | Title + subtitle |
 | `text-rich` | Title + subtitle + keyword tags (2-4) |

 ## Mood Options
--- a/skills/baoyu-cover-image/references/dimensions/text.md
+++ b/skills/baoyu-cover-image/references/dimensions/text.md
@ -12,8 +12,8 @@ Controls text density and information hierarchy on cover images.
 | Value | Title | Subtitle | Tags | Visual Area |
 |-------|:-----:|:--------:|:----:|:-----------:|
 | `none` | - | - | - | 100% |
-| `title-only` | ✓ (≤8字) | - | - | 85% |
-| `title-subtitle` | ✓ | ✓ (≤15字) | - | 75% |
+| `title-only` | ✓ | - | - | 85% |
+| `title-subtitle` | ✓ | ✓ | - | 75% |
 | `text-rich` | ✓ | ✓ | ✓ (2-4) | 60% |

 ## Detail
@ -43,24 +43,14 @@ Single headline, maximum impact.
 - Strong brand recognition

 **Composition**:
- Title: ≤8 characters, prominent
+- Title: prominent placement
 - Reserved zone: top or bottom 15%
 - Visual supports title message

 **Title Guidelines**:
- Punchy, action-oriented
+- Use exact title from source content or user-provided title
+- Do NOT invent or modify titles
 - 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

@ -72,14 +62,14 @@ Title with supporting context.
 - Content with dual messages

 **Composition**:
- Title: ≤8 characters, primary
- Subtitle: ≤15 characters, secondary
+- Title: primary element
+- Subtitle: secondary element
 - Reserved zone: 25%
 - Clear hierarchy between title/subtitle

 **Title Guidelines**:
- Use engagement hooks: numbers, questions, contrasts, pain points, suspense
- Punchy, action-oriented
+- Use exact title from source content or user-provided title
+- Do NOT invent or modify titles

 **Subtitle Guidelines**:
 - Clarify or contextualize title
@ -104,8 +94,8 @@ Information-dense cover with multiple text elements.
 - Clear visual hierarchy

 **Title Guidelines**:
- Use engagement hooks: numbers, questions, contrasts, pain points, suspense
- Punchy, action-oriented
+- Use exact title from source content or user-provided title
+- Do NOT invent or modify titles

 **Tag Guidelines**:
 - 2-4 tags maximum
--- a/skills/baoyu-cover-image/references/visual-elements.md
+++ b/skills/baoyu-cover-image/references/visual-elements.md
@ -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 |
--- a/skills/baoyu-cover-image/references/workflow/prompt-template.md
+++ b/skills/baoyu-cover-image/references/workflow/prompt-template.md
@ -3,6 +3,19 @@
 Save to `prompts/cover.md`:

 ```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
 Article title: [full original title from source]
 Content summary: [2-3 sentence summary of key points and themes]
@ -21,9 +34,9 @@ Language: [confirmed language]
 # Text Elements
 [Based on text level:]
 - none: "No text elements"
- title-only: "Title: [max 8 chars headline]"
- title-subtitle: "Title: [headline] / Subtitle: [max 15 chars context]"
- text-rich: "Title: [headline] / Subtitle: [context] / Tags: [2-4 keywords]"
+- title-only: "Title: [exact title from source or user]"
+- title-subtitle: "Title: [title] / Subtitle: [context]"
+- text-rich: "Title: [title] / Subtitle: [context] / Tags: [2-4 keywords]"

 # Mood Application
 [Based on mood level:]
@ -46,6 +59,8 @@ Type notes: [key characteristics from type definition]
 Palette notes: [key characteristics from palette definition]

 [Watermark section if enabled]
+
+[Reference images section if provided — see below]
 ```

 ## Content-Driven Design
@ -54,6 +69,21 @@ Palette notes: [key characteristics from palette definition]
 - Keywords guide decorative elements and symbols
 - 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 | Composition Guidelines |
@ -68,8 +98,8 @@ Palette notes: [key characteristics from palette definition]
 ## Title Guidelines

 When text level includes title:
- Max 8 characters, punchy headline
- Use engagement hooks: numbers ("3个陷阱"), questions ("Why X?"), contrasts ("A vs B"), pain points ("别再X了")
+- **Source**: Use the exact title provided by user, or extract from source content
+- **Do NOT invent titles**: Stay faithful to the original
 - Match confirmed language

 ## Watermark Application
@ -82,3 +112,118 @@ The watermark should be legible but not distracting from the main content.
 ```

 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 |