mirror of
https://github.com/JimLiu/baoyu-skills.git
synced 2026-08-08 09:53:02 +08:00
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
This commit is contained in:
Jim Liu 宝玉
@@ -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:
|
||||
|
||||
@@ -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
|
||||
|
||||
```
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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 |
|
||||
@@ -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 |
|
||||
|
||||
Reference in New Issue
Block a user